chrome-devtools-frontend 1.0.1525561 → 1.0.1526630

package/front_end/models/trace/insights/types.ts

@@ -76,6 +76,7 @@ export type InsightModel<UIStrings extends Record<string, string> = Record<strin
       strings: UIStrings,
       title: Common.UIString.LocalizedString,
       description: Common.UIString.LocalizedString,
+      docs: string,
       category: InsightCategory,
       state: 'pass' | 'fail' | 'informative',
       /** Used by RelatedInsightChips.ts */
@@ -101,7 +102,7 @@ export type InsightModel<UIStrings extends Record<string, string> = Record<strin
     };
 
 export type PartialInsightModel<T> =
-    Omit<T, 'strings'|'title'|'description'|'category'|'state'|'insightKey'|'navigationId'|'frameId'>;
+    Omit<T, 'strings'|'title'|'description'|'docs'|'category'|'state'|'insightKey'|'navigationId'|'frameId'>;
 
 /**
  * Contains insights for a specific navigation. If a trace began after a navigation already started,

package/front_end/panels/application/ReportingApiView.ts

@@ -56,12 +56,11 @@ interface ViewInput {
   onReportSelected: (id: string) => void;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
-
-export const DEFAULT_VIEW: View = (input, _output, target) => {
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
   if (input.hasReports || input.hasEndpoints) {
     // clang-format off
     render(html`
+      <style>${UI.inspectorCommonStyles}</style>
       <devtools-split-view sidebar-position="second" sidebar-initial-size="150" jslog=${
           VisualLogging.pane('reporting-api')}>
         ${input.hasReports ? html`
@@ -73,9 +72,9 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             </div>
             <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
               ${input.focusedReport ? html`
-                <devtools-widget .widgetConfig=${widgetConfig(
-                  element => SourceFrame.JSONView.JSONView.createViewSync(input.focusedReport?.body || '', element)
-                )}></devtools-widget>
+                <devtools-widget .widgetConfig=${widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
+                  jsonObject: input.focusedReport.body,
+                })}></devtools-widget>
               ` : html`
                 <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
                   header: i18nString(UIStrings.noReportSelected),
@@ -112,6 +111,8 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   }
 };
 
+type View = typeof DEFAULT_VIEW;
+
 export class ReportingApiView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager> {
   #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
@@ -164,7 +165,7 @@ export class ReportingApiView extends UI.Widget.VBox implements
       focusedReport: this.#focusedReport,
       onReportSelected: this.#onReportSelected.bind(this),
     };
-    this.#view(viewInput, {}, this.element);
+    this.#view(viewInput, undefined, this.element);
   }
 
   #onEndpointsChangedForOrigin({data}: {data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent}): void {

package/front_end/panels/application/StorageView.ts

@@ -236,6 +236,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.quotaOverrideCheckbox.addEventListener('click', this.onClickCheckbox.bind(this), false);
     this.quotaOverrideControlRow = quota.appendRow();
     this.quotaOverrideEditor = this.quotaOverrideControlRow.createChild('input', 'quota-override-notification-editor');
+    this.quotaOverrideEditor.setAttribute('placeholder', i18nString(UIStrings.pleaseEnterANumber));
     this.quotaOverrideEditor.setAttribute(
         'jslog', `${VisualLogging.textField('quota-override').track({change: true})}`);
     this.quotaOverrideControlRow.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.mb)));
@@ -402,7 +403,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.quotaOverrideControlRow.classList.remove('hidden');
       this.quotaOverrideCheckbox.checked = true;
       this.quotaOverrideEditor.value = this.previousOverrideFieldValue;
-      this.quotaOverrideEditor.focus();
+      window.setTimeout(() => this.quotaOverrideEditor.focus(), 500);
     } else if (this.target && this.securityOrigin) {
       this.quotaOverrideControlRow.classList.add('hidden');
       this.quotaOverrideCheckbox.checked = false;

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

@@ -736,6 +736,8 @@ export function capitalizedAction(action: Protocol.Preload.SpeculationAction): C
       return i18n.i18n.lockedString('Prefetch');
     case Protocol.Preload.SpeculationAction.Prerender:
       return i18n.i18n.lockedString('Prerender');
+    case Protocol.Preload.SpeculationAction.PrerenderUntilScript:
+      return i18n.i18n.lockedString('PrerenderUntilScript');
   }
 }
 

package/front_end/panels/console/ConsolePrompt.ts

@@ -343,9 +343,29 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private editorKeymap(): readonly CodeMirror.KeyBinding[] {
-    const keymap = [
-      {key: 'ArrowUp', run: () => this.#editorHistory.moveHistory(Direction.BACKWARD)},
-      {key: 'ArrowDown', run: () => this.#editorHistory.moveHistory(Direction.FORWARD)},
+    const keymap: CodeMirror.KeyBinding[] = [
+      {
+        // Handle the KeyboardEvent manually.
+        any: (_view, event) => {
+          // Events with `repeat=true` are excluded from altering the history state because
+          // they are often not intended as such. Example:
+          // Scrolling through long snippets.
+          if (event.repeat) {
+            return false;
+          }
+
+          if (event.key === 'ArrowUp') {
+            return this.#editorHistory.moveHistory(Direction.BACKWARD);
+          }
+
+          if (event.key === 'ArrowDown') {
+            return this.#editorHistory.moveHistory(Direction.FORWARD);
+          }
+
+          return false;
+        },
+      },
+
       {mac: 'Ctrl-p', run: () => this.#editorHistory.moveHistory(Direction.BACKWARD, true)},
       {mac: 'Ctrl-n', run: () => this.#editorHistory.moveHistory(Direction.FORWARD, true)},
       {
@@ -372,7 +392,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (this.isAiCodeCompletionEnabled()) {
       keymap.push({
         key: 'Tab',
-        run: (): boolean => {
+        run: () => {
           const {accepted, suggestion} = TextEditor.Config.acceptAiAutoCompleteSuggestion(this.editor.editor);
           if (accepted) {
             this.dispatchEventToListeners(

package/front_end/panels/coverage/CoverageListView.ts

@@ -1,17 +1,16 @@
 // Copyright 2017 The Chromium Authors
 // 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 */
-/* eslint-disable rulesdir/no-lit-render-outside-of-view */
+
+import '../../ui/components/highlighting/highlighting.js';
+import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 
 import coverageListViewStyles from './coverageListView.css.js';
 import {CoverageType} from './CoverageModel.js';
@@ -124,7 +123,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/coverage/CoverageListView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {styleMap} = Directives;
+const {styleMap, repeat} = Directives;
 
 export function coverageTypeToString(type: CoverageType): string {
   const types = [];
@@ -139,163 +138,95 @@ export function coverageTypeToString(type: CoverageType): string {
   return types.join('+');
 }
 
+interface ViewInput {
+  items: CoverageListItem[];
+  selectedUrl: Platform.DevToolsPath.UrlString|null;
+  maxSize: number;
+  onOpen: (url: Platform.DevToolsPath.UrlString) => void;
+  highlightRegExp: RegExp|null;
+}
+
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+const formatBytes = (value: number|undefined): string => {
+  return getBytesFormatter().format(value ?? 0);
+};
+const formatPercent = (value: number|undefined): string => {
+  return getPercentageFormatter().format(value ?? 0);
+};
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${coverageListViewStyles}</style>
+    <devtools-data-grid class="flex-auto" name=${i18nString(UIStrings.codeCoverage)} striped autofocus resize="last"
+      .template=${html`
+        <table>
+          <tr>
+            <th id="url" width="250px" weight="3" sortable>${i18nString(UIStrings.url)}</th>
+            <th id="type" width="45px" weight="1" fixed sortable>${i18nString(UIStrings.type)}</th>
+            <th id="size" width="60px" align="right" weight="1" fixed sortable>${i18nString(UIStrings.totalBytes)}</th>
+            <th id="unused-size" width="100px" align="right" weight="1" fixed sortable sort="descending">${
+                i18nString(UIStrings.unusedBytes)}</th>
+            <th id="bars" width="250px" weight="1" sortable>${i18nString(UIStrings.usageVisualization)}</th>
+          </tr>
+          ${repeat(input.items, info => info.url, info => renderItem(info, input))}
+        </table>`}>
+      </devtools-data-grid>`,
+      target);
+  // clang-format on
+};
+
 export class CoverageListView extends UI.Widget.VBox {
-  private readonly nodeForUrl: Map<Platform.DevToolsPath.UrlString, GridNode>;
   private highlightRegExp: RegExp|null;
-  private dataGrid: DataGrid.SortableDataGrid.SortableDataGrid<GridNode>;
+  #coverageInfo: CoverageListItem[] = [];
+  #selectedUrl: Platform.DevToolsPath.UrlString|null = null;
+  #maxSize = 0;
+  #view: View;
 
-  constructor() {
-    super({useShadowDom: true});
-    this.registerRequiredCSS(coverageListViewStyles);
-    this.nodeForUrl = new Map();
+  constructor(view = DEFAULT_VIEW) {
+    super({useShadowDom: true, delegatesFocus: true});
+    this.#view = view;
     this.highlightRegExp = null;
-
-    const columns = [
-      {
-        id: 'url',
-        title: i18nString(UIStrings.url),
-        width: '250px',
-        weight: 3,
-        fixedWidth: false,
-        sortable: true,
-        disclosure: true,
-      },
-      {id: 'type', title: i18nString(UIStrings.type), width: '45px', weight: 1, fixedWidth: true, sortable: true},
-      {
-        id: 'size',
-        title: i18nString(UIStrings.totalBytes),
-        width: '60px',
-        fixedWidth: true,
-        sortable: true,
-        align: DataGrid.DataGrid.Align.RIGHT,
-        weight: 1,
-      },
-      {
-        id: 'unused-size',
-        title: i18nString(UIStrings.unusedBytes),
-        width: '100px',
-        fixedWidth: true,
-        sortable: true,
-        align: DataGrid.DataGrid.Align.RIGHT,
-        sort: DataGrid.DataGrid.Order.Descending,
-        weight: 1,
-      },
-      {
-        id: 'bars',
-        title: i18nString(UIStrings.usageVisualization),
-        width: '250px',
-        fixedWidth: false,
-        sortable: true,
-        weight: 1,
-      },
-    ] as DataGrid.DataGrid.ColumnDescriptor[];
-    this.dataGrid =
-        DataGrid.SortableDataGrid.SortableDataGrid.create(['dummy'], [], i18nString(UIStrings.codeCoverage)) as
-        DataGrid.SortableDataGrid.SortableDataGrid<GridNode>;
-    this.dataGrid.removeColumn('dummy');
-    for (const column of columns) {
-      this.dataGrid.addColumn(column);
-    }
-    this.dataGrid.setColumnsVisibility(new Set(columns.map(column => column.id)));
-    this.dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.LAST);
-    this.dataGrid.setStriped(true);
-    this.dataGrid.element.classList.add('flex-auto');
-    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.OPENED_NODE, this.onOpenedNode, this);
-
-    const dataGridWidget = this.dataGrid.asWidget();
-    dataGridWidget.show(this.contentElement);
-    this.setDefaultFocusedChild(dataGridWidget);
   }
 
   update(coverageInfo: CoverageListItem[], highlightRegExp: RegExp|null): void {
     this.highlightRegExp = highlightRegExp;
-    const maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
-
-    const coverageUrls = new Set(coverageInfo.map(info => info.url));
-    for (const [url, node] of this.nodeForUrl.entries()) {
-      if (!coverageUrls.has(url)) {
-        node.remove();
-        this.nodeForUrl.delete(url);
-      }
-    }
-
-    let hadUpdates = false;
-    for (const entry of coverageInfo) {
-      let node = this.nodeForUrl.get(entry.url);
-      if (node) {
-        hadUpdates = node.refreshIfNeeded(maxSize, entry) || hadUpdates;
-        if (entry.sources.length > 0) {
-          this.updateSourceNodes(entry.sources, maxSize, node);
-        }
-        node.setHighlight(this.highlightRegExp);
-        continue;
-      }
-      node = new GridNode(entry, maxSize);
-      this.nodeForUrl.set(entry.url, node);
-      this.appendNodeByType(node);
-      if (entry.sources.length > 0) {
-        this.updateSourceNodes(entry.sources, maxSize, node);
-      }
-      node.setHighlight(this.highlightRegExp);
-      hadUpdates = true;
-    }
-    if (hadUpdates) {
-      this.dataGrid.dispatchEventToListeners(DataGrid.DataGrid.Events.SORTING_CHANGED);
-    }
+    this.#maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
+    this.#coverageInfo = coverageInfo;
+    this.requestUpdate();
   }
 
-  updateSourceNodes(sources: CoverageListItem[], maxSize: number, node: GridNode): void {
-    for (const coverageInfo of sources) {
-      const sourceNode = this.nodeForUrl.get(coverageInfo.url);
-      if (sourceNode) {
-        sourceNode.refreshIfNeeded(maxSize, coverageInfo);
-      } else {
-        const sourceNode = new GridNode(coverageInfo, maxSize);
-        node.appendChild(sourceNode);
-        this.nodeForUrl.set(coverageInfo.url, sourceNode);
-      }
-    }
+  override performUpdate(): void {
+    const input: ViewInput = {
+      items: this.#coverageInfo,
+      selectedUrl: this.#selectedUrl,
+      maxSize: this.#maxSize,
+      onOpen: this.selectByUrl.bind(this),
+      highlightRegExp: this.highlightRegExp,
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
   reset(): void {
-    this.nodeForUrl.clear();
-    this.dataGrid.rootNode().removeChildren();
+    this.#coverageInfo = [];
+    this.#maxSize = 0;
+    this.requestUpdate();
   }
 
-  private appendNodeByType(node: GridNode): void {
-    if (node.coverageInfo.generatedUrl) {
-      const parentNode = this.nodeForUrl.get(node.coverageInfo.generatedUrl);
-      parentNode?.appendChild(node);
-    } else {
-      this.dataGrid.rootNode().appendChild(node);
-    }
-  }
-
-  selectByUrl(url: string): void {
-    const node = this.nodeForUrl.get(url as Platform.DevToolsPath.UrlString);
-    if (node) {
-      node.revealAndSelect();
-    }
-  }
-
-  private onOpenedNode(): void {
-    void this.revealSourceForSelectedNode();
-  }
-
-  private async revealSourceForSelectedNode(): Promise<void> {
-    const node = this.dataGrid.selectedNode;
-    if (!node) {
+  selectByUrl(url: Platform.DevToolsPath.UrlString): void {
+    const info = this.#coverageInfo.find(info => info.url === url);
+    if (!info) {
       return;
     }
-    const coverageInfo = (node as GridNode).coverageInfo;
-    const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(coverageInfo.url);
+    if (this.#selectedUrl !== url) {
+      this.#selectedUrl = url as Platform.DevToolsPath.UrlString;
+      this.requestUpdate();
+    }
+    const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
     if (!sourceCode) {
       return;
     }
 
-    if (this.dataGrid.selectedNode !== node) {
-      return;
-    }
     void Common.Revealer.reveal(sourceCode);
   }
 }
@@ -321,148 +252,63 @@ function getBytesFormatter(): Intl.NumberFormat {
   return bytesFormatter;
 }
 
-export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<GridNode> {
-  coverageInfo: CoverageListItem;
-  private lastUsedSize!: number|undefined;
-  private url: Platform.DevToolsPath.UrlString;
-  private maxSize: number;
-  private highlightRegExp: RegExp|null;
-
-  constructor(coverageInfo: CoverageListItem, maxSize: number) {
-    super();
-    this.coverageInfo = coverageInfo;
-    this.url = coverageInfo.url;
-    this.maxSize = maxSize;
-    this.highlightRegExp = null;
-    this.#updateData(coverageInfo);
-  }
-
-  #updateData(coverageInfo: CoverageListItem): void {
-    this.data['url'] = this.url;
-    this.data['type'] = coverageTypeToString(coverageInfo.type);
-    this.data['size'] = coverageInfo.size;
-    this.data['unused-size'] = coverageInfo.unusedSize;
-    this.data['bars'] = coverageInfo.unusedSize;
-    this.coverageInfo = coverageInfo;
-  }
-
-  setHighlight(highlightRegExp: RegExp|null): void {
-    if (this.highlightRegExp === highlightRegExp) {
-      return;
-    }
-    this.highlightRegExp = highlightRegExp;
-    for (const child of this.children) {
-      (child as GridNode).setHighlight(this.highlightRegExp);
-    }
-    this.refresh();
-  }
-
-  refreshIfNeeded(maxSize: number, coverageInfo: CoverageListItem): boolean {
-    if (this.lastUsedSize === coverageInfo.usedSize && maxSize === this.maxSize) {
-      return false;
-    }
-    this.lastUsedSize = coverageInfo.usedSize;
-    this.maxSize = maxSize;
-    this.refresh();
-    this.#updateData(coverageInfo);
-    return true;
+function renderItem(info: CoverageListItem, input: ViewInput): TemplateResult {
+  function highlightRange(textContent: string): string {
+    const matches = input.highlightRegExp?.exec(textContent);
+    return matches?.length ? `${matches.index},${matches[0].length}` : '';
   }
 
-  override createCell(columnId: string): HTMLElement {
-    const cell = this.createTD(columnId);
-    const info = this.coverageInfo;
-    const formatBytes = (value: number|undefined): string => {
-      return getBytesFormatter().format(value ?? 0);
-    };
-    const formatPercent = (value: number|undefined): string => {
-      return getPercentageFormatter().format(value ?? 0);
-    };
-    switch (columnId) {
-      case 'url': {
-        UI.Tooltip.Tooltip.install(cell, this.url);
-        this.setCellAccessibleName(this.url, cell, columnId);
-        const splitURL = /^(.*)(\/[^/]*)$/.exec(this.url);
-        render(
-            html`
-          <div class="url-outer">
-            <div class="url-prefix">${splitURL ? splitURL[1] : this.url}</div>
-            <div class="url-suffix">${splitURL ? splitURL[2] : ''}</div>
-          </div>`,
-            cell);
-        if (this.highlightRegExp) {
-          this.highlight(cell, this.url);
-        }
-        break;
-      }
-      case 'type': {
-        UI.Tooltip.Tooltip.install(
-            cell,
-            info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.jsCoverageWithPerFunction) :
-                info.type & CoverageType.JAVA_SCRIPT          ? i18nString(UIStrings.jsCoverageWithPerBlock) :
-                                                                '');
-        render(coverageTypeToString(this.coverageInfo.type), cell);
-        break;
-      }
-      case 'size': {
-        this.setCellAccessibleName(i18nString(UIStrings.sBytes, {n: info.size || 0}), cell, columnId);
-        render(html`<span>${formatBytes(info.size)}</span>`, cell);
-        break;
-      }
-      case 'unused-size': {
-        this.setCellAccessibleName(
-            i18nString(UIStrings.sBytesS, {n: info.unusedSize, percentage: formatPercent(info.unusedPercentage)}), cell,
-            columnId);
-        // clang-format off
-        render(html`
-          <span>${formatBytes(info.unusedSize)}</span>
-          <span class="percent-value">
-            ${formatPercent(info.unusedPercentage)}
-          </span>`, cell);
-        // clang-format on
-        break;
-      }
-      case 'bars': {
-        this.setCellAccessibleName(
-            i18nString(
-                UIStrings.sOfFileUnusedSOfFileUsed,
-                {PH1: formatPercent(info.unusedPercentage), PH2: formatPercent(info.usedPercentage)}),
-            cell, columnId);
-        // clang-format off
-        render(html`
-          <div class="bar-container">
-            ${info.unusedSize > 0 ? html`
-              <div class="bar bar-unused-size"
-                  title=${
-                    info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.sBytesSBelongToFunctionsThatHave, {PH1: info.unusedSize, PH2: formatPercent(info.unusedPercentage)}) :
-                    info.type & CoverageType.JAVA_SCRIPT              ? i18nString(UIStrings.sBytesSBelongToBlocksOf, {PH1: info.unusedSize, PH2: formatPercent(info.unusedPercentage)}) :
-                                                                          ''}
-                  style=${styleMap({width: ((info.unusedSize / this.maxSize) * 100 || 0) + '%'})}>
-              </div>` : nothing}
-            ${info.usedSize > 0 ? html`
+  const splitURL = /^(.*)(\/[^/]*)$/.exec(info.url);
+  // clang-format off
+  return html`
+    <style>${coverageListViewStyles}</style>
+    <tr data-url=${info.url} selected=${info.url === input.selectedUrl}
+        @open=${() => input.onOpen(info.url)}>
+      <td data-value=${info.url} title=${info.url} aria-label=${info.url}>
+        <devtools-highlight ranges=${highlightRange(info.url)} class="url-outer" aria-hidden="true">
+          <div class="url-prefix">${splitURL ? splitURL[1] : info.url}</div>
+          <div class="url-suffix">${splitURL ? splitURL[2] : ''}</div>
+        </devtools-highlight>
+      </td>
+      <td data-value=${coverageTypeToString(info.type)}
+          title=${info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.jsCoverageWithPerFunction) :
+                      info.type & CoverageType.JAVA_SCRIPT          ? i18nString(UIStrings.jsCoverageWithPerBlock) :
+                                                                      ''}>
+        ${coverageTypeToString(info.type)}
+      </td>
+      <td data-value=${info.size} aria-label=${i18nString(UIStrings.sBytes, {n: info.size || 0})}>
+        <span>${formatBytes(info.size)}</span>
+      </td>
+      <td data-value=${info.unusedSize} aria-label=${i18nString(UIStrings.sBytesS, {n: info.unusedSize, percentage: formatPercent(info.unusedPercentage)})}>
+        <span>${formatBytes(info.unusedSize)}</span>
+        <span class="percent-value">
+          ${formatPercent(info.unusedPercentage)}
+        </span>
+      </td>
+      <td data-value=${info.unusedSize} aria-label=${i18nString(UIStrings.sOfFileUnusedSOfFileUsed, {PH1: formatPercent(info.unusedPercentage), PH2: formatPercent(info.usedPercentage)})}>
+        <div class="bar-container">
+          ${info.unusedSize > 0 ? html`
+            <div class="bar bar-unused-size"
+                title=${
+                  info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.sBytesSBelongToFunctionsThatHave, {PH1: info.unusedSize, PH2: formatPercent(info.unusedPercentage)}) :
+                  info.type & CoverageType.JAVA_SCRIPT              ? i18nString(UIStrings.sBytesSBelongToBlocksOf, {PH1: info.unusedSize, PH2: formatPercent(info.unusedPercentage)}) :
+                                                                      ''}
+                  style=${styleMap({width: ((info.unusedSize / input.maxSize) * 100 || 0) + '%'})}>
+            </div>` : nothing}
+          ${info.usedSize > 0 ? html`
             <div class="bar bar-used-size"
                   title=${
                     info.type & CoverageType.JAVA_SCRIPT_PER_FUNCTION ? i18nString(UIStrings.sBytesSBelongToFunctionsThatHaveExecuted, {PH1: info.usedSize, PH2: formatPercent(info.usedPercentage)}) :
                     info.type & CoverageType.JAVA_SCRIPT              ? i18nString(UIStrings.sBytesSBelongToBlocksOfJavascript, {PH1: info.usedSize, PH2: formatPercent(info.usedPercentage)}) :
-                                                                          ''}
-                  { PH1: info.usedSize, PH2: formatPercent(info.usedPercentage) })}
-                style=${styleMap({width:((info.usedSize / this.maxSize) * 100 || 0) + '%'})}>
+                                                                        ''}
+                style=${styleMap({width:((info.usedSize / input.maxSize) * 100 || 0) + '%'})}>
             </div>` : nothing}
-          </div>`, cell);
-        // clang-format on
-      }
-    }
-    return cell;
-  }
-
-  private highlight(element: Element, textContent: string): void {
-    if (!this.highlightRegExp) {
-      return;
-    }
-    const matches = this.highlightRegExp.exec(textContent);
-    if (!matches?.length) {
-      return;
-    }
-    const range = new TextUtils.TextRange.SourceRange(matches.index, matches[0].length);
-    UI.UIUtils.highlightRangesWithStyleClass(element, [range], 'filter-highlight');
-  }
+        </div>
+      </td>
+      ${info.sources.length > 0 ? html`
+        <td><table>
+          ${repeat(info.sources, source => source.url, source => renderItem(source, input))}
+        </table></td>` : nothing}
+    </tr>`;
+  // clang-format on
 }