chrome-devtools-frontend 1.0.950484 → 1.0.951410

package/front_end/panels/application/{BackForwardCacheView.ts → components/BackForwardCacheView.ts}

@@ -2,15 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as LitHtml from '../../ui/lit-html/lit-html.js';
-import * as ReportView from '../../ui/components/report_view/report_view.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as ReportView from '../../../ui/components/report_view/report_view.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as Protocol from '../../../generated/protocol.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
@@ -96,7 +98,7 @@ const UIStrings = {
   supportPendingExplanation:
       'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back/forward cache in a future version of Chrome.',
 };
-const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const enum ScreenStatusType {
@@ -104,36 +106,22 @@ const enum ScreenStatusType {
   Result = 'Result',
 }
 
-export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
+export class BackForwardCacheViewWrapper extends UI.ThrottledWidget.ThrottledWidget {
+  private readonly bfcacheView = new BackForwardCacheView();
+
   constructor() {
     super(true, 1000);
     this.getMainResourceTreeModel()?.addEventListener(
-        SDK.ResourceTreeModel.Events.MainFrameNavigated, this.onBackForwardCacheUpdate, this);
+        SDK.ResourceTreeModel.Events.MainFrameNavigated, this.update, this);
     this.getMainResourceTreeModel()?.addEventListener(
-        SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.onBackForwardCacheUpdate, this);
-    this.update();
-    this.screenStatus = ScreenStatusType.Result;
-  }
-
-  private screenStatus: ScreenStatusType;
-
-  wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([backForwardCacheViewStyles]);
-  }
-
-  private onBackForwardCacheUpdate(): void {
+        SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.update, this);
+    this.contentElement.classList.add('overflow-auto');
+    this.contentElement.appendChild(this.bfcacheView);
     this.update();
   }
 
   async doUpdate(): Promise<void> {
-    const data = {reportTitle: i18nString(UIStrings.backForwardCacheTitle)};
-    const html = LitHtml.html`
-      <${ReportView.ReportView.Report.litTagName} .data=${data as ReportView.ReportView.ReportData}>
-        ${this.renderMainFrameInformation(this.getMainFrame())}
-      </${ReportView.ReportView.Report.litTagName}>
-    `;
-    LitHtml.render(html, this.contentElement, {host: this});
+    this.bfcacheView.data = {frame: this.getMainFrame()};
   }
 
   private getMainResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
@@ -144,21 +132,58 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
   private getMainFrame(): SDK.ResourceTreeModel.ResourceTreeFrame|null {
     return this.getMainResourceTreeModel()?.mainFrame || null;
   }
+}
+
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+export interface BackForwardCacheViewData {
+  frame: SDK.ResourceTreeModel.ResourceTreeFrame|null;
+}
+
+export class BackForwardCacheView extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-resources-back-forward-cache-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #frame: SDK.ResourceTreeModel.ResourceTreeFrame|null = null;
+  #screenStatus = ScreenStatusType.Result;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [backForwardCacheViewStyles];
+  }
+
+  set data(data: BackForwardCacheViewData) {
+    this.#frame = data.frame;
+    this.render();
+  }
+
+  private async render(): Promise<void> {
+    await coordinator.write('BackForwardCacheView render', () => {
+      // Disabled until https://crbug.com/1079231 is fixed.
+      // clang-format off
+      LitHtml.render(LitHtml.html`
+        <${ReportView.ReportView.Report.litTagName} .data=${
+            {reportTitle: i18nString(UIStrings.backForwardCacheTitle)} as ReportView.ReportView.ReportData
+        }>
+          ${this.renderMainFrameInformation()}
+        </${ReportView.ReportView.Report.litTagName}>
+      `, this.#shadow, {host: this});
+      // clang-format on
+    });
+  }
 
   private renderBackForwardCacheTestResult(): void {
     SDK.TargetManager.TargetManager.instance().removeModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
         this.renderBackForwardCacheTestResult, this);
-    this.screenStatus = ScreenStatusType.Result;
-    this.update();
+    this.#screenStatus = ScreenStatusType.Result;
+    this.render();
   }
 
   private async goBackOneHistoryEntry(): Promise<void> {
     SDK.TargetManager.TargetManager.instance().removeModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
         this.goBackOneHistoryEntry, this);
-    this.screenStatus = ScreenStatusType.Running;
-    this.update();
+    this.#screenStatus = ScreenStatusType.Running;
+    this.render();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
       return;
@@ -200,8 +225,8 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
-  private renderMainFrameInformation(mainFrame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitHtml.TemplateResult {
-    if (!mainFrame) {
+  private renderMainFrameInformation(): LitHtml.TemplateResult {
+    if (!this.#frame) {
       // clang-format off
       return LitHtml.html`
         <${ReportView.ReportView.ReportKey.litTagName}>
@@ -213,16 +238,16 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
       `;
       // clang-format on
     }
-    const isDisabled = this.screenStatus === ScreenStatusType.Running;
+    const isDisabled = this.#screenStatus === ScreenStatusType.Running;
     // clang-format off
     return LitHtml.html`
-      ${this.renderBackForwardCacheStatus(mainFrame.backForwardCacheDetails.restoredFromCache)}
+      ${this.renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
       <div class='url'>
         <div class='url-key'>
           ${i18nString(UIStrings.url)}
         </div>
         <div class='url-value'>
-          ${mainFrame.url}
+          ${this.#frame.url}
         </div>
       </div>
       <${ReportView.ReportView.ReportSection.litTagName}>
@@ -239,7 +264,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
       </${ReportView.ReportView.ReportSection.litTagName}>
       <${ReportView.ReportView.ReportSectionDivider.litTagName}>
       </${ReportView.ReportView.ReportSectionDivider.litTagName}>
-        ${this.maybeRenderExplanations(mainFrame.backForwardCacheDetails.explanations)}
+        ${this.maybeRenderExplanations(this.#frame.backForwardCacheDetails.explanations)}
       <${ReportView.ReportView.ReportSection.litTagName}>
         <x-link href="https://web.dev/bfcache/" class="link">
           ${i18nString(UIStrings.learnMore)}
@@ -368,3 +393,12 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // clang-format on
   }
 }
+
+ComponentHelpers.CustomElements.defineComponent('devtools-resources-back-forward-cache-view', BackForwardCacheView);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-resources-back-forward-cache-view': BackForwardCacheView;
+  }
+}

package/front_end/panels/application/{backForwardCacheView.css → components/backForwardCacheView.css}

@@ -3,6 +3,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+
 .inline-icon {
   vertical-align: sub;
 }
@@ -50,3 +51,11 @@
   padding: 0 6px;
   overflow-wrap: break-word;
 }
+
+.link,
+.devtools-link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 2px 0; /* adjust focus ring size */
+}

package/front_end/panels/application/components/components.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as BackForwardCacheView from './BackForwardCacheView.js';
 import * as EndpointsGrid from './EndpointsGrid.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
@@ -10,6 +11,7 @@ import * as StackTrace from './StackTrace.js';
 import * as TrustTokensView from './TrustTokensView.js';
 
 export {
+  BackForwardCacheView,
   EndpointsGrid,
   FrameDetailsView,
   OriginTrialTreeView,

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -98,11 +98,11 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     const elementNode = this.elementNode();
     const cssModel = this.cssModel();
     if (!elementNode || !cssModel) {
-      return /** @type {?ComputedStyle} */ null as ComputedStyle | null;
+      return null;
     }
     const nodeId = elementNode.id;
     if (!nodeId) {
-      return /** @type {?ComputedStyle} */ null as ComputedStyle | null;
+      return null;
     }
 
     if (!this.computedStylePromise) {

package/front_end/panels/elements/ElementsPanel.ts

@@ -1263,11 +1263,7 @@ export class DOMNodeRevealer implements Common.Revealer.Revealer {
       } else if (node instanceof SDK.DOMModel.DeferredDOMNode) {
         (node as SDK.DOMModel.DeferredDOMNode).resolve(checkDeferredDOMNodeThenReveal);
       } else if (node instanceof SDK.RemoteObject.RemoteObject) {
-        const domModel =
-            /** @type {!SDK.RemoteObject.RemoteObject} */ (node as SDK.RemoteObject.RemoteObject)
-                .runtimeModel()
-                .target()
-                .model(SDK.DOMModel.DOMModel);
+        const domModel = node.runtimeModel().target().model(SDK.DOMModel.DOMModel);
         if (domModel) {
           domModel.pushObjectAsNodeToFrontend(node).then(checkRemoteObjectThenReveal);
         } else {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -470,7 +470,7 @@ export class ElementsTreeOutline extends
       treeElement = this.lookUpTreeElement(node.parentNode);
     }
 
-    return /** @type {?ElementsTreeElement} */ treeElement as ElementsTreeElement | null;
+    return treeElement as ElementsTreeElement | null;
   }
 
   private lookUpTreeElement(node: SDK.DOMModel.DOMNode|null): UI.TreeOutline.TreeElement|null {
@@ -1197,7 +1197,7 @@ export class ElementsTreeOutline extends
     if (index >= treeElement.expandedChildrenLimit()) {
       this.setExpandedChildrenLimit(treeElement, index + 1);
     }
-    return /** @type {!ElementsTreeElement} */ treeElement.childAt(index) as ElementsTreeElement;
+    return treeElement.childAt(index) as ElementsTreeElement;
   }
 
   private visibleChildren(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -452,7 +452,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
     let sectionToFocus: (StylePropertiesSection|null)|null = null;
     let willIterateForward = false;
-    switch (/** @type {!KeyboardEvent} */ (event as KeyboardEvent).key) {
+    switch ((event as KeyboardEvent).key) {
       case 'ArrowUp':
       case 'ArrowLeft': {
         sectionToFocus = section.previousSibling() || section.lastSibling();

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -231,8 +231,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     if (selection.type() === Type.Snapshot) {
       const snapshotWithRect = (selection as SnapshotSelection).snapshot();
       snapshotWithRect.snapshot.addReference();
-      return /** @type {!Promise<?SDK.PaintProfiler.SnapshotWithRect>} */ Promise.resolve(snapshotWithRect) as
-          Promise<SDK.PaintProfiler.SnapshotWithRect|null>;
+      return Promise.resolve(snapshotWithRect);
     }
     if (selection.layer()) {
       const promise = selection.layer().snapshots()[0];
@@ -240,8 +239,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
         return promise;
       }
     }
-    return /** @type {!Promise<?SDK.PaintProfiler.SnapshotWithRect>} */ Promise.resolve(null) as
-        Promise<SDK.PaintProfiler.SnapshotWithRect|null>;
+    return Promise.resolve(null);
   }
 
   private initGL(canvas: HTMLCanvasElement): WebGLRenderingContext|null {
@@ -253,7 +251,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     gl.enable(gl.BLEND);
     gl.clearColor(0.0, 0.0, 0.0, 0.0);
     gl.enable(gl.DEPTH_TEST);
-    return /** @type {!WebGLRenderingContext} */ gl as WebGLRenderingContext;
+    return gl;
   }
 
   private createShader(type: number, script: string): void {
@@ -434,7 +432,6 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   }
 
   private calculateDepthsAndVisibility(): void {
-    /** @type {!Map<string, number>} */
     this.depthByLayerId = new Map();
     let depth = 0;
     const showInternalLayers = this.layerViewHost.showInternalLayersSetting().get();
@@ -449,7 +446,6 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
 
     const queue = [root];
     this.depthByLayerId.set(root.id(), 0);
-    /** @type {!Set<!SDK.LayerTreeBase.Layer>} */
     this.visibleLayers = new Set();
     while (queue.length > 0) {
       const layer = queue.shift();
@@ -983,9 +979,7 @@ export class LayerTextureManager {
       this.setLayerTree(null);
     }
 
-    /** @type {!Map<!SDK.LayerTreeBase.Layer, !Array<!Tile>>} */
     this.tilesByLayer = new Map();
-    /** @type {!Array<!SDK.LayerTreeBase.Layer>} */
     this.queue = [];
   }
 

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -285,11 +285,10 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     for (const runtimeSetting of RuntimeSettings) {
       runtimeSetting.setFlags(flags, runtimeSetting.setting.get());
     }
-    return /** @type {{internalDisableDeviceScreenEmulation: boolean, emulatedFormFactor: (string|undefined)}} */ flags as
-        {
-          internalDisableDeviceScreenEmulation: boolean,
-          emulatedFormFactor: (string | undefined),
-        };
+    return flags as {
+      internalDisableDeviceScreenEmulation: boolean,
+      emulatedFormFactor: (string | undefined),
+    };
   }
 
   getCategoryIDs(): string[] {

package/front_end/panels/media/TickingFlameChart.ts

@@ -12,8 +12,7 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {Bounds, formatMillisecondsToSeconds} from './TickingFlameChartHelpers.js';
 
 const defaultFont = '11px ' + Host.Platform.fontFamily();
-const defaultColor =
-    ThemeSupport.ThemeSupport.instance().patchColorText('#444', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
+const defaultColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
 
 const DefaultStyle = {
   height: 20,

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -209,7 +209,7 @@ export class NetworkLogViewColumns {
 
   private static convertToDataGridDescriptor(columnConfig: Descriptor): DataGrid.DataGrid.ColumnDescriptor {
     const title = columnConfig.title instanceof Function ? columnConfig.title() : columnConfig.title;
-    return /** @type {!DataGrid.DataGrid.ColumnDescriptor} */ {
+    return {
       id: columnConfig.id,
       title,
       sortable: columnConfig.sortable,

package/front_end/panels/profiler/HeapProfileView.ts

@@ -255,7 +255,7 @@ export class SamplingHeapProfileTypeBase extends
   }
 
   profileBeingRecorded(): SamplingHeapProfileHeader|null {
-    return /** @type {?SamplingHeapProfileHeader} */ super.profileBeingRecorded() as SamplingHeapProfileHeader | null;
+    return super.profileBeingRecorded() as SamplingHeapProfileHeader | null;
   }
 
   typeName(): string {

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -472,7 +472,6 @@ export class HeapSnapshotViewportDataGrid extends HeapSnapshotSortableDataGrid {
       if (selectedNode.parent) {
         selectedNode.select(true);
       } else {
-        /** @type {?HeapSnapshotGridNode} */
         this.selectedNode = selectedNode;
       }
     }

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -861,8 +861,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   }
 
   getPopoverRequest(event: Event): UI.PopoverHelper.PopoverRequest|null {
-    const span =
-        /** @type {?HTMLElement} */ (UI.UIUtils.enclosingNodeOrSelfWithNodeName((event.target as Node), 'span'));
+    const span = UI.UIUtils.enclosingNodeOrSelfWithNodeName((event.target as Node), 'span');
     const row = UI.UIUtils.enclosingNodeOrSelfWithNodeName((event.target as Node), 'tr');
     if (!row) {
       return null;

package/front_end/panels/profiler/heapProfiler.css

@@ -137,7 +137,7 @@
   color: var(--color-text-secondary);
 }
 
-.cycled-ancessor-node {
+.heap-snapshot-view tr:not(.selected) .cycled-ancessor-node {
   opacity: 60%;
 }
 

package/front_end/panels/security/SecurityModel.ts

@@ -53,13 +53,11 @@ export class SecurityModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 
   resourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel {
-    return /** @type {!SDK.ResourceTreeModel.ResourceTreeModel} */ this.target().model(
-               SDK.ResourceTreeModel.ResourceTreeModel) as SDK.ResourceTreeModel.ResourceTreeModel;
+    return this.target().model(SDK.ResourceTreeModel.ResourceTreeModel) as SDK.ResourceTreeModel.ResourceTreeModel;
   }
 
   networkManager(): SDK.NetworkManager.NetworkManager {
-    return /** @type {!SDK.NetworkManager.NetworkManager} */ this.target().model(SDK.NetworkManager.NetworkManager) as
-        SDK.NetworkManager.NetworkManager;
+    return this.target().model(SDK.NetworkManager.NetworkManager) as SDK.NetworkManager.NetworkManager;
   }
 
   // eslint-disable-next-line @typescript-eslint/naming-convention

package/front_end/panels/security/SecurityPanel.ts

@@ -797,11 +797,11 @@ export class SecurityPanelSidebarTree extends UI.TreeOutline.TreeOutlineInShadow
   }
 
   private originGroupTitle(originGroup: OriginGroup): string {
-    return /** @type {string} */ this.originGroupTitles.get(originGroup) as string;
+    return this.originGroupTitles.get(originGroup) as string;
   }
 
   private originGroupElement(originGroup: OriginGroup): UI.TreeOutline.TreeElement {
-    return /** @type {!UI.TreeOutline.TreeElement} */ this.originGroups.get(originGroup) as UI.TreeOutline.TreeElement;
+    return this.originGroups.get(originGroup) as UI.TreeOutline.TreeElement;
   }
 
   private createOriginGroupElement(originGroupTitle: string): UI.TreeOutline.TreeElement {

package/front_end/panels/settings/settingsScreen.css

@@ -137,12 +137,13 @@ fieldset {
 }
 
 #experiments-tab-content .settings-container {
-  column-width: 470px;
+  column-width: auto;
 }
 
 #experiments-tab-content .settings-block {
-  width: 470px;
+  width: auto;
   margin-left: 0;
+  margin-right: 10px;
 }
 
 .settings-tab-container header > h1 {
@@ -172,7 +173,11 @@ fieldset {
 
 .settings-experiment {
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto min-content 1fr;
+}
+
+.settings-experiment [is="dt-checkbox"] {
+  padding-right: 10px;
 }
 
 .settings-experiment .devtools-link {

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -124,7 +124,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
 
     titleElement.textContent = uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '');
     this.renderSubtitleElement(subtitleElement, fullDisplayName.substring(0, fileNameIndex + 1));
-    /** @type {!HTMLElement} */ UI.Tooltip.Tooltip.install((subtitleElement as HTMLElement), fullDisplayName);
+    UI.Tooltip.Tooltip.install((subtitleElement as HTMLElement), fullDisplayName);
     const ranges = [];
     for (let i = 0; i < indexes.length; ++i) {
       ranges.push({offset: indexes[i], length: 1});
@@ -151,7 +151,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     first.textContent = text.substring(0, splitPosition);
     const second = element.createChild('div', 'second-part');
     second.textContent = text.substring(splitPosition);
-    /** @type {!HTMLElement} */ UI.Tooltip.Tooltip.install((element as HTMLElement), text);
+    UI.Tooltip.Tooltip.install((element as HTMLElement), text);
   }
 
   selectItem(itemIndex: number|null, promptValue: string): void {

package/front_end/panels/sources/NavigatorView.ts

@@ -559,7 +559,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       if (target) {
         return this.domainNode(uiSourceCode, project, target, frame, projectOrigin);
       }
-      return /** @type {!NavigatorTreeNode} */ this.rootNode.child(project.id()) as NavigatorTreeNode;
+      return this.rootNode.child(project.id()) as NavigatorTreeNode;
     }
 
     const parentNode =

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -284,8 +284,7 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
     }
 
     if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
-      const valueNode = /** @type {!Bindings.DebuggerLanguagePlugins.ValueNode} */ obj;
-      return valueNode.inspectableAddress !== undefined;
+      return obj.inspectableAddress !== undefined;
     }
 
     return false;
@@ -307,7 +306,7 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
     let memoryObj: SDK.RemoteObject.RemoteObject = obj;
 
     if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
-      const valueNode = /** @type {!Bindings.DebuggerLanguagePlugins.ValueNode} */ obj;
+      const valueNode = obj;
       address = valueNode.inspectableAddress || 0;
       const callFrame = valueNode.callFrame;
       const response = await obj.debuggerModel().agent.invoke_evaluateOnCallFrame({

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -162,7 +162,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   }
 
   fileViews(): UI.Widget.Widget[] {
-    return /** @type {!Array.<!UI.Widget.Widget>} */ this.tabbedPane.tabViews() as UI.Widget.Widget[];
+    return this.tabbedPane.tabViews();
   }
 
   leftToolbar(): UI.Toolbar.Toolbar {

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -259,8 +259,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       nestingLevel: 0,
       shareHeaderLine: true,
     };
-    return /** @type {!PerfUI.FlameChart.GroupStyle} */ Object.assign(defaultGroupStyle, extra) as
-        PerfUI.FlameChart.GroupStyle;
+    return Object.assign(defaultGroupStyle, extra);
   }
 
   setModel(performanceModel: PerformanceModel|null): void {
@@ -933,9 +932,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 
   private entryType(entryIndex: number): EntryType {
-    return this.entryTypeByLevel[/** @type {!PerfUI.FlameChart.TimelineData} */ (
-                                     this.timelineDataInternal as PerfUI.FlameChart.TimelineData)
-                                     .entryLevels[entryIndex]];
+    return this.entryTypeByLevel[(this.timelineDataInternal as PerfUI.FlameChart.TimelineData).entryLevels[entryIndex]];
   }
 
   prepareHighlightedEntryInfo(entryIndex: number): Element|null {

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -101,7 +101,6 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     if (this.timelineDataInternal) {
       return this.timelineDataInternal;
     }
-    /** @type {!Array<!TimelineModel.TimelineModel.NetworkRequest>} */
     this.requests = [];
     this.timelineDataInternal = new PerfUI.FlameChart.TimelineData([], [], [], []);
     if (this.model) {

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -46,7 +46,6 @@ class MainSplitWidget extends UI.SplitWidget.SplitWidget {
   }
 
   setWebVitals(webVitals: WebVitalsIntegrator): void {
-    /** @type {!WebVitalsIntegrator} */
     this.webVitals = webVitals;
     this.webVitals.setMinimumSize(0, 120);
   }

package/front_end/panels/timeline/TimelinePanel.ts

@@ -772,7 +772,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   private async getCoverageViewWidget(): Promise<Coverage.CoverageView.CoverageView> {
     const view = (UI.ViewManager.ViewManager.instance().view('coverage') as UI.View.View);
-    return /** @type {!Coverage.CoverageView.CoverageView} */ await view.widget() as Coverage.CoverageView.CoverageView;
+    return await view.widget() as Coverage.CoverageView.CoverageView;
   }
 
   private async startRecording(): Promise<void> {
@@ -1160,8 +1160,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private frameForSelection(selection: TimelineSelection): TimelineModel.TimelineFrameModel.TimelineFrame|null {
     switch (selection.type()) {
       case TimelineSelection.Type.Frame:
-        return /** @type {!TimelineModel.TimelineFrameModel.TimelineFrame} */ selection.object() as
-            TimelineModel.TimelineFrameModel.TimelineFrame;
+        return selection.object() as TimelineModel.TimelineFrameModel.TimelineFrame;
       case TimelineSelection.Type.Range:
         return null;
       case TimelineSelection.Type.TraceEvent:

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1521,7 +1521,7 @@ export class TimelineUIUtils {
       if (!color) {
         throw new Error('Unable to parse color from TimelineUIUtils.categories().scripting.color');
       }
-      return /** @type {string} */ color.setAlpha(0.3).asString(null) as string;
+      return color.setAlpha(0.3).asString(null) as string;
     }
 
     return color;