ES6ify /gr-ranged-comment-layer/*

Bug: Issue 6179
Change-Id: I4a681e2bb6e0863e8ddba6c89709b3835d4a19c9

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

@@ -14,13 +14,13 @@
 (function() {
   'use strict';
 
-  var HOVER_PATH_PATTERN = /^comments\.(left|right)\.\#(\d+)\.__hovering$/;
+  const HOVER_PATH_PATTERN = /^comments\.(left|right)\.\#(\d+)\.__hovering$/;
-  var SPLICE_PATH_PATTERN = /^comments\.(left|right)\.splices$/;
+  const SPLICE_PATH_PATTERN = /^comments\.(left|right)\.splices$/;
 
-  var RANGE_HIGHLIGHT = 'range';
+  const RANGE_HIGHLIGHT = 'range';
-  var HOVER_HIGHLIGHT = 'rangeHighlight';
+  const HOVER_HIGHLIGHT = 'rangeHighlight';
 
-  var NORMALIZE_RANGE_EVENT = 'normalize-range';
+  const NORMALIZE_RANGE_EVENT = 'normalize-range';
 
   Polymer({
     is: 'gr-ranged-comment-layer',
@@ -29,11 +29,11 @@
       comments: Object,
       _listeners: {
         type: Array,
-        value: function() { return []; },
+        value() { return []; },
       },
       _commentMap: {
         type: Object,
-        value: function() { return {left: [], right: []}; },
+        value() { return {left: [], right: []}; },
       },
     },
 
@@ -47,8 +47,8 @@
      *     annotation to.
      * @param {GrDiffLine} line The line object.
      */
-    annotate: function(el, line) {
+    annotate(el, line) {
-      var ranges = [];
+      let ranges = [];
       if (line.type === GrDiffLine.Type.REMOVE || (
           line.type === GrDiffLine.Type.BOTH &&
           el.getAttribute('data-side') !== 'right')) {
@@ -60,11 +60,11 @@
         ranges = ranges.concat(this._getRangesForLine(line, 'right'));
       }
 
-      ranges.forEach(function(range) {
+      for (const range of ranges) {
         GrAnnotation.annotateElement(el, range.start,
             range.end - range.start,
             range.hovering ? HOVER_HIGHLIGHT : RANGE_HIGHLIGHT);
-      });
+      }
     },
 
     /**
@@ -73,7 +73,7 @@
      *     Should accept as arguments the line numbers for the start and end of
      *     the update and the side as a string.
      */
-    addListener: function(fn) {
+    addListener(fn) {
       this._listeners.push(fn);
     },
 
@@ -83,10 +83,10 @@
      * @param {Number} end The line where the update ends.
      * @param {String} side The side of the update. ('left' or 'right')
      */
-    _notifyUpdateRange: function(start, end, side) {
+    _notifyUpdateRange(start, end, side) {
-      this._listeners.forEach(function(listener) {
+      for (const listener of this._listeners) {
         listener(start, end, side);
-      });
+      }
     },
 
     /**
@@ -94,7 +94,7 @@
      * emitting appropriate update notifications.
      * @param {Object} record The change record.
      */
-    _handleCommentChange: function(record) {
+    _handleCommentChange(record) {
       if (!record.path) { return; }
 
       // If the entire set of comments was changed.
@@ -105,11 +105,13 @@
       }
 
       // If the change only changed the `hovering` property of a comment.
-      var match = record.path.match(HOVER_PATH_PATTERN);
+      let match = record.path.match(HOVER_PATH_PATTERN);
+      let side;
+
       if (match) {
-        var side = match[1];
+        side = match[1];
-        var index = match[2];
+        const index = match[2];
-        var comment = this.comments[side][index];
+        const comment = this.comments[side][index];
         if (comment && comment.range) {
           this._commentMap[side] = this._computeCommentMap(this.comments[side]);
           this._notifyUpdateRange(
@@ -121,7 +123,7 @@
       // If comments were spliced in or out.
       match = record.path.match(SPLICE_PATH_PATTERN);
       if (match) {
-        var side = match[1];
+        side = match[1];
         this._commentMap[side] = this._computeCommentMap(this.comments[side]);
         this._handleCommentSplice(record.value, side);
       }
@@ -134,44 +136,45 @@
      * @param {Array<Object>} commentList The list of comments.
      * @return {Object} The sparse list.
      */
-    _computeCommentMap: function(commentList) {
+    _computeCommentMap(commentList) {
-      var result = {};
+      const result = {};
-      commentList.forEach(function(comment) {
+      for (const comment of commentList) {
-        if (!comment.range) { return; }
+        if (!comment.range) { continue; }
-        var range = comment.range;
+        const range = comment.range;
-        for (var line = range.start_line; line <= range.end_line; line++) {
+        for (let line = range.start_line; line <= range.end_line; line++) {
           if (!result[line]) { result[line] = []; }
           result[line].push({
-            comment: comment,
+            comment,
             start: line === range.start_line ? range.start_character : 0,
             end: line === range.end_line ? range.end_character : -1,
           });
         }
-      });
+      }
       return result;
     },
 
     /**
      * Translate a splice record into range update notifications.
      */
-    _handleCommentSplice: function(record, side) {
+    _handleCommentSplice(record, side) {
       if (!record || !record.indexSplices) { return; }
-      record.indexSplices.forEach(function(splice) {
+
-        var ranges = splice.removed.length ?
+      for (const splice of record.indexSplices) {
-          splice.removed.map(function(c) { return c.range; }) :
+        const ranges = splice.removed.length ?
-          [splice.object[splice.index].range];
+            splice.removed.map(c => { return c.range; }) :
-        ranges.forEach(function(range) {
+            [splice.object[splice.index].range];
-          if (!range) { return; }
+        for (const range of ranges) {
+          if (!range) { continue; }
           this._notifyUpdateRange(range.start_line, range.end_line, side);
-        }.bind(this));
+        }
-      }.bind(this));
+      }
     },
 
-    _getRangesForLine: function(line, side) {
+    _getRangesForLine(line, side) {
-      var lineNum = side === 'left' ? line.beforeNumber : line.afterNumber;
+      const lineNum = side === 'left' ? line.beforeNumber : line.afterNumber;
-      var ranges = this.get(['_commentMap', side, lineNum]) || [];
+      const ranges = this.get(['_commentMap', side, lineNum]) || [];
       return ranges
-          .map(function(range) {
+          .map(range => {
             range = {
               start: range.start,
               end: range.end === -1 ? line.text.length : range.end,
@@ -189,11 +192,9 @@
             }
 
             return range;
-          }.bind(this))
+          })
-          .sort(function(a, b) {
+          // Sort the ranges so that hovering highlights are on top.
-            // Sort the ranges so that hovering highlights are on top.
+          .sort((a, b) => a.hovering && !b.hovering ? 1 : 0);
-            return a.hovering && !b.hovering ? 1 : 0;
-          });
     },
   });
 })();

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

@@ -34,12 +34,12 @@ limitations under the License.
 </test-fixture>
 
 <script>
-  suite('gr-ranged-comment-layer', function() {
+  suite('gr-ranged-comment-layer', () => {
-    var element;
+    let element;
-    var sandbox;
+    let sandbox;
 
-    setup(function() {
+    setup(() => {
-      var initialComments = {
+      const initialComments = {
         left: [
           {
             id: '12345',
@@ -97,17 +97,17 @@ limitations under the License.
       element.comments = initialComments;
     });
 
-    teardown(function() {
+    teardown(() => {
       sandbox.restore();
     });
 
-    suite('annotate', function() {
+    suite('annotate', () => {
-      var sandbox;
+      let sandbox;
-      var el;
+      let el;
-      var line;
+      let line;
-      var annotateElementStub;
+      let annotateElementStub;
 
-      setup(function() {
+      setup(() => {
         sandbox = sinon.sandbox.create();
         annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
         el = document.createElement('div');
@@ -116,11 +116,11 @@ limitations under the License.
         line.text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,';
       });
 
-      teardown(function() {
+      teardown(() => {
         sandbox.restore();
       });
 
-      test('type=Remove no-comment', function() {
+      test('type=Remove no-comment', () => {
         line.type = GrDiffLine.Type.REMOVE;
         line.beforeNumber = 40;
 
@@ -129,58 +129,58 @@ limitations under the License.
         assert.isFalse(annotateElementStub.called);
       });
 
-      test('type=Remove has-comment', function() {
+      test('type=Remove has-comment', () => {
         line.type = GrDiffLine.Type.REMOVE;
         line.beforeNumber = 36;
-        var expectedStart = 6;
+        const expectedStart = 6;
-        var expectedLength = line.text.length - expectedStart;
+        const expectedLength = line.text.length - expectedStart;
 
         element.annotate(el, line);
 
         assert.isTrue(annotateElementStub.called);
-        var lastCall = annotateElementStub.lastCall;
+        const lastCall = annotateElementStub.lastCall;
         assert.equal(lastCall.args[0], el);
         assert.equal(lastCall.args[1], expectedStart);
         assert.equal(lastCall.args[2], expectedLength);
         assert.equal(lastCall.args[3], 'range');
       });
 
-      test('type=Remove has-comment hovering', function() {
+      test('type=Remove has-comment hovering', () => {
         line.type = GrDiffLine.Type.REMOVE;
         line.beforeNumber = 36;
         element.set(['comments', 'left', 0, '__hovering'], true);
 
-        var expectedStart = 6;
+        const expectedStart = 6;
-        var expectedLength = line.text.length - expectedStart;
+        const expectedLength = line.text.length - expectedStart;
 
         element.annotate(el, line);
 
         assert.isTrue(annotateElementStub.called);
-        var lastCall = annotateElementStub.lastCall;
+        const lastCall = annotateElementStub.lastCall;
         assert.equal(lastCall.args[0], el);
         assert.equal(lastCall.args[1], expectedStart);
         assert.equal(lastCall.args[2], expectedLength);
         assert.equal(lastCall.args[3], 'rangeHighlight');
       });
 
-      test('type=Both has-comment', function() {
+      test('type=Both has-comment', () => {
         line.type = GrDiffLine.Type.BOTH;
         line.beforeNumber = 36;
 
-        var expectedStart = 6;
+        const expectedStart = 6;
-        var expectedLength = line.text.length - expectedStart;
+        const expectedLength = line.text.length - expectedStart;
 
         element.annotate(el, line);
 
         assert.isTrue(annotateElementStub.called);
-        var lastCall = annotateElementStub.lastCall;
+        const lastCall = annotateElementStub.lastCall;
         assert.equal(lastCall.args[0], el);
         assert.equal(lastCall.args[1], expectedStart);
         assert.equal(lastCall.args[2], expectedLength);
         assert.equal(lastCall.args[3], 'range');
       });
 
-      test('type=Both has-comment off side', function() {
+      test('type=Both has-comment off side', () => {
         line.type = GrDiffLine.Type.BOTH;
         line.beforeNumber = 36;
         el.setAttribute('data-side', 'right');
@@ -190,18 +190,18 @@ limitations under the License.
         assert.isFalse(annotateElementStub.called);
       });
 
-      test('type=Add has-comment', function() {
+      test('type=Add has-comment', () => {
         line.type = GrDiffLine.Type.ADD;
         line.afterNumber = 12;
         el.setAttribute('data-side', 'right');
 
-        var expectedStart = 0;
+        const expectedStart = 0;
-        var expectedLength = 22;
+        const expectedLength = 22;
 
         element.annotate(el, line);
 
         assert.isTrue(annotateElementStub.called);
-        var lastCall = annotateElementStub.lastCall;
+        const lastCall = annotateElementStub.lastCall;
         assert.equal(lastCall.args[0], el);
         assert.equal(lastCall.args[1], expectedStart);
         assert.equal(lastCall.args[2], expectedLength);
@@ -209,9 +209,9 @@ limitations under the License.
       });
     });
 
-    test('_handleCommentChange overwrite', function() {
+    test('_handleCommentChange overwrite', () => {
-      var handlerSpy = sandbox.spy(element, '_handleCommentChange');
+      const handlerSpy = sandbox.spy(element, '_handleCommentChange');
-      var mapSpy = sandbox.spy(element, '_computeCommentMap');
+      const mapSpy = sandbox.spy(element, '_computeCommentMap');
 
       element.set('comments', {left: [], right: []});
 
@@ -222,10 +222,10 @@ limitations under the License.
       assert.equal(Object.keys(element._commentMap.right).length, 0);
     });
 
-    test('_handleCommentChange hovering', function() {
+    test('_handleCommentChange hovering', () => {
-      var handlerSpy = sandbox.spy(element, '_handleCommentChange');
+      const handlerSpy = sandbox.spy(element, '_handleCommentChange');
-      var mapSpy = sandbox.spy(element, '_computeCommentMap');
+      const mapSpy = sandbox.spy(element, '_computeCommentMap');
-      var notifyStub = sinon.stub();
+      const notifyStub = sinon.stub();
       element.addListener(notifyStub);
 
       element.set(['comments', 'right', 0, '__hovering'], true);
@@ -234,16 +234,16 @@ limitations under the License.
       assert.isTrue(mapSpy.called);
 
       assert.isTrue(notifyStub.called);
-      var lastCall = notifyStub.lastCall;
+      const lastCall = notifyStub.lastCall;
       assert.equal(lastCall.args[0], 10);
       assert.equal(lastCall.args[1], 12);
       assert.equal(lastCall.args[2], 'right');
     });
 
-    test('_handleCommentChange splice out', function() {
+    test('_handleCommentChange splice out', () => {
-      var handlerSpy = sandbox.spy(element, '_handleCommentChange');
+      const handlerSpy = sandbox.spy(element, '_handleCommentChange');
-      var mapSpy = sandbox.spy(element, '_computeCommentMap');
+      const mapSpy = sandbox.spy(element, '_computeCommentMap');
-      var notifyStub = sinon.stub();
+      const notifyStub = sinon.stub();
       element.addListener(notifyStub);
 
       element.splice('comments.right', 0, 1);
@@ -252,16 +252,16 @@ limitations under the License.
       assert.isTrue(mapSpy.called);
 
       assert.isTrue(notifyStub.called);
-      var lastCall = notifyStub.lastCall;
+      const lastCall = notifyStub.lastCall;
       assert.equal(lastCall.args[0], 10);
       assert.equal(lastCall.args[1], 12);
       assert.equal(lastCall.args[2], 'right');
     });
 
-    test('_handleCommentChange splice in', function() {
+    test('_handleCommentChange splice in', () => {
-      var handlerSpy = sandbox.spy(element, '_handleCommentChange');
+      const handlerSpy = sandbox.spy(element, '_handleCommentChange');
-      var mapSpy = sandbox.spy(element, '_computeCommentMap');
+      const mapSpy = sandbox.spy(element, '_computeCommentMap');
-      var notifyStub = sinon.stub();
+      const notifyStub = sinon.stub();
       element.addListener(notifyStub);
 
       element.splice('comments.left', element.comments.left.length, 0, {
@@ -280,16 +280,16 @@ limitations under the License.
       assert.isTrue(mapSpy.called);
 
       assert.isTrue(notifyStub.called);
-      var lastCall = notifyStub.lastCall;
+      const lastCall = notifyStub.lastCall;
       assert.equal(lastCall.args[0], 250);
       assert.equal(lastCall.args[1], 275);
       assert.equal(lastCall.args[2], 'left');
     });
 
-    test('_computeCommentMap creates maps correctly', function() {
+    test('_computeCommentMap creates maps correctly', () => {
       // There is only one ranged comment on the left, but it spans ll.36-39.
-      var leftKeys = [];
+      const leftKeys = [];
-      for (var i = 36; i <= 39; i++) { leftKeys.push('' + i); }
+      for (let i = 36; i <= 39; i++) { leftKeys.push('' + i); }
       assert.deepEqual(Object.keys(element._commentMap.left).sort(),
           leftKeys.sort());
 
@@ -311,8 +311,8 @@ limitations under the License.
 
       // The right has two ranged comments, one spanning ll.10-12 and the other
       // on line 100.
-      var rightKeys = [];
+      const rightKeys = [];
-      for (i = 10; i <= 12; i++) { rightKeys.push('' + i); }
+      for (let i = 10; i <= 12; i++) { rightKeys.push('' + i); }
       rightKeys.push('55', '100');
       assert.deepEqual(Object.keys(element._commentMap.right).sort(),
           rightKeys.sort());
@@ -334,14 +334,14 @@ limitations under the License.
       assert.equal(element._commentMap.right[100][0].end, 15);
     });
 
-    test('_getRangesForLine normalizes invalid ranges', function() {
+    test('_getRangesForLine normalizes invalid ranges', () => {
-      var line = {
+      const line = {
         afterNumber: 55,
-        text: '_getRangesForLine normalizes invalid ranges'
+        text: '_getRangesForLine normalizes invalid ranges',
       };
-      var ranges = element._getRangesForLine(line, 'right');
+      const ranges = element._getRangesForLine(line, 'right');
       assert.equal(ranges.length, 1);
-      var range = ranges[0];
+      const range = ranges[0];
       assert.isTrue(range.start < range.end, 'start and end are normalized');
       assert.equal(range.end, line.text.length);
     });