diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
new file mode 100644
index 0000000..21ee076
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -0,0 +1,123 @@
+<!--
+Copyright (C) 2015 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../behaviors/rest-client-behavior.html">
+<link rel="import" href="../../shared/gr-ajax/gr-ajax.html">
+<link rel="import" href="../../shared/gr-button/gr-button.html">
+<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
+<link rel="import" href="../../shared/gr-request/gr-request.html">
+
+<link rel="import" href="../gr-diff-preferences/gr-diff-preferences.html">
+<link rel="import" href="../gr-diff-side/gr-diff-side.html">
+<link rel="import" href="../gr-patch-range-select/gr-patch-range-select.html">
+
+<dom-module id="gr-diff">
+  <template>
+    <style>
+      .loading {
+        padding: 0 var(--default-horizontal-margin) 1em;
+        color: #666;
+      }
+      .header {
+        display: flex;
+        justify-content: space-between;
+        margin: 0 var(--default-horizontal-margin) .75em;
+      }
+      .prefsButton {
+        text-align: right;
+      }
+      .diffContainer {
+        border-bottom: 1px solid #eee;
+        border-top: 1px solid #eee;
+        display: flex;
+        font: 12px var(--monospace-font-family);
+        overflow-x: auto;
+      }
+      gr-diff-side:first-of-type {
+        --light-highlight-color: #fee;
+        --dark-highlight-color: #ffd4d4;
+      }
+      gr-diff-side:last-of-type {
+        --light-highlight-color: #efe;
+        --dark-highlight-color: #d4ffd4;
+        border-right: 1px solid #ddd;
+      }
+    </style>
+    <gr-ajax id="diffXHR"
+        url="[[_computeDiffPath(changeNum, patchRange.patchNum, path)]]"
+        params="[[_computeDiffQueryParams(patchRange.basePatchNum)]]"
+        last-response="{{_diffResponse}}"
+        loading="{{_loading}}"></gr-ajax>
+    <gr-ajax id="baseCommentsXHR"
+        url="[[_computeCommentsPath(changeNum, patchRange.basePatchNum)]]"></gr-ajax>
+    <gr-ajax id="commentsXHR"
+        url="[[_computeCommentsPath(changeNum, patchRange.patchNum)]]"></gr-ajax>
+    <gr-ajax id="baseDraftsXHR"
+        url="[[_computeDraftsPath(changeNum, patchRange.basePatchNum)]]"></gr-ajax>
+    <gr-ajax id="draftsXHR"
+        url="[[_computeDraftsPath(changeNum, patchRange.patchNum)]]"></gr-ajax>
+    <div class="loading" hidden$="[[!_loading]]">Loading...</div>
+    <div hidden$="[[_loading]]" hidden>
+      <div class="header">
+        <gr-patch-range-select
+            path="[[path]]"
+            change-num="[[changeNum]]"
+            patch-range="[[patchRange]]"
+            available-patches="[[availablePatches]]"></gr-patch-range-select>
+        <gr-button link
+           class="prefsButton"
+           on-tap="_handlePrefsTap"
+           hidden$="[[!prefs]]"
+           hidden>Diff View Preferences</gr-button>
+      </div>
+      <gr-overlay id="prefsOverlay" with-backdrop>
+        <gr-diff-preferences
+            prefs="{{prefs}}"
+            on-save="_handlePrefsSave"
+            on-cancel="_handlePrefsCancel"></gr-diff-preferences>
+      </gr-overlay>
+
+      <div class="diffContainer">
+        <gr-diff-side id="leftDiff"
+            change-num="[[changeNum]]"
+            patch-num="[[patchRange.basePatchNum]]"
+            path="[[path]]"
+            content="{{_diff.leftSide}}"
+            prefs="[[prefs]]"
+            can-comment="[[_loggedIn]]"
+            project-config="[[projectConfig]]"
+            on-expand-context="_handleExpandContext"
+            on-thread-height-change="_handleThreadHeightChange"
+            on-add-draft="_handleAddDraft"
+            on-remove-thread="_handleRemoveThread"></gr-diff-side>
+        <gr-diff-side id="rightDiff"
+            change-num="[[changeNum]]"
+            patch-num="[[patchRange.patchNum]]"
+            path="[[path]]"
+            content="{{_diff.rightSide}}"
+            prefs="[[prefs]]"
+            can-comment="[[_loggedIn]]"
+            project-config="[[projectConfig]]"
+            on-expand-context="_handleExpandContext"
+            on-thread-height-change="_handleThreadHeightChange"
+            on-add-draft="_handleAddDraft"
+            on-remove-thread="_handleRemoveThread"></gr-diff-side>
+      </div>
+    </div>
+  </template>
+  <script src="gr-diff.js"></script>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
new file mode 100644
index 0000000..485e2cc
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js
@@ -0,0 +1,746 @@
+// Copyright (C) 2016 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'gr-diff',
+
+    /**
+     * Fired when the diff is rendered.
+     *
+     * @event render
+     */
+
+    properties: {
+      availablePatches: Array,
+      changeNum: String,
+      /*
+       * A single object to encompass basePatchNum and patchNum is used
+       * so that both can be set at once without incremental observers
+       * firing after each property changes.
+       */
+      patchRange: Object,
+      path: String,
+      prefs: {
+        type: Object,
+        notify: true,
+      },
+      projectConfig: Object,
+
+      _prefsReady: {
+        type: Object,
+        readOnly: true,
+        value: function() {
+          return new Promise(function(resolve) {
+            this._resolvePrefsReady = resolve;
+          }.bind(this));
+        },
+      },
+      _baseComments: Array,
+      _comments: Array,
+      _drafts: Array,
+      _baseDrafts: Array,
+      /**
+       * Base (left side) comments and drafts grouped by line number.
+       * Only used for initial rendering.
+       */
+      _groupedBaseComments: {
+        type: Object,
+        value: function() { return {}; },
+      },
+      /**
+       * Comments and drafts (right side) grouped by line number.
+       * Only used for initial rendering.
+       */
+      _groupedComments: {
+        type: Object,
+        value: function() { return {}; },
+      },
+      _diffResponse: Object,
+      _diff: {
+        type: Object,
+        value: function() { return {}; },
+      },
+      _loggedIn: {
+        type: Boolean,
+        value: false,
+      },
+      _initialRenderComplete: {
+        type: Boolean,
+        value: false,
+      },
+      _loading: {
+        type: Boolean,
+        value: true,
+      },
+      _savedPrefs: Object,
+
+      _diffRequestsPromise: Object,  // Used for testing.
+      _diffPreferencesPromise: Object,  // Used for testing.
+    },
+
+    behaviors: [
+      Gerrit.RESTClientBehavior,
+    ],
+
+    observers: [
+      '_prefsChanged(prefs.*)',
+    ],
+
+    ready: function() {
+      app.accountReady.then(function() {
+        this._loggedIn = app.loggedIn;
+      }.bind(this));
+    },
+
+    scrollToLine: function(lineNum) {
+      // TODO(andybons): Should this always be the right side?
+      this.$.rightDiff.scrollToLine(lineNum);
+    },
+
+    scrollToNextDiffChunk: function() {
+      this.$.rightDiff.scrollToNextDiffChunk();
+    },
+
+    scrollToPreviousDiffChunk: function() {
+      this.$.rightDiff.scrollToPreviousDiffChunk();
+    },
+
+    scrollToNextCommentThread: function() {
+      this.$.rightDiff.scrollToNextCommentThread();
+    },
+
+    scrollToPreviousCommentThread: function() {
+      this.$.rightDiff.scrollToPreviousCommentThread();
+    },
+
+    reload: function(changeNum, patchRange, path) {
+      // If a diff takes a considerable amount of time to render, the previous
+      // diff can end up showing up while the DOM is constructed. Clear the
+      // content on a reload to prevent this.
+      this._diff = {
+        leftSide: [],
+        rightSide: [],
+      };
+
+      var promises = [
+        this._prefsReady,
+        this.$.diffXHR.generateRequest().completes
+      ];
+
+      var basePatchNum = this.patchRange.basePatchNum;
+
+      return app.accountReady.then(function() {
+        promises.push(this._getCommentsAndDrafts(basePatchNum, app.loggedIn));
+        this._diffRequestsPromise = Promise.all(promises).then(function() {
+          this._render();
+        }.bind(this)).catch(function(err) {
+          alert('Oops. Something went wrong. Check the console and bug the ' +
+              'PolyGerrit team for assistance.');
+          throw err;
+        });
+      }.bind(this));
+    },
+
+    showDiffPreferences: function() {
+      this.$.prefsOverlay.open();
+    },
+
+    _prefsChanged: function(changeRecord) {
+      if (this._initialRenderComplete) {
+        this._render();
+      }
+      this._resolvePrefsReady(changeRecord.base);
+    },
+
+    _render: function() {
+      this._groupCommentsAndDrafts();
+      this._processContent();
+
+      // Allow for the initial rendering to complete before firing the event.
+      this.async(function() {
+        this.fire('render', null, {bubbles: false});
+      }.bind(this), 1);
+
+      this._initialRenderComplete = true;
+    },
+
+    _getCommentsAndDrafts: function(basePatchNum, loggedIn) {
+      function onlyParent(c) { return c.side == 'PARENT'; }
+      function withoutParent(c) { return c.side != 'PARENT'; }
+
+      var promises = [];
+      var commentsPromise = this.$.commentsXHR.generateRequest().completes;
+      promises.push(commentsPromise.then(function(req) {
+        var comments = req.response[this.path] || [];
+        if (basePatchNum == 'PARENT') {
+          this._baseComments = comments.filter(onlyParent);
+        }
+        this._comments = comments.filter(withoutParent);
+      }.bind(this)));
+
+      if (basePatchNum != 'PARENT') {
+        commentsPromise = this.$.baseCommentsXHR.generateRequest().completes;
+        promises.push(commentsPromise.then(function(req) {
+          this._baseComments =
+            (req.response[this.path] || []).filter(withoutParent);
+        }.bind(this)));
+      }
+
+      if (!loggedIn) {
+        this._baseDrafts = [];
+        this._drafts = [];
+        return Promise.all(promises);
+      }
+
+      var draftsPromise = this.$.draftsXHR.generateRequest().completes;
+      promises.push(draftsPromise.then(function(req) {
+        var drafts = req.response[this.path] || [];
+        if (basePatchNum == 'PARENT') {
+          this._baseDrafts = drafts.filter(onlyParent);
+        }
+        this._drafts = drafts.filter(withoutParent);
+      }.bind(this)));
+
+      if (basePatchNum != 'PARENT') {
+        draftsPromise = this.$.baseDraftsXHR.generateRequest().completes;
+        promises.push(draftsPromise.then(function(req) {
+          this._baseDrafts =
+              (req.response[this.path] || []).filter(withoutParent);
+        }.bind(this)));
+      }
+
+      return Promise.all(promises);
+    },
+
+    _computeDiffPath: function(changeNum, patchNum, path) {
+      return this.changeBaseURL(changeNum, patchNum) + '/files/' +
+          encodeURIComponent(path) + '/diff';
+    },
+
+    _computeCommentsPath: function(changeNum, patchNum) {
+      return this.changeBaseURL(changeNum, patchNum) + '/comments';
+    },
+
+    _computeDraftsPath: function(changeNum, patchNum) {
+      return this.changeBaseURL(changeNum, patchNum) + '/drafts';
+    },
+
+    _computeDiffQueryParams: function(basePatchNum) {
+      var params =  {
+        context: 'ALL',
+        intraline: null
+      };
+      if (basePatchNum != 'PARENT') {
+        params.base = basePatchNum;
+      }
+      return params;
+    },
+
+    _handlePrefsTap: function(e) {
+      e.preventDefault();
+
+      // TODO(andybons): This is not supported in IE. Implement a polyfill.
+      // NOTE: Object.assign is NOT automatically a deep copy. If prefs adds
+      // an object as a value, it must be marked enumerable.
+      this._savedPrefs = Object.assign({}, this.prefs);
+      this.$.prefsOverlay.open();
+    },
+
+    _handlePrefsSave: function(e) {
+      e.stopPropagation();
+      var el = Polymer.dom(e).rootTarget;
+      el.disabled = true;
+      app.accountReady.then(function() {
+        if (!this._loggedIn) {
+          el.disabled = false;
+          this.$.prefsOverlay.close();
+          return;
+        }
+        this._saveDiffPreferences().then(function() {
+          this.$.prefsOverlay.close();
+          el.disabled = false;
+        }.bind(this)).catch(function(err) {
+          el.disabled = false;
+          alert('Oops. Something went wrong. Check the console and bug the ' +
+                'PolyGerrit team for assistance.');
+          throw err;
+        });
+      }.bind(this));
+    },
+
+    _saveDiffPreferences: function() {
+      var xhr = document.createElement('gr-request');
+      this._diffPreferencesPromise = xhr.send({
+        method: 'PUT',
+        url: '/accounts/self/preferences.diff',
+        body: this.prefs,
+      });
+      return this._diffPreferencesPromise;
+    },
+
+    _handlePrefsCancel: function(e) {
+      e.stopPropagation();
+      this.prefs = this._savedPrefs;
+      this.$.prefsOverlay.close();
+    },
+
+    _handleExpandContext: function(e) {
+      var ctx = e.detail.context;
+      var contextControlIndex = -1;
+      for (var i = ctx.start; i <= ctx.end; i++) {
+        this._diff.leftSide[i].hidden = false;
+        this._diff.rightSide[i].hidden = false;
+        if (this._diff.leftSide[i].type == 'CONTEXT_CONTROL' &&
+            this._diff.rightSide[i].type == 'CONTEXT_CONTROL') {
+          contextControlIndex = i;
+        }
+      }
+      this._diff.leftSide[contextControlIndex].hidden = true;
+      this._diff.rightSide[contextControlIndex].hidden = true;
+
+      this.$.leftDiff.hideElementsWithIndex(contextControlIndex);
+      this.$.rightDiff.hideElementsWithIndex(contextControlIndex);
+
+      this.$.leftDiff.renderLineIndexRange(ctx.start, ctx.end);
+      this.$.rightDiff.renderLineIndexRange(ctx.start, ctx.end);
+    },
+
+    _handleThreadHeightChange: function(e) {
+      var index = e.detail.index;
+      var diffEl = Polymer.dom(e).rootTarget;
+      var otherSide = diffEl == this.$.leftDiff ?
+          this.$.rightDiff : this.$.leftDiff;
+
+      var threadHeight = e.detail.height;
+      var otherSideHeight;
+      if (otherSide.content[index].type == 'COMMENT_THREAD') {
+        otherSideHeight = otherSide.getRowNaturalHeight(index);
+      } else {
+        otherSideHeight = otherSide.getRowHeight(index);
+      }
+      var maxHeight = Math.max(threadHeight, otherSideHeight);
+      this.$.leftDiff.setRowHeight(index, maxHeight);
+      this.$.rightDiff.setRowHeight(index, maxHeight);
+    },
+
+    _handleAddDraft: function(e) {
+      var insertIndex = e.detail.index + 1;
+      var diffEl = Polymer.dom(e).rootTarget;
+      var content = diffEl.content;
+      if (content[insertIndex] &&
+          content[insertIndex].type == 'COMMENT_THREAD') {
+        // A thread is already here. Do nothing.
+        return;
+      }
+      var comment = {
+        type: 'COMMENT_THREAD',
+        comments: [{
+          __draft: true,
+          __draftID: Math.random().toString(36),
+          line: e.detail.line,
+          path: this.path,
+        }]
+      };
+      if (diffEl == this.$.leftDiff &&
+          this.patchRange.basePatchNum == 'PARENT') {
+        comment.comments[0].side = 'PARENT';
+        comment.patchNum = this.patchRange.patchNum;
+      }
+
+      if (content[insertIndex] &&
+          content[insertIndex].type == 'FILLER') {
+        content[insertIndex] = comment;
+        diffEl.rowUpdated(insertIndex);
+      } else {
+        content.splice(insertIndex, 0, comment);
+        diffEl.rowInserted(insertIndex);
+      }
+
+      var otherSide = diffEl == this.$.leftDiff ?
+          this.$.rightDiff : this.$.leftDiff;
+      if (otherSide.content[insertIndex] == null ||
+          otherSide.content[insertIndex].type != 'COMMENT_THREAD') {
+        otherSide.content.splice(insertIndex, 0, {
+          type: 'FILLER',
+        });
+        otherSide.rowInserted(insertIndex);
+      }
+    },
+
+    _handleRemoveThread: function(e) {
+      var diffEl = Polymer.dom(e).rootTarget;
+      var otherSide = diffEl == this.$.leftDiff ?
+          this.$.rightDiff : this.$.leftDiff;
+      var index = e.detail.index;
+
+      if (otherSide.content[index].type == 'FILLER') {
+        otherSide.content.splice(index, 1);
+        otherSide.rowRemoved(index);
+        diffEl.content.splice(index, 1);
+        diffEl.rowRemoved(index);
+      } else if (otherSide.content[index].type == 'COMMENT_THREAD') {
+        diffEl.content[index] = {type: 'FILLER'};
+        diffEl.rowUpdated(index);
+        var height = otherSide.setRowNaturalHeight(index);
+        diffEl.setRowHeight(index, height);
+      } else {
+        throw Error('A thread cannot be opposite anything but filler or ' +
+            'another thread');
+      }
+    },
+
+    _processContent: function() {
+      var leftSide = [];
+      var rightSide = [];
+      var initialLineNum = 0 + (this._diffResponse.content.skip || 0);
+      var ctx = {
+        hidingLines: false,
+        lastNumLinesHidden: 0,
+        left: {
+          lineNum: initialLineNum,
+        },
+        right: {
+          lineNum: initialLineNum,
+        }
+      };
+      var content = this._breakUpCommonChunksWithComments(ctx,
+          this._diffResponse.content);
+      var context = this.prefs.context;
+      if (context == -1) {
+        // Show the entire file.
+        context = Infinity;
+      }
+      for (var i = 0; i < content.length; i++) {
+        if (i == 0) {
+          ctx.skipRange = [0, context];
+        } else if (i == content.length - 1) {
+          ctx.skipRange = [context, 0];
+        } else {
+          ctx.skipRange = [context, context];
+        }
+        ctx.diffChunkIndex = i;
+        this._addDiffChunk(ctx, content[i], leftSide, rightSide);
+      }
+
+      this._diff = {
+        leftSide: leftSide,
+        rightSide: rightSide,
+      };
+    },
+
+    // In order to show comments out of the bounds of the selected context,
+    // treat them as diffs within the model so that the content (and context
+    // surrounding it) renders correctly.
+    _breakUpCommonChunksWithComments: function(ctx, content) {
+      var result = [];
+      var leftLineNum = ctx.left.lineNum;
+      var rightLineNum = ctx.right.lineNum;
+      for (var i = 0; i < content.length; i++) {
+        if (!content[i].ab) {
+          result.push(content[i]);
+          if (content[i].a) {
+            leftLineNum += content[i].a.length;
+          }
+          if (content[i].b) {
+            rightLineNum += content[i].b.length;
+          }
+          continue;
+        }
+        var chunk = content[i].ab;
+        var currentChunk = {ab: []};
+        for (var j = 0; j < chunk.length; j++) {
+          leftLineNum++;
+          rightLineNum++;
+          if (this._groupedBaseComments[leftLineNum] == null &&
+              this._groupedComments[rightLineNum] == null) {
+            currentChunk.ab.push(chunk[j]);
+          } else {
+            if (currentChunk.ab && currentChunk.ab.length > 0) {
+              result.push(currentChunk);
+              currentChunk = {ab: []};
+            }
+            // Append an annotation to indicate that this line should not be
+            // highlighted even though it's implied with both `a` and `b`
+            // defined. This is needed since there may be two lines that
+            // should be highlighted but are equal (blank lines, for example).
+            result.push({
+              __noHighlight: true,
+              a: [chunk[j]],
+              b: [chunk[j]],
+            });
+          }
+        }
+        if (currentChunk.ab != null && currentChunk.ab.length > 0) {
+          result.push(currentChunk);
+        }
+      }
+      return result;
+    },
+
+    _groupCommentsAndDrafts: function() {
+      this._baseDrafts.forEach(function(d) { d.__draft = true; });
+      this._drafts.forEach(function(d) { d.__draft = true; });
+      var allLeft = this._baseComments.concat(this._baseDrafts);
+      var allRight = this._comments.concat(this._drafts);
+
+      var leftByLine = {};
+      var rightByLine = {};
+      var mapFunc = function(byLine) {
+        return function(c) {
+          // File comments/drafts are grouped with line 1 for now.
+          var line = c.line || 1;
+          if (byLine[line] == null) {
+            byLine[line] = [];
+          }
+          byLine[line].push(c);
+        };
+      };
+      allLeft.forEach(mapFunc(leftByLine));
+      allRight.forEach(mapFunc(rightByLine));
+
+      this._groupedBaseComments = leftByLine;
+      this._groupedComments = rightByLine;
+    },
+
+    _addContextControl: function(ctx, leftSide, rightSide) {
+      var numLinesHidden = ctx.lastNumLinesHidden;
+      var leftStart = leftSide.length - numLinesHidden;
+      var leftEnd = leftSide.length;
+      var rightStart = rightSide.length - numLinesHidden;
+      var rightEnd = rightSide.length;
+      if (leftStart != rightStart || leftEnd != rightEnd) {
+        throw Error(
+            'Left and right ranges for context control should be equal:' +
+            'Left: [' + leftStart + ', ' + leftEnd + '] ' +
+            'Right: [' + rightStart + ', ' + rightEnd + ']');
+      }
+      var obj = {
+        type: 'CONTEXT_CONTROL',
+        numLines: numLinesHidden,
+        start: leftStart,
+        end: leftEnd,
+      };
+      // NOTE: Be careful, here. This object is meant to be immutable. If the
+      // object is altered within one side's array it will reflect the
+      // alterations in another.
+      leftSide.push(obj);
+      rightSide.push(obj);
+    },
+
+    _addCommonDiffChunk: function(ctx, chunk, leftSide, rightSide) {
+      for (var i = 0; i < chunk.ab.length; i++) {
+        var numLines = Math.ceil(
+            this._visibleLineLength(chunk.ab[i]) / this.prefs.line_length);
+        var hidden = i >= ctx.skipRange[0] &&
+            i < chunk.ab.length - ctx.skipRange[1];
+        if (ctx.hidingLines && hidden == false) {
+          // No longer hiding lines. Add a context control.
+          this._addContextControl(ctx, leftSide, rightSide);
+          ctx.lastNumLinesHidden = 0;
+        }
+        ctx.hidingLines = hidden;
+        if (hidden) {
+          ctx.lastNumLinesHidden++;
+        }
+
+        // Blank lines within a diff content array indicate a newline.
+        leftSide.push({
+          type: 'CODE',
+          hidden: hidden,
+          content: chunk.ab[i] || '\n',
+          numLines: numLines,
+          lineNum: ++ctx.left.lineNum,
+        });
+        rightSide.push({
+          type: 'CODE',
+          hidden: hidden,
+          content: chunk.ab[i] || '\n',
+          numLines: numLines,
+          lineNum: ++ctx.right.lineNum,
+        });
+
+        this._addCommentsIfPresent(ctx, leftSide, rightSide);
+      }
+      if (ctx.lastNumLinesHidden > 0) {
+        this._addContextControl(ctx, leftSide, rightSide);
+      }
+    },
+
+    _addDiffChunk: function(ctx, chunk, leftSide, rightSide) {
+      if (chunk.ab) {
+        this._addCommonDiffChunk(ctx, chunk, leftSide, rightSide);
+        return;
+      }
+
+      var leftHighlights = [];
+      if (chunk.edit_a) {
+        leftHighlights =
+            this._normalizeIntralineHighlights(chunk.a, chunk.edit_a);
+      }
+      var rightHighlights = [];
+      if (chunk.edit_b) {
+        rightHighlights =
+            this._normalizeIntralineHighlights(chunk.b, chunk.edit_b);
+      }
+
+      var aLen = (chunk.a && chunk.a.length) || 0;
+      var bLen = (chunk.b && chunk.b.length) || 0;
+      var maxLen = Math.max(aLen, bLen);
+      for (var i = 0; i < maxLen; i++) {
+        var hasLeftContent = chunk.a && i < chunk.a.length;
+        var hasRightContent = chunk.b && i < chunk.b.length;
+        var leftContent = hasLeftContent ? chunk.a[i] : '';
+        var rightContent = hasRightContent ? chunk.b[i] : '';
+        var highlight = !chunk.__noHighlight;
+        var maxNumLines = this._maxLinesSpanned(leftContent, rightContent);
+        if (hasLeftContent) {
+          leftSide.push({
+            type: 'CODE',
+            content: leftContent || '\n',
+            numLines: maxNumLines,
+            lineNum: ++ctx.left.lineNum,
+            highlight: highlight,
+            intraline: highlight && leftHighlights.filter(function(hl) {
+              return hl.contentIndex == i;
+            }),
+          });
+        } else {
+          leftSide.push({
+            type: 'FILLER',
+            numLines: maxNumLines,
+          });
+        }
+        if (hasRightContent) {
+          rightSide.push({
+            type: 'CODE',
+            content: rightContent || '\n',
+            numLines: maxNumLines,
+            lineNum: ++ctx.right.lineNum,
+            highlight: highlight,
+            intraline: highlight && rightHighlights.filter(function(hl) {
+              return hl.contentIndex == i;
+            }),
+          });
+        } else {
+          rightSide.push({
+            type: 'FILLER',
+            numLines: maxNumLines,
+          });
+        }
+        this._addCommentsIfPresent(ctx, leftSide, rightSide);
+      }
+    },
+
+    _addCommentsIfPresent: function(ctx, leftSide, rightSide) {
+      var leftComments = this._groupedBaseComments[ctx.left.lineNum];
+      var rightComments = this._groupedComments[ctx.right.lineNum];
+      if (leftComments) {
+        var thread = {
+          type: 'COMMENT_THREAD',
+          comments: leftComments,
+        };
+        if (this.patchRange.basePatchNum == 'PARENT') {
+          thread.patchNum = this.patchRange.patchNum;
+        }
+        leftSide.push(thread);
+      }
+      if (rightComments) {
+        rightSide.push({
+          type: 'COMMENT_THREAD',
+          comments: rightComments,
+        });
+      }
+      if (leftComments && !rightComments) {
+        rightSide.push({type: 'FILLER'});
+      } else if (!leftComments && rightComments) {
+        leftSide.push({type: 'FILLER'});
+      }
+      this._groupedBaseComments[ctx.left.lineNum] = null;
+      this._groupedComments[ctx.right.lineNum] = null;
+    },
+
+    // The `highlights` array consists of a list of <skip length, mark length>
+    // pairs, where the skip length is the number of characters between the
+    // end of the previous edit and the start of this edit, and the mark
+    // length is the number of edited characters following the skip. The start
+    // of the edits is from the beginning of the related diff content lines.
+    //
+    // Note that the implied newline character at the end of each line is
+    // included in the length calculation, and thus it is possible for the
+    // edits to span newlines.
+    //
+    // A line highlight object consists of three fields:
+    // - contentIndex: The index of the diffChunk `content` field (the line
+    //   being referred to).
+    // - startIndex: Where the highlight should begin.
+    // - endIndex: (optional) Where the highlight should end. If omitted, the
+    //   highlight is meant to be a continuation onto the next line.
+    _normalizeIntralineHighlights: function(content, highlights) {
+      var contentIndex = 0;
+      var idx = 0;
+      var normalized = [];
+      for (var i = 0; i < highlights.length; i++) {
+        var line = content[contentIndex] + '\n';
+        var hl = highlights[i];
+        var j = 0;
+        while (j < hl[0]) {
+          if (idx == line.length) {
+            idx = 0;
+            line = content[++contentIndex] + '\n';
+            continue;
+          }
+          idx++;
+          j++;
+        }
+        var lineHighlight = {
+          contentIndex: contentIndex,
+          startIndex: idx,
+        };
+
+        j = 0;
+        while (line && j < hl[1]) {
+          if (idx == line.length) {
+            idx = 0;
+            line = content[++contentIndex] + '\n';
+            normalized.push(lineHighlight);
+            lineHighlight = {
+              contentIndex: contentIndex,
+              startIndex: idx,
+            };
+            continue;
+          }
+          idx++;
+          j++;
+        }
+        lineHighlight.endIndex = idx;
+        normalized.push(lineHighlight);
+      }
+      return normalized;
+    },
+
+    _visibleLineLength: function(contents) {
+      // http://jsperf.com/performance-of-match-vs-split
+      var numTabs = contents.split('\t').length - 1;
+      return contents.length - numTabs + (this.prefs.tab_size * numTabs);
+    },
+
+    _maxLinesSpanned: function(left, right) {
+      return Math.max(
+          Math.ceil(this._visibleLineLength(left) / this.prefs.line_length),
+          Math.ceil(this._visibleLineLength(right) / this.prefs.line_length));
+    },
+  });
+})();
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html
new file mode 100644
index 0000000..9a8cb81
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html
@@ -0,0 +1,574 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2015 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-diff</title>
+
+<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+<script src="../../../scripts/fake-app.js"></script>
+<script src="../../../scripts/util.js"></script>
+
+<link rel="import" href="../../../bower_components/iron-test-helpers/iron-test-helpers.html">
+<link rel="import" href="gr-diff.html">
+
+<test-fixture id="basic">
+  <template>
+    <gr-diff></gr-diff>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-diff tests', function() {
+    var element;
+    var server;
+
+    setup(function() {
+      element = fixture('basic');
+      element.changeNum = 42;
+      element.path = 'sieve.go';
+      element.prefs = {
+        context: 10,
+        tab_size: 8,
+      };
+
+      server = sinon.fakeServer.create();
+      server.respondWith(
+        'GET',
+        /\/changes\/42\/revisions\/(1|2)\/files\/sieve\.go\/diff(.*)/,
+        [
+          200,
+          {'Content-Type': 'application/json'},
+          ')]}\'\n' +
+          JSON.stringify({
+            change_type: 'MODIFIED',
+            content: [
+              {
+                ab: [
+                  '<!DOCTYPE html>',
+                  '<meta charset="utf-8">',
+                  '<title>My great page</title>',
+                  '<style>',
+                  '  *,',
+                  '  *:before,',
+                  '  *:after {',
+                  '    box-sizing: border-box;',
+                  '  }',
+                  '</style>',
+                  '<header>',
+                ]
+              },
+              {
+                a: [
+                  '  Welcome ',
+                  '  to the wooorld of tomorrow!',
+                ],
+                b: [
+                  '  Hello, world!',
+                ],
+              },
+              {
+                ab: [
+                  '</header>',
+                  '<body>',
+                  'Leela: This is the only place the ship can’t hear us, so ',
+                  'everyone pretend to shower.',
+                  'Fry: Same as every day. Got it.',
+                ]
+              },
+            ]
+          }),
+        ]
+      );
+      server.respondWith(
+        'GET',
+        '/changes/42/revisions/1/comments',
+        [
+          200,
+          {'Content-Type': 'application/json'},
+          ')]}\'\n' +
+          JSON.stringify({
+            '/COMMIT_MSG': [],
+            'sieve.go': [
+              {
+                author: {
+                  _account_id: 1000000,
+                  name: 'Andrew Bonventre',
+                  email: 'andybons@gmail.com',
+                },
+                id: '9af53d3f_5f2b8b82',
+                line: 1,
+                message: 'this isn’t quite right',
+                updated: '2015-12-10 02:50:21.627000000',
+              },
+              {
+                author: {
+                  _account_id: 1000000,
+                  name: 'Andrew Bonventre',
+                  email: 'andybons@gmail.com',
+                },
+                id: '9af53d3f_bf1cd76b',
+                line: 1,
+                side: 'PARENT',
+                message: 'how did this work in the first place?',
+                updated: '2015-12-10 00:08:42.255000000',
+              },
+            ],
+          }),
+        ]
+      );
+      server.respondWith(
+        'GET',
+        '/changes/42/revisions/2/comments',
+        [
+          200,
+          {'Content-Type': 'application/json'},
+          ')]}\'\n' +
+          JSON.stringify({
+            '/COMMIT_MSG': [],
+            'sieve.go': [
+              {
+                author: {
+                  _account_id: 1010008,
+                  name: 'Dave Borowitz',
+                  email: 'dborowitz@google.com',
+                },
+                id: '001a2067_f30f3048',
+                line: 12,
+                message: 'What on earth are you thinking, here?',
+                updated: '2015-12-12 02:51:37.973000000',
+              },
+              {
+                author: {
+                  _account_id: 1010008,
+                  name: 'Dave Borowitz',
+                  email: 'dborowitz@google.com',
+                },
+                id: '001a2067_f6b1b1c8',
+                in_reply_to: '9af53d3f_bf1cd76b',
+                line: 1,
+                side: 'PARENT',
+                message: 'Yeah not sure how this worked either?',
+                updated: '2015-12-12 02:51:37.973000000',
+              },
+              {
+                author: {
+                  _account_id: 1000000,
+                  name: 'Andrew Bonventre',
+                  email: 'andybons@gmail.com',
+                },
+                id: 'a0407443_30dfe8fb',
+                in_reply_to: '001a2067_f30f3048',
+                line: 12,
+                message: '¯\\_(ツ)_/¯',
+                updated: '2015-12-12 18:50:21.627000000',
+              },
+            ],
+          }),
+        ]
+      );
+
+      server.respondWith(
+        'PUT',
+        '/accounts/self/preferences.diff',
+        [
+          200,
+          {'Content-Type': 'application/json'},
+          ')]}\'\n' +
+          JSON.stringify({context: 25}),
+        ]
+      );
+
+    });
+
+    teardown(function() {
+      server.restore();
+    });
+
+    test('comments with parent', function(done) {
+      element.patchRange = {
+        basePatchNum: 'PARENT',
+        patchNum: 1,
+      };
+
+      element.reload();
+      server.respond();
+
+      element._diffRequestsPromise.then(function() {
+        assert.equal(element._baseComments.length, 1);
+        assert.equal(element._comments.length, 1);
+        assert.equal(element._baseDrafts.length, 0);
+        assert.equal(element._drafts.length, 0);
+        done();
+      });
+    });
+
+    test('comments between two patches', function(done) {
+      element.patchRange = {
+        basePatchNum: 1,
+        patchNum: 2,
+      };
+
+      element.reload();
+      server.respond();
+
+      element._diffRequestsPromise.then(function() {
+        assert.equal(element._baseComments.length, 1);
+        assert.equal(element._comments.length, 2);
+        assert.equal(element._baseDrafts.length, 0);
+        assert.equal(element._drafts.length, 0);
+        done();
+      });
+    });
+
+    test('comment rendering', function(done) {
+      element.prefs.context = -1;
+      element._loggedIn = true;
+      element.patchRange = {
+        basePatchNum: 1,
+        patchNum: 2,
+      };
+
+      element.reload();
+      server.respond();
+
+      // Allow events to fire and the threads to render.
+      element.async(function() {
+        var leftThreadEls =
+            Polymer.dom(element.$.leftDiff.root).querySelectorAll(
+                'gr-diff-comment-thread');
+        assert.equal(leftThreadEls.length, 1);
+        assert.equal(leftThreadEls[0].comments.length, 1);
+
+        var rightThreadEls =
+            Polymer.dom(element.$.rightDiff.root).querySelectorAll(
+                'gr-diff-comment-thread');
+        assert.equal(rightThreadEls.length, 1);
+        assert.equal(rightThreadEls[0].comments.length, 2);
+
+        var index = leftThreadEls[0].getAttribute('data-index');
+        var leftFillerEls =
+            Polymer.dom(element.$.leftDiff.root).querySelectorAll(
+                '.commentThread.filler[data-index="' + index + '"]');
+        assert.equal(leftFillerEls.length, 1);
+        var rightFillerEls =
+            Polymer.dom(element.$.rightDiff.root).querySelectorAll(
+                '[data-index="' + index + '"]');
+        assert.equal(rightFillerEls.length, 2);
+
+        for (var i = 0; i < rightFillerEls.length; i++) {
+          assert.isTrue(rightFillerEls[i].classList.contains('filler'));
+        }
+        var originalHeight = rightFillerEls[0].offsetHeight;
+        assert.equal(rightFillerEls[1].offsetHeight, originalHeight);
+        assert.equal(leftThreadEls[0].offsetHeight, originalHeight);
+        assert.equal(leftFillerEls[0].offsetHeight, originalHeight);
+
+        // Create a comment on the opposite side of the first comment.
+        var rightLineEL = element.$.rightDiff.$$(
+              '.lineNum[data-index="' + (index - 1) + '"]');
+        assert.ok(rightLineEL);
+        MockInteractions.tap(rightLineEL);
+        element.async(function() {
+          var newThreadEls =
+            Polymer.dom(element.$.rightDiff.root).querySelectorAll(
+                '[data-index="' + index + '"]');
+          assert.equal(newThreadEls.length, 2);
+          for (var i = 0; i < newThreadEls.length; i++) {
+            assert.isTrue(
+                newThreadEls[i].classList.contains('commentThread') ||
+                newThreadEls[i].tagName == 'GR-DIFF-COMMENT-THREAD');
+          }
+          var newHeight = newThreadEls[0].offsetHeight;
+          assert.equal(newThreadEls[1].offsetHeight, newHeight);
+          assert.equal(leftFillerEls[0].offsetHeight, newHeight);
+          assert.equal(leftThreadEls[0].offsetHeight, newHeight);
+
+          // The editing mode height of the right comment will be greater than
+          // the non-editing mode height of the left comment.
+          assert.isAbove(newHeight, originalHeight);
+
+          // Discard the right thread and ensure the left comment heights are
+          // back to their original values.
+          newThreadEls[1].addEventListener('discard', function() {
+            rightFillerEls =
+                Polymer.dom(element.$.rightDiff.root).querySelectorAll(
+                    '[data-index="' + index + '"]');
+            assert.equal(rightFillerEls.length, 2);
+
+            for (var i = 0; i < rightFillerEls.length; i++) {
+              assert.isTrue(rightFillerEls[i].classList.contains('filler'));
+            }
+            var originalHeight = rightFillerEls[0].offsetHeight;
+            assert.equal(rightFillerEls[1].offsetHeight, originalHeight);
+            assert.equal(leftThreadEls[0].offsetHeight, originalHeight);
+            assert.equal(leftFillerEls[0].offsetHeight, originalHeight);
+            done();
+          });
+          var commentEl = newThreadEls[1].$$('gr-diff-comment');
+          commentEl.fire('discard', null, {bubbles: false});
+        }, 1);
+      }, 1);
+    });
+
+    test('intraline normalization', function() {
+      // The content and highlights are in the format returned by the Gerrit
+      // REST API.
+      var content = [
+        '      <section class="summary">',
+        '        <gr-linked-text content="' +
+            '[[_computeCurrentRevisionMessage(change)]]"></gr-linked-text>',
+        '      </section>',
+      ];
+      var highlights = [
+        [31, 34], [42, 26]
+      ];
+      var results = element._normalizeIntralineHighlights(content, highlights);
+      assert.deepEqual(results, [
+        {
+          contentIndex: 0,
+          startIndex: 31,
+        },
+        {
+          contentIndex: 1,
+          startIndex: 0,
+          endIndex: 33,
+        },
+        {
+          contentIndex: 1,
+          startIndex: 75,
+        },
+        {
+          contentIndex: 2,
+          startIndex: 0,
+          endIndex: 6,
+        }
+      ]);
+
+      content = [
+        '        this._path = value.path;',
+        '',
+        '        // When navigating away from the page, there is a possibility that the',
+        '        // patch number is no longer a part of the URL (say when navigating to',
+        '        // the top-level change info view) and therefore undefined in `params`.',
+        '        if (!this._patchRange.patchNum) {',
+      ];
+      highlights = [
+        [14, 17],
+        [11, 70],
+        [12, 67],
+        [12, 67],
+        [14, 29],
+      ];
+      results = element._normalizeIntralineHighlights(content, highlights);
+      assert.deepEqual(results, [
+        {
+          contentIndex: 0,
+          startIndex: 14,
+          endIndex: 31,
+        },
+        {
+          contentIndex: 2,
+          startIndex: 8,
+          endIndex: 78,
+        },
+        {
+          contentIndex: 3,
+          startIndex: 11,
+          endIndex: 78,
+        },
+        {
+          contentIndex: 4,
+          startIndex: 11,
+          endIndex: 78,
+        },
+        {
+          contentIndex: 5,
+          startIndex: 12,
+          endIndex: 41,
+        }
+      ]);
+    });
+
+    test('context', function() {
+      element.prefs.context = 3;
+      element._diffResponse = {
+        content: [
+          {
+            ab: [
+              '<!DOCTYPE html>',
+              '<meta charset="utf-8">',
+              '<title>My great page</title>',
+              '<style>',
+              '  *,',
+              '  *:before,',
+              '  *:after {',
+              '    box-sizing: border-box;',
+              '  }',
+              '</style>',
+              '<header>',
+            ]
+          },
+          {
+            a: [
+              '  Welcome ',
+              '  to the wooorld of tomorrow!',
+            ],
+            b: [
+              '  Hello, world!',
+            ],
+          },
+          {
+            ab: [
+              '</header>',
+              '<body>',
+              'Leela: This is the only place the ship can’t hear us, so ',
+              'everyone pretend to shower.',
+              'Fry: Same as every day. Got it.',
+            ]
+          },
+        ]
+      };
+      element._processContent();
+
+      // First eight lines should be hidden on both sides.
+      for (var i = 0; i < 8; i++) {
+        assert.isTrue(element._diff.leftSide[i].hidden);
+        assert.isTrue(element._diff.rightSide[i].hidden);
+      }
+      // A context control should be at index 8 on both sides.
+      var leftContext = element._diff.leftSide[8];
+      var rightContext = element._diff.rightSide[8];
+      assert.deepEqual(leftContext, rightContext);
+      assert.equal(leftContext.numLines, 8);
+      assert.equal(leftContext.start, 0);
+      assert.equal(leftContext.end, 8);
+
+      // Line indices 9-16 should be shown.
+      for (var i = 9; i <= 16; i++) {
+        // notOk (falsy) because the `hidden` attribute may not be present.
+        assert.notOk(element._diff.leftSide[i].hidden);
+        assert.notOk(element._diff.rightSide[i].hidden);
+      }
+
+      // Lines at indices 17 and 18 should be hidden.
+      assert.isTrue(element._diff.leftSide[17].hidden);
+      assert.isTrue(element._diff.rightSide[17].hidden);
+      assert.isTrue(element._diff.leftSide[18].hidden);
+      assert.isTrue(element._diff.rightSide[18].hidden);
+
+      // Context control at index 19.
+      leftContext = element._diff.leftSide[19];
+      rightContext = element._diff.rightSide[19];
+      assert.deepEqual(leftContext, rightContext);
+      assert.equal(leftContext.numLines, 2);
+      assert.equal(leftContext.start, 17);
+      assert.equal(leftContext.end, 19);
+    });
+
+    test('save prefs', function(done) {
+      element._loggedIn = false;
+
+      element.prefs = {
+        tab_size: 4,
+        context: 50,
+      };
+      element.fire('save', {}, {node: element.$$('gr-diff-preferences')});
+      assert.isTrue(element._diffPreferencesPromise == null);
+
+      element._loggedIn = true;
+      element.fire('save', {}, {node: element.$$('gr-diff-preferences')});
+      server.respond();
+
+      element._diffPreferencesPromise.then(function(req) {
+        assert.equal(req.xhr.requestBody, JSON.stringify(element.prefs));
+        done();
+      });
+    });
+
+    test('visible line length', function() {
+      assert.equal(element._visibleLineLength('A'.repeat(5)), 5);
+      assert.equal(
+          element._visibleLineLength('A'.repeat(5) + '\t' + 'A'.repeat(5)), 18);
+    });
+
+    test('break up common diff chunks', function() {
+      element._groupedBaseComments = {
+        1: {},
+      };
+      element._groupedComments = {
+        10: {},
+      };
+      var ctx = {
+        left: {lineNum: 0},
+        right: {lineNum: 0},
+      };
+      var content = [
+        {
+          ab: [
+            'Copyright (C) 2015 The Android Open Source Project',
+            '',
+            'Licensed under the Apache License, Version 2.0 (the "License");',
+            'you may not use this file except in compliance with the License.',
+            'You may obtain a copy of the License at',
+            '',
+            'http://www.apache.org/licenses/LICENSE-2.0',
+            '',
+            'Unless required by applicable law or agreed to in writing, ',
+            'software distributed under the License is distributed on an ',
+            '"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, ',
+            'either express or implied. See the License for the specific ',
+            'language governing permissions and limitations under the License.',
+          ]
+        }
+      ];
+      var result = element._breakUpCommonChunksWithComments(ctx, content);
+      assert.deepEqual(result, [
+        {
+          __noHighlight: true,
+          a: ['Copyright (C) 2015 The Android Open Source Project'],
+          b: ['Copyright (C) 2015 The Android Open Source Project'],
+        },
+        {
+          ab: [
+            '',
+            'Licensed under the Apache License, Version 2.0 (the "License");',
+            'you may not use this file except in compliance with the License.',
+            'You may obtain a copy of the License at',
+            '',
+            'http://www.apache.org/licenses/LICENSE-2.0',
+            '',
+            'Unless required by applicable law or agreed to in writing, ',
+          ]
+        },
+        {
+          __noHighlight: true,
+          a: ['software distributed under the License is distributed on an '],
+          b: ['software distributed under the License is distributed on an ']
+        },
+        {
+          ab: [
+            '"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, ',
+            'either express or implied. See the License for the specific ',
+            'language governing permissions and limitations under the License.',
+          ]
+        }
+      ]);
+    });
+  });
+
+</script>