ES6ify /gr-diff-builder/*

Bug: Issue 6179
Change-Id: I9d72fb89a3c3ad916c9097bdf6e5fb31a1dd4cf0
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
index 952dc67..683f2fc 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-image.js
@@ -17,7 +17,7 @@
   // Prevent redefinition.
   if (window.GrDiffBuilderImage) { return; }
 
-  var IMAGE_MIME_PATTERN = /^image\/(bmp|gif|jpeg|jpg|png|tiff|webp)$/;
+  const IMAGE_MIME_PATTERN = /^image\/(bmp|gif|jpeg|jpg|png|tiff|webp)$/;
 
   function GrDiffBuilderImage(diff, comments, prefs, outputEl, baseImage,
       revisionImage) {
@@ -31,7 +31,7 @@
   GrDiffBuilderImage.prototype.constructor = GrDiffBuilderImage;
 
   GrDiffBuilderImage.prototype.renderDiffImages = function() {
-    var section = this._createElement('tbody', 'image-diff');
+    const section = this._createElement('tbody', 'image-diff');
 
     this._emitImagePair(section);
     this._emitImageLabels(section);
@@ -40,7 +40,7 @@
   };
 
   GrDiffBuilderImage.prototype._emitImagePair = function(section) {
-    var tr = this._createElement('tr');
+    const tr = this._createElement('tr');
 
     tr.appendChild(this._createElement('td'));
     tr.appendChild(this._createImageCell(this._baseImage, 'left', section));
@@ -52,18 +52,18 @@
     section.appendChild(tr);
   };
 
-  GrDiffBuilderImage.prototype._createImageCell =
-      function(image, className, section) {
-    var td = this._createElement('td', className);
+  GrDiffBuilderImage.prototype._createImageCell = function(image, className,
+      section) {
+    const td = this._createElement('td', className);
     if (image && IMAGE_MIME_PATTERN.test(image.type)) {
-      var imageEl = this._createElement('img');
+      const imageEl = this._createElement('img');
       imageEl.onload = function() {
         image._height = imageEl.naturalHeight;
         image._width = imageEl.naturalWidth;
         this._updateImageLabel(section, className, image);
       }.bind(this);
       imageEl.src = 'data:' + image.type + ';base64, ' + image.body;
-      imageEl.addEventListener('error', function() {
+      imageEl.addEventListener('error', () => {
         imageEl.remove();
         td.textContent = '[Image failed to load]';
       });
@@ -72,9 +72,9 @@
     return td;
   };
 
-  GrDiffBuilderImage.prototype._updateImageLabel =
-      function(section, className, image) {
-    var label = Polymer.dom(section)
+  GrDiffBuilderImage.prototype._updateImageLabel = function(section, className,
+      image) {
+    const label = Polymer.dom(section)
         .querySelector('.' + className + ' span.label');
     this._setLabelText(label, image);
   };
@@ -84,9 +84,9 @@
   };
 
   GrDiffBuilderImage.prototype._emitImageLabels = function(section) {
-    var tr = this._createElement('tr');
+    const tr = this._createElement('tr');
 
-    var addNamesInLabel = false;
+    let addNamesInLabel = false;
 
     if (this._baseImage && this._revisionImage &&
         this._baseImage._name !== this._revisionImage._name) {
@@ -94,10 +94,10 @@
     }
 
     tr.appendChild(this._createElement('td'));
-    var td = this._createElement('td', 'left');
-    var label = this._createElement('label');
-    var nameSpan;
-    var labelSpan = this._createElement('span', 'label');
+    let td = this._createElement('td', 'left');
+    let label = this._createElement('label');
+    let nameSpan;
+    let labelSpan = this._createElement('span', 'label');
 
     if (addNamesInLabel) {
       nameSpan = this._createElement('span', 'name');
@@ -135,7 +135,7 @@
 
   GrDiffBuilderImage.prototype._getImageLabel = function(image) {
     if (image) {
-      var type = image.type || image._expectedType;
+      const type = image.type || image._expectedType;
       if (image._width && image._height) {
         return image._width + '⨉' + image._height + ' ' + type;
       } else {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-side-by-side.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-side-by-side.js
index cbc00b8..6f47f9b 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-side-by-side.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-side-by-side.js
@@ -24,13 +24,13 @@
   GrDiffBuilderSideBySide.prototype.constructor = GrDiffBuilderSideBySide;
 
   GrDiffBuilderSideBySide.prototype.buildSectionElement = function(group) {
-    var sectionEl = this._createElement('tbody', 'section');
+    const sectionEl = this._createElement('tbody', 'section');
     sectionEl.classList.add(group.type);
     if (this._isTotal(group)) {
       sectionEl.classList.add('total');
     }
-    var pairs = group.getSideBySidePairs();
-    for (var i = 0; i < pairs.length; i++) {
+    const pairs = group.getSideBySidePairs();
+    for (let i = 0; i < pairs.length; i++) {
       sectionEl.appendChild(this._createRow(sectionEl, pairs[i].left,
           pairs[i].right));
     }
@@ -38,11 +38,11 @@
   };
 
   GrDiffBuilderSideBySide.prototype.addColumns = function(outputEl, fontSize) {
-    var width = fontSize * 4;
-    var colgroup = document.createElement('colgroup');
+    const width = fontSize * 4;
+    const colgroup = document.createElement('colgroup');
 
     // Add left-side line number.
-    var col = document.createElement('col');
+    let col = document.createElement('col');
     col.setAttribute('width', width);
     colgroup.appendChild(col);
 
@@ -62,7 +62,7 @@
 
   GrDiffBuilderSideBySide.prototype._createRow = function(section, leftLine,
       rightLine) {
-    var row = this._createElement('tr');
+    const row = this._createElement('tr');
     row.classList.add('diff-row', 'side-by-side');
     row.setAttribute('left-type', leftLine.type);
     row.setAttribute('right-type', rightLine.type);
@@ -76,15 +76,15 @@
 
   GrDiffBuilderSideBySide.prototype._appendPair = function(section, row, line,
       lineNumber, side) {
-    var lineEl = this._createLineEl(line, lineNumber, line.type, side);
+    const lineEl = this._createLineEl(line, lineNumber, line.type, side);
     lineEl.classList.add(side);
     row.appendChild(lineEl);
-    var action = this._createContextControl(section, line);
+    const action = this._createContextControl(section, line);
     if (action) {
       row.appendChild(action);
     } else {
-      var textEl = this._createTextEl(line, side);
-      var threadGroupEl = this._commentThreadGroupForLine(line, side);
+      const textEl = this._createTextEl(line, side);
+      const threadGroupEl = this._commentThreadGroupForLine(line, side);
       if (threadGroupEl) {
         textEl.appendChild(threadGroupEl);
       }
@@ -94,7 +94,7 @@
 
   GrDiffBuilderSideBySide.prototype._getNextContentOnSide = function(
       content, side) {
-    var tr = content.parentElement.parentElement;
+    let tr = content.parentElement.parentElement;
     while (tr = tr.nextSibling) {
       content = tr.querySelector(
           'td.content .contentText[data-side="' + side + '"]');
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified.js
index 55a6bea..64c8f95 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified.js
@@ -24,24 +24,24 @@
   GrDiffBuilderUnified.prototype.constructor = GrDiffBuilderUnified;
 
   GrDiffBuilderUnified.prototype.buildSectionElement = function(group) {
-    var sectionEl = this._createElement('tbody', 'section');
+    const sectionEl = this._createElement('tbody', 'section');
     sectionEl.classList.add(group.type);
     if (this._isTotal(group)) {
       sectionEl.classList.add('total');
     }
 
-    for (var i = 0; i < group.lines.length; ++i) {
+    for (let i = 0; i < group.lines.length; ++i) {
       sectionEl.appendChild(this._createRow(sectionEl, group.lines[i]));
     }
     return sectionEl;
   };
 
   GrDiffBuilderUnified.prototype.addColumns = function(outputEl, fontSize) {
-    var width = fontSize * 4;
-    var colgroup = document.createElement('colgroup');
+    const width = fontSize * 4;
+    const colgroup = document.createElement('colgroup');
 
     // Add left-side line number.
-    var col = document.createElement('col');
+    let col = document.createElement('col');
     col.setAttribute('width', width);
     colgroup.appendChild(col);
 
@@ -57,8 +57,8 @@
   };
 
   GrDiffBuilderUnified.prototype._createRow = function(section, line) {
-    var row = this._createElement('tr', line.type);
-    var lineEl = this._createLineEl(line, line.beforeNumber,
+    const row = this._createElement('tr', line.type);
+    let lineEl = this._createLineEl(line, line.beforeNumber,
         GrDiffLine.Type.REMOVE);
     lineEl.classList.add('left');
     row.appendChild(lineEl);
@@ -68,12 +68,12 @@
     row.appendChild(lineEl);
     row.classList.add('diff-row', 'unified');
 
-    var action = this._createContextControl(section, line);
+    const action = this._createContextControl(section, line);
     if (action) {
       row.appendChild(action);
     } else {
-      var textEl = this._createTextEl(line);
-      var threadGroupEl = this._commentThreadGroupForLine(line);
+      const textEl = this._createTextEl(line);
+      const threadGroupEl = this._commentThreadGroupForLine(line);
       if (threadGroupEl) {
         textEl.appendChild(threadGroupEl);
       }
@@ -84,7 +84,7 @@
 
   GrDiffBuilderUnified.prototype._getNextContentOnSide = function(
       content, side) {
-    var tr = content.parentElement.parentElement;
+    let tr = content.parentElement.parentElement;
     while (tr = tr.nextSibling) {
       if (tr.classList.contains('both') || (
           (side === 'left' && tr.classList.contains('remove')) ||
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.html b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.html
index d41ad56..e20aecc 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.html
@@ -48,12 +48,12 @@
     (function() {
       'use strict';
 
-      var DiffViewMode = {
+      const DiffViewMode = {
         SIDE_BY_SIDE: 'SIDE_BY_SIDE',
         UNIFIED: 'UNIFIED_DIFF',
       };
 
-      var TimingLabel = {
+      const TimingLabel = {
         TOTAL: 'Diff Total Render',
         CONTENT: 'Diff Content Render',
         SYNTAX: 'Diff Syntax Render',
@@ -61,9 +61,9 @@
 
       // If any line of the diff is more than the character limit, then disable
       // syntax highlighting for the entire file.
-      var SYNTAX_MAX_LINE_LENGTH = 500;
+      const SYNTAX_MAX_LINE_LENGTH = 500;
 
-      var TRAILING_WHITESPACE_PATTERN = /\s+$/;
+      const TRAILING_WHITESPACE_PATTERN = /\s+$/;
 
       Polymer({
         is: 'gr-diff-builder',
@@ -108,7 +108,7 @@
           '_groupsChanged(_groups.splices)',
         ],
 
-        attached: function() {
+        attached() {
           // Setup annotation layers.
           this._layers = [
             this._createTrailingWhitespaceLayer(),
@@ -118,12 +118,12 @@
             this.$.rangeLayer,
           ];
 
-          this.async(function() {
+          this.async(() => {
             this._preRenderThread();
           });
         },
 
-        render: function(comments, prefs) {
+        render(comments, prefs) {
           this.$.syntaxLayer.enabled = prefs.syntax_highlighting;
           this._showTabs = !!prefs.show_tabs;
           this._showTrailingWhitespace = !!prefs.show_whitespace_errors;
@@ -140,34 +140,35 @@
           this._clearDiffContent();
           this._builder.addColumns(this.diffElement, prefs.font_size);
 
-          var reporting = this.$.reporting;
+          const reporting = this.$.reporting;
 
           reporting.time(TimingLabel.TOTAL);
           reporting.time(TimingLabel.CONTENT);
           this.dispatchEvent(new CustomEvent('render-start', {bubbles: true}));
           return this.$.processor.process(this.diff.content, this.isImageDiff)
-              .then(function() {
-            if (this.isImageDiff) {
-              this._builder.renderDiffImages();
-            }
-            this.dispatchEvent(new CustomEvent('render-content',
-                {bubbles: true}));
+              .then(() => {
+                if (this.isImageDiff) {
+                  this._builder.renderDiffImages();
+                }
+                this.dispatchEvent(new CustomEvent('render-content',
+                    {bubbles: true}));
 
-            if (this._anyLineTooLong()) {
-              this.$.syntaxLayer.enabled = false;
-            }
+                if (this._anyLineTooLong()) {
+                  this.$.syntaxLayer.enabled = false;
+                }
 
-            reporting.timeEnd(TimingLabel.CONTENT);
-            reporting.time(TimingLabel.SYNTAX);
-            return this.$.syntaxLayer.process().then(function() {
-              reporting.timeEnd(TimingLabel.SYNTAX);
-              reporting.timeEnd(TimingLabel.TOTAL);
-              this.dispatchEvent(new CustomEvent('render', {bubbles: true}));
-            }.bind(this));
-          }.bind(this));
+                reporting.timeEnd(TimingLabel.CONTENT);
+                reporting.time(TimingLabel.SYNTAX);
+                return this.$.syntaxLayer.process().then(() => {
+                  reporting.timeEnd(TimingLabel.SYNTAX);
+                  reporting.timeEnd(TimingLabel.TOTAL);
+                  this.dispatchEvent(
+                      new CustomEvent('render', {bubbles: true}));
+                });
+              });
         },
 
-        getLineElByChild: function(node) {
+        getLineElByChild(node) {
           while (node) {
             if (node instanceof Element) {
               if (node.classList.contains('lineNum')) {
@@ -182,154 +183,154 @@
           return null;
         },
 
-        getLineNumberByChild: function(node) {
-          var lineEl = this.getLineElByChild(node);
+        getLineNumberByChild(node) {
+          const lineEl = this.getLineElByChild(node);
           return lineEl ?
-              parseInt(lineEl.getAttribute('data-value'), 10) : null;
+              parseInt(lineEl.getAttribute('data-value'), 10) :
+              null;
         },
 
-        getContentByLine: function(lineNumber, opt_side, opt_root) {
+        getContentByLine(lineNumber, opt_side, opt_root) {
           return this._builder.getContentByLine(lineNumber, opt_side, opt_root);
         },
 
-        getContentByLineEl: function(lineEl) {
-          var root = Polymer.dom(lineEl.parentElement);
-          var side = this.getSideByLineEl(lineEl);
-          var line = lineEl.getAttribute('data-value');
+        getContentByLineEl(lineEl) {
+          const root = Polymer.dom(lineEl.parentElement);
+          const side = this.getSideByLineEl(lineEl);
+          const line = lineEl.getAttribute('data-value');
           return this.getContentByLine(line, side, root);
         },
 
-        getLineElByNumber: function(lineNumber, opt_side) {
-          var sideSelector = !!opt_side ? ('.' + opt_side) : '';
+        getLineElByNumber(lineNumber, opt_side) {
+          const sideSelector = opt_side ? ('.' + opt_side) : '';
           return this.diffElement.querySelector(
               '.lineNum[data-value="' + lineNumber + '"]' + sideSelector);
         },
 
-        getContentsByLineRange: function(startLine, endLine, opt_side) {
-          var result = [];
+        getContentsByLineRange(startLine, endLine, opt_side) {
+          const result = [];
           this._builder.findLinesByRange(startLine, endLine, opt_side, null,
               result);
           return result;
         },
 
-        getSideByLineEl: function(lineEl) {
+        getSideByLineEl(lineEl) {
           return lineEl.classList.contains(GrDiffBuilder.Side.RIGHT) ?
-              GrDiffBuilder.Side.RIGHT : GrDiffBuilder.Side.LEFT;
+          GrDiffBuilder.Side.RIGHT : GrDiffBuilder.Side.LEFT;
         },
 
-        createCommentThreadGroup: function(changeNum, patchNum, path,
+        createCommentThreadGroup(changeNum, patchNum, path,
             isOnParent, commentSide, projectConfig) {
           return this._builder.createCommentThreadGroup(changeNum, patchNum,
               path, isOnParent, commentSide, projectConfig);
         },
 
-        emitGroup: function(group, sectionEl) {
+        emitGroup(group, sectionEl) {
           this._builder.emitGroup(group, sectionEl);
         },
 
-        showContext: function(newGroups, sectionEl) {
-          var groups = this._builder.groups;
-          // TODO(viktard): Polyfill findIndex for IE10.
-          var contextIndex = groups.findIndex(function(group) {
-            return group.element == sectionEl;
-          });
-          groups.splice.apply(groups, [contextIndex, 1].concat(newGroups));
+        showContext(newGroups, sectionEl) {
+          const groups = this._builder.groups;
 
-          newGroups.forEach(function(newGroup) {
+          const contextIndex = groups.findIndex(group =>
+            group.element === sectionEl
+          );
+          groups.splice(...[contextIndex, 1].concat(newGroups));
+
+          for (const newGroup of newGroups) {
             this._builder.emitGroup(newGroup, sectionEl);
-          }, this);
+          }
           sectionEl.parentNode.removeChild(sectionEl);
 
-          this.async(function() {
-            this.fire('render-content');
-          }, 1);
+          this.async(() => this.fire('render-content'), 1);
         },
 
-        _getDiffBuilder: function(diff, comments, prefs) {
+        _getDiffBuilder(diff, comments, prefs) {
           if (this.isImageDiff) {
             return new GrDiffBuilderImage(diff, comments, prefs,
-                this.diffElement, this.baseImage, this.revisionImage);
+            this.diffElement, this.baseImage, this.revisionImage);
           } else if (this.viewMode === DiffViewMode.SIDE_BY_SIDE) {
             return new GrDiffBuilderSideBySide(
-                diff, comments, prefs, this.diffElement, this._layers);
+            diff, comments, prefs, this.diffElement, this._layers);
           } else if (this.viewMode === DiffViewMode.UNIFIED) {
             return new GrDiffBuilderUnified(
-                diff, comments, prefs, this.diffElement, this._layers);
+            diff, comments, prefs, this.diffElement, this._layers);
           }
           throw Error('Unsupported diff view mode: ' + this.viewMode);
         },
 
-        _clearDiffContent: function() {
+        _clearDiffContent() {
           this.diffElement.innerHTML = null;
         },
 
-        _getCommentLocations: function(comments) {
-          var result = {
+        _getCommentLocations(comments) {
+          const result = {
             left: {},
             right: {},
           };
-          for (var side in comments) {
+          for (const side in comments) {
             if (side !== GrDiffBuilder.Side.LEFT &&
                 side !== GrDiffBuilder.Side.RIGHT) {
               continue;
             }
-            comments[side].forEach(function(c) {
+            for (const c of comments[side]) {
               result[side][c.line || GrDiffLine.FILE] = true;
-            });
+            }
           }
           return result;
         },
 
-        _groupsChanged: function(changeRecord) {
+        _groupsChanged(changeRecord) {
           if (!changeRecord) { return; }
-          changeRecord.indexSplices.forEach(function(splice) {
-            var group;
-            for (var i = 0; i < splice.addedCount; i++) {
+          for (const splice of changeRecord.indexSplices) {
+            let group;
+            for (let i = 0; i < splice.addedCount; i++) {
               group = splice.object[splice.index + i];
               this._builder.groups.push(group);
               this._builder.emitGroup(group);
             }
-          }, this);
+          }
         },
 
-        _createIntralineLayer: function() {
+        _createIntralineLayer() {
           return {
             // Take a DIV.contentText element and a line object with intraline
             // differences to highlight and apply them to the element as
             // annotations.
-            annotate: function(el, line) {
-              var HL_CLASS = 'style-scope gr-diff intraline';
-              line.highlights.forEach(function(highlight) {
+            annotate(el, line) {
+              const HL_CLASS = 'style-scope gr-diff intraline';
+              for (const highlight of line.highlights) {
                 // The start and end indices could be the same if a highlight is
                 // meant to start at the end of a line and continue onto the
                 // next one. Ignore it.
-                if (highlight.startIndex === highlight.endIndex) { return; }
+                if (highlight.startIndex === highlight.endIndex) { continue; }
 
                 // If endIndex isn't present, continue to the end of the line.
-                var endIndex = highlight.endIndex === undefined ?
-                    line.text.length : highlight.endIndex;
+                const endIndex = highlight.endIndex === undefined ?
+                    line.text.length :
+                    highlight.endIndex;
 
                 GrAnnotation.annotateElement(
                     el,
                     highlight.startIndex,
                     endIndex - highlight.startIndex,
                     HL_CLASS);
-              });
+              }
             },
           };
         },
 
-        _createTabIndicatorLayer: function() {
-          var show = function() { return this._showTabs; }.bind(this);
+        _createTabIndicatorLayer() {
+          const show = () => this._showTabs;
           return {
-            annotate: function(el, line) {
+            annotate(el, line) {
               // If visible tabs are disabled, do nothing.
               if (!show()) { return; }
 
               // Find and annotate the locations of tabs.
-              var split = line.text.split('\t');
+              const split = line.text.split('\t');
               if (!split) { return; }
-              for (var i = 0, pos = 0; i < split.length - 1; i++) {
+              for (let i = 0, pos = 0; i < split.length - 1; i++) {
                 // Skip forward by the length of the content
                 pos += split[i].length;
 
@@ -343,22 +344,22 @@
           };
         },
 
-        _createTrailingWhitespaceLayer: function() {
-          var show = function() {
+        _createTrailingWhitespaceLayer() {
+          const show = function() {
             return this._showTrailingWhitespace;
           }.bind(this);
 
           return {
-            annotate: function(el, line) {
+            annotate(el, line) {
               if (!show()) { return; }
 
-              var match = line.text.match(TRAILING_WHITESPACE_PATTERN);
+              const match = line.text.match(TRAILING_WHITESPACE_PATTERN);
               if (match) {
                 // Normalize string positions in case there is unicode before or
                 // within the match.
-                var index = GrAnnotation.getStringLength(
+                const index = GrAnnotation.getStringLength(
                     line.text.substr(0, match.index));
-                var length = GrAnnotation.getStringLength(match[0]);
+                const length = GrAnnotation.getStringLength(match[0]);
                 GrAnnotation.annotateElement(el, index, length,
                     'style-scope gr-diff trailing-whitespace');
               }
@@ -375,11 +376,11 @@
          * already exist and the user's comment will be quick to load.
          * @see https://gerrit-review.googlesource.com/c/82213/
          */
-        _preRenderThread: function() {
-          var thread = document.createElement('gr-diff-comment-thread');
+        _preRenderThread() {
+          const thread = document.createElement('gr-diff-comment-thread');
           thread.setAttribute('hidden', true);
           thread.addDraft();
-          var parent = Polymer.dom(this.root);
+          const parent = Polymer.dom(this.root);
           parent.appendChild(thread);
           Polymer.dom.flush();
           parent.removeChild(thread);
@@ -389,9 +390,9 @@
          * @return {Boolean} whether any of the lines in _groups are longer
          * than SYNTAX_MAX_LINE_LENGTH.
          */
-        _anyLineTooLong: function() {
-          return this._groups.reduce(function(acc, group) {
-            return acc || group.lines.reduce(function(acc, line) {
+        _anyLineTooLong() {
+          return this._groups.reduce((acc, group) => {
+            return acc || group.lines.reduce((acc, line) => {
               return acc || line.text.length >= SYNTAX_MAX_LINE_LENGTH;
             }, false);
           }, false);
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
index c407829..bb23572 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
@@ -14,8 +14,8 @@
 (function(window, GrDiffGroup, GrDiffLine) {
   'use strict';
 
-  var HTML_ENTITY_PATTERN = /[&<>"'`\/]/g;
-  var HTML_ENTITY_MAP = {
+  const HTML_ENTITY_PATTERN = /[&<>"'`\/]/g;
+  const HTML_ENTITY_MAP = {
     '&': '&amp;',
     '<': '&lt;',
     '>': '&gt;',
@@ -28,7 +28,7 @@
   // Prevent redefinition.
   if (window.GrDiffBuilder) { return; }
 
-  var REGEX_ASTRAL_SYMBOL = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
+  const REGEX_ASTRAL_SYMBOL = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
 
   function GrDiffBuilder(diff, comments, prefs, outputEl, layers) {
     this._diff = diff;
@@ -39,11 +39,11 @@
 
     this.layers = layers || [];
 
-    this.layers.forEach(function(layer) {
+    for (const layer of this.layers) {
       if (layer.addListener) {
         layer.addListener(this._handleLayerUpdate.bind(this));
       }
-    }.bind(this));
+    }
   }
 
   GrDiffBuilder.LESS_THAN_CODE = '<'.charCodeAt(0);
@@ -76,7 +76,7 @@
     ALL: 'all',
   };
 
-  var PARTIAL_CONTEXT_AMOUNT = 10;
+  const PARTIAL_CONTEXT_AMOUNT = 10;
 
   /**
    * Abstract method
@@ -96,16 +96,16 @@
   };
 
   GrDiffBuilder.prototype.emitGroup = function(group, opt_beforeSection) {
-    var element = this.buildSectionElement(group);
+    const element = this.buildSectionElement(group);
     this._outputEl.insertBefore(element, opt_beforeSection);
     group.element = element;
   };
 
   GrDiffBuilder.prototype.renderSection = function(element) {
-    for (var i = 0; i < this.groups.length; i++) {
-      var group = this.groups[i];
+    for (let i = 0; i < this.groups.length; i++) {
+      const group = this.groups[i];
       if (group.element === element) {
-        var newElement = this.buildSectionElement(group);
+        const newElement = this.buildSectionElement(group);
         group.element.parentElement.replaceChild(newElement, group.element);
         group.element = newElement;
         break;
@@ -115,14 +115,14 @@
 
   GrDiffBuilder.prototype.getGroupsByLineRange = function(
       startLine, endLine, opt_side) {
-    var groups = [];
-    for (var i = 0; i < this.groups.length; i++) {
-      var group = this.groups[i];
+    const groups = [];
+    for (let i = 0; i < this.groups.length; i++) {
+      const group = this.groups[i];
       if (group.lines.length === 0) {
         continue;
       }
-      var groupStartLine = 0;
-      var groupEndLine = 0;
+      let groupStartLine = 0;
+      let groupEndLine = 0;
       if (opt_side) {
         groupStartLine = group.lineRange[opt_side].start;
         groupEndLine = group.lineRange[opt_side].end;
@@ -143,8 +143,8 @@
 
   GrDiffBuilder.prototype.getContentByLine = function(lineNumber, opt_side,
       opt_root) {
-    var root = Polymer.dom(opt_root || this._outputEl);
-    var sideSelector = !!opt_side ? ('.' + opt_side) : '';
+    const root = Polymer.dom(opt_root || this._outputEl);
+    const sideSelector = opt_side ? ('.' + opt_side) : '';
     return root.querySelector('td.lineNum[data-value="' + lineNumber +
         '"]' + sideSelector + ' ~ td.content .contentText');
   };
@@ -162,17 +162,17 @@
    */
   GrDiffBuilder.prototype.findLinesByRange = function(start, end, opt_side,
       out_lines, out_elements) {
-    var groups = this.getGroupsByLineRange(start, end, opt_side);
-    groups.forEach(function(group) {
-      var content = null;
-      group.lines.forEach(function(line) {
+    const groups = this.getGroupsByLineRange(start, end, opt_side);
+    for (const group of groups) {
+      let content = null;
+      for (const line of group.lines) {
         if ((opt_side === 'left' && line.type === GrDiffLine.Type.ADD) ||
             (opt_side === 'right' && line.type === GrDiffLine.Type.REMOVE)) {
-          return;
+          continue;
         }
-        var lineNumber = opt_side === 'left' ?
+        const lineNumber = opt_side === 'left' ?
             line.beforeNumber : line.afterNumber;
-        if (lineNumber < start || lineNumber > end) { return; }
+        if (lineNumber < start || lineNumber > end) { continue; }
 
         if (out_lines) { out_lines.push(line); }
         if (out_elements) {
@@ -184,8 +184,8 @@
           }
           if (content) { out_elements.push(content); }
         }
-      }.bind(this));
-    }.bind(this));
+      }
+    }
   };
 
   /**
@@ -193,12 +193,12 @@
    * diff content.
    */
   GrDiffBuilder.prototype._renderContentByRange = function(start, end, side) {
-    var lines = [];
-    var elements = [];
-    var line;
-    var el;
+    const lines = [];
+    const elements = [];
+    let line;
+    let el;
     this.findLinesByRange(start, end, side, lines, elements);
-    for (var i = 0; i < lines.length; i++) {
+    for (let i = 0; i < lines.length; i++) {
       line = lines[i];
       el = elements[i];
       el.parentElement.replaceChild(this._createTextEl(line, side).firstChild,
@@ -209,7 +209,7 @@
   GrDiffBuilder.prototype.getSectionsByLineRange = function(
       startLine, endLine, opt_side) {
     return this.getGroupsByLineRange(startLine, endLine, opt_side).map(
-        function(group) { return group.element; });
+        group => { return group.element; });
   };
 
   GrDiffBuilder.prototype._commentIsAtLineNum = function(side, lineNum) {
@@ -219,15 +219,15 @@
   // TODO(wyatta): Move this completely into the processor.
   GrDiffBuilder.prototype._insertContextGroups = function(groups, lines,
       hiddenRange) {
-    var linesBeforeCtx = lines.slice(0, hiddenRange[0]);
-    var hiddenLines = lines.slice(hiddenRange[0], hiddenRange[1]);
-    var linesAfterCtx = lines.slice(hiddenRange[1]);
+    const linesBeforeCtx = lines.slice(0, hiddenRange[0]);
+    const hiddenLines = lines.slice(hiddenRange[0], hiddenRange[1]);
+    const linesAfterCtx = lines.slice(hiddenRange[1]);
 
     if (linesBeforeCtx.length > 0) {
       groups.push(new GrDiffGroup(GrDiffGroup.Type.BOTH, linesBeforeCtx));
     }
 
-    var ctxLine = new GrDiffLine(GrDiffLine.Type.CONTEXT_CONTROL);
+    const ctxLine = new GrDiffLine(GrDiffLine.Type.CONTEXT_CONTROL);
     ctxLine.contextGroup =
         new GrDiffGroup(GrDiffGroup.Type.BOTH, hiddenLines);
     groups.push(new GrDiffGroup(GrDiffGroup.Type.CONTEXT_CONTROL,
@@ -243,8 +243,8 @@
       return null;
     }
 
-    var td = this._createElement('td');
-    var showPartialLinks =
+    const td = this._createElement('td');
+    const showPartialLinks =
         line.contextGroup.lines.length > PARTIAL_CONTEXT_AMOUNT;
 
     if (showPartialLinks) {
@@ -266,14 +266,14 @@
   };
 
   GrDiffBuilder.prototype._createContextButton = function(type, section, line) {
-    var contextLines = line.contextGroup.lines;
-    var context = PARTIAL_CONTEXT_AMOUNT;
+    const contextLines = line.contextGroup.lines;
+    const context = PARTIAL_CONTEXT_AMOUNT;
 
-    var button = this._createElement('gr-button', 'showContext');
+    const button = this._createElement('gr-button', 'showContext');
     button.setAttribute('link', true);
 
-    var text;
-    var groups = []; // The groups that replace this one if tapped.
+    let text;
+    const groups = []; // The groups that replace this one if tapped.
 
     if (type === GrDiffBuilder.ContextButtonType.ALL) {
       text = 'Show ' + contextLines.length + ' common line';
@@ -291,10 +291,10 @@
 
     button.textContent = text;
 
-    button.addEventListener('tap', function(e) {
+    button.addEventListener('tap', e => {
       e.detail = {
-        groups: groups,
-        section: section,
+        groups,
+        section,
       };
       // Let it bubble up the DOM tree.
     });
@@ -310,15 +310,15 @@
                (c.line === undefined && lineNum === GrDiffLine.FILE);
       };
     }
-    var leftComments =
+    const leftComments =
         comments[GrDiffBuilder.Side.LEFT].filter(byLineNum(line.beforeNumber));
-    var rightComments =
+    const rightComments =
         comments[GrDiffBuilder.Side.RIGHT].filter(byLineNum(line.afterNumber));
 
-    leftComments.forEach(function(c) { c.__commentSide = 'left'; });
-    rightComments.forEach(function(c) { c.__commentSide = 'right'; });
+    leftComments.forEach(c => { c.__commentSide = 'left'; });
+    rightComments.forEach(c => { c.__commentSide = 'right'; });
 
-    var result;
+    let result;
 
     switch (opt_side) {
       case GrDiffBuilder.Side.LEFT:
@@ -337,7 +337,7 @@
 
   GrDiffBuilder.prototype.createCommentThreadGroup = function(changeNum,
       patchNum, path, isOnParent, projectConfig, range) {
-    var threadGroupEl =
+    const threadGroupEl =
         document.createElement('gr-diff-comment-thread-group');
     threadGroupEl.changeNum = changeNum;
     threadGroupEl.patchForNewThreads = patchNum;
@@ -348,24 +348,25 @@
     return threadGroupEl;
   };
 
-  GrDiffBuilder.prototype._commentThreadGroupForLine =
-      function(line, opt_side) {
-    var comments = this._getCommentsForLine(this._comments, line, opt_side);
+  GrDiffBuilder.prototype._commentThreadGroupForLine = function(line,
+      opt_side) {
+    const comments =
+        this._getCommentsForLine(this._comments, line, opt_side);
     if (!comments || comments.length === 0) {
       return null;
     }
 
-    var patchNum = this._comments.meta.patchRange.patchNum;
-    var isOnParent = comments[0].side === 'PARENT' || false;
+    let patchNum = this._comments.meta.patchRange.patchNum;
+    let isOnParent = comments[0].side === 'PARENT' || false;
     if (line.type === GrDiffLine.Type.REMOVE ||
-        opt_side === GrDiffBuilder.Side.LEFT) {
+    opt_side === GrDiffBuilder.Side.LEFT) {
       if (this._comments.meta.patchRange.basePatchNum === 'PARENT') {
         isOnParent = true;
       } else {
         patchNum = this._comments.meta.patchRange.basePatchNum;
       }
     }
-    var threadGroupEl = this.createCommentThreadGroup(
+    const threadGroupEl = this.createCommentThreadGroup(
         this._comments.meta.changeNum,
         patchNum,
         this._comments.meta.path,
@@ -380,7 +381,7 @@
 
   GrDiffBuilder.prototype._createLineEl = function(line, number, type,
       opt_class) {
-    var td = this._createElement('td');
+    const td = this._createElement('td');
     if (opt_class) {
       td.classList.add(opt_class);
     }
@@ -397,13 +398,13 @@
   };
 
   GrDiffBuilder.prototype._createTextEl = function(line, opt_side) {
-    var td = this._createElement('td');
-    var text = line.text;
+    const td = this._createElement('td');
+    const text = line.text;
     if (line.type !== GrDiffLine.Type.BLANK) {
       td.classList.add('content');
     }
     td.classList.add(line.type);
-    var html = this._escapeHTML(text);
+    let html = this._escapeHTML(text);
     html = this._addTabWrappers(html, this._prefs.tab_size);
     if (!this._prefs.line_wrapping &&
         this._textLength(text, this._prefs.tab_size) >
@@ -411,7 +412,7 @@
       html = this._addNewlines(text, html);
     }
 
-    var contentText = this._createElement('div', 'contentText');
+    const contentText = this._createElement('div', 'contentText');
     if (opt_side) {
       contentText.setAttribute('data-side', opt_side);
     }
@@ -424,9 +425,9 @@
       contentText.innerHTML = html;
     }
 
-    this.layers.forEach(function(layer) {
+    for (const layer of this.layers) {
       layer.annotate(contentText, line);
-    });
+    }
 
     td.appendChild(contentText);
 
@@ -439,8 +440,8 @@
    */
   GrDiffBuilder.prototype._textLength = function(text, tabSize) {
     text = text.replace(REGEX_ASTRAL_SYMBOL, '_');
-    var numChars = 0;
-    for (var i = 0; i < text.length; i++) {
+    let numChars = 0;
+    for (let i = 0; i < text.length; i++) {
       if (text[i] === '\t') {
         numChars += tabSize - (numChars % tabSize);
       } else {
@@ -488,11 +489,11 @@
   };
 
   GrDiffBuilder.prototype._addNewlines = function(text, html) {
-    var htmlIndex = 0;
-    var indices = [];
-    var numChars = 0;
-    var prevHtmlIndex = 0;
-    for (var i = 0; i < text.length; i++) {
+    let htmlIndex = 0;
+    const indices = [];
+    let numChars = 0;
+    let prevHtmlIndex = 0;
+    for (let i = 0; i < text.length; i++) {
       if (numChars > 0 && numChars % this._prefs.line_length === 0) {
         indices.push(htmlIndex);
       }
@@ -512,11 +513,11 @@
       }
       prevHtmlIndex = htmlIndex;
     }
-    var result = html;
+    let result = html;
     // Since the result string is being altered in place, start from the end
     // of the string so that the insertion indices are not affected as the
     // result string changes.
-    for (var i = indices.length - 1; i >= 0; i--) {
+    for (let i = indices.length - 1; i >= 0; i--) {
       result = result.slice(0, indices[i]) + GrDiffBuilder.LINE_FEED_HTML +
           result.slice(indices[i]);
     }
@@ -535,12 +536,12 @@
   GrDiffBuilder.prototype._addTabWrappers = function(line, tabSize) {
     if (!line.length) { return ''; }
 
-    var result = '';
-    var offset = 0;
-    var split = line.split('\t');
-    var width;
+    let result = '';
+    let offset = 0;
+    const split = line.split('\t');
+    let width;
 
-    for (var i = 0; i < split.length - 1; i++) {
+    for (let i = 0; i < split.length - 1; i++) {
       offset += split[i].length;
       width = tabSize - (offset % tabSize);
       result += split[i] + this._getTabWrapper(width);
@@ -560,7 +561,7 @@
       throw Error('Invalid tab size from preferences.');
     }
 
-    var str = '<span class="style-scope gr-diff tab ';
+    let str = '<span class="style-scope gr-diff tab ';
     str += '" style="';
     // TODO(andybons): CSS tab-size is not supported in IE.
     str += 'tab-size:' + tabSize + ';';
@@ -570,7 +571,7 @@
   };
 
   GrDiffBuilder.prototype._createElement = function(tagName, className) {
-    var el = document.createElement(tagName);
+    const el = document.createElement(tagName);
     // When Shady DOM is being used, these classes are added to account for
     // Polymer's polyfill behavior. In order to guarantee sufficient
     // specificity within the CSS rules, these are added to every element.
@@ -578,7 +579,7 @@
     // automatically) are not being used for performance reasons, this is
     // done manually.
     el.classList.add('style-scope', 'gr-diff');
-    if (!!className) {
+    if (className) {
       el.classList.add(className);
     }
     return el;
@@ -612,7 +613,7 @@
   };
 
   GrDiffBuilder.prototype._escapeHTML = function(str) {
-    return str.replace(HTML_ENTITY_PATTERN, function(s) {
+    return str.replace(HTML_ENTITY_PATTERN, s => {
       return HTML_ENTITY_MAP[s];
     });
   };
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
index 591fa9c..6c4a9d9 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
@@ -54,15 +54,15 @@
 </test-fixture>
 
 <script>
-  suite('gr-diff-builder tests', function() {
-    var element;
-    var builder;
+  suite('gr-diff-builder tests', () => {
+    let element;
+    let builder;
 
-    setup(function() {
+    setup(() => {
       stub('gr-rest-api-interface', {
-        getLoggedIn: function() { return Promise.resolve(false); },
+        getLoggedIn() { return Promise.resolve(false); },
       });
-      var prefs = {
+      const prefs = {
         line_length: 10,
         show_tabs: true,
         tab_size: 4,
@@ -70,18 +70,18 @@
       builder = new GrDiffBuilder({content: []}, {left: [], right: []}, prefs);
     });
 
-    test('context control buttons', function() {
-      var section = {};
-      var line = {contextGroup: {lines: []}};
+    test('context control buttons', () => {
+      const section = {};
+      const line = {contextGroup: {lines: []}};
 
       // Create 10 lines.
-      for (var i = 0; i < 10; i++) {
+      for (let i = 0; i < 10; i++) {
         line.contextGroup.lines.push('lorem upsum');
       }
 
       // Does not include +10 buttons when there are fewer than 11 lines.
-      var td = builder._createContextControl(section, line);
-      var buttons = td.querySelectorAll('gr-button.showContext');
+      let td = builder._createContextControl(section, line);
+      let buttons = td.querySelectorAll('gr-button.showContext');
 
       assert.equal(buttons.length, 1);
       assert.equal(buttons[0].textContent, 'Show 10 common lines');
@@ -99,8 +99,8 @@
       assert.equal(buttons[2].textContent, '+10↓');
     });
 
-    test('newlines 1', function() {
-      var text = 'abcdef';
+    test('newlines 1', () => {
+      let text = 'abcdef';
       assert.equal(builder._addNewlines(text, text), text);
       text = 'a'.repeat(20);
       assert.equal(builder._addNewlines(text, text),
@@ -109,9 +109,10 @@
           'a'.repeat(10));
     });
 
-    test('newlines 2', function() {
-      var text = '<span class="thumbsup">👍</span>';
-      var html = '&lt;span class=&quot;thumbsup&quot;&gt;👍&lt;&#x2F;span&gt;';
+    test('newlines 2', () => {
+      const text = '<span class="thumbsup">👍</span>';
+      const html =
+          '&lt;span class=&quot;thumbsup&quot;&gt;👍&lt;&#x2F;span&gt;';
       assert.equal(builder._addNewlines(text, html),
           '&lt;span clas' +
           GrDiffBuilder.LINE_FEED_HTML +
@@ -122,23 +123,23 @@
           'n&gt;');
     });
 
-    test('newlines 3', function() {
-      var text = '01234\t56789';
-      var html = '01234<span>\t</span>56789';
+    test('newlines 3', () => {
+      const text = '01234\t56789';
+      const html = '01234<span>\t</span>56789';
       assert.equal(builder._addNewlines(text, html),
           '01234<span>\t</span>5' +
           GrDiffBuilder.LINE_FEED_HTML +
           '6789');
     });
 
-    test('_addNewlines not called if line_wrapping is true', function(done) {
+    test('_addNewlines not called if line_wrapping is true', done => {
       builder._prefs = {line_wrapping: true, tab_size: 4, line_length: 50};
-      var text = (new Array(52)).join('a');
+      const text = (new Array(52)).join('a');
 
-      var line = {text: text, highlights: []};
-      var newLineStub = sinon.stub(builder, '_addNewlines');
+      const line = {text, highlights: []};
+      const newLineStub = sinon.stub(builder, '_addNewlines');
       builder._createTextEl(line);
-      flush(function() {
+      flush(() => {
         assert.isFalse(newLineStub.called);
         newLineStub.restore();
         done();
@@ -146,33 +147,33 @@
     });
 
     test('_addNewlines called if line_wrapping is true and meets other ' +
-        'conditions', function(done) {
+        'conditions', done => {
       builder._prefs = {line_wrapping: false, tab_size: 4, line_length: 50};
-      var text = (new Array(52)).join('a');
+      const text = (new Array(52)).join('a');
 
-      var line = {text: text, highlights: []};
-      var newLineStub = sinon.stub(builder, '_addNewlines');
+      const line = {text, highlights: []};
+      const newLineStub = sinon.stub(builder, '_addNewlines');
       builder._createTextEl(line);
 
-      flush(function() {
+      flush(() => {
         assert.isTrue(newLineStub.called);
         newLineStub.restore();
         done();
       });
     });
 
-    test('_createTextEl linewrap with tabs', function() {
-      var text = _.times(7, _.constant('\t')).join('') + '!';
-      var line = {text: text, highlights: []};
-      var el = builder._createTextEl(line);
-      var tabEl = el.querySelector('.contentText > .br');
+    test('_createTextEl linewrap with tabs', () => {
+      const text = _.times(7, _.constant('\t')).join('') + '!';
+      const line = {text, highlights: []};
+      const el = builder._createTextEl(line);
+      const tabEl = el.querySelector('.contentText > .br');
       assert.isOk(tabEl);
       assert.equal(
           el.querySelector('.contentText .tab:nth-child(2)').nextSibling,
           tabEl);
     });
 
-    test('text length with tabs and unicode', function() {
+    test('text length with tabs and unicode', () => {
       assert.equal(builder._textLength('12345', 4), 5);
       assert.equal(builder._textLength('\t\t12', 4), 10);
       assert.equal(builder._textLength('abc💢123', 4), 7);
@@ -186,9 +187,9 @@
       assert.equal(builder._textLength('\t\t\t\t\t', 20), 100);
     });
 
-    test('tab wrapper insertion', function() {
-      var html = 'abc\tdef';
-      var wrapper = builder._getTabWrapper(
+    test('tab wrapper insertion', () => {
+      const html = 'abc\tdef';
+      const wrapper = builder._getTabWrapper(
           builder._prefs.tab_size - 3,
           builder._prefs.show_tabs);
       assert.ok(wrapper);
@@ -202,12 +203,12 @@
           true));
     });
 
-    test('comments', function() {
-      var line = new GrDiffLine(GrDiffLine.Type.BOTH);
+    test('comments', () => {
+      const line = new GrDiffLine(GrDiffLine.Type.BOTH);
       line.beforeNumber = 3;
       line.afterNumber = 5;
 
-      var comments = {left: [], right: []};
+      let comments = {left: [], right: []};
       assert.deepEqual(builder._getCommentsForLine(comments, line), []);
       assert.deepEqual(builder._getCommentsForLine(comments, line,
           GrDiffBuilder.Side.LEFT), []);
@@ -229,19 +230,19 @@
           {id: 'r5', line: 5, __commentSide: 'right'}]);
       assert.deepEqual(builder._getCommentsForLine(comments, line,
           GrDiffBuilder.Side.LEFT), [{id: 'l3', line: 3,
-          __commentSide: 'left'}]);
+            __commentSide: 'left'}]);
       assert.deepEqual(builder._getCommentsForLine(comments, line,
           GrDiffBuilder.Side.RIGHT), [{id: 'r5', line: 5,
-          __commentSide: 'right'}]);
+            __commentSide: 'right'}]);
     });
 
-    test('comment thread group creation', function() {
-      var l3 = {id: 'l3', line: 3, updated: '2016-08-09 00:42:32.000000000',
-          __commentSide: 'left'};
-      var l5 = {id: 'l5', line: 5, updated: '2016-08-09 00:42:32.000000000',
-          __commentSide: 'left'};
-      var r5 = {id: 'r5', line: 5, updated: '2016-08-09 00:42:32.000000000',
-          __commentSide: 'right'};
+    test('comment thread group creation', () => {
+      const l3 = {id: 'l3', line: 3, updated: '2016-08-09 00:42:32.000000000',
+        __commentSide: 'left'};
+      const l5 = {id: 'l5', line: 5, updated: '2016-08-09 00:42:32.000000000',
+        __commentSide: 'left'};
+      const r5 = {id: 'r5', line: 5, updated: '2016-08-09 00:42:32.000000000',
+        __commentSide: 'right'};
 
       builder._comments = {
         meta: {
@@ -267,10 +268,10 @@
         assert.deepEqual(threadGroupEl.comments, comments);
       }
 
-      var line = new GrDiffLine(GrDiffLine.Type.BOTH);
+      let line = new GrDiffLine(GrDiffLine.Type.BOTH);
       line.beforeNumber = 5;
       line.afterNumber = 5;
-      var threadGroupEl = builder._commentThreadGroupForLine(line);
+      let threadGroupEl = builder._commentThreadGroupForLine(line);
       checkThreadGroupProps(threadGroupEl, '3', false, [l5, r5]);
 
       threadGroupEl =
@@ -306,51 +307,51 @@
       line.beforeNumber = 3;
       line.afterNumber = 5;
       threadGroupEl = builder._commentThreadGroupForLine(line);
-    checkThreadGroupProps(threadGroupEl, '3', false, [l3, r5]);
+      checkThreadGroupProps(threadGroupEl, '3', false, [l3, r5]);
     });
 
-    suite('_isTotal', function() {
-      test('is total for add', function() {
-        var group = new GrDiffGroup(GrDiffGroup.Type.DELTA);
-        for (var idx = 0; idx < 10; idx++) {
+    suite('_isTotal', () => {
+      test('is total for add', () => {
+        const group = new GrDiffGroup(GrDiffGroup.Type.DELTA);
+        for (let idx = 0; idx < 10; idx++) {
           group.addLine(new GrDiffLine(GrDiffLine.Type.ADD));
         }
         assert.isTrue(GrDiffBuilder.prototype._isTotal(group));
       });
 
-      test('is total for remove', function() {
-        var group = new GrDiffGroup(GrDiffGroup.Type.DELTA);
-        for (var idx = 0; idx < 10; idx++) {
+      test('is total for remove', () => {
+        const group = new GrDiffGroup(GrDiffGroup.Type.DELTA);
+        for (let idx = 0; idx < 10; idx++) {
           group.addLine(new GrDiffLine(GrDiffLine.Type.REMOVE));
         }
         assert.isTrue(GrDiffBuilder.prototype._isTotal(group));
       });
 
-      test('not total for empty', function() {
-        var group = new GrDiffGroup(GrDiffGroup.Type.BOTH);
+      test('not total for empty', () => {
+        const group = new GrDiffGroup(GrDiffGroup.Type.BOTH);
         assert.isFalse(GrDiffBuilder.prototype._isTotal(group));
       });
 
-      test('not total for non-delta', function() {
-        var group = new GrDiffGroup(GrDiffGroup.Type.DELTA);
-        for (var idx = 0; idx < 10; idx++) {
+      test('not total for non-delta', () => {
+        const group = new GrDiffGroup(GrDiffGroup.Type.DELTA);
+        for (let idx = 0; idx < 10; idx++) {
           group.addLine(new GrDiffLine(GrDiffLine.Type.BOTH));
         }
         assert.isFalse(GrDiffBuilder.prototype._isTotal(group));
       });
     });
 
-    suite('intraline differences', function() {
-      var el;
-      var str;
-      var annotateElementSpy;
-      var layer;
+    suite('intraline differences', () => {
+      let el;
+      let str;
+      let annotateElementSpy;
+      let layer;
 
       function slice(str, start, end) {
         return Array.from(str).slice(start, end).join('');
       }
 
-      setup(function() {
+      setup(() => {
         el = fixture('div-with-text');
         str = el.textContent;
         annotateElementSpy = sinon.spy(GrAnnotation, 'annotateElement');
@@ -358,12 +359,12 @@
             ._createIntralineLayer();
       });
 
-      teardown(function() {
+      teardown(() => {
         annotateElementSpy.restore();
       });
 
-      test('annotate no highlights', function() {
-        var line = {
+      test('annotate no highlights', () => {
+        const line = {
           text: str,
           highlights: [],
         };
@@ -377,19 +378,19 @@
         assert.equal(str, el.childNodes[0].textContent);
       });
 
-      test('annotate with highlights', function() {
-        var line = {
+      test('annotate with highlights', () => {
+        const line = {
           text: str,
           highlights: [
             {startIndex: 6, endIndex: 12},
             {startIndex: 18, endIndex: 22},
           ],
         };
-        var str0 = slice(str, 0, 6);
-        var str1 = slice(str, 6, 12);
-        var str2 = slice(str, 12, 18);
-        var str3 = slice(str, 18, 22);
-        var str4 = slice(str, 22);
+        const str0 = slice(str, 0, 6);
+        const str1 = slice(str, 6, 12);
+        const str2 = slice(str, 12, 18);
+        const str3 = slice(str, 18, 22);
+        const str4 = slice(str, 22);
 
         layer.annotate(el, line);
 
@@ -412,16 +413,16 @@
         assert.equal(el.childNodes[4].textContent, str4);
       });
 
-      test('annotate without endIndex', function() {
-        var line = {
+      test('annotate without endIndex', () => {
+        const line = {
           text: str,
           highlights: [
             {startIndex: 28},
           ],
         };
 
-        var str0 = slice(str, 0, 28);
-        var str1 = slice(str, 28);
+        const str0 = slice(str, 0, 28);
+        const str1 = slice(str, 28);
 
         layer.annotate(el, line);
 
@@ -435,8 +436,8 @@
         assert.equal(el.childNodes[1].textContent, str1);
       });
 
-      test('annotate ignores empty highlights', function() {
-        var line = {
+      test('annotate ignores empty highlights', () => {
+        const line = {
           text: str,
           highlights: [
             {startIndex: 28, endIndex: 28},
@@ -449,20 +450,20 @@
         assert.equal(el.childNodes.length, 1);
       });
 
-      test('annotate handles unicode', function() {
+      test('annotate handles unicode', () => {
         // Put some unicode into the string:
         str = str.replace(/\s/g, '💢');
         el.textContent = str;
-        var line = {
+        const line = {
           text: str,
           highlights: [
             {startIndex: 6, endIndex: 12},
           ],
         };
 
-        var str0 = slice(str, 0, 6);
-        var str1 = slice(str, 6, 12);
-        var str2 = slice(str, 12);
+        const str0 = slice(str, 0, 6);
+        const str1 = slice(str, 6, 12);
+        const str2 = slice(str, 12);
 
         layer.annotate(el, line);
 
@@ -479,20 +480,20 @@
         assert.equal(el.childNodes[2].textContent, str2);
       });
 
-      test('annotate handles unicode w/o endIndex', function() {
+      test('annotate handles unicode w/o endIndex', () => {
         // Put some unicode into the string:
         str = str.replace(/\s/g, '💢');
         el.textContent = str;
 
-        var line = {
+        const line = {
           text: str,
           highlights: [
             {startIndex: 6},
           ],
         };
 
-        var str0 = slice(str, 0, 6);
-        var str1 = slice(str, 6);
+        const str0 = slice(str, 0, 6);
+        const str1 = slice(str, 6);
 
         layer.annotate(el, line);
 
@@ -507,87 +508,92 @@
       });
     });
 
-    suite('tab indicators', function() {
-      var sandbox;
-      var element;
-      var layer;
+    suite('tab indicators', () => {
+      let sandbox;
+      let element;
+      let layer;
 
-      setup(function() {
+      setup(() => {
         sandbox = sinon.sandbox.create();
         element = fixture('basic');
         element._showTabs = true;
         layer = element._createTabIndicatorLayer();
       });
 
-      teardown(function() {
+      teardown(() => {
         sandbox.restore();
       });
 
-      test('does nothing with empty line', function() {
-        var line = {text: ''};
-        var el = document.createElement('div');
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+      test('does nothing with empty line', () => {
+        const line = {text: ''};
+        const el = document.createElement('div');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
 
         layer.annotate(el, line);
 
         assert.isFalse(annotateElementStub.called);
       });
 
-      test('does nothing with no tabs', function() {
-        var str = 'lorem ipsum no tabs';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('does nothing with no tabs', () => {
+        const str = 'lorem ipsum no tabs';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
 
         layer.annotate(el, line);
 
         assert.isFalse(annotateElementStub.called);
       });
 
-      test('annotates tab at beginning', function() {
-        var str = '\tlorem upsum';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('annotates tab at beginning', () => {
+        const str = '\tlorem upsum';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
 
         layer.annotate(el, line);
 
         assert.equal(annotateElementStub.callCount, 1);
-        var args = annotateElementStub.getCalls()[0].args;
+        const args = annotateElementStub.getCalls()[0].args;
         assert.equal(args[0], el);
         assert.equal(args[1], 0, 'offset of tab indicator');
         assert.equal(args[2], 1, 'length of tab indicator');
         assert.include(args[3], 'tab-indicator');
       });
 
-      test('does not annotate when disabled', function() {
+      test('does not annotate when disabled', () => {
         element._showTabs = false;
 
-        var str = '\tlorem upsum';
-        var line = {text: str};
-        var el = document.createElement('div');
+        const str = '\tlorem upsum';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
 
         layer.annotate(el, line);
 
         assert.isFalse(annotateElementStub.called);
       });
 
-      test('annotates multiple in beginning', function() {
-        var str = '\t\tlorem upsum';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('annotates multiple in beginning', () => {
+        const str = '\t\tlorem upsum';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
 
         layer.annotate(el, line);
 
         assert.equal(annotateElementStub.callCount, 2);
 
-        var args = annotateElementStub.getCalls()[0].args;
+        let args = annotateElementStub.getCalls()[0].args;
         assert.equal(args[0], el);
         assert.equal(args[1], 0, 'offset of tab indicator');
         assert.equal(args[2], 1, 'length of tab indicator');
@@ -600,17 +606,18 @@
         assert.include(args[3], 'tab-indicator');
       });
 
-      test('annotates intermediate tabs', function() {
-        var str = 'lorem\tupsum';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('annotates intermediate tabs', () => {
+        const str = 'lorem\tupsum';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
 
         layer.annotate(el, line);
 
         assert.equal(annotateElementStub.callCount, 1);
-        var args = annotateElementStub.getCalls()[0].args;
+        const args = annotateElementStub.getCalls()[0].args;
         assert.equal(args[0], el);
         assert.equal(args[1], 5, 'offset of tab indicator');
         assert.equal(args[2], 1, 'length of tab indicator');
@@ -618,108 +625,115 @@
       });
     });
 
-    suite('trailing whitespace', function() {
-      var sandbox;
-      var element;
-      var layer;
+    suite('trailing whitespace', () => {
+      let sandbox;
+      let element;
+      let layer;
 
-      setup(function() {
+      setup(() => {
         sandbox = sinon.sandbox.create();
         element = fixture('basic');
         element._showTrailingWhitespace = true;
         layer = element._createTrailingWhitespaceLayer();
       });
 
-      teardown(function() {
+      teardown(() => {
         sandbox.restore();
       });
 
-      test('does nothing with empty line', function() {
-        var line = {text: ''};
-        var el = document.createElement('div');
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+      test('does nothing with empty line', () => {
+        const line = {text: ''};
+        const el = document.createElement('div');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
         layer.annotate(el, line);
         assert.isFalse(annotateElementStub.called);
       });
 
-      test('does nothing with no trailing whitespace', function() {
-        var str = 'lorem ipsum blah blah';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('does nothing with no trailing whitespace', () => {
+        const str = 'lorem ipsum blah blah';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
         layer.annotate(el, line);
         assert.isFalse(annotateElementStub.called);
       });
 
-      test('annotates trailing spaces', function() {
-        var str = 'lorem ipsum   ';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('annotates trailing spaces', () => {
+        const str = 'lorem ipsum   ';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
         layer.annotate(el, line);
         assert.isTrue(annotateElementStub.called);
         assert.equal(annotateElementStub.lastCall.args[1], 11);
         assert.equal(annotateElementStub.lastCall.args[2], 3);
       });
 
-      test('annotates trailing tabs', function() {
-        var str = 'lorem ipsum\t\t\t';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('annotates trailing tabs', () => {
+        const str = 'lorem ipsum\t\t\t';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
         layer.annotate(el, line);
         assert.isTrue(annotateElementStub.called);
         assert.equal(annotateElementStub.lastCall.args[1], 11);
         assert.equal(annotateElementStub.lastCall.args[2], 3);
       });
 
-      test('annotates mixed trailing whitespace', function() {
-        var str = 'lorem ipsum\t \t';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('annotates mixed trailing whitespace', () => {
+        const str = 'lorem ipsum\t \t';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
         layer.annotate(el, line);
         assert.isTrue(annotateElementStub.called);
         assert.equal(annotateElementStub.lastCall.args[1], 11);
         assert.equal(annotateElementStub.lastCall.args[2], 3);
       });
 
-      test('unicode preceding trailing whitespace', function() {
-        var str = '💢\t';
-        var line = {text: str};
-        var el = document.createElement('div');
+      test('unicode preceding trailing whitespace', () => {
+        const str = '💢\t';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
         layer.annotate(el, line);
         assert.isTrue(annotateElementStub.called);
         assert.equal(annotateElementStub.lastCall.args[1], 1);
         assert.equal(annotateElementStub.lastCall.args[2], 1);
       });
 
-      test('does not annotate when disabled', function() {
+      test('does not annotate when disabled', () => {
         element._showTrailingWhitespace = false;
-        var str = 'lorem upsum\t \t ';
-        var line = {text: str};
-        var el = document.createElement('div');
+        const str = 'lorem upsum\t \t ';
+        const line = {text: str};
+        const el = document.createElement('div');
         el.textContent = str;
-        var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
+        const annotateElementStub =
+            sandbox.stub(GrAnnotation, 'annotateElement');
         layer.annotate(el, line);
         assert.isFalse(annotateElementStub.called);
       });
     });
 
-    suite('rendering', function() {
-      var content;
-      var outputEl;
-      var sandbox;
+    suite('rendering', () => {
+      let content;
+      let outputEl;
+      let sandbox;
 
-      setup(function(done) {
+      setup(done => {
         sandbox = sinon.sandbox.create();
-        var prefs = {
+        const prefs = {
           line_length: 10,
           show_tabs: true,
           tab_size: 4,
@@ -729,13 +743,13 @@
         content = [
           {
             a: ['all work and no play make andybons a dull boy'],
-            b: ['elgoog elgoog elgoog']
+            b: ['elgoog elgoog elgoog'],
           },
           {
             ab: [
               'Non eram nescius, Brute, cum, quae summis ingeniis ',
               'exquisitaque doctrina philosophi Graeco sermone tractavissent',
-            ]
+            ],
           },
         ];
         stub('gr-reporting', {
@@ -744,30 +758,30 @@
         });
         element = fixture('basic');
         outputEl = element.queryEffectiveChildren('#diffTable');
-        sandbox.stub(element, '_getDiffBuilder', function() {
-          var builder = new GrDiffBuilder(
-              {content: content}, {left: [], right: []}, prefs, outputEl);
+        sandbox.stub(element, '_getDiffBuilder', () => {
+          const builder = new GrDiffBuilder(
+              {content}, {left: [], right: []}, prefs, outputEl);
           sandbox.stub(builder, 'addColumns');
           builder.buildSectionElement = function(group) {
-            var section = document.createElement('stub');
-            section.textContent = group.lines.reduce(function(acc, line) {
+            const section = document.createElement('stub');
+            section.textContent = group.lines.reduce((acc, line) => {
               return acc + line.text;
             }, '');
             return section;
           };
           return builder;
         });
-        element.diff = {content: content};
+        element.diff = {content};
         element.render({left: [], right: []}, prefs).then(done);
       });
 
-      teardown(function() {
+      teardown(() => {
         sandbox.restore();
       });
 
-      test('reporting', function(done) {
-        var timeStub = element.$.reporting.time;
-        var timeEndStub = element.$.reporting.timeEnd;
+      test('reporting', done => {
+        const timeStub = element.$.reporting.time;
+        const timeEndStub = element.$.reporting.timeEnd;
         assert.isTrue(timeStub.calledWithExactly('Diff Total Render'));
         assert.isTrue(timeStub.calledWithExactly('Diff Content Render'));
         assert.isTrue(timeStub.calledWithExactly('Diff Syntax Render'));
@@ -777,43 +791,43 @@
         done();
       });
 
-      test('renderSection', function() {
-        var section = outputEl.querySelector('stub:nth-of-type(2)');
-        var prevInnerHTML = section.innerHTML;
+      test('renderSection', () => {
+        let section = outputEl.querySelector('stub:nth-of-type(2)');
+        const prevInnerHTML = section.innerHTML;
         section.innerHTML = 'wiped';
         element._builder.renderSection(section);
         section = outputEl.querySelector('stub:nth-of-type(2)');
         assert.equal(section.innerHTML, prevInnerHTML);
       });
 
-      test('addColumns is called', function(done) {
+      test('addColumns is called', done => {
         element.render({left: [], right: []}, {}).then(done);
         assert.isTrue(element._builder.addColumns.called);
       });
 
-      test('getSectionsByLineRange one line', function() {
-        var section = outputEl.querySelector('stub:nth-of-type(2)');
-        var sections = element._builder.getSectionsByLineRange(1, 1, 'left');
+      test('getSectionsByLineRange one line', () => {
+        const section = outputEl.querySelector('stub:nth-of-type(2)');
+        const sections = element._builder.getSectionsByLineRange(1, 1, 'left');
         assert.equal(sections.length, 1);
         assert.strictEqual(sections[0], section);
       });
 
-      test('getSectionsByLineRange over diff', function() {
-        var section = [
+      test('getSectionsByLineRange over diff', () => {
+        const section = [
           outputEl.querySelector('stub:nth-of-type(2)'),
           outputEl.querySelector('stub:nth-of-type(3)'),
         ];
-        var sections = element._builder.getSectionsByLineRange(1, 2, 'left');
+        const sections = element._builder.getSectionsByLineRange(1, 2, 'left');
         assert.equal(sections.length, 2);
         assert.strictEqual(sections[0], section[0]);
         assert.strictEqual(sections[1], section[1]);
       });
 
-      test('render-start and render are fired', function(done) {
-        var dispatchEventStub = sinon.stub(element, 'dispatchEvent');
-        element.render({left: [], right: []}, {}).then(function() {
-          var firedEventTypes = dispatchEventStub.getCalls()
-              .map(function(c) { return c.args[0].type; });
+      test('render-start and render are fired', done => {
+        const dispatchEventStub = sinon.stub(element, 'dispatchEvent');
+        element.render({left: [], right: []}, {}).then(() => {
+          const firedEventTypes = dispatchEventStub.getCalls()
+              .map(c => { return c.args[0].type; });
           assert.include(firedEventTypes, 'render-start');
           assert.include(firedEventTypes, 'render-content');
           assert.include(firedEventTypes, 'render');
@@ -821,18 +835,18 @@
         });
       });
 
-      test('rendering normal-sized diff does not disable syntax', function() {
+      test('rendering normal-sized diff does not disable syntax', () => {
         assert.isTrue(element.$.syntaxLayer.enabled);
       });
 
-      test('rendering large diff disables syntax', function(done) {
+      test('rendering large diff disables syntax', done => {
         // Before it renders, set the first diff line to 500 '*' characters.
         element.diff.content[0].a = [new Array(501).join('*')];
-        element.addEventListener('render', function() {
+        element.addEventListener('render', () => {
           assert.isFalse(element.$.syntaxLayer.enabled);
           done();
         });
-        var prefs = {
+        const prefs = {
           line_length: 10,
           show_tabs: true,
           tab_size: 4,
@@ -843,13 +857,13 @@
       });
     });
 
-    suite('mock-diff', function() {
-      var element;
-      var builder;
-      var diff;
-      var prefs;
+    suite('mock-diff', () => {
+      let element;
+      let builder;
+      let diff;
+      let prefs;
 
-      setup(function(done) {
+      setup(done => {
         element = fixture('mock-diff');
         diff = document.createElement('mock-diff-response').diffResponse;
         element.diff = diff;
@@ -860,14 +874,14 @@
           tab_size: 4,
         };
 
-        element.render({left: [], right: []}, prefs).then(function() {
+        element.render({left: [], right: []}, prefs).then(() => {
           builder = element._builder;
           done();
         });
       });
 
-      test('getContentByLine', function() {
-        var actual;
+      test('getContentByLine', () => {
+        let actual;
 
         actual = builder.getContentByLine(2, 'left');
         assert.equal(actual.textContent, diff.content[0].ab[1]);
@@ -882,19 +896,19 @@
         assert.equal(actual.textContent, diff.content[1].b[0]);
       });
 
-      test('findLinesByRange', function() {
-        var lines = [];
-        var elems = [];
-        var start = 6;
-        var end = 10;
-        var count = end - start + 1;
+      test('findLinesByRange', () => {
+        const lines = [];
+        const elems = [];
+        const start = 6;
+        const end = 10;
+        const count = end - start + 1;
 
         builder.findLinesByRange(start, end, 'right', lines, elems);
 
         assert.equal(lines.length, count);
         assert.equal(elems.length, count);
 
-        for (var i = 0; i < 5; i++) {
+        for (let i = 0; i < 5; i++) {
           assert.instanceOf(lines[i], GrDiffLine);
           assert.equal(lines[i].afterNumber, start + i);
           assert.instanceOf(elems[i], HTMLElement);
@@ -902,59 +916,59 @@
         }
       });
 
-      test('_renderContentByRange', function() {
-        var spy = sinon.spy(builder, '_createTextEl');
-        var start = 9;
-        var end = 14;
-        var count = end - start + 1;
+      test('_renderContentByRange', () => {
+        const spy = sinon.spy(builder, '_createTextEl');
+        const start = 9;
+        const end = 14;
+        const count = end - start + 1;
 
         builder._renderContentByRange(start, end, 'left');
 
         assert.equal(spy.callCount, count);
-        spy.getCalls().forEach(function(call, i) {
+        spy.getCalls().forEach((call, i) => {
           assert.equal(call.args[0].beforeNumber, start + i);
         });
 
         spy.restore();
       });
 
-      test('_getNextContentOnSide side-by-side left', function() {
-        var startElem = builder.getContentByLine(5, 'left',
+      test('_getNextContentOnSide side-by-side left', () => {
+        const startElem = builder.getContentByLine(5, 'left',
             element.$.diffTable);
-        var expectedStartString = diff.content[2].ab[0];
-        var expectedNextString = diff.content[2].ab[1];
+        const expectedStartString = diff.content[2].ab[0];
+        const expectedNextString = diff.content[2].ab[1];
         assert.equal(startElem.textContent, expectedStartString);
 
-        var nextElem = builder._getNextContentOnSide(startElem,
+        const nextElem = builder._getNextContentOnSide(startElem,
             'left');
         assert.equal(nextElem.textContent, expectedNextString);
       });
 
-      test('_getNextContentOnSide side-by-side right', function() {
-        var startElem = builder.getContentByLine(5, 'right',
+      test('_getNextContentOnSide side-by-side right', () => {
+        const startElem = builder.getContentByLine(5, 'right',
             element.$.diffTable);
-        var expectedStartString = diff.content[1].b[0];
-        var expectedNextString = diff.content[1].b[1];
+        const expectedStartString = diff.content[1].b[0];
+        const expectedNextString = diff.content[1].b[1];
         assert.equal(startElem.textContent, expectedStartString);
 
-        var nextElem = builder._getNextContentOnSide(startElem,
+        const nextElem = builder._getNextContentOnSide(startElem,
             'right');
         assert.equal(nextElem.textContent, expectedNextString);
       });
 
-      test('_getNextContentOnSide unified left', function(done) {
+      test('_getNextContentOnSide unified left', done => {
         // Re-render as unified:
         element.viewMode = 'UNIFIED_DIFF';
-        element.render({left: [], right: []}, prefs).then(function() {
+        element.render({left: [], right: []}, prefs).then(() => {
           builder = element._builder;
 
-          var startElem = builder.getContentByLine(5, 'left',
+          const startElem = builder.getContentByLine(5, 'left',
               element.$.diffTable);
-          var expectedStartString = diff.content[2].ab[0];
-          var expectedNextString = diff.content[2].ab[1];
+          const expectedStartString = diff.content[2].ab[0];
+          const expectedNextString = diff.content[2].ab[1];
           assert.equal(startElem.textContent, expectedStartString);
 
-          var nextElem = builder._getNextContentOnSide(startElem,
+          const nextElem = builder._getNextContentOnSide(startElem,
               'left');
           assert.equal(nextElem.textContent, expectedNextString);
 
@@ -962,19 +976,19 @@
         });
       });
 
-      test('_getNextContentOnSide unified right', function(done) {
+      test('_getNextContentOnSide unified right', done => {
         // Re-render as unified:
         element.viewMode = 'UNIFIED_DIFF';
-        element.render({left: [], right: []}, prefs).then(function() {
+        element.render({left: [], right: []}, prefs).then(() => {
           builder = element._builder;
 
-          var startElem = builder.getContentByLine(5, 'right',
+          const startElem = builder.getContentByLine(5, 'right',
               element.$.diffTable);
-          var expectedStartString = diff.content[1].b[0];
-          var expectedNextString = diff.content[1].b[1];
+          const expectedStartString = diff.content[1].b[0];
+          const expectedNextString = diff.content[1].b[1];
           assert.equal(startElem.textContent, expectedStartString);
 
-          var nextElem = builder._getNextContentOnSide(startElem,
+          const nextElem = builder._getNextContentOnSide(startElem,
               'right');
           assert.equal(nextElem.textContent, expectedNextString);
 
@@ -982,11 +996,11 @@
         });
       });
 
-      test('_escapeHTML', function() {
-        var input = '<script>alert("XSS");<' + '/script>';
-        var expected = '&lt;script&gt;alert(&quot;XSS&quot;);' +
+      test('_escapeHTML', () => {
+        let input = '<script>alert("XSS");<' + '/script>';
+        let expected = '&lt;script&gt;alert(&quot;XSS&quot;);' +
             '&lt;&#x2F;script&gt;';
-        var result = GrDiffBuilder.prototype._escapeHTML(input);
+        let result = GrDiffBuilder.prototype._escapeHTML(input);
         assert.equal(result, expected);
 
         input = '& < > " \' / `';