chrome-devtools-frontend 1.0.950768 → 1.0.951864

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/console/ConsoleViewMessage.ts

@@ -49,7 +49,6 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
@@ -1006,11 +1005,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         wrapper.style.setProperty('max-width', '100%');
         wrapper.appendChild(lineFragment);
         applyCurrentStyle(wrapper);
-        for (const child of wrapper.children) {
-          if (child.classList.contains('devtools-link') && child instanceof HTMLElement) {
-            this.applyForcedVisibleStyle(child);
-          }
-        }
+
         a.appendChild(wrapper);
         if (i < lines.length - 1) {
           a.appendChild(document.createElement('br'));
@@ -1032,25 +1027,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return Platform.StringUtilities.format(format, parameters, formatters, formattedResult, append.bind(this));
   }
 
-  private applyForcedVisibleStyle(element: HTMLElement): void {
-    element.style.setProperty('-webkit-text-stroke', '0', 'important');
-    element.style.setProperty('text-decoration', 'underline', 'important');
-
-    const themedColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        'rgb(33%, 33%, 33%)', ThemeSupport.ThemeSupport.ColorUsage.Foreground);
-    element.style.setProperty('color', themedColor, 'important');
-
-    let backgroundColor = 'hsl(0, 0%, 100%)';
-    if (this.message.level === Protocol.Log.LogEntryLevel.Error) {
-      backgroundColor = 'hsl(0, 100%, 97%)';
-    } else if (this.message.level === Protocol.Log.LogEntryLevel.Warning || this.shouldRenderAsWarning()) {
-      backgroundColor = 'hsl(50, 100%, 95%)';
-    }
-    const themedBackgroundColor = ThemeSupport.ThemeSupport.instance().patchColorText(
-        backgroundColor, ThemeSupport.ThemeSupport.ColorUsage.Background);
-    element.style.setProperty('background-color', themedBackgroundColor, 'important');
-  }
-
   matchesFilterRegex(regexObject: RegExp): boolean {
     regexObject.lastIndex = 0;
     const contentElement = this.contentElement();

package/front_end/panels/console/consoleView.css

@@ -49,6 +49,7 @@
   --override-focused-message-background-color: hsl(214deg 19% 20%);
   --override-console-warning-background-color: hsl(50deg 100% 10%);
   --override-console-warning-text-color: hsl(39deg 89% 55%);
+  --override-console-link-color: var(--color-background-inverted);
 }
 
 .console-toolbar-container {
@@ -460,6 +461,10 @@
   height: 0;
 }
 
+.-theme-with-dark-background #console-messages .console-message-text .devtools-link {
+  color: var(--override-console-link-color);
+}
+
 @media (forced-colors: active) {
   .console-message-expand-icon,
   .console-warning-level [is="ui-icon"].icon-mask.expand-group-icon {

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/ElementsTreeElement.ts

@@ -1811,9 +1811,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.nodeInternal.removeNode();
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  toggleEditAsHTML(callback?: ((arg0: boolean) => any), startEditing?: boolean): void {
+  toggleEditAsHTML(callback?: ((arg0: boolean) => void), startEditing?: boolean): void {
     if (this.editing && this.htmlEditElement) {
       this.editing.commit();
       return;
@@ -2220,7 +2218,5 @@ export interface EditorHandles {
   commit: () => void;
   cancel: () => void;
   editor?: TextEditor.TextEditor.TextEditor;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  resize: () => any;
+  resize: () => void;
 }

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/event_listeners/EventListenersUtils.ts

@@ -347,8 +347,9 @@ export function frameworkEventListeners(object: SDK.RemoteObject.RemoteObject):
       }
     }
 
+    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function checkInternalHandler(handler: any): (() => any)|null {
+    function checkInternalHandler(handler: any): (() => void)|null {
       if (handler && (typeof handler === 'function')) {
         return handler;
       }

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/search/SearchConfig.ts

@@ -159,9 +159,6 @@ export class QueryTerm {
   }
 }
 
-/**
- * @interface
- */
 export interface SearchResult {
   label(): string;
 
@@ -176,9 +173,6 @@ export interface SearchResult {
   matchRevealable(index: number): Object;
 }
 
-/**
- * @interface
- */
 export interface SearchScope {
   performSearch(
       searchConfig: SearchConfig, progress: Common.Progress.Progress,

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/KeybindsSettingsTab.ts

@@ -249,6 +249,10 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
 
     let currentCategory: string;
     actions.forEach(action => {
+      if (action.id() === 'elements.toggle-element-search') {
+        return;
+      }
+
       if (currentCategory !== action.category()) {
         items.push(action.category());
       }

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 {