Polymer 2 - Fix comments highlight In the shadow DOM v1 it is impossible to set styles for nested shadow-dom elements. To fix the problem, style was added directly to gr-diff element as a style module (gr-syntax-layer does it in the same way). It is impossible to fix this problem with ::slotted, because ::slotted can't select a descendant of a top-level distributed child. Bug: Issue 11323 Change-Id: I4fcab47a40255490cd922f921502a8532dbffcf8
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html index 0364ceb..3b17190 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html +++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html
@@ -26,14 +26,6 @@ :host { position: relative; } - .contentWrapper ::content .range { - background-color: var(--diff-highlight-range-color); - display: inline; - } - .contentWrapper ::content .rangeHighlight { - background-color: var(--diff-highlight-range-hover-color); - display: inline; - } gr-selection-action-box { /** * Needs z-index to apear above wrapped content, since it's inseted
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html index 2d16a4b..0771a7f 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html +++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -24,6 +24,7 @@ <link rel="import" href="../gr-diff-highlight/gr-diff-highlight.html"> <link rel="import" href="../gr-diff-selection/gr-diff-selection.html"> <link rel="import" href="../gr-syntax-themes/gr-syntax-theme.html"> +<link rel="import" href="../gr-ranged-comment-themes/gr-ranged-comment-theme.html"> <script src="../../../scripts/hiddenscroll.js"></script> @@ -307,6 +308,7 @@ } </style> <style include="gr-syntax-theme"></style> + <style include="gr-ranged-comment-theme"></style> <div id="diffHeader" hidden$="[[_computeDiffHeaderHidden(_diffHeaderItems)]]"> <template is="dom-repeat"
diff --git a/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.js b/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.js index 3c1f45f..caaa0a1 100644 --- a/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.js +++ b/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.js
@@ -17,10 +17,11 @@ (function() { 'use strict'; - const HOVER_PATH_PATTERN = /^commentRanges\.\#(\d+)\.hovering$/; + // Polymer 1 adds # before array's key, while Polymer 2 doesn't + const HOVER_PATH_PATTERN = /^commentRanges\.\#?(\d+)\.hovering$/; - const RANGE_HIGHLIGHT = 'range'; - const HOVER_HIGHLIGHT = 'rangeHighlight'; + const RANGE_HIGHLIGHT = 'style-scope gr-diff range'; + const HOVER_HIGHLIGHT = 'style-scope gr-diff rangeHighlight'; /** @typedef {{side: string, range: Gerrit.Range, hovering: boolean}} */ Gerrit.HoveredRange; @@ -55,6 +56,10 @@ '_handleCommentRangesChange(commentRanges.*)', ], + get styleModuleName() { + return 'gr-ranged-comment-styles'; + }, + /** * Layer method to add annotations to a line. * @param {!HTMLElement} el The DIV.contentText element to apply the
diff --git a/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.html b/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.html index b057d69..6318a41 100644 --- a/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.html +++ b/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.html
@@ -132,7 +132,7 @@ assert.equal(lastCall.args[0], el); assert.equal(lastCall.args[1], expectedStart); assert.equal(lastCall.args[2], expectedLength); - assert.equal(lastCall.args[3], 'range'); + assert.equal(lastCall.args[3], 'style-scope gr-diff range'); }); test('type=Remove has-comment hovering', () => { @@ -150,7 +150,7 @@ assert.equal(lastCall.args[0], el); assert.equal(lastCall.args[1], expectedStart); assert.equal(lastCall.args[2], expectedLength); - assert.equal(lastCall.args[3], 'rangeHighlight'); + assert.equal(lastCall.args[3], 'style-scope gr-diff rangeHighlight'); }); test('type=Both has-comment', () => { @@ -167,7 +167,7 @@ assert.equal(lastCall.args[0], el); assert.equal(lastCall.args[1], expectedStart); assert.equal(lastCall.args[2], expectedLength); - assert.equal(lastCall.args[3], 'range'); + assert.equal(lastCall.args[3], 'style-scope gr-diff range'); }); test('type=Both has-comment off side', () => { @@ -195,7 +195,7 @@ assert.equal(lastCall.args[0], el); assert.equal(lastCall.args[1], expectedStart); assert.equal(lastCall.args[2], expectedLength); - assert.equal(lastCall.args[3], 'range'); + assert.equal(lastCall.args[3], 'style-scope gr-diff range'); }); });
diff --git a/polygerrit-ui/app/elements/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.html b/polygerrit-ui/app/elements/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.html new file mode 100644 index 0000000..cefd241 --- /dev/null +++ b/polygerrit-ui/app/elements/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.html
@@ -0,0 +1,30 @@ +<!-- +@license +Copyright (C) 2019 The Android Open Source Project + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +--> +<dom-module id="gr-ranged-comment-theme"> + <template> + <style> + .range { + background-color: var(--diff-highlight-range-color); + display: inline; + } + .rangeHighlight { + background-color: var(--diff-highlight-range-hover-color); + display: inline; + } + </style> + </template> +</dom-module>