chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

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

@@ -0,0 +1,184 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../../generated/protocol.js';
+
+import sharedStorageAccessGridStyles from './sharedStorageAccessGrid.css.js';
+
+const UIStrings = {
+  /**
+  *@description Text in Shared Storage Events View of the Application panel
+  */
+  sharedStorage: 'Shared Storage',
+  /**
+  *@description Hover text for an info icon in the Shared Storage Events panel
+  */
+  allSharedStorageEvents: 'All shared storage events for this page.',
+  /**
+  *@description Text in Shared Storage Events View of the Application panel
+  * Date and time of an Shared Storage event in a locale-
+  * dependent format.
+  */
+  eventTime: 'Event Time',
+  /**
+  *@description Text in Shared Storage Events View of the Application panel
+  * Type of shared storage event such as 'documentAddModule', 'documentRun',
+  * 'documentSet', 'workletDelete', or 'workletGet'.
+  */
+  eventType: 'Access Type',
+  /**
+  *@description Text in Shared Storage Events View of the Application panel
+  * Id of the page's main frame for this access event.
+  */
+  mainFrameId: 'Main Frame ID',
+  /**
+  *@description Text in Shared Storage Events View of the Application panel
+  * Owner origin of the shared storage for this access event.
+  */
+  ownerOrigin: 'Owner Origin',
+  /**
+  *@description Text in Shared Storage Events View of the Application panel
+  * Event parameters whose presence/absence depend on the access type.
+  */
+  eventParams: 'Optional Event Params',
+  /**
+  *@description Text shown instead of a table when the table would be empty.
+  */
+  noEvents: 'No shared storage events recorded.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/SharedStorageAccessGrid.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class SharedStorageAccessGrid extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-shared-storage-access-grid`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #datastores: Array<Protocol.Storage.SharedStorageAccessedEvent> = [];
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [sharedStorageAccessGridStyles];
+    this.#render();
+  }
+
+  set data(data: Array<Protocol.Storage.SharedStorageAccessedEvent>) {
+    this.#datastores = data;
+    this.#render();
+  }
+
+  #render(): void {
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div>
+        <span class="heading">${i18nString(UIStrings.sharedStorage)}</span>
+        <${IconButton.Icon.Icon.litTagName} class="info-icon" title=${
+            i18nString(UIStrings.allSharedStorageEvents)}
+          .data=${
+            {iconName: 'ic_info_black_18dp',
+              color: 'var(--color-link)', width: '14px'} as
+            IconButton.Icon.IconWithName}>
+        </${IconButton.Icon.Icon.litTagName}>
+        ${this.#renderGridOrNoDataMessage()}
+      </div>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+
+  #renderGridOrNoDataMessage(): LitHtml.TemplateResult {
+    if (this.#datastores.length === 0) {
+      return LitHtml.html`<div
+        class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;
+    }
+
+    const gridData: DataGrid.DataGridController.DataGridControllerData = {
+      columns: [
+        {
+          id: 'event-main-frame-id',
+          title: i18nString(UIStrings.mainFrameId),
+          widthWeighting: 10,
+          hideable: false,
+          visible: false,
+          sortable: false,
+        },
+        {
+          id: 'event-time',
+          title: i18nString(UIStrings.eventTime),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-type',
+          title: i18nString(UIStrings.eventType),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-owner-origin',
+          title: i18nString(UIStrings.ownerOrigin),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+        {
+          id: 'event-params',
+          title: i18nString(UIStrings.eventParams),
+          widthWeighting: 10,
+          hideable: false,
+          visible: true,
+          sortable: true,
+        },
+      ],
+      rows: this.#buildRows(),
+      initialSort: {
+        columnId: 'event-time',
+        direction: DataGrid.DataGridUtils.SortDirection.ASC,
+      },
+    };
+
+    return LitHtml.html`
+      <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+        gridData as DataGrid.DataGridController.DataGridControllerData}></${
+        DataGrid.DataGridController.DataGridController.litTagName}>
+    `;
+  }
+
+  #buildRows(): DataGrid.DataGridUtils.Row[] {
+    return this.#datastores.map(event => ({
+                                  cells: [
+                                    {columnId: 'event-main-frame-id', value: event.mainFrameId},
+                                    {
+                                      columnId: 'event-time',
+                                      value: event.accessTime,
+                                      renderer: this.#renderDateForDataGridCell.bind(this),
+                                    },
+                                    {columnId: 'event-type', value: event.type},
+                                    {columnId: 'event-owner-origin', value: event.ownerOrigin},
+                                    {columnId: 'event-params', value: JSON.stringify(event.params)},
+                                  ],
+                                }));
+  }
+
+  #renderDateForDataGridCell(value: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
+    const date = new Date(1e3 * (value as number));
+    return LitHtml.html`${date.toLocaleString()}`;
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-shared-storage-access-grid', SharedStorageAccessGrid);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-shared-storage-access-grid': SharedStorageAccessGrid;
+  }
+}

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

@@ -0,0 +1,173 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as ReportView from '../../../ui/components/report_view/report_view.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import sharedStorageMetadataViewStyles from './sharedStorageMetadataView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Text in SharedStorage Metadata View of the Application panel
+  */
+  sharedStorage: 'Shared Storage',
+  /**
+  *@description Section header for Metadata
+  */
+  metadata: 'Metadata',
+  /**
+  *@description The origin of a URL (https://web.dev/same-site-same-origin/#origin)
+  *(for a lot of languages this does not need to be translated, please translate only where necessary)
+  */
+  origin: 'Origin',
+  /**
+  *@description The time when the origin most recently created its shared storage database
+  */
+  creationTime: 'Creation',
+  /**
+  *@description The number of entries currently in the origin's database
+  */
+  length: 'Length',
+  /**
+  *@description The number of bits remaining in the origin's shared storage privacy budget
+  */
+  remainingBudget: 'Budget',
+  /**
+  *@description Section header above Entries
+  */
+  entries: 'Entries',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/SharedStorageMetadataView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface SharedStorageMetadataGetter {
+  getMetadata: () => Promise<Protocol.Storage.SharedStorageMetadata|null>;
+}
+
+export class SharedStorageMetadataView extends UI.Widget.VBox {
+  readonly #reportView = new SharedStorageMetadataReportView();
+  #sharedStorageMetadataGetter: SharedStorageMetadataGetter;
+
+  constructor(sharedStorageMetadataGetter: SharedStorageMetadataGetter, owner: string) {
+    super();
+    this.#sharedStorageMetadataGetter = sharedStorageMetadataGetter;
+    this.contentElement.classList.add('overflow-auto');
+    this.contentElement.appendChild(this.#reportView);
+    this.#reportView.origin = owner;
+    void this.doUpdate();
+  }
+
+  async doUpdate(): Promise<void> {
+    const metadata = await this.#sharedStorageMetadataGetter.getMetadata();
+    const creationTime = metadata?.creationTime ?? null;
+    const length = metadata?.length ?? 0;
+    const remainingBudget = metadata?.remainingBudget ?? 0;
+    this.#reportView.data = {creationTime, length, remainingBudget};
+  }
+}
+
+export interface SharedStorageMetadataViewData {
+  creationTime: Protocol.Network.TimeSinceEpoch|null;
+  length: number;
+  remainingBudget: number;
+}
+
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+export class SharedStorageMetadataReportView extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-shared-storage-metadata-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #origin: string = '';
+  #creationTime: Protocol.Network.TimeSinceEpoch|null = null;
+  #length: number = 0;
+  #remainingBudget: number = 0;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [sharedStorageMetadataViewStyles];
+  }
+
+  set data(data: SharedStorageMetadataViewData) {
+    if (data.creationTime) {
+      this.#creationTime = data.creationTime;
+      this.#length = data.length;
+      this.#remainingBudget = data.remainingBudget;
+    }
+    void this.#render();
+  }
+
+  set origin(origin: string) {
+    this.#origin = origin;
+  }
+
+  async #render(): Promise<void> {
+    await coordinator.write('SharedStorageMetadataView render', () => {
+      const titleForReport = {reportTitle: i18nString(UIStrings.sharedStorage)} as ReportView.ReportView.ReportData;
+
+      // Disabled until https://crbug.com/1079231 is fixed.
+      // clang-format off
+      LitHtml.render(LitHtml.html`
+        <${ReportView.ReportView.Report.litTagName} .data=${titleForReport as ReportView.ReportView.ReportData}>
+          ${this.#renderMetadataSection()}
+          ${this.#renderEntriesSection()}
+        </${ReportView.ReportView.Report.litTagName}>
+      `, this.#shadow, {host: this});
+      // clang-format on
+    });
+  }
+
+  #renderMetadataSection(): LitHtml.LitTemplate {
+    return LitHtml.html`
+      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.metadata)}</${
+        ReportView.ReportView.ReportSectionHeader.litTagName}>
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
+        ReportView.ReportView.ReportKey.litTagName}>
+      <${ReportView.ReportView.ReportValue.litTagName}>
+          <div class="text-ellipsis" title=${this.#origin}>${this.#origin}</div>
+      </${ReportView.ReportView.ReportValue.litTagName}>
+     <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.creationTime)}</${
+        ReportView.ReportView.ReportKey.litTagName}>
+     <${ReportView.ReportView.ReportValue.litTagName}>
+      ${this.#renderDateForCreationTime()}</${ReportView.ReportView.ReportValue.litTagName}>
+     <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.remainingBudget)}</${
+        ReportView.ReportView.ReportKey.litTagName}>
+     <${ReportView.ReportView.ReportValue.litTagName}>${this.#remainingBudget}</${
+        ReportView.ReportView.ReportValue.litTagName}>
+     <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.length)}
+     </${ReportView.ReportView.ReportKey.litTagName}>
+     <${ReportView.ReportView.ReportValue.litTagName}>${this.#length}</${ReportView.ReportView.ReportValue.litTagName}>
+      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
+        ReportView.ReportView.ReportSectionDivider.litTagName}>
+    `;
+  }
+
+  #renderDateForCreationTime(): LitHtml.LitTemplate {
+    if (!this.#creationTime) {
+      return LitHtml.nothing;
+    }
+    const date = new Date(1e3 * (this.#creationTime as number));
+    return LitHtml.html`${date.toLocaleString()}`;
+  }
+
+  #renderEntriesSection(): LitHtml.LitTemplate {
+    return LitHtml.html`
+      <${ReportView.ReportView.ReportSectionHeader.litTagName} title=${i18nString(UIStrings.entries)}>
+        ${i18nString(UIStrings.entries)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
+    `;
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent(
+    'devtools-shared-storage-metadata-view', SharedStorageMetadataReportView);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-shared-storage-metadata-view': SharedStorageMetadataReportView;
+  }
+}

package/front_end/panels/application/components/backForwardCacheView.css

@@ -43,7 +43,7 @@
   display: flex;
   align-items: center;
   margin: 0 30px;
-  line-height: 28px;
+  line-height: 26px;
 }
 
 .report-key {
@@ -56,7 +56,6 @@
 .report-value {
   padding: 0 6px;
   overflow-wrap: break-word;
-  line-height: 24px;
 }
 
 .link,
@@ -64,7 +63,7 @@
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
-  padding: 2px 0; /* adjust focus ring size */
+  outline-offset: 2px;
 }
 
 .tree-outline li .selection {

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

@@ -9,6 +9,8 @@ import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
 import * as OriginTrialTreeView from './OriginTrialTreeView.js';
 import * as ProtocolHandlersView from './ProtocolHandlersView.js';
 import * as ReportsGrid from './ReportsGrid.js';
+import * as SharedStorageAccessGrid from './SharedStorageAccessGrid.js';
+import * as SharedStorageMetadataView from './SharedStorageMetadataView.js';
 import * as StackTrace from './StackTrace.js';
 import * as TrustTokensView from './TrustTokensView.js';
 
@@ -20,6 +22,8 @@ export {
   OriginTrialTreeView,
   ProtocolHandlersView,
   ReportsGrid,
+  SharedStorageAccessGrid,
+  SharedStorageMetadataView,
   StackTrace,
   TrustTokensView,
 };

package/front_end/panels/application/components/frameDetailsReportView.css

@@ -19,7 +19,7 @@ button ~ .text-ellipsis {
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
-  padding: 2px 0; /* adjust focus ring size */
+  outline-offset: 2px;
 }
 
 button.link {

package/front_end/panels/application/components/permissionsPolicySection.css

@@ -19,7 +19,7 @@
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
-  padding: 2px 0; /* adjust focus ring size */
+  outline-offset: 2px;
 }
 
 button.link {

package/front_end/panels/application/components/protocolHandlersView.css

@@ -8,7 +8,7 @@
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
-  padding: 2px 0; /* adjust focus ring size */
+  outline-offset: 2px;
 }
 
 .devtools-link:focus-visible {
@@ -23,6 +23,10 @@ input.devtools-text-input[type="text"] {
   height: 25px;
 }
 
+input.devtools-text-input[type="text"]::placeholder {
+  color: var(--color-text-secondary);
+}
+
 .protocol-handlers-row {
   margin: 10px 0 2px 18px;
 }

package/front_end/panels/application/components/sharedStorageAccessGrid.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+:host {
+  padding: 20px;
+}
+
+.heading {
+  font-size: 15px;
+}
+
+devtools-data-grid-controller {
+  border: 1px solid var(--color-details-hairline);
+  margin-top: 20px;
+}
+
+.info-icon {
+  vertical-align: text-bottom;
+  height: 14px;
+}
+
+.no-events-message {
+  margin-top: 20px;
+}

package/front_end/panels/application/components/sharedStorageMetadataView.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/front_end/panels/application/components/stackTraceLinkButton.css

@@ -8,7 +8,7 @@ button.link {
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
-  padding: 2px 0; /* adjust focus ring size */
+  outline-offset: 2px;
   border: none;
   background: none;
   font-family: inherit;

package/front_end/panels/application/components/stackTraceRow.css

@@ -32,5 +32,5 @@
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
-  padding: 2px 0; /* adjust focus ring size */
+  outline-offset: 2px;
 }

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -169,12 +169,13 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     const enabled = item.checkbox.checked;
     UI.ARIAUtils.setChecked(item.element.listItemElement, enabled);
 
-    for (const breakpoint of this.#breakpoints.keys()) {
+    for (const [breakpoint, treeItem] of this.#breakpoints) {
       if (breakpoint.category() === category) {
         const matchingBreakpoint = this.#breakpoints.get(breakpoint);
         if (matchingBreakpoint) {
           matchingBreakpoint.checkbox.checked = enabled;
           this.toggleBreakpoint(breakpoint, enabled);
+          UI.ARIAUtils.setChecked(treeItem.element.listItemElement, enabled);
         }
       }
     }

package/front_end/panels/console/ConsoleFormat.ts

@@ -152,12 +152,12 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
             case 48:
               if (codes.shift() === 2) {
                 const r = codes.shift() ?? 0, g = codes.shift() ?? 0, b = codes.shift() ?? 0;
-                currentStyle.set(code === 38 ? 'color' : 'background', `rgb(${r},${g},${b})`);
+                currentStyle.set(code === 38 ? 'color' : 'background-color', `rgb(${r},${g},${b})`);
               }
               break;
             case 39:
             case 49:
-              currentStyle.delete(code === 39 ? 'color' : 'background');
+              currentStyle.delete(code === 39 ? 'color' : 'background-color');
               break;
             case 53:
               addTextDecoration('overline');

package/front_end/panels/console/ConsolePinPane.ts

@@ -327,7 +327,7 @@ export class ConsolePin {
     const throwOnSideEffect = isEditing && text !== this.committedExpression;
     const timeout = throwOnSideEffect ? 250 : undefined;
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
-    const preprocessedExpression = ObjectUI.JavaScriptREPL.JavaScriptREPL.preprocessExpression(text);
+    const preprocessedExpression = ObjectUI.JavaScriptREPL.JavaScriptREPL.wrapObjectLiteral(text);
     const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
         preprocessedExpression, throwOnSideEffect, true /* replMode */, timeout, !isEditing /* allowErrors */,
         'console', true /* awaitPromise */, true /* silent */);

package/front_end/panels/console/ConsolePrompt.ts

@@ -305,7 +305,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (currentExecutionContext) {
       const executionContext = currentExecutionContext;
       const message = SDK.ConsoleModel.ConsoleModel.instance().addCommandMessage(executionContext, text);
-      const expression = ObjectUI.JavaScriptREPL.JavaScriptREPL.preprocessExpression(text);
+      const expression = ObjectUI.JavaScriptREPL.JavaScriptREPL.wrapObjectLiteral(text);
       void this.evaluateCommandInConsole(executionContext, message, expression, useCommandLineAPI);
       if (ConsolePanel.instance().isShowing()) {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.CommandEvaluatedInConsolePanel);

package/front_end/panels/console/ConsoleView.ts

@@ -1054,6 +1054,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.groupableMessages.clear();
     this.groupableMessageTitle.clear();
     this.sidebar.clear();
+    this.pendingSidebarMessages = [];
     this.updateMessageList();
     this.hidePromptSuggestBox();
     this.viewport.setStickToBottom(true);

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1882,7 +1882,7 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
       let rowSubProperties: Protocol.Runtime.PropertyPreview[];
       if (rowProperty.valuePreview && rowProperty.valuePreview.properties.length) {
         rowSubProperties = rowProperty.valuePreview.properties;
-      } else if (rowProperty.value) {
+      } else if (rowProperty.value || rowProperty.value === '') {
         rowSubProperties =
             [{name: rawValueColumnSymbol as unknown as string, type: rowProperty.type, value: rowProperty.value}];
       } else {

package/front_end/panels/console/consoleView.css

@@ -86,6 +86,7 @@
   overflow-y: auto;
   word-wrap: break-word;
   user-select: text;
+  transform: translateZ(0);
   overflow-anchor: none;  /* Chrome-specific scroll-anchoring opt-out */
   background-color: var(--color-background);
 }
@@ -545,4 +546,8 @@
   .console-message-wrapper.console-error-level:focus:last-of-type {
     --override-error-text-color: HighlightText;
   }
+
+  .console-message-anchor .resource-links {
+    --icon-color: ButtonText;
+  }
 }

package/front_end/panels/coverage/CoverageView.ts

@@ -155,7 +155,7 @@ export class CoverageView extends UI.Widget.VBox {
     this.toggleRecordButton = UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction);
     toolbar.appendToolbarItem(this.toggleRecordButton);
 
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     const mainTargetSupportsRecordOnReload = mainTarget && mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
     this.inlineReloadButton = null;
     if (mainTargetSupportsRecordOnReload) {
@@ -324,7 +324,7 @@ export class CoverageView extends UI.Widget.VBox {
     }
 
     this.reset();
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }

package/front_end/panels/css_overview/CSSOverviewUnusedDeclarations.ts

@@ -119,7 +119,7 @@ export class CSSOverviewUnusedDeclarations {
   static checkForInvalidVerticalAlignment(
       unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: Protocol.DOM.BackendNodeId, strings: string[],
       displayIdx: number, verticalAlignIdx: number): void {
-    if (!strings[displayIdx] || strings[displayIdx] === 'inline' || strings[displayIdx].startsWith('table')) {
+    if (!strings[displayIdx] || strings[displayIdx].startsWith('inline') || strings[displayIdx].startsWith('table')) {
       return;
     }