Convert gr-syntax-layer from dom-element to class
Change-Id: I2c1f2a14fe5aa9219aaafc3a30c1c45d322844c9
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 a216548..a64f535 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
@@ -16,7 +16,6 @@
*/
import '../../shared/gr-comment-thread/gr-comment-thread';
import '../gr-diff/gr-diff';
-import '../gr-syntax-layer/gr-syntax-layer';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element';
@@ -120,7 +119,6 @@
export interface GrDiffHost {
$: {
- syntaxLayer: GrSyntaxLayer & Element;
diff: GrDiff;
};
}
@@ -238,7 +236,7 @@
@property({type: Object})
_revisionImage: Base64ImageFile | null = null;
- @property({type: Object, notify: true})
+ @property({type: Object, notify: true, observer: 'diffChanged'})
diff?: DiffInfo;
@property({type: Object})
@@ -259,6 +257,7 @@
@property({
type: Boolean,
computed: '_isSyntaxHighlightingEnabled(prefs.*, diff)',
+ observer: '_syntaxHighlightingEnabledChanged',
})
_syntaxHighlightingEnabled?: boolean;
@@ -271,6 +270,8 @@
private readonly jsAPI = appContext.jsApiService;
+ private readonly syntaxLayer = new GrSyntaxLayer();
+
/** @override */
created() {
super.created();
@@ -337,6 +338,10 @@
});
}
+ diffChanged(diff?: DiffInfo) {
+ this.syntaxLayer.init(diff);
+ }
+
/**
* @param shouldReportMetric indicate a new Diff Page. This is a
* signal to report metrics event that started on location change.
@@ -385,7 +390,7 @@
if (needsSyntaxHighlighting) {
this.reporting.time(TimingLabel.SYNTAX);
try {
- await this.$.syntaxLayer.process();
+ await this.syntaxLayer.process();
} finally {
this.reporting.timeEnd(TimingLabel.SYNTAX);
}
@@ -403,7 +408,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)];
}
clear() {
@@ -501,7 +506,7 @@
/** Cancel any remaining diff builder rendering work. */
cancel() {
this.$.diff.cancel();
- this.$.syntaxLayer.cancel();
+ this.syntaxLayer.cancel();
}
getCursorStops() {
@@ -992,6 +997,10 @@
fireEvent(this, 'diff-comments-modified');
}
+ _syntaxHighlightingEnabledChanged(_syntaxHighlightingEnabled: boolean) {
+ this.syntaxLayer.setEnabled(_syntaxHighlightingEnabled);
+ }
+
_isSyntaxHighlightingEnabled(
preferenceChangeRecord?: PolymerDeepPropertyChange<
DiffPreferencesInfo,
@@ -1039,11 +1048,11 @@
const renderUpdateListener: DiffLayerListener = start => {
if (start > NUM_OF_LINES_THRESHOLD_FOR_VIEWPORT) {
this.reporting.diffViewDisplayed();
- this.$.syntaxLayer.removeListener(renderUpdateListener);
+ this.syntaxLayer.removeListener(renderUpdateListener);
}
};
- this.$.syntaxLayer.addListener(renderUpdateListener);
+ this.syntaxLayer.addListener(renderUpdateListener);
}
_handleRenderStart() {
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 84a2e4a..e82489c 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
@@ -42,9 +42,4 @@
show-newline-warning-right="[[_showNewlineWarningRight(diff)]]"
>
</gr-diff>
- <gr-syntax-layer
- id="syntaxLayer"
- enabled="[[_syntaxHighlightingEnabled]]"
- diff="[[diff]]"
- ></gr-syntax-layer>
`;
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 01c78f0..3d6383b 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
@@ -130,7 +130,7 @@
test('ends total and syntax timer after syntax layer', async () => {
sinon.stub(element.reporting, 'diffViewContentDisplayed');
let notifySyntaxProcessed;
- sinon.stub(element.$.syntaxLayer, 'process').returns(
+ sinon.stub(element.syntaxLayer, 'process').returns(
new Promise(resolve => {
notifySyntaxProcessed = resolve;
})
@@ -170,7 +170,7 @@
test('completes reload promise after syntax layer processing', async () => {
let notifySyntaxProcessed;
- sinon.stub(element.$.syntaxLayer, 'process').returns(new Promise(
+ sinon.stub(element.syntaxLayer, 'process').returns(new Promise(
resolve => {
notifySyntaxProcessed = resolve;
}));
@@ -1292,7 +1292,7 @@
test('gr-diff-host provides syntax highlighting layer', async () => {
stubRestApi('getDiff').returns(Promise.resolve({content: []}));
await element.reload();
- assert.equal(element.$.diff.layers[0], element.$.syntaxLayer);
+ assert.equal(element.$.diff.layers[0], element.syntaxLayer);
});
test('rendering normal-sized diff does not disable syntax', () => {
@@ -1301,7 +1301,7 @@
a: ['foo'],
}],
};
- assert.isTrue(element.$.syntaxLayer.enabled);
+ assert.isTrue(element.syntaxLayer.enabled);
});
test('rendering large diff disables syntax', () => {
@@ -1311,17 +1311,17 @@
a: [new Array(501).join('*')],
}],
};
- assert.isFalse(element.$.syntaxLayer.enabled);
+ assert.isFalse(element.syntaxLayer.enabled);
});
test('starts syntax layer processing on render event', async () => {
- sinon.stub(element.$.syntaxLayer, 'process')
+ sinon.stub(element.syntaxLayer, 'process')
.returns(Promise.resolve());
stubRestApi('getDiff').returns(Promise.resolve({content: []}));
await element.reload();
element.dispatchEvent(
new CustomEvent('render', {bubbles: true, composed: true}));
- assert.isTrue(element.$.syntaxLayer.process.called);
+ assert.isTrue(element.syntaxLayer.process.called);
});
});
@@ -1346,11 +1346,11 @@
test('gr-diff-host provides syntax highlighting layer', async () => {
stubRestApi('getDiff').returns(Promise.resolve({content: []}));
await element.reload();
- assert.equal(element.$.diff.layers[0], element.$.syntaxLayer);
+ assert.equal(element.$.diff.layers[0], element.syntaxLayer);
});
test('syntax layer should be disabled', () => {
- assert.isFalse(element.$.syntaxLayer.enabled);
+ assert.isFalse(element.syntaxLayer.enabled);
});
test('still disabled for large diff', () => {
@@ -1360,7 +1360,7 @@
a: [new Array(501).join('*')],
}],
};
- assert.isFalse(element.$.syntaxLayer.enabled);
+ assert.isFalse(element.syntaxLayer.enabled);
});
});
