chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -1,83 +1,126 @@
 // Copyright 2017 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.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
-   *@description The console error count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The error count refers to the number of errors currently present in the JavaScript console.
+   * @description The console error count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The error count refers to the number of errors currently present in the JavaScript console.
    */
   sErrors: '{n, plural, =1 {# error} other {# errors}}',
   /**
-   *@description The console warning count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The warning count refers to the number of warnings currently present in the JavaScript console.
+   * @description The console warning count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The warning count refers to the number of warnings currently present in the JavaScript console.
    */
   sWarnings: '{n, plural, =1 {# warning} other {# warnings}}',
   /**
-   *@description Tooltip shown for a main toolbar button that opens the Console panel
-   *@example {2 errors, 1 warning} PH1
+   * @description Tooltip shown for a main toolbar button that opens the Console panel
+   * @example {2 errors, 1 warning} PH1
    */
   openConsoleToViewS: 'Open Console to view {PH1}',
   /**
-   *@description Title for the issues count in the Issues Error Counter shown in the main toolbar (top-left in DevTools). The issues count refers to the number of issues in the issues tab.
+   * @description Title for the issues count in the Issues Error Counter shown in the main toolbar (top-left in DevTools). The issues count refers to the number of issues in the issues tab.
    */
   openIssuesToView: '{n, plural, =1 {Open Issues to view # issue:} other {Open Issues to view # issues:}}',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console_counters/WarningErrorCounter.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let warningErrorCounterInstance: WarningErrorCounter;
-export class WarningErrorCounter implements UI.Toolbar.Provider {
-  private readonly toolbarItem: UI.Toolbar.ToolbarItemWithCompactLayout;
-  private consoleCounter: IconButton.IconButton.IconButton;
-  private issueCounter: IssueCounter.IssueCounter.IssueCounter;
-  private readonly throttler: Common.Throttler.Throttler;
-  updatingForTest?: boolean;
+interface ViewInput {
+  compact?: boolean;
+  errors: number;
+  warnings: number;
+  issues: number;
+  showIssuesHandler: () => void;
+}
 
-  private constructor() {
-    WarningErrorCounter.instanceForTest = this;
-
-    const countersWrapper = document.createElement('div');
-    countersWrapper.classList.add('status-buttons');
-    this.toolbarItem = new UI.Toolbar.ToolbarItemWithCompactLayout(countersWrapper);
-    this.toolbarItem.setVisible(false);
-    this.toolbarItem.addEventListener(
-        UI.Toolbar.ToolbarItemWithCompactLayoutEvents.COMPACT_LAYOUT_UPDATED, this.onSetCompactLayout, this);
-
-    this.consoleCounter = new IconButton.IconButton.IconButton();
-    this.consoleCounter.setAttribute('jslog', `${VisualLogging.counter('console').track({click: true})}`);
-    countersWrapper.appendChild(this.consoleCounter);
-    this.consoleCounter.data = {
-      clickHandler: Common.Console.Console.instance().show.bind(Common.Console.Console.instance()),
-      groups: [
-        {iconName: 'cross-circle-filled', iconColor: 'var(--icon-error)', iconHeight: '14px', iconWidth: '14px'},
-        {iconName: 'warning-filled', iconColor: 'var(--icon-warning)', iconHeight: '14px', iconWidth: '14px'},
-      ],
-    };
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-    const issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
-    this.issueCounter = new IssueCounter.IssueCounter.IssueCounter();
-    this.issueCounter.classList.add('main-toolbar');
-    this.issueCounter.setAttribute('jslog', `${VisualLogging.counter('issue').track({click: true})}`);
-    countersWrapper.appendChild(this.issueCounter);
-    this.issueCounter.data = {
-      clickHandler: () => {
-        Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.STATUS_BAR_ISSUES_COUNTER);
-        void UI.ViewManager.ViewManager.instance().showView('issues-pane');
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  const issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
+
+  const countToText = (c: number): string|undefined => c === 0 ? undefined : `${c}`;
+  const {errors, warnings, issues, compact} = input;
+
+  /* Update consoleCounter items. */
+  const errorCountTitle = i18nString(UIStrings.sErrors, {n: errors});
+  const warningCountTitle = i18nString(UIStrings.sWarnings, {n: warnings});
+  let consoleSummary = '';
+  if (errors && warnings) {
+    consoleSummary = `${errorCountTitle}, ${warningCountTitle}`;
+  } else if (errors) {
+    consoleSummary = errorCountTitle;
+  } else if (warnings) {
+    consoleSummary = warningCountTitle;
+  }
+  const consoleTitle = i18nString(UIStrings.openConsoleToViewS, {PH1: consoleSummary});
+  const iconData: IconButton.IconButton.IconButtonData = {
+    clickHandler: Common.Console.Console.instance().show.bind(Common.Console.Console.instance()),
+    accessibleName: consoleTitle,
+    compact,
+    groups: [
+      {
+        iconName: 'cross-circle-filled',
+        text: countToText(errors)
       },
-      issuesManager,
-      displayMode: IssueCounter.IssueCounter.DisplayMode.ONLY_MOST_IMPORTANT,
-    };
+      {
+        iconName: 'warning-filled',
+        text: countToText(warnings)
+      },
+    ],
+  };
+
+  /* Update issuesCounter items. */
+  const issueEnumeration = IssueCounter.IssueCounter.getIssueCountsEnumeration(issuesManager);
+  const issuesTitleLead = i18nString(UIStrings.openIssuesToView, {n: issues});
+  const issuesTitle = `${issuesTitleLead} ${issueEnumeration}`;
+  const issueCounterData: IssueCounter.IssueCounter.IssueCounterData = {
+    clickHandler: input.showIssuesHandler,
+    issuesManager,
+    compact,
+    accessibleName: issuesTitle,
+    displayMode: IssueCounter.IssueCounter.DisplayMode.ONLY_MOST_IMPORTANT,
+  };
+
+  render(
+      html`<div class="status-buttons"
+         ><icon-button
+            .data=${iconData}
+            title=${consoleTitle}
+            class=${'small' + warnings || errors ? nothing as unknown as string : 'hidden'}
+            jslog=${VisualLogging.counter('console').track({
+        click: true
+      })}
+         ></icon-button><devtools-issue-counter
+            class=${'main-toolbar' + (issues ? '' : ' hidden')}
+            title=${issuesTitle}
+            .data=${issueCounterData}
+            jslog=${VisualLogging.counter('issue').track({
+        click: true
+      })}
+         ></devtools-issue-counter></div>`,
+      target);
+};
+
+export class WarningErrorCounterWidget extends UI.Widget.Widget {
+  private readonly throttler: Common.Throttler.Throttler;
+  updatingForTest?: boolean;
+  private compact?: boolean;
+  static instanceForTest: WarningErrorCounterWidget|null = null;
 
+  constructor(
+      element: HTMLElement, private readonly setVisibility: (visible: boolean) => void,
+      private readonly view: View = DEFAULT_VIEW) {
+    super(element);
     this.throttler = new Common.Throttler.Throttler(100);
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -87,9 +130,11 @@ export class WarningErrorCounter implements UI.Toolbar.Provider {
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.MessageUpdated, this.update, this);
 
+    const issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
     issuesManager.addEventListener(IssuesManager.IssuesManager.Events.ISSUES_COUNT_UPDATED, this.update, this);
 
     this.update();
+    WarningErrorCounterWidget.instanceForTest = this;
   }
 
   onSetCompactLayout(event: Common.EventTarget.EventTargetEvent<boolean>): void {
@@ -97,17 +142,8 @@ export class WarningErrorCounter implements UI.Toolbar.Provider {
   }
 
   setCompactLayout(enable: boolean): void {
-    this.consoleCounter.data = {...this.consoleCounter.data, compact: enable};
-    this.issueCounter.data = {...this.issueCounter.data, compact: enable};
-  }
-
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): WarningErrorCounter {
-    const {forceNew} = opts;
-    if (!warningErrorCounterInstance || forceNew) {
-      warningErrorCounterInstance = new WarningErrorCounter();
-    }
-
-    return warningErrorCounterInstance;
+    this.compact = enable;
+    void this.performUpdate();
   }
 
   private updatedForTest(): void {
@@ -116,69 +152,66 @@ export class WarningErrorCounter implements UI.Toolbar.Provider {
 
   private update(): void {
     this.updatingForTest = true;
-    void this.throttler.schedule(this.updateThrottled.bind(this));
+    void this.throttler.schedule(this.performUpdate.bind(this));
   }
 
   get titlesForTesting(): string|null {
-    const button = this.consoleCounter.shadowRoot?.querySelector('button');
+    const button = this.contentElement.querySelector('icon-button')?.shadowRoot?.querySelector('button');
     return button ? button.getAttribute('aria-label') : null;
   }
 
-  private async updateThrottled(): Promise<void> {
+  private showIssues(): void {
+    Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.STATUS_BAR_ISSUES_COUNTER);
+    void UI.ViewManager.ViewManager.instance().showView('issues-pane');
+  }
+
+  override async performUpdate(): Promise<void> {
     const errors = SDK.ConsoleModel.ConsoleModel.allErrors();
     const warnings = SDK.ConsoleModel.ConsoleModel.allWarnings();
     const issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
     const issues = issuesManager.numberOfIssues();
 
-    const countToText = (c: number): string|undefined => c === 0 ? undefined : `${c}`;
-
-    /* Update consoleCounter items. */
-    const errorCountTitle = i18nString(UIStrings.sErrors, {n: errors});
-    const warningCountTitle = i18nString(UIStrings.sWarnings, {n: warnings});
-    const newConsoleTexts = [countToText(errors), countToText(warnings)];
-    let consoleSummary = '';
-    if (errors && warnings) {
-      consoleSummary = `${errorCountTitle}, ${warningCountTitle}`;
-    } else if (errors) {
-      consoleSummary = errorCountTitle;
-    } else if (warnings) {
-      consoleSummary = warningCountTitle;
-    }
-    const consoleTitle = i18nString(UIStrings.openConsoleToViewS, {PH1: consoleSummary});
-    const previousData = this.consoleCounter.data;
-
-    this.consoleCounter.data = {
-      ...previousData,
-      groups: previousData.groups.map((g, i) => ({...g, text: newConsoleTexts[i]})),
-      accessibleName: consoleTitle,
-    };
-    // TODO(chromium:1167711): Let the component handle the title and ARIA label.
-    UI.Tooltip.Tooltip.install(this.consoleCounter, consoleTitle);
-    this.consoleCounter.classList.toggle('hidden', !(errors || warnings));
-
-    /* Update issuesCounter items. */
-    const issueEnumeration = IssueCounter.IssueCounter.getIssueCountsEnumeration(issuesManager);
-    const issuesTitleLead = i18nString(UIStrings.openIssuesToView, {n: issues});
-    const issuesTitle = `${issuesTitleLead} ${issueEnumeration}`;
-    // TODO(chromium:1167711): Let the component handle the title and ARIA label.
-    UI.Tooltip.Tooltip.install(this.issueCounter, issuesTitle);
-    this.issueCounter.data = {
-      ...this.issueCounter.data,
-      accessibleName: issuesTitle,
-    };
-    this.issueCounter.classList.toggle('hidden', !issues);
-
-    this.toolbarItem.setVisible(Boolean(errors || warnings || issues));
+    this.view(
+        {compact: this.compact, errors, warnings, issues, showIssuesHandler: this.showIssues.bind(this)}, {},
+        this.contentElement);
 
+    this.setVisibility(Boolean(errors || warnings || issues));
     UI.InspectorView.InspectorView.instance().toolbarItemResized();
+
     this.updatingForTest = false;
     this.updatedForTest();
     return;
   }
+}
+
+let warningErrorCounterInstance: WarningErrorCounter;
+export class WarningErrorCounter implements UI.Toolbar.Provider {
+  private readonly toolbarItem: UI.Toolbar.ToolbarItemWithCompactLayout;
+
+  private constructor() {
+    const widgetElement =
+        document.createElement('devtools-widget') as UI.Widget.WidgetElement<WarningErrorCounterWidget>;
+    const toolbarItem = new UI.Toolbar.ToolbarItemWithCompactLayout(widgetElement);
+    toolbarItem.setVisible(false);
+    widgetElement.widgetConfig = UI.Widget.widgetConfig(e => {
+      const widget = new WarningErrorCounterWidget(e, toolbarItem.setVisible.bind(toolbarItem));
+      toolbarItem.addEventListener(
+          UI.Toolbar.ToolbarItemWithCompactLayoutEvents.COMPACT_LAYOUT_UPDATED, widget.onSetCompactLayout, widget);
+      return widget;
+    });
+    this.toolbarItem = toolbarItem;
+  }
 
   item(): UI.Toolbar.ToolbarItem|null {
     return this.toolbarItem;
   }
 
-  static instanceForTest: WarningErrorCounter|null = null;
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): WarningErrorCounter {
+    const {forceNew} = opts;
+    if (!warningErrorCounterInstance || forceNew) {
+      warningErrorCounterInstance = new WarningErrorCounter();
+    }
+
+    return warningErrorCounterInstance;
+  }
 }

package/front_end/panels/coverage/CoverageListView.ts

@@ -20,50 +20,50 @@ import {
 
 const UIStrings = {
   /**
-   *@description Text that appears on a button for the css resource type filter.
+   * @description Text that appears on a button for the css resource type filter.
    */
   css: 'CSS',
   /**
-   *@description Text in Coverage List View of the Coverage tab
+   * @description Text in Coverage List View of the Coverage tab
    */
   jsPerFunction: 'JS (per function)',
   /**
-   *@description Text in Coverage List View of the Coverage tab
+   * @description Text in Coverage List View of the Coverage tab
    */
   jsPerBlock: 'JS (per block)',
   /**
-   *@description Text for web URLs
+   * @description Text for web URLs
    */
   url: 'URL',
   /**
-   *@description Text that refers to some types
+   * @description Text that refers to some types
    */
   type: 'Type',
   /**
-   *@description Text in Coverage List View of the Coverage tab
+   * @description Text in Coverage List View of the Coverage tab
    */
   totalBytes: 'Total Bytes',
   /**
-   *@description Text in Coverage List View of the Coverage tab
+   * @description Text in Coverage List View of the Coverage tab
    */
   unusedBytes: 'Unused Bytes',
   /**
-   *@description Text in the Coverage List View of the Coverage Tab
+   * @description Text in the Coverage List View of the Coverage Tab
    */
   usageVisualization: 'Usage Visualization',
   /**
-   *@description Data grid name for Coverage data grids
+   * @description Data grid name for Coverage data grids
    */
   codeCoverage: 'Code Coverage',
   /**
-   *@description Cell title in Coverage List View of the Coverage tab. The coverage tool tells
+   * @description Cell title in Coverage List View of the Coverage tab. The coverage tool tells
    *developers which functions (logical groups of lines of code) were actually run/executed. If a
    *function does get run, then it is marked in the UI to indicate that it was covered.
    */
   jsCoverageWithPerFunction:
       'JS coverage with per function granularity: Once a function was executed, the whole function is marked as covered.',
   /**
-   *@description Cell title in Coverage List View of the Coverage tab. The coverage tool tells
+   * @description Cell title in Coverage List View of the Coverage tab. The coverage tool tells
    *developers which blocks (logical groups of lines of code, smaller than a function) were actually
    *run/executed. If a block does get run, then it is marked in the UI to indicate that it was
    *covered.
@@ -71,43 +71,43 @@ const UIStrings = {
   jsCoverageWithPerBlock:
       'JS coverage with per block granularity: Once a block of JavaScript was executed, that block is marked as covered.',
   /**
-   *@description Accessible text for the value in bytes in memory allocation or coverage view.
+   * @description Accessible text for the value in bytes in memory allocation or coverage view.
    */
   sBytes: '{n, plural, =1 {# byte} other {# bytes}}',
   /**
-   *@description Accessible text for the unused bytes column in the coverage tool that describes the total unused bytes and percentage of the file unused.
-   *@example {88%} percentage
+   * @description Accessible text for the unused bytes column in the coverage tool that describes the total unused bytes and percentage of the file unused.
+   * @example {88%} percentage
    */
   sBytesS: '{n, plural, =1 {# byte, {percentage}} other {# bytes, {percentage}}}',
   /**
-   *@description Tooltip text for the bar in the coverage list view of the coverage tool that illustrates the relation between used and unused bytes.
-   *@example {1000} PH1
-   *@example {12.34} PH2
+   * @description Tooltip text for the bar in the coverage list view of the coverage tool that illustrates the relation between used and unused bytes.
+   * @example {1000} PH1
+   * @example {12.34} PH2
    */
   sBytesSBelongToFunctionsThatHave: '{PH1} bytes ({PH2}) belong to functions that have not (yet) been executed.',
   /**
-   *@description Tooltip text for the bar in the coverage list view of the coverage tool that illustrates the relation between used and unused bytes.
-   *@example {1000} PH1
-   *@example {12.34} PH2
+   * @description Tooltip text for the bar in the coverage list view of the coverage tool that illustrates the relation between used and unused bytes.
+   * @example {1000} PH1
+   * @example {12.34} PH2
    */
   sBytesSBelongToBlocksOf: '{PH1} bytes ({PH2}) belong to blocks of JavaScript that have not (yet) been executed.',
   /**
-   *@description Message in Coverage View of the Coverage tab
-   *@example {1000} PH1
-   *@example {12.34} PH2
+   * @description Message in Coverage View of the Coverage tab
+   * @example {1000} PH1
+   * @example {12.34} PH2
    */
   sBytesSBelongToFunctionsThatHaveExecuted: '{PH1} bytes ({PH2}) belong to functions that have executed at least once.',
   /**
-   *@description Message in Coverage View of the Coverage tab
-   *@example {1000} PH1
-   *@example {12.34} PH2
+   * @description Message in Coverage View of the Coverage tab
+   * @example {1000} PH1
+   * @example {12.34} PH2
    */
   sBytesSBelongToBlocksOfJavascript:
       '{PH1} bytes ({PH2}) belong to blocks of JavaScript that have executed at least once.',
   /**
-   *@description Accessible text for the visualization column of coverage tool. Contains percentage of unused bytes to used bytes.
-   *@example {12.3} PH1
-   *@example {12.3} PH2
+   * @description Accessible text for the visualization column of coverage tool. Contains percentage of unused bytes to used bytes.
+   * @example {12.3} PH1
+   * @example {12.3} PH2
    */
   sOfFileUnusedSOfFileUsed: '{PH1} % of file unused, {PH2} % of file used',
 } as const;
@@ -134,7 +134,7 @@ export class CoverageListView extends UI.Widget.VBox {
   private dataGrid: DataGrid.SortableDataGrid.SortableDataGrid<GridNode>;
 
   constructor(isVisibleFilter: (arg0: URLCoverageInfo) => boolean) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(coverageListViewStyles);
     this.nodeForCoverageInfo = new Map();
     this.isVisibleFilter = isVisibleFilter;

package/front_end/panels/coverage/CoverageView.ts

@@ -23,95 +23,95 @@ import coverageViewStyles from './coverageView.css.js';
 
 const UIStrings = {
   /**
-   *@description Tooltip in Coverage List View of the Coverage tab for selecting JavaScript coverage mode
+   * @description Tooltip in Coverage List View of the Coverage tab for selecting JavaScript coverage mode
    */
   chooseCoverageGranularityPer:
       'Choose coverage granularity: Per function has low overhead, per block has significant overhead.',
   /**
-   *@description Text in Coverage List View of the Coverage tab
+   * @description Text in Coverage List View of the Coverage tab
    */
   perFunction: 'Per function',
   /**
-   *@description Text in Coverage List View of the Coverage tab
+   * @description Text in Coverage List View of the Coverage tab
    */
   perBlock: 'Per block',
   /**
-   *@description Text in Coverage View of the Coverage tab
+   * @description Text in Coverage View of the Coverage tab
    */
   filterByUrl: 'Filter by URL',
   /**
-   *@description Label for the type filter in the Converage Panel
+   * @description Label for the type filter in the Coverage Panel
    */
   filterCoverageByType: 'Filter coverage by type',
   /**
-   *@description Text for everything
+   * @description Text for everything
    */
   all: 'All',
   /**
-   *@description Text that appears on a button for the css resource type filter.
+   * @description Text that appears on a button for the css resource type filter.
    */
   css: 'CSS',
   /**
-   *@description Text in Timeline Tree View of the Performance panel
+   * @description Text in Timeline Tree View of the Performance panel
    */
   javascript: 'JavaScript',
   /**
-   *@description Tooltip text that appears on the setting when hovering over it in Coverage View of the Coverage tab
+   * @description Tooltip text that appears on the setting when hovering over it in Coverage View of the Coverage tab
    */
   includeExtensionContentScripts: 'Include extension content scripts',
   /**
-   *@description Title for a type of source files
+   * @description Title for a type of source files
    */
   contentScripts: 'Content scripts',
   /**
-   *@description Message in Coverage View of the Coverage tab
+   * @description Message in Coverage View of the Coverage tab
    */
   noCoverageData: 'No coverage data',
   /**
-   *@description Message in Coverage View of the Coverage tab
+   * @description Message in Coverage View of the Coverage tab
    */
   reloadPage: 'Reload page',
   /**
-   *@description Message in Coverage View of the Coverage tab
+   * @description Message in Coverage View of the Coverage tab
    */
   startRecording: 'Start recording',
 
   /**
-   *@description Message in Coverage View of the Coverage tab
-   *@example {Reload page} PH1
+   * @description Message in Coverage View of the Coverage tab
+   * @example {Reload page} PH1
    */
   clickTheReloadButtonSToReloadAnd: 'Click the "{PH1}" button to reload and start capturing coverage.',
   /**
-   *@description Message in Coverage View of the Coverage tab
-   *@example {Start recording} PH1
+   * @description Message in Coverage View of the Coverage tab
+   * @example {Start recording} PH1
    */
   clickTheRecordButtonSToStart: 'Click the "{PH1}" button to start capturing coverage.',
   /**
-   *@description Message in the Coverage View explaining that DevTools could not capture coverage.
+   * @description Message in the Coverage View explaining that DevTools could not capture coverage.
    */
   bfcacheNoCapture: 'Could not capture coverage info because the page was served from the back/forward cache.',
   /**
-   *@description  Message in the Coverage View explaining that DevTools could not capture coverage.
+   * @description  Message in the Coverage View explaining that DevTools could not capture coverage.
    */
   activationNoCapture: 'Could not capture coverage info because the page was prerendered in the background.',
   /**
-   *@description  Message in the Coverage View prompting the user to reload the page.
-   *@example {reload button icon} PH1
+   * @description  Message in the Coverage View prompting the user to reload the page.
+   * @example {reload button icon} PH1
    */
   reloadPrompt: 'Click the reload button {PH1} to reload and get coverage.',
 
   /**
-   *@description Footer message in Coverage View of the Coverage tab
-   *@example {300k used, 600k unused} PH1
-   *@example {500k used, 800k unused} PH2
+   * @description Footer message in Coverage View of the Coverage tab
+   * @example {300k used, 600k unused} PH1
+   * @example {500k used, 800k unused} PH2
    */
   filteredSTotalS: 'Filtered: {PH1}  Total: {PH2}',
   /**
-   *@description Footer message in Coverage View of the Coverage tab
-   *@example {1.5 MB} PH1
-   *@example {2.1 MB} PH2
-   *@example {71%} PH3
-   *@example {29%} PH4
+   * @description Footer message in Coverage View of the Coverage tab
+   * @example {1.5 MB} PH1
+   * @example {2.1 MB} PH2
+   * @example {71%} PH3
+   * @example {29%} PH4
    */
   sOfSSUsedSoFarSUnused: '{PH1} of {PH2} ({PH3}%) used so far, {PH4} unused.',
 } as const;
@@ -146,11 +146,12 @@ export class CoverageView extends UI.Widget.VBox {
   private statusMessageElement: HTMLElement;
 
   constructor() {
-    super(true);
+    super({
+      jslog: `${VisualLogging.panel('coverage').track({resize: true})}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(coverageViewStyles);
 
-    this.element.setAttribute('jslog', `${VisualLogging.panel('coverage').track({resize: true})}`);
-
     this.model = null;
     this.decorationManager = null;
 
@@ -506,7 +507,7 @@ export class CoverageView extends UI.Widget.VBox {
     }
 
     this.model.reset();
-    this.decorationManager && this.decorationManager.reset();
+    this.decorationManager?.reset();
     this.listView.reset();
     void this.model.startPolling();
   }
@@ -515,7 +516,7 @@ export class CoverageView extends UI.Widget.VBox {
     this.updateStats();
     this.listView.update(this.model?.entries() || []);
     this.exportAction.setEnabled(this.model !== null && this.model.entries().length > 0);
-    this.decorationManager && this.decorationManager.update(updatedEntries);
+    this.decorationManager?.update(updatedEntries);
   }
 
   private updateStats(): void {

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

@@ -9,31 +9,31 @@ import type * as Coverage from './coverage.js';
 
 const UIStrings = {
   /**
-   *@description Title of the 'Coverage' tool in the bottom drawer
+   * @description Title of the 'Coverage' tool in the bottom drawer
    */
   coverage: 'Coverage',
   /**
-   *@description Command for showing the 'Coverage' tool in the bottom drawer
+   * @description Command for showing the 'Coverage' tool in the bottom drawer
    */
   showCoverage: 'Show Coverage',
   /**
-   *@description Title of an action under the Performance category that can be invoked through the Command Menu
+   * @description Title of an action under the Performance category that can be invoked through the Command Menu
    */
   instrumentCoverage: 'Instrument coverage',
   /**
-   *@description Title of an action under the Performance category that can be invoked through the Command Menu
+   * @description Title of an action under the Performance category that can be invoked through the Command Menu
    */
   stopInstrumentingCoverageAndShow: 'Stop instrumenting coverage and show results',
   /**
-   *@description Title of an action in the coverage tool to start with reload
+   * @description Title of an action in the coverage tool to start with reload
    */
   startInstrumentingCoverageAnd: 'Start instrumenting coverage and reload page',
   /**
-   *@description Title of an action in the Coverage tool to clear all data.
+   * @description Title of an action in the Coverage tool to clear all data.
    */
   clearCoverage: 'Clear coverage',
   /**
-   *@description Title of an action in the Coverage tool to export the data.
+   * @description Title of an action in the Coverage tool to export the data.
    */
   exportCoverage: 'Export coverage',
 } as const;