Add gr-diff-host shell delegating to gr-diff

In this CL, I am simply forwarding the entire API to gr-diff. In
follow-up CLs, I will move the restAPI calls over, but I think it will
be easier to understand the changes when all the forwarding is already
out of the way.

I decided not to touch the styling applied to gr-diff from gr-diff-view
and gr-file-list because that currently does not hurt anyone and seems
less risky.

Bug: Issue 9623
Change-Id: Iacc82198b04b048dd33c380876b1c8b3a80fac95

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html

@@ -23,7 +23,7 @@ limitations under the License.
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../core/gr-navigation/gr-navigation.html">
 <link rel="import" href="../../core/gr-reporting/gr-reporting.html">
-<link rel="import" href="../../diff/gr-diff/gr-diff.html">
+<link rel="import" href="../../diff/gr-diff-host/gr-diff-host.html">
 <link rel="import" href="../../diff/gr-diff-cursor/gr-diff-cursor.html">
 <link rel="import" href="../../edit/gr-edit-file-controls/gr-edit-file-controls.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
@@ -388,7 +388,7 @@ limitations under the License.
           </div>
           <template is="dom-if"
               if="[[_isFileExpanded(file.__path, _expandedFilePaths.*)]]">
-            <gr-diff
+            <gr-diff-host
                 no-auto-render
                 show-load-failure
                 display-line="[[_displayLine]]"
@@ -402,7 +402,7 @@ limitations under the License.
                 project-config="[[projectConfig]]"
                 on-line-selected="_onLineSelected"
                 no-render-on-prefs-change
-                view-mode="[[diffViewMode]]"></gr-diff>
+                view-mode="[[diffViewMode]]"></gr-diff-host>
           </template>
         </div>
       </template>

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.js

@@ -282,7 +282,7 @@
     },
 
     get diffs() {
-      return Polymer.dom(this.root).querySelectorAll('gr-diff');
+      return Polymer.dom(this.root).querySelectorAll('gr-diff-host');
     },
 
     openDiffPrefs() {
@@ -842,10 +842,9 @@
     },
 
     _updateDiffCursor() {
-      const diffElements = Polymer.dom(this.root).querySelectorAll('gr-diff');
       // Overwrite the cursor's list of diffs:
       this.$.diffCursor.splice(
-          ...['diffs', 0, this.$.diffCursor.diffs.length].concat(diffElements));
+          ...['diffs', 0, this.$.diffCursor.diffs.length].concat(this.diffs));
     },
 
     _filesChanged() {
@@ -969,7 +968,7 @@
      * for each path in order, awaiting the previous render to complete before
      * continung.
      * @param  {!Array<string>} paths
-     * @param  {!NodeList<!Object>} diffElements (GrDiffElement)
+     * @param  {!NodeList<!Object>} diffElements (GrDiffHostElement)
      * @param  {number} initialCount The total number of paths in the pass. This
      *   is used to generate log messages.
      * @return {!Promise}

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.html

@@ -69,7 +69,7 @@ limitations under the License.
       stub('gr-date-formatter', {
         _loadTimeFormat() { return Promise.resolve(''); },
       });
-      stub('gr-diff', {
+      stub('gr-diff-host', {
         reload() { return Promise.resolve(); },
       });
 
@@ -825,7 +825,7 @@ limitations under the License.
 
       // Click inside the diff. This should result in no additional calls to
       // _togglePathExpanded or _reviewFile.
-      Polymer.dom(element.root).querySelector('gr-diff').click();
+      Polymer.dom(element.root).querySelector('gr-diff-host').click();
       assert.isTrue(tapSpy.calledTwice);
       assert.isTrue(toggleExpandSpy.calledOnce);
       assert.isFalse(reviewStub.called);
@@ -1019,6 +1019,8 @@ limitations under the License.
           done();
         },
         cancel() {},
+        getCursorStops() { return []; },
+        addEventListener(eventName, callback) { callback(new Event(eventName)); },
       }];
       sinon.stub(element, 'diffs', {
         get() { return diffs; },
@@ -1349,7 +1351,7 @@ limitations under the License.
 
     const setupDiff = function(diff) {
       const mock = document.createElement('mock-diff-response');
-      diff._diff = mock.diffResponse;
+      diff.$.diff._diff = mock.diffResponse;
       diff.comments = {
         left: diff.path === '/COMMIT_MSG' ? commitMsgComments : [],
         right: [],
@@ -1377,12 +1379,12 @@ limitations under the License.
         theme: 'DEFAULT',
         ignore_whitespace: 'IGNORE_NONE',
       };
-      diff._renderDiffTable();
+      diff.$.diff._renderDiffTable();
     };
 
     const renderAndGetNewDiffs = function(index) {
       const diffs =
-          Polymer.dom(element.root).querySelectorAll('gr-diff');
+          Polymer.dom(element.root).querySelectorAll('gr-diff-host');
 
       for (let i = index; i < diffs.length; i++) {
         setupDiff(diffs[i]);
@@ -1405,7 +1407,7 @@ limitations under the License.
       stub('gr-date-formatter', {
         _loadTimeFormat() { return Promise.resolve(''); },
       });
-      stub('gr-diff', {
+      stub('gr-diff-host', {
         reload() { return Promise.resolve(); },
       });
 

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

@@ -0,0 +1,46 @@
+<!--
+@license
+Copyright (C) 2018 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="../gr-diff/gr-diff.html">
+
+<dom-module id="gr-diff-host">
+  <template>
+    <gr-diff
+        id="diff"
+        change-num="[[changeNum]]"
+        no-auto-render=[[noAutoRender]]
+        patch-range="[[patchRange]]"
+        path="[[path]]"
+        prefs="[[prefs]]"
+        project-config="[[projectConfig]]"
+        project-name="[[projectName]]"
+        display-line="[[displayLine]]"
+        is-image-diff="{{isImageDiff}}"
+        commit-range="[[commitRange]]"
+        files-weblinks="{{filesWeblinks}}"
+        hidden$="[[hidden]]"
+        no-render-on-prefs-change="[[noRenderOnPrefsChange]]"
+        comments="[[comments]]"
+        line-wrapping="[[lineWrapping]]"
+        view-mode="[[viewMode]]"
+        line-of-interest="[[lineOfInterest]]"
+        show-load-failure="[[showLoadFailure]]"
+        is-blame-loaded="{{isBlameLoaded}}"></gr-diff>
+  </template>
+  <script src="gr-diff-host.js"></script>
+</dom-module>

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

@@ -0,0 +1,174 @@
+/**
+ * @license
+ * Copyright (C) 2018 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';
+
+  const DiffViewMode = {
+    SIDE_BY_SIDE: 'SIDE_BY_SIDE',
+    UNIFIED: 'UNIFIED_DIFF',
+  };
+
+  /**
+   * Wrapper around gr-diff.
+   *
+   * Webcomponent fetching diffs and related data from restAPI and passing them
+   * to the presentational gr-diff for rendering.
+   */
+  // TODO(oler): Move all calls to restAPI from gr-diff here.
+  Polymer({
+    is: 'gr-diff-host',
+
+    /**
+     * Fired when the user selects a line.
+     * @event line-selected
+     */
+
+    /**
+     * Fired if being logged in is required.
+     *
+     * @event show-auth-required
+     */
+
+    /**
+     * Fired when a comment is saved or discarded
+     *
+     * @event diff-comments-modified
+     */
+
+    properties: {
+      changeNum: String,
+      noAutoRender: {
+        type: Boolean,
+        value: false,
+      },
+      /** @type {?} */
+      patchRange: Object,
+      path: String,
+      prefs: {
+        type: Object,
+      },
+      projectConfig: {
+        type: Object,
+      },
+      projectName: String,
+      displayLine: {
+        type: Boolean,
+        value: false,
+      },
+      isImageDiff: {
+        type: Boolean,
+        notify: true,
+      },
+      commitRange: Object,
+      filesWeblinks: {
+        type: Object,
+        notify: true,
+      },
+      hidden: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+      noRenderOnPrefsChange: Boolean,
+      comments: Object,
+      lineWrapping: {
+        type: Boolean,
+        value: false,
+      },
+      viewMode: {
+        type: String,
+        value: DiffViewMode.SIDE_BY_SIDE,
+      },
+
+      /**
+       * Special line number which should not be collapsed into a shared region.
+       * @type {{
+       *  number: number,
+       *  leftSide: {boolean}
+       * }|null}
+       */
+      lineOfInterest: Object,
+
+      /**
+       * If the diff fails to load, show the failure message in the diff rather
+       * than bubbling the error up to the whole page. This is useful for when
+       * loading inline diffs because one diff failing need not mark the whole
+       * page with a failure.
+       */
+      showLoadFailure: Boolean,
+
+      isBlameLoaded: {
+        type: Boolean,
+        notify: true,
+      },
+    },
+
+    /** @return {!Promise} */
+    reload() {
+      return this.$.diff.reload();
+    },
+
+    /** Cancel any remaining diff builder rendering work. */
+    cancel() {
+      this.$.diff.cancel();
+    },
+
+    /** @return {!Array<!HTMLElement>} */
+    getCursorStops() {
+      return this.$.diff.getCursorStops();
+    },
+
+    /** @return {boolean} */
+    isRangeSelected() {
+      return this.$.diff.isRangeSelected();
+    },
+
+    toggleLeftDiff() {
+      this.$.diff.toggleLeftDiff();
+    },
+
+    /**
+     * Load and display blame information for the base of the diff.
+     * @return {Promise} A promise that resolves when blame finishes rendering.
+     */
+    loadBlame() {
+      return this.$.diff.loadBlame();
+    },
+
+    /** Unload blame information for the diff. */
+    clearBlame() {
+      this.$.diff.clearBlame();
+    },
+
+    /** @return {!Array<!HTMLElement>} */
+    getThreadEls() {
+      return this.$.diff.getThreadEls();
+    },
+
+    /** @param {HTMLElement} el */
+    addDraftAtLine(el) {
+      this.$.diff.addDraftAtLine(el);
+    },
+
+    clearDiffContent() {
+      this.$.diff.clearDiffContent();
+    },
+
+    expandAllContext() {
+      this.$.diff.expandAllContext();
+    },
+  });
+})();

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

@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright (C) 2018 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-lite.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+<link rel="import" href="../../../test/common-test-setup.html"/>
+
+<link rel="import" href="gr-diff-host.html">
+
+<script>void(0);</script>
+
+<test-fixture id="basic">
+  <template>
+    <gr-diff-host></gr-diff-host>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-diff-host tests', () => {
+    let element;
+    let sandbox;
+
+    setup(() => {
+      sandbox = sinon.sandbox.create();
+    });
+
+    teardown(() => {
+      sandbox.restore();
+    });
+
+    test('delegates reload()', () => {
+      element = fixture('basic');
+      const returnValue = Promise.resolve();
+      const stub = sandbox.stub(element.$.diff, 'reload').returns(returnValue);
+      assert.equal(element.reload(), returnValue);
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates cancel()', () => {
+      element = fixture('basic');
+      const stub = sandbox.stub(element.$.diff, 'cancel');
+      element.reload();
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates getCursorStops()', () => {
+      element = fixture('basic');
+      const returnValue = [document.createElement('b')];
+      const stub = sandbox.stub(element.$.diff, 'getCursorStops')
+          .returns(returnValue);
+      assert.equal(element.getCursorStops(), returnValue);
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates isRangeSelected()', () => {
+      element = fixture('basic');
+      const returnValue = true;
+      const stub = sandbox.stub(element.$.diff, 'isRangeSelected')
+          .returns(returnValue);
+      assert.equal(element.isRangeSelected(), returnValue);
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates toggleLeftDiff()', () => {
+      element = fixture('basic');
+      const stub = sandbox.stub(element.$.diff, 'toggleLeftDiff');
+      element.toggleLeftDiff();
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates loadBlame()', () => {
+      element = fixture('basic');
+      const returnValue = Promise.resolve();
+      const stub = sandbox.stub(element.$.diff, 'loadBlame')
+          .returns(returnValue);
+      assert.equal(element.loadBlame(), returnValue);
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates clearBlame()', () => {
+      element = fixture('basic');
+      const stub = sandbox.stub(element.$.diff, 'clearBlame');
+      element.clearBlame();
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates getThreadEls()', () => {
+      element = fixture('basic');
+      const returnValue = [document.createElement('b')];
+      const stub = sandbox.stub(element.$.diff, 'getThreadEls')
+          .returns(returnValue);
+      assert.equal(element.getThreadEls(), returnValue);
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates addDraftAtLine(el)', () => {
+      element = fixture('basic');
+      const param0 = document.createElement('b');
+      const stub = sandbox.stub(element.$.diff, 'addDraftAtLine');
+      element.addDraftAtLine(param0);
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 1);
+      assert.equal(stub.lastCall.args[0], param0);
+    });
+
+    test('delegates clearDiffContent()', () => {
+      element = fixture('basic');
+      const stub = sandbox.stub(element.$.diff, 'clearDiffContent');
+      element.clearDiffContent();
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('delegates expandAllContext()', () => {
+      element = fixture('basic');
+      const stub = sandbox.stub(element.$.diff, 'expandAllContext');
+      element.expandAllContext();
+      assert.isTrue(stub.calledOnce);
+      assert.equal(stub.lastCall.args.length, 0);
+    });
+
+    test('passes in changeNum', () => {
+      element = fixture('basic');
+      const value = '12345';
+      element.changeNum = value;
+      assert.equal(element.$.diff.changeNum, value);
+    });
+
+    test('passes in noAutoRender', () => {
+      element = fixture('basic');
+      const value = true;
+      element.noAutoRender = value;
+      assert.equal(element.$.diff.noAutoRender, value);
+    });
+
+    test('passes in patchRange', () => {
+      element = fixture('basic');
+      const value = {patchNum: 'foo', basePatchNum: 'bar'};
+      element.patchRange = value;
+      assert.equal(element.$.diff.patchRange, value);
+    });
+
+    test('passes in path', () => {
+      element = fixture('basic');
+      const value = 'some/file/path';
+      element.path = value;
+      assert.equal(element.$.diff.path, value);
+    });
+
+    test('passes in prefs', () => {
+      element = fixture('basic');
+      const value = {};
+      element.prefs = value;
+      assert.equal(element.$.diff.prefs, value);
+    });
+
+    test('passes in projectConfig', () => {
+      element = fixture('basic');
+      const value = {};
+      element.projectConfig = value;
+      assert.equal(element.$.diff.projectConfig, value);
+    });
+
+    test('passes in changeNum', () => {
+      element = fixture('basic');
+      const value = '12345';
+      element.changeNum = value;
+      assert.equal(element.$.diff.changeNum, value);
+    });
+
+    test('passes in projectName', () => {
+      element = fixture('basic');
+      const value = 'Gerrit';
+      element.projectName = value;
+      assert.equal(element.$.diff.projectName, value);
+    });
+
+    test('passes in displayLine', () => {
+      element = fixture('basic');
+      const value = true;
+      element.displayLine = value;
+      assert.equal(element.$.diff.displayLine, value);
+    });
+
+    test('passes out isImageDiff', () => {
+      element = fixture('basic');
+      const value = true;
+      // isImageDiff is computed, so we cannot just set it.
+      sandbox.stub(element.$.diff, '_computeIsImageDiff').returns(value);
+      element.$.diff._diff = {left: [], right: [], content: []};
+
+      assert.equal(element.isImageDiff, value);
+    });
+
+    test('passes in commitRange', () => {
+      element = fixture('basic');
+      const value = {};
+      element.commitRange = value;
+      assert.equal(element.$.diff.commitRange, value);
+    });
+
+    test('passes in filesWeblinks', () => {
+      element = fixture('basic');
+      const value = {};
+      element.filesWeblinks = value;
+      assert.equal(element.$.diff.filesWeblinks, value);
+    });
+
+    test('passes out filesWeblinks', () => {
+      element = fixture('basic');
+      const value = {};
+      element.$.diff.filesWeblinks = value;
+      assert.equal(element.filesWeblinks, value);
+    });
+
+    test('passes in hidden', () => {
+      element = fixture('basic');
+      const value = true;
+      element.hidden = value;
+      assert.equal(element.$.diff.hidden, value);
+      assert.isNotNull(element.getAttribute('hidden'));
+    });
+
+    test('passes in noRenderOnPrefsChange', () => {
+      element = fixture('basic');
+      const value = true;
+      element.noRenderOnPrefsChange = value;
+      assert.equal(element.$.diff.noRenderOnPrefsChange, value);
+    });
+
+    test('passes in comments', () => {
+      element = fixture('basic');
+      const value = {left: [], right: []};
+      element.comments = value;
+      assert.equal(element.$.diff.comments, value);
+    });
+
+    test('passes in lineWrapping', () => {
+      element = fixture('basic');
+      const value = true;
+      element.lineWrapping = value;
+      assert.equal(element.$.diff.lineWrapping, value);
+    });
+
+    test('passes in viewMode', () => {
+      element = fixture('basic');
+      const value = 'SIDE_BY_SIDE';
+      element.viewMode = value;
+      assert.equal(element.$.diff.viewMode, value);
+    });
+
+    test('passes in lineOfInterest', () => {
+      element = fixture('basic');
+      const value = {number: 123, leftSide: true};
+      element.lineOfInterest = value;
+      assert.equal(element.$.diff.lineOfInterest, value);
+    });
+
+    test('passes in showLoadFailure', () => {
+      element = fixture('basic');
+      const value = true;
+      element.showLoadFailure = value;
+      assert.equal(element.$.diff.showLoadFailure, value);
+    });
+
+    test('passes out isBlameLoaded', () => {
+      element = fixture('basic');
+      const value = true;
+      sandbox.stub(element.$.diff, '_computeIsBlameLoaded').returns(value);
+      element.$.diff._blame = {};
+      assert.equal(element.isBlameLoaded, value);
+    });
+  });
+</script>

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

@@ -36,7 +36,7 @@ limitations under the License.
 <link rel="import" href="../gr-diff-cursor/gr-diff-cursor.html">
 <link rel="import" href="../gr-diff-mode-selector/gr-diff-mode-selector.html">
 <link rel="import" href="../gr-diff-preferences/gr-diff-preferences.html">
-<link rel="import" href="../gr-diff/gr-diff.html">
+<link rel="import" href="../gr-diff-host/gr-diff-host.html">
 <link rel="import" href="../gr-patch-range-select/gr-patch-range-select.html">
 
 <dom-module id="gr-diff-view">
@@ -320,8 +320,8 @@ limitations under the License.
       </div>
     </gr-fixed-panel>
     <div class="loading" hidden$="[[!_loading]]">Loading...</div>
-    <gr-diff
+    <gr-diff-host
-        id="diff"
+        id="diffHost"
         hidden
         hidden$="[[_loading]]"
         class$="[[_computeDiffClass(_panelFloatingDisabled)]]"
@@ -337,7 +337,7 @@ limitations under the License.
         view-mode="[[_diffMode]]"
         is-blame-loaded="{{_isBlameLoaded}}"
         on-line-selected="_onLineSelected">
-    </gr-diff>
+    </gr-diff-host>
     <gr-diff-preferences
         id="diffPreferences"
         prefs="{{_prefs}}"

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

@@ -200,7 +200,7 @@
         this._loggedIn = loggedIn;
       });
 
-      this.$.cursor.push('diffs', this.$.diff);
+      this.$.cursor.push('diffs', this.$.diffHost);
     },
 
     _getLoggedIn() {
@@ -276,7 +276,7 @@
           this.modifierPressed(e)) { return; }
 
       e.preventDefault();
-      this.$.diff.displayLine = false;
+      this.$.diffHost.displayLine = false;
     },
 
     _handleShiftLeftKey(e) {
@@ -303,7 +303,7 @@
       if (this.modifierPressed(e)) { return; }
 
       e.preventDefault();
-      this.$.diff.displayLine = true;
+      this.$.diffHost.displayLine = true;
       this.$.cursor.moveUp();
     },
 
@@ -317,7 +317,7 @@
       if (this.modifierPressed(e)) { return; }
 
       e.preventDefault();
-      this.$.diff.displayLine = true;
+      this.$.diffHost.displayLine = true;
       this.$.cursor.moveDown();
     },
 
@@ -350,13 +350,13 @@
 
     _handleCKey(e) {
       if (this.shouldSuppressKeyboardShortcut(e)) { return; }
-      if (this.$.diff.isRangeSelected()) { return; }
+      if (this.$.diffHost.isRangeSelected()) { return; }
       if (this.modifierPressed(e)) { return; }
 
       e.preventDefault();
       const line = this.$.cursor.getTargetLineElement();
       if (line) {
-        this.$.diff.addDraftAtLine(line);
+        this.$.diffHost.addDraftAtLine(line);
       }
     },
 
@@ -407,7 +407,7 @@
 
       if (e.detail.keyboardEvent.shiftKey) { // Hide left diff.
         e.preventDefault();
-        this.$.diff.toggleLeftDiff();
+        this.$.diffHost.toggleLeftDiff();
         return;
       }
 
@@ -549,7 +549,7 @@
         this.$.restAPI.setInProjectLookup(value.changeNum, value.project);
       }
 
-      this.$.diff.lineOfInterest = this._getLineOfInterest(this.params);
+      this.$.diffHost.lineOfInterest = this._getLineOfInterest(this.params);
       this._initCursor(this.params);
 
       this._changeNum = value.changeNum;
@@ -621,8 +621,8 @@
           });
         }
         this._loading = false;
-        this.$.diff.comments = this._commentsForDiff;
+        this.$.diffHost.comments = this._commentsForDiff;
-        return this.$.diff.reload();
+        return this.$.diffHost.reload();
       }).then(() => {
         this.$.reporting.diffViewDisplayed();
       });
@@ -949,13 +949,13 @@
      */
     _toggleBlame() {
       if (this._isBlameLoaded) {
-        this.$.diff.clearBlame();
+        this.$.diffHost.clearBlame();
         return;
       }
 
       this._isBlameLoading = true;
       this.fire('show-alert', {message: MSG_LOADING_BLAME});
-      this.$.diff.loadBlame()
+      this.$.diffHost.loadBlame()
           .then(() => {
             this._isBlameLoading = false;
             this.fire('show-alert', {message: MSG_LOADED_BLAME});
@@ -991,7 +991,7 @@
 
     _handleShiftXKey(e) {
       if (this.shouldSuppressKeyboardShortcut(e)) { return; }
-      this.$.diff.expandAllContext();
+      this.$.diffHost.expandAllContext();
     },
   });
 })();

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

@@ -73,7 +73,7 @@ limitations under the License.
 
     test('params change triggers diffViewDisplayed()', () => {
       sandbox.stub(element.$.reporting, 'diffViewDisplayed');
-      sandbox.stub(element.$.diff, 'reload').returns(Promise.resolve());
+      sandbox.stub(element.$.diffHost, 'reload').returns(Promise.resolve());
       sandbox.spy(element, '_paramsChanged');
       element.params = {
         view: Gerrit.Nav.View.DIFF,
@@ -89,7 +89,8 @@ limitations under the License.
     });
 
     test('toggle left diff with a hotkey', () => {
-      const toggleLeftDiffStub = sandbox.stub(element.$.diff, 'toggleLeftDiff');
+      const toggleLeftDiffStub = sandbox.stub(
+          element.$.diffHost, 'toggleLeftDiff');
       MockInteractions.pressAndReleaseKeyOn(element, 65, 'shift', 'a');
       assert.isTrue(toggleLeftDiffStub.calledOnce);
     });
@@ -168,7 +169,7 @@ limitations under the License.
       MockInteractions.pressAndReleaseKeyOn(element, 80, 'shift', 'p');
       assert(scrollStub.calledOnce);
 
-      const computeContainerClassStub = sandbox.stub(element.$.diff,
+      const computeContainerClassStub = sandbox.stub(element.$.diffHost.$.diff,
           '_computeContainerClass');
       MockInteractions.pressAndReleaseKeyOn(element, 74, null, 'j');
       assert(computeContainerClassStub.lastCall.calledWithExactly(
@@ -189,7 +190,7 @@ limitations under the License.
     });
 
     test('shift+x shortcut expands all diff context', () => {
-      const expandStub = sandbox.stub(element.$.diff, 'expandAllContext');
+      const expandStub = sandbox.stub(element.$.diffHost, 'expandAllContext');
       MockInteractions.pressAndReleaseKeyOn(element, 88, 'shift', 'x');
       flushAsynchronousOperations();
       assert.isTrue(expandStub.called);
@@ -550,7 +551,7 @@ limitations under the License.
       const getReviewedStub = sandbox.stub(element, '_getReviewedStatus',
           () => Promise.resolve());
 
-      sandbox.stub(element.$.diff, 'reload');
+      sandbox.stub(element.$.diffHost, 'reload');
       element._loggedIn = true;
       element.params = {
         view: Gerrit.Nav.View.DIFF,
@@ -575,7 +576,7 @@ limitations under the License.
     test('file review status', () => {
       const saveReviewedStub = sandbox.stub(element, '_saveReviewedState',
           () => Promise.resolve());
-      sandbox.stub(element.$.diff, 'reload');
+      sandbox.stub(element.$.diffHost, 'reload');
 
       element._loggedIn = true;
       element.params = {
@@ -621,7 +622,7 @@ limitations under the License.
     });
 
     test('hash is determined from params', done => {
-      sandbox.stub(element.$.diff, 'reload');
+      sandbox.stub(element.$.diffHost, 'reload');
       sandbox.stub(element, '_initCursor');
 
       element._loggedIn = true;
@@ -642,7 +643,7 @@ limitations under the License.
 
     test('diff mode selector correctly toggles the diff', () => {
       const select = element.$.modeSelect;
-      const diffDisplay = element.$.diff;
+      const diffDisplay = element.$.diffHost;
       element._userPrefs = {default_diff_view: 'SIDE_BY_SIDE'};
 
       // The mode selected in the view state reflects the selected option.
@@ -687,7 +688,7 @@ limitations under the License.
 
     suite('_commitRange', () => {
       setup(() => {
-        sandbox.stub(element.$.diff, 'reload');
+        sandbox.stub(element.$.diffHost, 'reload');
         sandbox.stub(element, '_initCursor');
         sandbox.stub(element, '_getChangeDetail').returns(Promise.resolve({
           _number: 42,