chrome-devtools-frontend 1.0.946920 → 1.0.948445

package/front_end/panels/application/BackForwardCacheView.ts

@@ -31,25 +31,22 @@ const UIStrings = {
   /**
    * @description Entry name text in the back/forward cache view of the Application panel
    */
-  url: 'URL',
-  /**
-   * @description Entry name text in the back/forward cache view of the Application panel
-   */
-  bfcacheStatus: 'Back/forward cache Status',
+  url: 'URL:',
   /**
    * @description Status text for the status of the back/forward cache status
    */
-  unknown: 'unknown',
+  unknown: 'Unknown Status',
   /**
    * @description Status text for the status of the back/forward cache status indicating that
    * the back/forward cache was not used and a normal navigation occured instead.
    */
-  normalNavigation: 'Normal navigation (Not restored from back/forward cache)',
+  normalNavigation:
+      'Not served from back/forward cache: to trigger back/forward cache, use Chrome\'s back/forward buttons, or use the test button below to automatically navigate away and back.',
   /**
    * @description Status text for the status of the back/forward cache status indicating that
    * the back/forward cache was used to restore the page instead of reloading it.
    */
-  restoredFromBFCache: 'Restored from back/forward cache',
+  restoredFromBFCache: 'Successfully served from back/forward cache.',
   /**
    * @description Label for a list of reasons which prevent the page from being eligible for
    * back/forward cache. These reasons are actionable i.e. they can be cleaned up to make the
@@ -81,9 +78,17 @@ const UIStrings = {
    */
   supportPending: 'Pending Support',
   /**
-   * @description Button name for showing whether BFCache is available in the pages.
+   * @description Label for the button to test whether BFCache is available for the page
+   */
+  runTest: 'Test back/forward cache',
+  /**
+   * @description Label for the disabled button while the test is running
    */
-  runTest: 'Run Test',
+  runningTest: 'Running test',
+  /**
+   * @description Link Text about explanation of back/forward cache
+   */
+  learnMore: 'Learn more: back/forward cache eligibility',
   /**
    * @description Explanation for 'pending support' items which prevent the page from being eligible
    * for back/forward cache.
@@ -94,6 +99,11 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const enum ScreenStatusType {
+  Running = 'Running',
+  Result = 'Result',
+}
+
 export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
   constructor() {
     super(true, 1000);
@@ -102,8 +112,11 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     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]);
@@ -117,7 +130,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     const data = {reportTitle: i18nString(UIStrings.backForwardCacheTitle)};
     const html = LitHtml.html`
       <${ReportView.ReportView.Report.litTagName} .data=${data as ReportView.ReportView.ReportData}>
-      ${this.renderMainFrameInformation(this.getMainFrame())}
+        ${this.renderMainFrameInformation(this.getMainFrame())}
       </${ReportView.ReportView.Report.litTagName}>
     `;
     LitHtml.render(html, this.contentElement, {host: this});
@@ -132,10 +145,20 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     return this.getMainResourceTreeModel()?.mainFrame || null;
   }
 
+  private renderBackForwardCacheTestResult(): void {
+    SDK.TargetManager.TargetManager.instance().removeModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
+        this.renderBackForwardCacheTestResult, this);
+    this.screenStatus = ScreenStatusType.Result;
+    this.update();
+  }
+
   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();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
       return;
@@ -148,6 +171,9 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     if (!historyResults) {
       return;
     }
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
+        this.renderBackForwardCacheTestResult, this);
     resourceTreeModel.navigateToHistoryEntry(historyResults.entries[historyResults.currentIndex - 1]);
   }
 
@@ -176,41 +202,97 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
   private renderMainFrameInformation(mainFrame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitHtml.TemplateResult {
     if (!mainFrame) {
-      return LitHtml.html`<${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.mainFrame)}</${
-          ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
-      ${i18nString(UIStrings.unavailable)}
-      </${ReportView.ReportView.ReportValue.litTagName}>`;
+      // clang-format off
+      return LitHtml.html`
+        <${ReportView.ReportView.ReportKey.litTagName}>
+          ${i18nString(UIStrings.mainFrame)}
+        </${ReportView.ReportView.ReportKey.litTagName}>
+        <${ReportView.ReportView.ReportValue.litTagName}>
+          ${i18nString(UIStrings.unavailable)}
+        </${ReportView.ReportView.ReportValue.litTagName}>
+      `;
+      // clang-format on
     }
+    const isDisabled = this.screenStatus === ScreenStatusType.Running;
+    // clang-format off
     return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${Buttons.Button.Button.litTagName}
-            .variant=${Buttons.Button.Variant.PRIMARY}
-            @click=${this.navigateAwayAndBack}>
+      ${this.renderBackForwardCacheStatus(mainFrame.backForwardCacheDetails.restoredFromCache)}
+      <div class='url'>
+        <div class='url-key'>
+          ${i18nString(UIStrings.url)}
+        </div>
+        <div class='url-value'>
+          ${mainFrame.url}
+        </div>
+      </div>
+      <${ReportView.ReportView.ReportSection.litTagName}>
+        <${Buttons.Button.Button.litTagName}
+          .disabled=${isDisabled}
+          .spinner=${isDisabled}
+          .variant=${Buttons.Button.Variant.PRIMARY}
+          @click=${this.navigateAwayAndBack}>
+          ${isDisabled ? LitHtml.html`
+            ${i18nString(UIStrings.runningTest)}`:`
             ${i18nString(UIStrings.runTest)}
-      </${Buttons.Button.Button.litTagName}>
-      </${ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>${mainFrame.url}</${
-        ReportView.ReportView.ReportValue.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.bfcacheStatus)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>${
-        this.renderBackForwardCacheStatus(
-            mainFrame.backForwardCacheDetails.restoredFromCache)}</${ReportView.ReportView.ReportValue.litTagName}>
-       ${this.maybeRenderExplanations(mainFrame.backForwardCacheDetails.explanations)}
+          `}
+        </${Buttons.Button.Button.litTagName}>
+      </${ReportView.ReportView.ReportSection.litTagName}>
+      <${ReportView.ReportView.ReportSectionDivider.litTagName}>
+      </${ReportView.ReportView.ReportSectionDivider.litTagName}>
+        ${this.maybeRenderExplanations(mainFrame.backForwardCacheDetails.explanations)}
+      <${ReportView.ReportView.ReportSection.litTagName}>
+        <x-link href="https://web.dev/bfcache/" class="link">
+          ${i18nString(UIStrings.learnMore)}
+        </x-link>
+      </${ReportView.ReportView.ReportSection.litTagName}>
     `;
+    // clang-format on
   }
 
-  private renderBackForwardCacheStatus(status: boolean|undefined): Platform.UIString.LocalizedString {
+  private renderBackForwardCacheStatus(status: boolean|undefined): LitHtml.TemplateResult {
     switch (status) {
       case true:
-        return i18nString(UIStrings.restoredFromBFCache);
+        // clang-format off
+        return LitHtml.html`
+          <${ReportView.ReportView.ReportSection.litTagName}>
+            <div class='status'>
+              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+                iconName: 'ic_checkmark_16x16',
+                color: 'green',
+                width: '16px',
+                height: '16px',
+                } as IconButton.Icon.IconData}>
+              </${IconButton.Icon.Icon.litTagName}>
+            </div>
+            ${i18nString(UIStrings.restoredFromBFCache)}
+          </${ReportView.ReportView.ReportSection.litTagName}>
+        `;
+        // clang-format on
       case false:
-        return i18nString(UIStrings.normalNavigation);
+        // clang-format off
+        return LitHtml.html`
+          <${ReportView.ReportView.ReportSection.litTagName}>
+            <div class='status'>
+              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+                  iconName: 'circled_backslash_icon',
+                  color: 'var(--color-text-secondary)',
+                  width: '16px',
+                  height: '16px',
+                  } as IconButton.Icon.IconData}>
+              </${IconButton.Icon.Icon.litTagName}>
+            </div>
+            ${i18nString(UIStrings.normalNavigation)}
+          </${ReportView.ReportView.ReportSection.litTagName}>
+        `;
+        // clang-format on
     }
-    return i18nString(UIStrings.unknown);
+    // clang-format off
+    return LitHtml.html`
+    <${ReportView.ReportView.ReportSection.litTagName}>
+      ${i18nString(UIStrings.unknown)}
+    </${ReportView.ReportView.ReportSection.litTagName}>
+    `;
+    // clang-format on
   }
 
   private maybeRenderExplanations(explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]):
@@ -243,36 +325,46 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // clang-format off
     return LitHtml.html`
       ${explanations.length > 0 ? LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>
+        <${ReportView.ReportView.ReportSectionHeader.litTagName}>
           ${category}
-          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-            iconName: 'help_outline',
-            color: 'var(--color-text-secondary)',
-            width: '16px',
-            height: '16px',
-            } as IconButton.Icon.IconData} title=${explainerText}></${IconButton.Icon.Icon.litTagName}>
-        </${ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
-          <ul class='not-restored-reason-list'>${explanations.map(explanation => this.renderReason(explanation))}</ul>
-        </${ReportView.ReportView.ReportValue.litTagName}>
+          <div class='help-outline-icon'>
+            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+              iconName: 'help_outline',
+              color: 'var(--color-text-secondary)',
+              width: '16px',
+              height: '16px',
+              } as IconButton.Icon.IconData} title=${explainerText}>
+            </${IconButton.Icon.Icon.litTagName}>
+          </div>
+        </${ReportView.ReportView.ReportSectionHeader.litTagName}>
+        ${explanations.map(explanation => this.renderReason(explanation))}
       ` : LitHtml.nothing}
     `;
     // clang-format on
   }
 
   private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
+    // clang-format off
     return LitHtml.html`
-      <li>
-      <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-      iconName: 'circled_exclamation_icon',
-      color: 'orange',
-      width: '16px',
-      height: '16px',
-    } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
-        ${explanation.reason} : ${
-        (explanation.reason in NotRestoredReasonDescription) ?
-            LitHtml.html`${NotRestoredReasonDescription[explanation.reason].name()}` :
-            LitHtml.nothing} </li>
+      <${ReportView.ReportView.ReportSection.litTagName}>
+        ${(explanation.reason in NotRestoredReasonDescription) ?
+          LitHtml.html`
+            <div class='circled-exclamation-icon'>
+              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+                iconName: 'circled_exclamation_icon',
+                color: 'orange',
+                width: '16px',
+                height: '16px',
+              } as IconButton.Icon.IconData}>
+              </${IconButton.Icon.Icon.litTagName}>
+            </div>
+            ${NotRestoredReasonDescription[explanation.reason].name()}` :
+            LitHtml.nothing}
+      </${ReportView.ReportView.ReportSection.litTagName}>
+      <div class='gray-text'>
+        ${explanation.reason}
+      </div>
     `;
+    // clang-format on
   }
 }

package/front_end/panels/application/ResourcesPanel.ts

@@ -9,7 +9,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import resourcesPanelStyles from './resourcesPanel.css.js';
 
-import type {CookieTreeElement} from './ApplicationPanelSidebar.js';
 import {ApplicationPanelSidebar, StorageCategoryView} from './ApplicationPanelSidebar.js';
 import {CookieItemsView} from './CookieItemsView.js';
 import {DatabaseQueryView} from './DatabaseQueryView.js';
@@ -215,47 +214,6 @@ export class ResourceRevealer implements Common.Revealer.Revealer {
   }
 }
 
-let cookieReferenceRevealerInstance: CookieReferenceRevealer;
-
-export class CookieReferenceRevealer implements Common.Revealer.Revealer {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): CookieReferenceRevealer {
-    const {forceNew} = opts;
-    if (!cookieReferenceRevealerInstance || forceNew) {
-      cookieReferenceRevealerInstance = new CookieReferenceRevealer();
-    }
-
-    return cookieReferenceRevealerInstance;
-  }
-  async reveal(cookie: Object): Promise<void> {
-    if (!(cookie instanceof SDK.Cookie.CookieReference)) {
-      throw new Error('Internal error: not a cookie reference');
-    }
-
-    const sidebar = await ResourcesPanel.showAndGetSidebar();
-    await sidebar.cookieListTreeElement.select();
-
-    const contextUrl = cookie.contextUrl();
-    if (contextUrl && await this.revealByDomain(sidebar, contextUrl)) {
-      return;
-    }
-    // Fallback: try to reveal the cookie using its domain as context, which may not work, because the
-    // Application Panel shows cookies grouped by context, see crbug.com/1060563.
-    this.revealByDomain(sidebar, cookie.domain());
-  }
-
-  private async revealByDomain(sidebar: ApplicationPanelSidebar, domain: string): Promise<boolean> {
-    const item = sidebar.cookieListTreeElement.children().find(
-        c => /** @type {!CookieTreeElement} */ (c as CookieTreeElement).cookieDomain().endsWith(domain));
-    if (item) {
-      await item.revealAndSelect();
-      return true;
-    }
-    return false;
-  }
-}
-
 let frameDetailsRevealerInstance: FrameDetailsRevealer;
 
 export class FrameDetailsRevealer implements Common.Revealer.Revealer {

package/front_end/panels/application/application-legacy.ts

@@ -95,9 +95,6 @@ Resources.ResourcesPanel = ResourcesModule.ResourcesPanel.ResourcesPanel;
 /** @constructor */
 Resources.ResourcesPanel.ResourceRevealer = ResourcesModule.ResourcesPanel.ResourceRevealer;
 
-/** @constructor */
-Resources.ResourcesPanel.CookieReferenceRevealer = ResourcesModule.ResourcesPanel.CookieReferenceRevealer;
-
 /** @constructor */
 Resources.ResourcesPanel.FrameDetailsRevealer = ResourcesModule.ResourcesPanel.FrameDetailsRevealer;
 

package/front_end/panels/application/application-meta.ts

@@ -139,19 +139,6 @@ Common.Revealer.registerRevealer({
   },
 });
 
-Common.Revealer.registerRevealer({
-  contextTypes() {
-    return [
-      SDK.Cookie.CookieReference,
-    ];
-  },
-  destination: Common.Revealer.RevealerDestination.APPLICATION_PANEL,
-  async loadRevealer() {
-    const Resources = await loadResourcesModule();
-    return Resources.ResourcesPanel.CookieReferenceRevealer.instance();
-  },
-});
-
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [

package/front_end/panels/application/backForwardCacheView.css

@@ -3,12 +3,50 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-.not-restored-reason-list {
-  margin: 0;
-  list-style-type: none;
-  padding-inline-start: 0;
-}
-
 .inline-icon {
   vertical-align: sub;
 }
+
+.gray-text {
+  color: var(--color-text-secondary);
+  margin: 0 0 15px 56px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: auto;
+  overflow-wrap: break-word;
+  overflow: hidden;
+}
+
+.help-outline-icon {
+  margin: 0 2px;
+}
+
+.circled-exclamation-icon {
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.status {
+  margin-right: 15px;
+  flex-shrink: 0;
+}
+
+.url {
+  grid-column-start: span 2;
+  display: flex;
+  align-items: center;
+  margin: 0 30px;
+  line-height: 28px;
+}
+
+.url-key {
+  color: var(--color-text-secondary);
+  min-width: auto;
+  overflow-wrap: break-word;
+}
+
+.url-value {
+  padding: 0 6px;
+  overflow-wrap: break-word;
+}

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

@@ -318,7 +318,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.html`
     <${ReportView.ReportView.ReportSectionHeader.litTagName}>
       ${i18n.i18n.lockedString('Origin Trials')}
-      <${IconButton.IconButton.IconButton.litTagName} class="inline-button" .data="${{
+      <${IconButton.IconButton.IconButton.litTagName} class="inline-button" .data=${{
       clickHandler: refreshOriginTrials,
       groups: [
         {
@@ -326,7 +326,7 @@ export class FrameDetailsReportView extends HTMLElement {
           text: 'Refresh',
         } as IconButton.IconButton.IconWithTextData,
       ],
-    } as IconButton.IconButton.IconButtonData}">
+    } as IconButton.IconButton.IconButtonData}>
       </${IconButton.IconButton.IconButton.litTagName}>
     </${ReportView.ReportView.ReportSectionHeader.litTagName}>
     ${this.originTrialTreeView}
@@ -541,7 +541,7 @@ export class FrameDetailsReportView extends HTMLElement {
       return LitHtml.nothing;
     }
     const typeStrings = this.getAdFrameTypeStrings(adFrameType);
-    const rows = [LitHtml.html`<div title="${typeStrings.description}">${typeStrings.value}</div>`];
+    const rows = [LitHtml.html`<div title=${typeStrings.description}>${typeStrings.value}</div>`];
     for (const explanation of this.frame.adFrameStatus()?.explanations || []) {
       rows.push(LitHtml.html`<div>${this.getAdFrameExplanationString(explanation)}</div>`);
     }

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

@@ -229,7 +229,7 @@ export class OriginTrialTokenRows extends HTMLElement {
   }
 
   private renderTokenField = (fieldValue: string, hasError?: boolean): LitHtml.TemplateResult => LitHtml.html`
-        <div class="${LitHtml.Directives.ifDefined(hasError ? 'error-text' : undefined)}">
+        <div class=${LitHtml.Directives.ifDefined(hasError ? 'error-text' : undefined)}>
           ${fieldValue}
         </div>`;
 
@@ -334,10 +334,10 @@ export class OriginTrialTreeView extends HTMLElement {
 
     LitHtml.render(
         LitHtml.html`
-      <${TreeOutline.TreeOutline.TreeOutline.litTagName} .data="${{
+      <${TreeOutline.TreeOutline.TreeOutline.litTagName} .data=${{
           tree: trials.map(constructOriginTrialTree),
           defaultRenderer,
-        } as TreeOutline.TreeOutline.TreeOutlineData<OriginTrialTreeNodeData>}">
+        } as TreeOutline.TreeOutline.TreeOutlineData<OriginTrialTreeNodeData>}>
       </${TreeOutline.TreeOutline.TreeOutline.litTagName}>
     `,
         this.shadow, {host: this});

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

@@ -64,7 +64,7 @@ export class StackTraceRow extends HTMLElement {
     LitHtml.render(
         LitHtml.html`
       <div class="stack-trace-row">
-              <div class="stack-trace-function-name text-ellipsis" title="${this.stackTraceRowItem.functionName}">
+              <div class="stack-trace-function-name text-ellipsis" title=${this.stackTraceRowItem.functionName}>
                 ${this.stackTraceRowItem.functionName}
               </div>
               <div class="stack-trace-source-location">

package/front_end/panels/coverage/CoverageView.ts

@@ -470,7 +470,7 @@ export class CoverageView extends UI.Widget.VBox {
       return;
     }
     const text = this.filterInput.value();
-    this.textFilterRegExp = text ? createPlainTextSearchRegex(text, 'i') : null;
+    this.textFilterRegExp = text ? Platform.StringUtilities.createPlainTextSearchRegex(text, 'i') : null;
     this.listView.updateFilterAndHighlight(this.textFilterRegExp);
     this.updateStats();
   }

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -44,7 +44,6 @@ export interface GlobalStyleStats {
 export class CSSOverviewModel extends SDK.SDKModel.SDKModel<void> {
   readonly #runtimeAgent: ProtocolProxyApi.RuntimeApi;
   readonly #cssAgent: ProtocolProxyApi.CSSApi;
-  readonly #domAgent: ProtocolProxyApi.DOMApi;
   readonly #domSnapshotAgent: ProtocolProxyApi.DOMSnapshotApi;
   readonly #overlayAgent: ProtocolProxyApi.OverlayApi;
 
@@ -53,7 +52,6 @@ export class CSSOverviewModel extends SDK.SDKModel.SDKModel<void> {
 
     this.#runtimeAgent = target.runtimeAgent();
     this.#cssAgent = target.cssAgent();
-    this.#domAgent = target.domAgent();
     this.#domSnapshotAgent = target.domsnapshotAgent();
     this.#overlayAgent = target.overlayAgent();
   }

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -36,7 +36,6 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
   #mediaQueries!: Map<string, Protocol.CSS.CSSMedia[]>;
   #unusedDeclarations!: Map<string, UnusedDeclaration[]>;
   #elementCount!: number;
-  #cancelled?: boolean;
   #globalStyleStats!: GlobalStyleStats;
   #textColorContrastIssues!: Map<string, ContrastIssue[]>;
 
@@ -58,7 +57,6 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureCssOverviewClicked);
       this.startOverview();
     }, this);
-    this.#controller.addEventListener(Events.RequestOverviewCancel, this.cancelOverview, this);
     this.#controller.addEventListener(Events.OverviewCompleted, this.overviewCompleted, this);
     this.#controller.addEventListener(Events.Reset, this.reset, this);
     this.#controller.addEventListener(Events.RequestNodeHighlight, this.requestNodeHighlight, this);
@@ -102,7 +100,6 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
     this.#mediaQueries = new Map();
     this.#unusedDeclarations = new Map();
     this.#elementCount = 0;
-    this.#cancelled = false;
     this.#globalStyleStats = {
       styleRules: 0,
       inlineStyles: 0,
@@ -223,10 +220,6 @@ export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManage
     return item[0].value;
   }
 
-  private cancelOverview(): void {
-    this.#cancelled = true;
-  }
-
   private overviewCompleted(): void {
     this.renderOverviewCompletedView();
   }

package/front_end/panels/css_overview/CSSOverviewProcessingView.ts

@@ -19,13 +19,11 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewProcessingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class CSSOverviewProcessingView extends UI.Widget.Widget {
-  readonly #formatter: Intl.NumberFormat;
   readonly #controller: OverviewController;
   fragment?: UI.Fragment.Fragment;
   constructor(controller: OverviewController) {
     super();
 
-    this.#formatter = new Intl.NumberFormat('en-US');
     this.#controller = controller;
     this.render();
   }

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -14,6 +14,7 @@ h1 {
   display: flex;
   flex-direction: column;
   background-color: var(--color-background);
+  overflow: auto;
 }
 
 .summary-header {

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -249,7 +249,7 @@
 
 .overview-completed-view .font-info .font-metric {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-gap: 12px;
 }
 

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -125,7 +126,7 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
     }
 
     const text = this.filterInput.value();
-    this.textFilterRegExp = text ? createPlainTextSearchRegex(text, 'i') : null;
+    this.textFilterRegExp = text ? Platform.StringUtilities.createPlainTextSearchRegex(text, 'i') : null;
     this.listView.updateFilterAndHighlight(this.textFilterRegExp);
     this.updateStats();
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -291,8 +291,16 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private showDOMTree(): void {
-    // TODO(meredithl): Scroll to inspected DOM node.
     this.splitWidget.setMainWidget(this.searchableViewInternal);
+    const selectedNode = this.selectedDOMNode();
+    if (!selectedNode) {
+      return;
+    }
+    const treeElement = this.treeElementForNode(selectedNode);
+    if (!treeElement) {
+      return;
+    }
+    treeElement.select();
   }
 
   static instance(opts: {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1899,7 +1899,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.hideSearchHighlight();
 
     const text = this.listItemElement.textContent || '';
-    const regexObject = createPlainTextSearchRegex(this.searchQuery, 'gi');
+    const regexObject = Platform.StringUtilities.createPlainTextSearchRegex(this.searchQuery, 'gi');
 
     let match = regexObject.exec(text);
     const matchRanges = [];