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

polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight.html

@@ -26,14 +26,6 @@ limitations under the License.
       :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

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -24,6 +24,7 @@ limitations under the License.
 <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 @@ limitations under the License.
       }
     </style>
     <style include="gr-syntax-theme"></style>
+    <style include="gr-ranged-comment-theme"></style>
     <div id="diffHeader" hidden$="[[_computeDiffHeaderHidden(_diffHeaderItems)]]">
       <template
           is="dom-repeat"

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

polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.html

@@ -132,7 +132,7 @@ limitations under the License.
         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 @@ limitations under the License.
         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 @@ limitations under the License.
         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 @@ limitations under the License.
         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');
       });
     });
 

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>