chrome-devtools-frontend 1.0.1526203 → 1.0.1526630

package/front_end/core/i18n/i18nImpl.ts

@@ -68,7 +68,7 @@ export async function fetchAndRegisterLocaleData(
     locale: Intl.UnicodeBCP47LocaleIdentifier, location = self.location.toString()): Promise<void> {
   const localeDataTextPromise = fetch(getLocaleFetchUrl(locale, location)).then(result => result.json());
   const timeoutPromise =
-      new Promise<never>((_, reject) => window.setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
+      new Promise<never>((_, reject) => window.setTimeout(() => reject(new Error('timed out fetching locale')), 2500));
   const localeData = await Promise.race([timeoutPromise, localeDataTextPromise]);
   i18nInstance.registerLocaleData(locale, localeData);
 }

package/front_end/core/sdk/ChildTargetManager.ts

@@ -177,6 +177,8 @@ export class ChildTargetManager extends SDKModel<EventTypes> implements Protocol
       type = Type.FRAME;
     } else if (targetInfo.type === 'page') {
       type = Type.FRAME;
+    } else if (targetInfo.type === 'browser_ui') {
+      type = Type.FRAME;
     } else if (targetInfo.type === 'worker') {
       type = Type.Worker;
     } else if (targetInfo.type === 'worklet') {

package/front_end/generated/InspectorBackendCommands.js

@@ -858,7 +858,7 @@ inspectorBackend.registerCommand("Network.continueInterceptedRequest", [{"name":
 inspectorBackend.registerCommand("Network.deleteCookies", [{"name": "name", "type": "string", "optional": false, "description": "Name of the cookies to remove.", "typeRef": null}, {"name": "url", "type": "string", "optional": true, "description": "If specified, deletes all the cookies with the given name where domain and path match provided URL.", "typeRef": null}, {"name": "domain", "type": "string", "optional": true, "description": "If specified, deletes only cookies with the exact domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": true, "description": "If specified, deletes only cookies with the exact path.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "If specified, deletes only cookies with the the given name and partitionKey where all partition key attributes match the cookie partition key attribute.", "typeRef": "Network.CookiePartitionKey"}], [], "Deletes browser cookies with matching name and url or domain/path/partitionKey pair.");
 inspectorBackend.registerCommand("Network.disable", [], [], "Disables network tracking, prevents network events from being sent to the client.");
 inspectorBackend.registerCommand("Network.emulateNetworkConditions", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}, {"name": "packetLoss", "type": "number", "optional": true, "description": "WebRTC packet loss (percent, 0-100). 0 disables packet loss emulation, 100 drops all the packets.", "typeRef": null}, {"name": "packetQueueLength", "type": "number", "optional": true, "description": "WebRTC packet queue length (packet). 0 removes any queue length limitations.", "typeRef": null}, {"name": "packetReordering", "type": "boolean", "optional": true, "description": "WebRTC packetReordering feature.", "typeRef": null}], [], "Activates emulation of network conditions. This command is deprecated in favor of the emulateNetworkConditionsByRule and overrideNetworkState commands, which can be used together to the same effect.");
-inspectorBackend.registerCommand("Network.emulateNetworkConditionsByRule", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "matchedNetworkConditions", "type": "array", "optional": false, "description": "Configure conditions for matching requests. If multiple entries match a request, the first entry wins.  Global conditions can be configured by leaving the urlPattern for the conditions empty. These global conditions are also applied for throttling of p2p connections.", "typeRef": "Network.NetworkConditions"}], ["ruleIds"], "Activates emulation of network conditions for individual requests using URL match patterns.");
+inspectorBackend.registerCommand("Network.emulateNetworkConditionsByRule", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "matchedNetworkConditions", "type": "array", "optional": false, "description": "Configure conditions for matching requests. If multiple entries match a request, the first entry wins.  Global conditions can be configured by leaving the urlPattern for the conditions empty. These global conditions are also applied for throttling of p2p connections.", "typeRef": "Network.NetworkConditions"}], ["ruleIds"], "Activates emulation of network conditions for individual requests using URL match patterns. Unlike the deprecated Network.emulateNetworkConditions this method does not affect `navigator` state. Use Network.overrideNetworkState to explicitly modify `navigator` behavior.");
 inspectorBackend.registerCommand("Network.overrideNetworkState", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}], [], "Override the state of navigator.onLine and navigator.connection.");
 inspectorBackend.registerCommand("Network.enable", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxPostDataSize", "type": "number", "optional": true, "description": "Longest post body size (in bytes) that would be included in requestWillBeSent notification", "typeRef": null}, {"name": "reportDirectSocketTraffic", "type": "boolean", "optional": true, "description": "Whether DirectSocket chunk send/receive events should be reported.", "typeRef": null}, {"name": "enableDurableMessages", "type": "boolean", "optional": true, "description": "Enable storing response bodies outside of renderer, so that these survive a cross-process navigation. Requires maxTotalBufferSize to be set. Currently defaults to false.", "typeRef": null}], [], "Enables network tracking, network events will now be delivered to the client.");
 inspectorBackend.registerCommand("Network.getAllCookies", [], ["cookies"], "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the `cookies` field. Deprecated. Use Storage.getCookies instead.");

package/front_end/generated/protocol-mapping.d.ts

@@ -3349,7 +3349,9 @@ export namespace ProtocolMapping {
       returnType: void;
     };
     /**
-     * Activates emulation of network conditions for individual requests using URL match patterns.
+     * Activates emulation of network conditions for individual requests using URL match patterns. Unlike the deprecated
+     * Network.emulateNetworkConditions this method does not affect `navigator` state. Use Network.overrideNetworkState to
+     * explicitly modify `navigator` behavior.
      */
     'Network.emulateNetworkConditionsByRule': {
       paramsType: [Protocol.Network.EmulateNetworkConditionsByRuleRequest];

package/front_end/generated/protocol-proxy-api.d.ts

@@ -2523,7 +2523,9 @@ declare namespace ProtocolProxyApi {
     invoke_emulateNetworkConditions(params: Protocol.Network.EmulateNetworkConditionsRequest): Promise<Protocol.ProtocolResponseWithError>;
 
     /**
-     * Activates emulation of network conditions for individual requests using URL match patterns.
+     * Activates emulation of network conditions for individual requests using URL match patterns. Unlike the deprecated
+     * Network.emulateNetworkConditions this method does not affect `navigator` state. Use Network.overrideNetworkState to
+     * explicitly modify `navigator` behavior.
      */
     invoke_emulateNetworkConditionsByRule(params: Protocol.Network.EmulateNetworkConditionsByRuleRequest): Promise<Protocol.Network.EmulateNetworkConditionsByRuleResponse>;
 

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
 }