Show comment ranges on render and context expand

Feature: Issue 3910
Change-Id: I9590d03b70e845b4f5ebe2f951f080ba3c9dc8db

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

@@ -38,6 +38,8 @@
             'comment-mouse-out': '_handleCommentMouseOut',
             'comment-mouse-over': '_handleCommentMouseOver',
             'create-comment': '_createComment',
+            'render': '_handleRender',
+            'show-context': '_handleShowContext',
             'thread-discard': '_handleThreadDiscard',
           };
         },
@@ -86,6 +88,15 @@
       }
     },
 
+    _handleRender: function() {
+      this._applyAllHighlights();
+    },
+
+    _handleShowContext: function() {
+      // TODO (viktard): Re-render expanded sections only.
+      this._applyAllHighlights();
+    },
+
     _handleCommentMouseOver: function(e) {
       var comment = e.detail.comment;
       var range = comment.range;
@@ -128,6 +139,36 @@
           comment.range.start_line, comment.range.end_line, side);
     },
 
+    _createComment: function(e) {
+      this._removeActionBox();
+      var side = e.detail.side;
+      var range = e.detail.range;
+      if (!range) {
+        return;
+      }
+      var lineEl = this.diffBuilder.getLineElByChild(e.target);
+      var side = this.diffBuilder.getSideByLineEl(lineEl);
+      var contentEls = this.diffBuilder.getContentsByLineRange(
+          range.start_line, range.end_line, side);
+      contentEls.forEach(function(content) {
+        Polymer.dom(content).querySelectorAll('.' + HOVER_HIGHLIGHT).forEach(
+            function(el) {
+              el.classList.remove(HOVER_HIGHLIGHT);
+              el.classList.add(RANGE_HIGHLIGHT);
+            });
+      }, this);
+    },
+
+    _renderCommentRange: function(comment, el) {
+      var lineEl = this.diffBuilder.getLineElByChild(el);
+      if (!lineEl) {
+        return;
+      }
+      var side = this.diffBuilder.getSideByLineEl(lineEl);
+      this._rerenderByLines(
+          comment.range.start_line, comment.range.end_line, side);
+    },
+
     _createComment: function(e) {
       this._removeActionBox();
       var side = e.detail.side;
@@ -442,6 +483,25 @@
       }
     },
 
+    _applyAllHighlights: function() {
+      var rangedLeft =
+          this.comments.left.filter(function(item) { return !!item.range; });
+      var rangedRight =
+          this.comments.right.filter(function(item) { return !!item.range; });
+      rangedLeft.forEach(function(item) {
+        var range = item.range;
+        this._applyRangedHighlight(
+            RANGE_HIGHLIGHT, range.start_line, range.start_character,
+            range.end_line, range.end_character, 'left');
+      }, this);
+      rangedRight.forEach(function(item) {
+        var range = item.range;
+        this._applyRangedHighlight(
+            RANGE_HIGHLIGHT, range.start_line, range.start_character,
+            range.end_line, range.end_character, 'right');
+      }, this);
+    },
+
     _rerenderByLines: function(startLine, endLine, opt_side) {
       this.async(function() {
         this.diffBuilder.renderLineRange(startLine, endLine, opt_side);

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

@@ -440,5 +440,64 @@ limitations under the License.
         assert.strictEqual(content.firstChild, hl);
       });
     });
+
+    test('_applyAllHighlights', function() {
+      element.comments = {
+        left: [
+          {
+            range: {
+              start_line: 3,
+              start_character: 14,
+              end_line: 10,
+              end_character: 24,
+            },
+          },
+        ],
+        right: [
+          {
+            range: {
+              start_line: 320,
+              start_character: 200,
+              end_line: 1024,
+              end_character: 768,
+            },
+          },
+        ],
+      };
+      sandbox.stub(element, '_applyRangedHighlight');
+      element._applyAllHighlights();
+      sinon.assert.calledWith(element._applyRangedHighlight,
+          'range', 3, 14, 10, 24, 'left');
+      sinon.assert.calledWith(element._applyRangedHighlight,
+          'range', 320, 200, 1024, 768, 'right');
+    });
+
+    test('apply comment ranges on render', function() {
+      element.enabled = true;
+      sandbox.stub(element, '_applyAllHighlights');
+      element.fire('render');
+      assert.isTrue(element._applyAllHighlights.called);
+    });
+
+    test('apply comment ranges on context expand', function() {
+      element.enabled = true;
+      sandbox.stub(element, '_applyAllHighlights');
+      element.fire('show-context');
+      assert.isTrue(element._applyAllHighlights.called);
+    });
+
+    test('ignores render when disabled', function() {
+      element.enabled = false;
+      sandbox.stub(element, '_applyAllHighlights');
+      element.fire('render');
+      assert.isFalse(element._applyAllHighlights.called);
+    });
+
+    test('ignores context expand when disabled', function() {
+      element.enabled = false;
+      sandbox.stub(element, '_applyAllHighlights');
+      element.fire('show-context');
+      assert.isFalse(element._applyAllHighlights.called);
+    });
   });
 </script>