Convert gr-js-api-interface from element to class Change-Id: Ib0fa07484fb36db969f6f69c77598643cd0a0b6a

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts
index 6112831..eaa9029 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import '../../shared/gr-comment-thread/gr-comment-thread';
-import '../../shared/gr-js-api-interface/gr-js-api-interface';
 import '../gr-diff/gr-diff';
 import '../gr-syntax-layer/gr-syntax-layer';
 import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
@@ -60,7 +59,6 @@
   DiffPreferencesInfo,
   IgnoreWhitespaceType,
 } from '../../../types/diff';
-import {JsApiService} from '../../shared/gr-js-api-interface/gr-js-api-types';
 import {GrDiff, LineOfInterest} from '../gr-diff/gr-diff';
 import {GrSyntaxLayer} from '../gr-syntax-layer/gr-syntax-layer';
 import {DiffViewMode, Side, CommentSide} from '../../../constants/constants';
@@ -115,7 +113,6 @@
 
 export interface GrDiffHost {
   $: {
-    jsAPI: JsApiService & Element;
     syntaxLayer: GrSyntaxLayer & Element;
     diff: GrDiff;
   };
@@ -267,6 +264,8 @@
 
   private readonly restApiService = appContext.restApiService;
 
+  private readonly jsAPI = appContext.jsApiService;
+
   /** @override */
   created() {
     super.created();
@@ -399,7 +398,7 @@
 
   private _getLayers(path: string, changeNum: NumericChangeId): DiffLayer[] {
     // Get layers from plugins (if any).
-    return [this.$.syntaxLayer, ...this.$.jsAPI.getDiffLayers(path, changeNum)];
+    return [this.$.syntaxLayer, ...this.jsAPI.getDiffLayers(path, changeNum)];
   }
 
   private _onRenderOnce(): Promise<CustomEvent> {
@@ -413,7 +412,7 @@
   }
 
   clear() {
-    if (this.path) this.$.jsAPI.disposeDiffLayers(this.path);
+    if (this.path) this.jsAPI.disposeDiffLayers(this.path);
     this._layers = [];
   }
 
@@ -432,7 +431,7 @@
 
     const basePatchNum = toNumberOnly(this.patchRange.basePatchNum);
     const patchNum = toNumberOnly(this.patchRange.patchNum);
-    this.$.jsAPI
+    this.jsAPI
       .getCoverageAnnotationApis()
       .then(coverageAnnotationApis => {
         coverageAnnotationApis.forEach(coverageAnnotationApi => {

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_html.ts b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_html.ts
index 48b82ec..a7eebf4 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_html.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_html.ts

@@ -49,5 +49,4 @@
     enabled="[[_syntaxHighlightingEnabled]]"
     diff="[[diff]]"
   ></gr-syntax-layer>
-  <gr-js-api-interface id="jsAPI"></gr-js-api-interface>
 `;

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.js b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.js
index 0c1a92d..536cf26 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.js

@@ -47,10 +47,8 @@
   suite('plugin layers', () => {
     const pluginLayers = [{annotate: () => {}}, {annotate: () => {}}];
     setup(() => {
-      stub('gr-js-api-interface', {
-        getDiffLayers() { return pluginLayers; },
-      });
       element = basicFixture.instantiate();
+      sinon.stub(element.jsAPI, 'getDiffLayers').returns(pluginLayers);
       element.changeNum = 123;
       element.path = 'some/path';
     });
@@ -59,7 +57,7 @@
       element.change = createChange();
       stubRestApi('getDiff').returns(Promise.resolve({content: []}));
       await element.reload();
-      assert(element.$.jsAPI.getDiffLayers.called);
+      assert(element.jsAPI.getDiffLayers.called);
     });
   });
 
@@ -1330,17 +1328,14 @@
       coverageProviderStub = sinon.stub().returns(
           Promise.resolve(exampleRanges));
 
-      stub('gr-js-api-interface', {
-        getCoverageAnnotationApis() {
-          return Promise.resolve([{
+      element = basicFixture.instantiate();
+      sinon.stub(element.jsAPI, 'getCoverageAnnotationApis').returns(
+          Promise.resolve([{
             notify: notifyStub,
             getCoverageProvider() {
               return coverageProviderStub;
             },
-          }]);
-        },
-      });
-      element = basicFixture.instantiate();
+          }]));
       element.changeNum = 123;
       element.change = createChange();
       element.path = 'some/path';
@@ -1362,7 +1357,7 @@
 
     test('getCoverageAnnotationApis should be called', async () => {
       await element.reload();
-      assert.isTrue(element.$.jsAPI.getCoverageAnnotationApis.calledOnce);
+      assert.isTrue(element.jsAPI.getCoverageAnnotationApis.calledOnce);
     });
 
     test('coverageRangeChanged should be called', async () => {