diff --git a/front_end/i18n/locales/en-US.json b/front_end/i18n/locales/en-US.json index fcaed17fc5..49e8232c9f 100644 --- a/front_end/i18n/locales/en-US.json +++ b/front_end/i18n/locales/en-US.json @@ -776,13 +776,13 @@ "layer_viewer/TransformController.js | rotateModeV": { "message": "Rotate mode (V)" }, - "layers/LayersPanel.js | details": { + "layers/LayersPanel.ts | details": { "message": "Details" }, - "layers/LayersPanel.js | profiler": { + "layers/LayersPanel.ts | profiler": { "message": "Profiler" }, - "layers/ModuleUIStrings.js | layers": { + "layers/ModuleUIStrings.ts | layers": { "message": "Layers" }, "lighthouse/LighthouseController.js | accessibility": { diff --git a/front_end/layers/BUILD.gn b/front_end/layers/BUILD.gn index 257593c762..2e49dd36ad 100644 --- a/front_end/layers/BUILD.gn +++ b/front_end/layers/BUILD.gn @@ -7,10 +7,10 @@ import("../../scripts/build/ninja/devtools_module.gni") devtools_module("layers") { sources = [ - "LayerPaintProfilerView.js", - "LayerTreeModel.js", - "LayersPanel.js", - "ModuleUIStrings.js", + "LayerPaintProfilerView.ts", + "LayerTreeModel.ts", + "LayersPanel.ts", + "ModuleUIStrings.ts", ] deps = [ @@ -29,7 +29,7 @@ devtools_entrypoint("bundle") { } devtools_entrypoint("legacy") { - entrypoint = "layers-legacy.js" + entrypoint = "layers-legacy.ts" deps = [ ":bundle" ] } diff --git a/front_end/layers/LayerPaintProfilerView.js b/front_end/layers/LayerPaintProfilerView.ts similarity index 69% rename from front_end/layers/LayerPaintProfilerView.js rename to front_end/layers/LayerPaintProfilerView.ts index 711da1a668..e6002b9abd 100644 --- a/front_end/layers/LayerPaintProfilerView.js +++ b/front_end/layers/LayerPaintProfilerView.ts @@ -2,15 +2,16 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. +/* eslint-disable rulesdir/no_underscored_properties */ + import * as LayerViewer from '../layer_viewer/layer_viewer.js'; import * as SDK from '../sdk/sdk.js'; // eslint-disable-line no-unused-vars import * as UI from '../ui/ui.js'; export class LayerPaintProfilerView extends UI.SplitWidget.SplitWidget { - /** - * @param {function(string=):void} showImageCallback - */ - constructor(showImageCallback) { + _logTreeView: LayerViewer.PaintProfilerView.PaintProfilerCommandLogView; + _paintProfilerView: LayerViewer.PaintProfilerView.PaintProfilerView; + constructor(showImageCallback: (arg0?: string|undefined) => void) { super(true, false); this._logTreeView = new LayerViewer.PaintProfilerView.PaintProfilerCommandLogView(); @@ -24,22 +25,16 @@ export class LayerPaintProfilerView extends UI.SplitWidget.SplitWidget { this._logTreeView.focus(); } - reset() { + reset(): void { this._paintProfilerView.setSnapshotAndLog(null, [], null); } - /** - * @param {!SDK.PaintProfiler.PaintProfilerSnapshot} snapshot - */ - profile(snapshot) { + profile(snapshot: SDK.PaintProfiler.PaintProfilerSnapshot): void { snapshot.commandLog().then(log => setSnapshotAndLog.call(this, snapshot, log)); - /** - * @param {?SDK.PaintProfiler.PaintProfilerSnapshot} snapshot - * @param {?Array} log - * @this {LayerPaintProfilerView} - */ - function setSnapshotAndLog(snapshot, log) { + function setSnapshotAndLog( + this: LayerPaintProfilerView, snapshot: SDK.PaintProfiler.PaintProfilerSnapshot|null, + log: SDK.PaintProfiler.PaintProfilerLogItem[]|null): void { this._logTreeView.setCommandLog(log || []); this._paintProfilerView.setSnapshotAndLog(snapshot, log || [], null); if (snapshot) { @@ -48,14 +43,11 @@ export class LayerPaintProfilerView extends UI.SplitWidget.SplitWidget { } } - /** - * @param {number} scale - */ - setScale(scale) { + setScale(scale: number): void { this._paintProfilerView.setScale(scale); } - _onWindowChanged() { + _onWindowChanged(): void { this._logTreeView.updateWindow(this._paintProfilerView.selectionWindow()); } } diff --git a/front_end/layers/LayerTreeModel.js b/front_end/layers/LayerTreeModel.ts similarity index 63% rename from front_end/layers/LayerTreeModel.js rename to front_end/layers/LayerTreeModel.ts index a8ee4b929a..a8fc085bc7 100644 --- a/front_end/layers/LayerTreeModel.js +++ b/front_end/layers/LayerTreeModel.ts @@ -28,31 +28,36 @@ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ +/* eslint-disable rulesdir/no_underscored_properties */ + import * as Common from '../common/common.js'; import * as SDK from '../sdk/sdk.js'; import * as UI from '../ui/ui.js'; export class LayerTreeModel extends SDK.SDKModel.SDKModel { - /** - * @param {!SDK.SDKModel.Target} target - */ - constructor(target) { + _layerTreeAgent: ProtocolProxyApi.LayerTreeApi; + _paintProfilerModel: SDK.PaintProfiler.PaintProfilerModel; + _layerTree: SDK.LayerTreeBase.LayerTreeBase|null; + _throttler: Common.Throttler.Throttler; + _enabled?: boolean; + _lastPaintRectByLayerId?: Map; + + constructor(target: SDK.SDKModel.Target) { super(target); this._layerTreeAgent = target.layerTreeAgent(); target.registerLayerTreeDispatcher(new LayerTreeDispatcher(this)); this._paintProfilerModel = - /** @type {!SDK.PaintProfiler.PaintProfilerModel} */ (target.model(SDK.PaintProfiler.PaintProfilerModel)); + target.model(SDK.PaintProfiler.PaintProfilerModel) as SDK.PaintProfiler.PaintProfilerModel; const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel); if (resourceTreeModel) { resourceTreeModel.addEventListener( SDK.ResourceTreeModel.Events.MainFrameNavigated, this._onMainFrameNavigated, this); } - /** @type {?SDK.LayerTreeBase.LayerTreeBase} */ this._layerTree = null; this._throttler = new Common.Throttler.Throttler(20); } - async disable() { + async disable(): Promise { if (!this._enabled) { return; } @@ -60,7 +65,7 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel { await this._layerTreeAgent.invoke_disable(); } - enable() { + enable(): void { if (this._enabled) { return; } @@ -68,10 +73,7 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel { this._forceEnable(); } - async _forceEnable() { - /** - * @type {!Map} - */ + async _forceEnable(): Promise { this._lastPaintRectByLayerId = new Map(); if (!this._layerTree) { this._layerTree = new AgentLayerTree(this); @@ -79,35 +81,23 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel { await this._layerTreeAgent.invoke_enable(); } - /** - * @return {?SDK.LayerTreeBase.LayerTreeBase} - */ - layerTree() { + layerTree(): SDK.LayerTreeBase.LayerTreeBase|null { return this._layerTree; } - /** - * @param {?Array.} layers - */ - async _layerTreeChanged(layers) { + async _layerTreeChanged(layers: Protocol.LayerTree.Layer[]|null): Promise { if (!this._enabled) { return; } this._throttler.schedule(this._innerSetLayers.bind(this, layers)); } - /** - * @param {?Array.} layers - */ - async _innerSetLayers(layers) { - const layerTree = /** @type {!AgentLayerTree} */ (this._layerTree); + async _innerSetLayers(layers: Protocol.LayerTree.Layer[]|null): Promise { + const layerTree = this._layerTree as AgentLayerTree; await layerTree.setLayers(layers); if (!this._lastPaintRectByLayerId) { - /** - * @type {!Map} - */ this._lastPaintRectByLayerId = new Map(); } @@ -115,7 +105,7 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel { const lastPaintRect = this._lastPaintRectByLayerId.get(layerId); const layer = layerTree.layerById(layerId); if (layer) { - /** @type {!AgentLayer} */ (layer)._lastPaintRect = lastPaintRect; + (layer as AgentLayer)._lastPaintRect = lastPaintRect; } } @@ -124,21 +114,14 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel { this.dispatchEventToListeners(Events.LayerTreeChanged); } - /** - * @param {!Protocol.LayerTree.LayerId} layerId - * @param {!Protocol.DOM.Rect} clipRect - */ - _layerPainted(layerId, clipRect) { + _layerPainted(layerId: string, clipRect: Protocol.DOM.Rect): void { if (!this._enabled) { return; } - const layerTree = /** @type {!AgentLayerTree} */ (this._layerTree); - const layer = /** @type {!AgentLayer} */ (layerTree.layerById(layerId)); + const layerTree = this._layerTree as AgentLayerTree; + const layer = layerTree.layerById(layerId) as AgentLayer; if (!layer) { if (!this._lastPaintRectByLayerId) { - /** - * @type {!Map} - */ this._lastPaintRectByLayerId = new Map(); } @@ -149,7 +132,7 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel { this.dispatchEventToListeners(Events.LayerPainted, layer); } - _onMainFrameNavigated() { + _onMainFrameNavigated(): void { this._layerTree = null; if (this._enabled) { this._forceEnable(); @@ -159,31 +142,27 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel { SDK.SDKModel.SDKModel.register(LayerTreeModel, SDK.SDKModel.Capability.DOM, false); -/** @enum {symbol} */ -export const Events = { - LayerTreeChanged: Symbol('LayerTreeChanged'), - LayerPainted: Symbol('LayerPainted'), -}; +// TODO(crbug.com/1167717): Make this a const enum again +// eslint-disable-next-line rulesdir/const_enum +export enum Events { + LayerTreeChanged = 'LayerTreeChanged', + LayerPainted = 'LayerPainted' +} export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase { - /** - * @param {!LayerTreeModel} layerTreeModel - */ - constructor(layerTreeModel) { + _layerTreeModel: LayerTreeModel; + + constructor(layerTreeModel: LayerTreeModel) { super(layerTreeModel.target()); this._layerTreeModel = layerTreeModel; } - /** - * @param {?Array} payload - * @return {!Promise} - */ - async setLayers(payload) { + async setLayers(payload: Protocol.LayerTree.Layer[]|null): Promise { if (!payload) { this._innerSetLayers(payload); return; } - const idsToResolve = new Set(); + const idsToResolve = new Set(); for (let i = 0; i < payload.length; ++i) { const backendNodeId = payload[i].backendNodeId; if (!backendNodeId || this.backendNodeIdToNode().has(backendNodeId)) { @@ -195,10 +174,7 @@ export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase { this._innerSetLayers(payload); } - /** - * @param {?Array.} layers - */ - _innerSetLayers(layers) { + _innerSetLayers(layers: Protocol.LayerTree.Layer[]|null): void { this.setRoot(null); this.setContentRoot(null); // Payload will be null when not in the composited mode. @@ -210,7 +186,7 @@ export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase { this.layersById = new Map(); for (let i = 0; i < layers.length; ++i) { const layerId = layers[i].layerId; - let layer = /** @type {?AgentLayer} */ (oldLayersById.get(layerId)); + let layer: AgentLayer|(AgentLayer | null) = oldLayersById.get(layerId) as AgentLayer | null; if (layer) { layer._reset(layers[i]); } else { @@ -245,94 +221,45 @@ export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase { } } -/** - * @implements {SDK.LayerTreeBase.Layer} - */ -export class AgentLayer { - /** - * @param {!LayerTreeModel} layerTreeModel - * @param {!Protocol.LayerTree.Layer} layerPayload - */ - constructor(layerTreeModel, layerPayload) { - /** - * @type {!Array.} - */ - this._scrollRects; - - /** - * @type {!Array.} - */ - this._quad; - - /** - * @type {!Array.} - */ - this._children; - - /** - * @type {?HTMLImageElement} - */ - this._image; - - /** - * @type {?AgentLayer} - */ - this._parent; - - /** - * @type {!Protocol.LayerTree.Layer} - */ - this._layerPayload; +export class AgentLayer implements SDK.LayerTreeBase.Layer { + _scrollRects!: Protocol.LayerTree.ScrollRect[]; + _quad!: number[]; + _children!: AgentLayer[]; + _image!: HTMLImageElement|null; + _parent!: AgentLayer|null; + _layerPayload!: Protocol.LayerTree.Layer; + _layerTreeModel: LayerTreeModel; + _node?: SDK.DOMModel.DOMNode|null; + _lastPaintRect?: Protocol.DOM.Rect; + _paintCount?: number; + _stickyPositionConstraint?: SDK.LayerTreeBase.StickyPositionConstraint|null; + constructor(layerTreeModel: LayerTreeModel, layerPayload: Protocol.LayerTree.Layer) { this._layerTreeModel = layerTreeModel; this._reset(layerPayload); } - /** - * @override - * @return {string} - */ - id() { + id(): string { return this._layerPayload.layerId; } - /** - * @override - * @return {?string} - */ - parentId() { + parentId(): string|null { return this._layerPayload.parentLayerId || null; } - /** - * @override - * @return {?SDK.LayerTreeBase.Layer} - */ - parent() { + parent(): SDK.LayerTreeBase.Layer|null { return this._parent; } - /** - * @override - * @return {boolean} - */ - isRoot() { + isRoot(): boolean { return !this.parentId(); } - /** - * @override - * @return {!Array.} - */ - children() { + children(): SDK.LayerTreeBase.Layer[] { return this._children; } - /** - * @override - * @param {!SDK.LayerTreeBase.Layer} childParam - */ - addChild(childParam) { - const child = /** @type {!AgentLayer} */ (childParam); + addChild(childParam: SDK.LayerTreeBase.Layer): void { + const child = childParam as AgentLayer; if (child._parent) { console.assert(false, 'Child already has a parent'); } @@ -340,30 +267,16 @@ export class AgentLayer { child._parent = this; } - /** - * @param {?SDK.DOMModel.DOMNode} node - */ - _setNode(node) { + _setNode(node: SDK.DOMModel.DOMNode|null): void { this._node = node; } - /** - * @override - * @return {?SDK.DOMModel.DOMNode} - */ - node() { + node(): SDK.DOMModel.DOMNode|null { return this._node || null; } - /** - * @override - * @return {?SDK.DOMModel.DOMNode} - */ - nodeForSelfOrAncestor() { - /** - * @type {?AgentLayer} - */ - let layer = this; + nodeForSelfOrAncestor(): SDK.DOMModel.DOMNode|null { + let layer: (AgentLayer|null)|this = this; for (; layer; layer = layer._parent) { if (layer._node) { return layer._node; @@ -372,59 +285,31 @@ export class AgentLayer { return null; } - /** - * @override - * @return {number} - */ - offsetX() { + offsetX(): number { return this._layerPayload.offsetX; } - /** - * @override - * @return {number} - */ - offsetY() { + offsetY(): number { return this._layerPayload.offsetY; } - /** - * @override - * @return {number} - */ - width() { + width(): number { return this._layerPayload.width; } - /** - * @override - * @return {number} - */ - height() { + height(): number { return this._layerPayload.height; } - /** - * @override - * @return {?Array.} - */ - transform() { + transform(): number[]|null { return this._layerPayload.transform || null; } - /** - * @override - * @return {!Array.} - */ - quad() { + quad(): number[] { return this._quad; } - /** - * @override - * @return {!Array.} - */ - anchorPoint() { + anchorPoint(): number[] { return [ this._layerPayload.anchorX || 0, this._layerPayload.anchorY || 0, @@ -432,68 +317,36 @@ export class AgentLayer { ]; } - /** - * @override - * @return {boolean} - */ - invisible() { + invisible(): boolean { return this._layerPayload.invisible || false; } - /** - * @override - * @return {number} - */ - paintCount() { + paintCount(): number { return this._paintCount || this._layerPayload.paintCount; } - /** - * @override - * @return {?Protocol.DOM.Rect} - */ - lastPaintRect() { + lastPaintRect(): Protocol.DOM.Rect|null { return this._lastPaintRect || null; } - /** - * @override - * @return {!Array.} - */ - scrollRects() { + scrollRects(): Protocol.LayerTree.ScrollRect[] { return this._scrollRects; } - /** - * @override - * @return {?SDK.LayerTreeBase.StickyPositionConstraint} - */ - stickyPositionConstraint() { + stickyPositionConstraint(): SDK.LayerTreeBase.StickyPositionConstraint|null { return this._stickyPositionConstraint || null; } - /** - * @override - * @return {!Promise>} - */ - async requestCompositingReasonIds() { + async requestCompositingReasonIds(): Promise { const reasons = await this._layerTreeModel._layerTreeAgent.invoke_compositingReasons({layerId: this.id()}); return reasons.compositingReasonIds || []; } - /** - * @override - * @return {boolean} - */ - drawsContent() { + drawsContent(): boolean { return this._layerPayload.drawsContent; } - /** - * @override - * @return {number} - */ - gpuMemoryUsage() { + gpuMemoryUsage(): number { /** * @const */ @@ -501,11 +354,7 @@ export class AgentLayer { return this.drawsContent() ? this.width() * this.height() * bytesPerPixel : 0; } - /** - * @override - * @return {!Array>} - */ - snapshots() { + snapshots(): Promise[] { const promise = this._layerTreeModel._paintProfilerModel.makeSnapshot(this.id()).then(snapshot => { if (!snapshot) { return null; @@ -515,19 +364,13 @@ export class AgentLayer { return [promise]; } - /** - * @param {!Protocol.DOM.Rect} rect - */ - _didPaint(rect) { + _didPaint(rect: Protocol.DOM.Rect): void { this._lastPaintRect = rect; this._paintCount = this.paintCount() + 1; this._image = null; } - /** - * @param {!Protocol.LayerTree.Layer} layerPayload - */ - _reset(layerPayload) { + _reset(layerPayload: Protocol.LayerTree.Layer): void { /** @type {?SDK.DOMModel.DOMNode} */ this._node = null; this._children = []; @@ -542,27 +385,16 @@ export class AgentLayer { null; } - /** - * @param {!Array.} a - * @return {!DOMMatrix} - */ - _matrixFromArray(a) { - /** - * @param {number} x - */ - function toFixed9(x) { + _matrixFromArray(a: number[]): DOMMatrix { + function toFixed9(x: number): string { return x.toFixed(9); } return new WebKitCSSMatrix('matrix3d(' + a.map(toFixed9).join(',') + ')'); } - /** - * @param {!DOMMatrix} parentTransform - * @return {!DOMMatrix} - */ - _calculateTransformToViewport(parentTransform) { + _calculateTransformToViewport(parentTransform: DOMMatrix): DOMMatrix { const offsetMatrix = new WebKitCSSMatrix().translate(this._layerPayload.offsetX, this._layerPayload.offsetY); - let matrix = offsetMatrix; + let matrix: DOMMatrix = offsetMatrix; if (this._layerPayload.transform) { const transformMatrix = this._matrixFromArray(this._layerPayload.transform); @@ -578,19 +410,11 @@ export class AgentLayer { return matrix; } - /** - * @param {number} width - * @param {number} height - * @return {!Array.} - */ - _createVertexArrayForRect(width, height) { + _createVertexArrayForRect(width: number, height: number): number[] { return [0, 0, 0, width, 0, 0, width, height, 0, 0, height, 0]; } - /** - * @param {!DOMMatrix} parentTransform - */ - _calculateQuad(parentTransform) { + _calculateQuad(parentTransform: DOMMatrix): void { const matrix = this._calculateTransformToViewport(parentTransform); this._quad = []; const vertices = this._createVertexArrayForRect(this._layerPayload.width, this._layerPayload.height); @@ -600,10 +424,7 @@ export class AgentLayer { this._quad.push(point.x, point.y); } - /** - * @param {!AgentLayer} layer - */ - function calculateQuadForLayer(layer) { + function calculateQuadForLayer(layer: AgentLayer): void { layer._calculateQuad(matrix); } @@ -611,30 +432,17 @@ export class AgentLayer { } } -/** - * @implements {ProtocolProxyApi.LayerTreeDispatcher} - */ -class LayerTreeDispatcher { - /** - * @param {!LayerTreeModel} layerTreeModel - */ - constructor(layerTreeModel) { +class LayerTreeDispatcher implements ProtocolProxyApi.LayerTreeDispatcher { + _layerTreeModel: LayerTreeModel; + constructor(layerTreeModel: LayerTreeModel) { this._layerTreeModel = layerTreeModel; } - /** - * @override - * @param {!Protocol.LayerTree.LayerTreeDidChangeEvent} event - */ - layerTreeDidChange({layers}) { + layerTreeDidChange({layers}: Protocol.LayerTree.LayerTreeDidChangeEvent): void { this._layerTreeModel._layerTreeChanged(layers || null); } - /** - * @override - * @param {!Protocol.LayerTree.LayerPaintedEvent} event - */ - layerPainted({layerId, clip}) { + layerPainted({layerId, clip}: Protocol.LayerTree.LayerPaintedEvent): void { this._layerTreeModel._layerPainted(layerId, clip); } } diff --git a/front_end/layers/LayersPanel.js b/front_end/layers/LayersPanel.ts similarity index 82% rename from front_end/layers/LayersPanel.js rename to front_end/layers/LayersPanel.ts index 02b642ef81..10b6bd2b27 100644 --- a/front_end/layers/LayersPanel.js +++ b/front_end/layers/LayersPanel.ts @@ -28,6 +28,8 @@ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ +/* eslint-disable rulesdir/no_underscored_properties */ + import * as Common from '../common/common.js'; import * as i18n from '../i18n/i18n.js'; import * as LayerViewer from '../layer_viewer/layer_viewer.js'; @@ -47,15 +49,21 @@ export const UIStrings = { */ profiler: 'Profiler', }; -const str_ = i18n.i18n.registerUIStrings('layers/LayersPanel.js', UIStrings); +const str_ = i18n.i18n.registerUIStrings('layers/LayersPanel.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); -/** - * @implements {SDK.SDKModel.Observer} - */ -export class LayersPanel extends UI.Panel.PanelWithSidebar { +export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.SDKModel.Observer { + _model: LayerTreeModel|null; + _layerViewHost: LayerViewer.LayerViewHost.LayerViewHost; + _layerTreeOutline: LayerViewer.LayerTreeOutline.LayerTreeOutline; + _rightSplitWidget: UI.SplitWidget.SplitWidget; + _layers3DView: LayerViewer.Layers3DView.Layers3DView; + _tabbedPane: UI.TabbedPane.TabbedPane; + _layerDetailsView: LayerViewer.LayerDetailsView.LayerDetailsView; + _paintProfilerView: LayerPaintProfilerView; + _updateThrottler: Common.Throttler.Throttler; + _layerBeingProfiled?: SDK.LayerTreeBase.Layer|null; constructor() { super('layers', 225); - /** @type {?LayerTreeModel} */ this._model = null; SDK.SDKModel.TargetManager.instance().observeTargets(this); @@ -88,38 +96,25 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar { this._updateThrottler = new Common.Throttler.Throttler(100); } - /** - * @override - */ - focus() { + focus(): void { this._layerTreeOutline.focus(); } - /** - * @override - */ - wasShown() { + wasShown(): void { super.wasShown(); if (this._model) { this._model.enable(); } } - /** - * @override - */ - willHide() { + willHide(): void { if (this._model) { this._model.disable(); } super.willHide(); } - /** - * @override - * @param {!SDK.SDKModel.Target} target - */ - targetAdded(target) { + targetAdded(target: SDK.SDKModel.Target): void { if (this._model) { return; } @@ -134,11 +129,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar { } } - /** - * @override - * @param {!SDK.SDKModel.Target} target - */ - targetRemoved(target) { + targetRemoved(target: SDK.SDKModel.Target): void { if (!this._model || this._model.target() !== target) { return; } @@ -148,14 +139,11 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar { this._model = null; } - _onLayerTreeUpdated() { + _onLayerTreeUpdated(): void { this._updateThrottler.schedule(this._update.bind(this)); } - /** - * @return {!Promise<*>} - */ - _update() { + _update(): Promise { if (this._model) { this._layerViewHost.setLayerTree(this._model.layerTree()); const resourceModel = this._model.target().model(SDK.ResourceTreeModel.ResourceTreeModel); @@ -171,14 +159,11 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar { return Promise.resolve(); } - /** - * @param {!Common.EventTarget.EventTargetEvent} event - */ - _onLayerPainted(event) { + _onLayerPainted(event: Common.EventTarget.EventTargetEvent): void { if (!this._model) { return; } - const layer = /** @type {!SDK.LayerTreeBase.Layer} */ (event.data); + const layer = event.data as SDK.LayerTreeBase.Layer; const selection = this._layerViewHost.selection(); if (selection && selection.layer() === layer) { this._layerDetailsView.update(); @@ -186,11 +171,8 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar { this._layers3DView.updateLayerSnapshot(layer); } - /** - * @param {!Common.EventTarget.EventTargetEvent} event - */ - _onPaintProfileRequested(event) { - const selection = /** @type {!LayerViewer.LayerViewHost.Selection} */ (event.data); + _onPaintProfileRequested(event: Common.EventTarget.EventTargetEvent): void { + const selection = event.data as LayerViewer.LayerViewHost.Selection; this._layers3DView.snapshotForSelection(selection).then(snapshotWithRect => { if (!snapshotWithRect) { return; @@ -205,10 +187,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar { }); } - /** - * @param {!Common.EventTarget.EventTargetEvent} event - */ - _onTabClosed(event) { + _onTabClosed(event: Common.EventTarget.EventTargetEvent): void { if (event.data.tabId !== DetailsViewTabs.Profiler || !this._layerBeingProfiled) { return; } @@ -217,24 +196,18 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar { this._layerBeingProfiled = null; } - /** - * @param {string=} imageURL - */ - _showImage(imageURL) { + _showImage(imageURL?: string): void { if (this._layerBeingProfiled) { this._layers3DView.showImageForLayer(this._layerBeingProfiled, imageURL); } } - /** - * @param {!Common.EventTarget.EventTargetEvent} event - */ - _onScaleChanged(event) { - this._paintProfilerView.setScale(/** @type {number} */ (event.data)); + _onScaleChanged(event: Common.EventTarget.EventTargetEvent): void { + this._paintProfilerView.setScale(event.data as number); } } export const DetailsViewTabs = { Details: 'details', - Profiler: 'profiler' + Profiler: 'profiler', }; diff --git a/front_end/layers/ModuleUIStrings.js b/front_end/layers/ModuleUIStrings.ts similarity index 72% rename from front_end/layers/ModuleUIStrings.js rename to front_end/layers/ModuleUIStrings.ts index d8eba40b34..d254c97b96 100644 --- a/front_end/layers/ModuleUIStrings.js +++ b/front_end/layers/ModuleUIStrings.ts @@ -2,6 +2,8 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. +/* eslint-disable rulesdir/no_underscored_properties */ + import * as i18n from '../i18n/i18n.js'; export const UIStrings = { /** @@ -9,4 +11,4 @@ export const UIStrings = { */ layers: 'Layers', }; -i18n.i18n.registerUIStrings('layers/ModuleUIStrings.js', UIStrings); +i18n.i18n.registerUIStrings('layers/ModuleUIStrings.ts', UIStrings); diff --git a/front_end/layers/layers-legacy.js b/front_end/layers/layers-legacy.ts similarity index 100% rename from front_end/layers/layers-legacy.js rename to front_end/layers/layers-legacy.ts