chrome-devtools-frontend 1.0.1519267 → 1.0.1520139

package/front_end/panels/coverage/CoverageListView.ts

@@ -2,6 +2,7 @@
 // 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 * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -10,13 +11,23 @@ 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 coverageListViewStyles from './coverageListView.css.js';
-import {
-  CoverageType,
-  SourceURLCoverageInfo,
-  type URLCoverageInfo,
-} from './CoverageModel.js';
+import {CoverageType} from './CoverageModel.js';
+
+export interface CoverageListItem {
+  url: Platform.DevToolsPath.UrlString;
+  type: CoverageType;
+  size: number;
+  usedSize: number;
+  unusedSize: number;
+  usedPercentage: number;
+  unusedPercentage: number;
+  sources: CoverageListItem[];
+  isContentScript: boolean;
+  generatedUrl?: Platform.DevToolsPath.UrlString;
+}
 
 const UIStrings = {
   /**
@@ -113,6 +124,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;
 
 export function coverageTypeToString(type: CoverageType): string {
   const types = [];
@@ -128,15 +140,15 @@ export function coverageTypeToString(type: CoverageType): string {
 }
 
 export class CoverageListView extends UI.Widget.VBox {
-  private readonly nodeForCoverageInfo: Map<URLCoverageInfo, GridNode>;
-  private readonly isVisibleFilter: (arg0: URLCoverageInfo) => boolean;
+  private readonly nodeForUrl: Map<Platform.DevToolsPath.UrlString, GridNode>;
+  private readonly isVisibleFilter: (arg0: CoverageListItem) => boolean;
   private highlightRegExp: RegExp|null;
   private dataGrid: DataGrid.SortableDataGrid.SortableDataGrid<GridNode>;
 
-  constructor(isVisibleFilter: (arg0: URLCoverageInfo) => boolean) {
+  constructor(isVisibleFilter: (arg0: CoverageListItem) => boolean) {
     super({useShadowDom: true});
     this.registerRequiredCSS(coverageListViewStyles);
-    this.nodeForCoverageInfo = new Map();
+    this.nodeForUrl = new Map();
     this.isVisibleFilter = isVisibleFilter;
     this.highlightRegExp = null;
 
@@ -179,90 +191,87 @@ export class CoverageListView extends UI.Widget.VBox {
         weight: 1,
       },
     ] as DataGrid.DataGrid.ColumnDescriptor[];
-    this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid<GridNode>({
-      displayName: i18nString(UIStrings.codeCoverage),
-      columns,
-      refreshCallback: undefined,
-      deleteCallback: undefined,
-    });
+    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);
-    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortingChanged, this);
 
     const dataGridWidget = this.dataGrid.asWidget();
     dataGridWidget.show(this.contentElement);
     this.setDefaultFocusedChild(dataGridWidget);
   }
 
-  update(coverageInfo: URLCoverageInfo[] = []): void {
+  update(coverageInfo: CoverageListItem[] = []): void {
     let hadUpdates = false;
-    const maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size()), 0);
+    const maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
     const rootNode = this.dataGrid.rootNode();
     for (const entry of coverageInfo) {
-      let node = this.nodeForCoverageInfo.get(entry);
+      let node = this.nodeForUrl.get(entry.url);
       if (node) {
         if (this.isVisibleFilter(node.coverageInfo)) {
-          hadUpdates = node.refreshIfNeeded(maxSize) || hadUpdates;
-          if (entry.sourcesURLCoverageInfo.size > 0) {
-            this.updateSourceNodes(entry.sourcesURLCoverageInfo, maxSize, node);
+          hadUpdates = node.refreshIfNeeded(maxSize, entry) || hadUpdates;
+          if (entry.sources.length > 0) {
+            this.updateSourceNodes(entry.sources, maxSize, node);
           }
         }
         continue;
       }
       node = new GridNode(entry, maxSize);
-      this.nodeForCoverageInfo.set(entry, node);
+      this.nodeForUrl.set(entry.url, node);
       if (this.isVisibleFilter(node.coverageInfo)) {
         rootNode.appendChild(node);
-        if (entry.sourcesURLCoverageInfo.size > 0) {
-          void this.createSourceNodes(entry.sourcesURLCoverageInfo, maxSize, node);
+        if (entry.sources.length > 0) {
+          void this.createSourceNodes(entry.sources, maxSize, node);
         }
         hadUpdates = true;
       }
     }
     if (hadUpdates) {
-      this.sortingChanged();
+      this.dataGrid.dispatchEventToListeners(DataGrid.DataGrid.Events.SORTING_CHANGED);
     }
   }
 
-  updateSourceNodes(
-      sourcesURLCoverageInfo: Map<Platform.DevToolsPath.UrlString, SourceURLCoverageInfo>, maxSize: number,
-      node: GridNode): void {
+  updateSourceNodes(sources: CoverageListItem[], maxSize: number, node: GridNode): void {
     let shouldCreateSourceNodes = false;
-    for (const coverageInfo of sourcesURLCoverageInfo.values()) {
-      const sourceNode = this.nodeForCoverageInfo.get(coverageInfo);
+    for (const coverageInfo of sources) {
+      const sourceNode = this.nodeForUrl.get(coverageInfo.url);
       if (sourceNode) {
-        sourceNode.refreshIfNeeded(maxSize);
+        sourceNode.refreshIfNeeded(maxSize, coverageInfo);
       } else {
         shouldCreateSourceNodes = true;
         break;
       }
     }
     if (shouldCreateSourceNodes) {
-      void this.createSourceNodes(sourcesURLCoverageInfo, maxSize, node);
+      void this.createSourceNodes(sources, maxSize, node);
     }
   }
 
-  async createSourceNodes(
-      sourcesURLCoverageInfo: Map<Platform.DevToolsPath.UrlString, SourceURLCoverageInfo>, maxSize: number,
-      node: GridNode): Promise<void> {
-    for (const coverageInfo of sourcesURLCoverageInfo.values()) {
+  async createSourceNodes(sources: CoverageListItem[], maxSize: number, node: GridNode): Promise<void> {
+    for (const coverageInfo of sources) {
       const sourceNode = new GridNode(coverageInfo, maxSize);
       node.appendChild(sourceNode);
-      this.nodeForCoverageInfo.set(coverageInfo, sourceNode);
+      this.nodeForUrl.set(coverageInfo.url, sourceNode);
     }
   }
 
   reset(): void {
-    this.nodeForCoverageInfo.clear();
+    this.nodeForUrl.clear();
     this.dataGrid.rootNode().removeChildren();
   }
 
   updateFilterAndHighlight(highlightRegExp: RegExp|null): void {
     this.highlightRegExp = highlightRegExp;
     let hadTreeUpdates = false;
-    for (const node of this.nodeForCoverageInfo.values()) {
+    for (const node of this.nodeForUrl.values()) {
       const shouldBeVisible = this.isVisibleFilter(node.coverageInfo);
       const isVisible = Boolean(node.parent);
       if (shouldBeVisible) {
@@ -279,13 +288,13 @@ export class CoverageListView extends UI.Widget.VBox {
       }
     }
     if (hadTreeUpdates) {
-      this.sortingChanged();
+      this.dataGrid.dispatchEventToListeners(DataGrid.DataGrid.Events.SORTING_CHANGED);
     }
   }
 
   private appendNodeByType(node: GridNode): void {
-    if (node.coverageInfo instanceof SourceURLCoverageInfo) {
-      const parentNode = this.nodeForCoverageInfo.get(node.coverageInfo.generatedURLCoverageInfo);
+    if (node.coverageInfo.generatedUrl) {
+      const parentNode = this.nodeForUrl.get(node.coverageInfo.generatedUrl);
       parentNode?.appendChild(node);
     } else {
       this.dataGrid.rootNode().appendChild(node);
@@ -293,11 +302,9 @@ export class CoverageListView extends UI.Widget.VBox {
   }
 
   selectByUrl(url: string): void {
-    for (const [info, node] of this.nodeForCoverageInfo.entries()) {
-      if (info.url() === url) {
-        node.revealAndSelect();
-        break;
-      }
+    const node = this.nodeForUrl.get(url as Platform.DevToolsPath.UrlString);
+    if (node) {
+      node.revealAndSelect();
     }
   }
 
@@ -311,7 +318,7 @@ export class CoverageListView extends UI.Widget.VBox {
       return;
     }
     const coverageInfo = (node as GridNode).coverageInfo;
-    const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(coverageInfo.url());
+    const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(coverageInfo.url);
     if (!sourceCode) {
       return;
     }
@@ -321,21 +328,6 @@ export class CoverageListView extends UI.Widget.VBox {
     }
     void Common.Revealer.reveal(sourceCode);
   }
-
-  private sortingChanged(): void {
-    const columnId = this.dataGrid.sortColumnId();
-    if (!columnId) {
-      return;
-    }
-    const sortFunction = GridNode.sortFunctionForColumn(columnId) as (
-                             (arg0: DataGrid.SortableDataGrid.SortableDataGridNode<GridNode>,
-                              arg1: DataGrid.SortableDataGrid.SortableDataGridNode<GridNode>) => number) |
-        null;
-    if (!sortFunction) {
-      return;
-    }
-    this.dataGrid.sortNodes(sortFunction, !this.dataGrid.isSortOrderAscending());
-  }
 }
 
 let percentageFormatter: Intl.NumberFormat|null = null;
@@ -360,18 +352,28 @@ function getBytesFormatter(): Intl.NumberFormat {
 }
 
 export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<GridNode> {
-  coverageInfo: URLCoverageInfo;
+  coverageInfo: CoverageListItem;
   private lastUsedSize!: number|undefined;
   private url: Platform.DevToolsPath.UrlString;
   private maxSize: number;
   private highlightRegExp: RegExp|null;
 
-  constructor(coverageInfo: URLCoverageInfo, maxSize: number) {
+  constructor(coverageInfo: CoverageListItem, maxSize: number) {
     super();
     this.coverageInfo = coverageInfo;
-    this.url = coverageInfo.url();
+    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 {
@@ -382,102 +384,98 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
     this.refresh();
   }
 
-  refreshIfNeeded(maxSize: number): boolean {
-    if (this.lastUsedSize === this.coverageInfo.usedSize() && maxSize === this.maxSize) {
+  refreshIfNeeded(maxSize: number, coverageInfo: CoverageListItem): boolean {
+    if (this.lastUsedSize === coverageInfo.usedSize && maxSize === this.maxSize) {
       return false;
     }
-    this.lastUsedSize = this.coverageInfo.usedSize();
+    this.lastUsedSize = coverageInfo.usedSize;
     this.maxSize = maxSize;
     this.refresh();
+    this.#updateData(coverageInfo);
     return true;
   }
 
   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);
-        const outer = cell.createChild('div', 'url-outer');
-        const prefix = outer.createChild('div', 'url-prefix');
-        const suffix = outer.createChild('div', 'url-suffix');
+        this.setCellAccessibleName(this.url, cell, columnId);
         const splitURL = /^(.*)(\/[^/]*)$/.exec(this.url);
-        prefix.textContent = splitURL ? splitURL[1] : this.url;
-        suffix.textContent = splitURL ? splitURL[2] : '';
+        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(outer, this.url);
+          this.highlight(cell, this.url);
         }
-        this.setCellAccessibleName(this.url, cell, columnId);
         break;
       }
       case 'type': {
-        cell.textContent = coverageTypeToString(this.coverageInfo.type());
-        if (this.coverageInfo.type() & CoverageType.JAVA_SCRIPT_PER_FUNCTION) {
-          UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.jsCoverageWithPerFunction));
-        } else if (this.coverageInfo.type() & CoverageType.JAVA_SCRIPT) {
-          UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.jsCoverageWithPerBlock));
-        }
+        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': {
-        const size = this.coverageInfo.size() || 0;
-        const sizeSpan = cell.createChild('span');
-        const sizeFormatted = getBytesFormatter().format(size);
-        sizeSpan.textContent = sizeFormatted;
-        const sizeAccessibleName = i18nString(UIStrings.sBytes, {n: size});
-        this.setCellAccessibleName(sizeAccessibleName, cell, columnId);
+        this.setCellAccessibleName(i18nString(UIStrings.sBytes, {n: info.size || 0}), cell, columnId);
+        render(html`<span>${formatBytes(info.size)}</span>`, cell);
         break;
       }
       case 'unused-size': {
-        const unusedSize = this.coverageInfo.unusedSize() || 0;
-        const unusedSizeSpan = cell.createChild('span');
-        const unusedPercentsSpan = cell.createChild('span', 'percent-value');
-        const unusedSizeFormatted = getBytesFormatter().format(unusedSize);
-        unusedSizeSpan.textContent = unusedSizeFormatted;
-        const unusedPercentFormatted = getPercentageFormatter().format(this.coverageInfo.unusedPercentage());
-        unusedPercentsSpan.textContent = unusedPercentFormatted;
-        const unusedAccessibleName = i18nString(UIStrings.sBytesS, {n: unusedSize, percentage: unusedPercentFormatted});
-        this.setCellAccessibleName(unusedAccessibleName, cell, columnId);
+        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': {
-        const barContainer = cell.createChild('div', 'bar-container');
-        const unusedPercent = getPercentageFormatter().format(this.coverageInfo.unusedPercentage());
-        const usedPercent = getPercentageFormatter().format(this.coverageInfo.usedPercentage());
-        if (this.coverageInfo.unusedSize() > 0) {
-          const unusedSizeBar = barContainer.createChild('div', 'bar bar-unused-size');
-          unusedSizeBar.style.width = ((this.coverageInfo.unusedSize() / this.maxSize) * 100 || 0) + '%';
-          if (this.coverageInfo.type() & CoverageType.JAVA_SCRIPT_PER_FUNCTION) {
-            UI.Tooltip.Tooltip.install(
-                unusedSizeBar,
-                i18nString(
-                    UIStrings.sBytesSBelongToFunctionsThatHave,
-                    {PH1: this.coverageInfo.unusedSize(), PH2: unusedPercent}));
-          } else if (this.coverageInfo.type() & CoverageType.JAVA_SCRIPT) {
-            UI.Tooltip.Tooltip.install(
-                unusedSizeBar,
-                i18nString(
-                    UIStrings.sBytesSBelongToBlocksOf, {PH1: this.coverageInfo.unusedSize(), PH2: unusedPercent}));
-          }
-        }
-        if (this.coverageInfo.usedSize() > 0) {
-          const usedSizeBar = barContainer.createChild('div', 'bar bar-used-size');
-          usedSizeBar.style.width = ((this.coverageInfo.usedSize() / this.maxSize) * 100 || 0) + '%';
-          if (this.coverageInfo.type() & CoverageType.JAVA_SCRIPT_PER_FUNCTION) {
-            UI.Tooltip.Tooltip.install(
-                usedSizeBar,
-                i18nString(
-                    UIStrings.sBytesSBelongToFunctionsThatHaveExecuted,
-                    {PH1: this.coverageInfo.usedSize(), PH2: usedPercent}));
-          } else if (this.coverageInfo.type() & CoverageType.JAVA_SCRIPT) {
-            UI.Tooltip.Tooltip.install(
-                usedSizeBar,
-                i18nString(
-                    UIStrings.sBytesSBelongToBlocksOfJavascript,
-                    {PH1: this.coverageInfo.usedSize(), PH2: usedPercent}));
-          }
-        }
         this.setCellAccessibleName(
-            i18nString(UIStrings.sOfFileUnusedSOfFileUsed, {PH1: unusedPercent, PH2: usedPercent}), cell, columnId);
+            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`
+            <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) + '%'})}>
+            </div>` : nothing}
+          </div>`, cell);
+        // clang-format on
       }
     }
     return cell;
@@ -494,27 +492,4 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
     const range = new TextUtils.TextRange.SourceRange(matches.index, matches[0].length);
     UI.UIUtils.highlightRangesWithStyleClass(element, [range], 'filter-highlight');
   }
-
-  static sortFunctionForColumn(columnId: string): ((arg0: GridNode, arg1: GridNode) => number)|null {
-    const compareURL = (a: GridNode, b: GridNode): number => a.url.localeCompare(b.url);
-    switch (columnId) {
-      case 'url':
-        return compareURL;
-      case 'type':
-        return (a: GridNode, b: GridNode) => {
-          const typeA = coverageTypeToString(a.coverageInfo.type());
-          const typeB = coverageTypeToString(b.coverageInfo.type());
-          return typeA.localeCompare(typeB) || compareURL(a, b);
-        };
-      case 'size':
-        return (a: GridNode, b: GridNode) => a.coverageInfo.size() - b.coverageInfo.size() || compareURL(a, b);
-      case 'bars':
-      case 'unused-size':
-        return (a: GridNode, b: GridNode) =>
-                   a.coverageInfo.unusedSize() - b.coverageInfo.unusedSize() || compareURL(a, b);
-      default:
-        console.assert(false, 'Unknown sort field: ' + columnId);
-        return null;
-    }
-  }
 }

package/front_end/panels/coverage/CoverageView.ts

@@ -17,8 +17,15 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CoverageDecorationManager} from './CoverageDecorationManager.js';
-import {CoverageListView} from './CoverageListView.js';
-import {type CoverageInfo, CoverageModel, CoverageType, Events, type URLCoverageInfo} from './CoverageModel.js';
+import {type CoverageListItem, CoverageListView} from './CoverageListView.js';
+import {
+  type CoverageInfo,
+  CoverageModel,
+  CoverageType,
+  Events,
+  SourceURLCoverageInfo,
+  type URLCoverageInfo,
+} from './CoverageModel.js';
 import coverageViewStyles from './coverageView.css.js';
 
 const UIStrings = {
@@ -254,7 +261,7 @@ export class CoverageView extends UI.Widget.VBox {
     this.bfcacheReloadPromptPage = this.buildReloadPromptPage(i18nString(UIStrings.bfcacheNoCapture), 'bfcache-page');
     this.activationReloadPromptPage =
         this.buildReloadPromptPage(i18nString(UIStrings.activationNoCapture), 'prerender-page');
-    this.listView = new CoverageListView(this.isVisible.bind(this, false));
+    this.listView = new CoverageListView(this.isVisible.bind(this));
 
     this.statusToolbarElement = this.contentElement.createChild('div', 'coverage-toolbar-summary');
     this.statusMessageElement = this.statusToolbarElement.createChild('div', 'coverage-message');
@@ -435,7 +442,22 @@ export class CoverageView extends UI.Widget.VBox {
   }
 
   private updateListView(): void {
-    this.listView.update(this.model?.entries() || []);
+    this.listView.update(this.model?.entries().map(this.toCoverageListItem, this) || []);
+  }
+
+  private toCoverageListItem(info: URLCoverageInfo): CoverageListItem {
+    return {
+      url: info.url(),
+      type: info.type(),
+      size: info.size(),
+      usedSize: info.usedSize(),
+      unusedSize: info.unusedSize(),
+      usedPercentage: info.usedPercentage(),
+      unusedPercentage: info.unusedPercentage(),
+      sources: [...info.sourcesURLCoverageInfo.values()].map(this.toCoverageListItem, this),
+      isContentScript: info.isContentScript(),
+      generatedUrl: info instanceof SourceURLCoverageInfo ? info.generatedURLCoverageInfo.url() : undefined,
+    };
   }
 
   async stopRecording(): Promise<void> {
@@ -514,7 +536,7 @@ export class CoverageView extends UI.Widget.VBox {
 
   private updateViews(updatedEntries: CoverageInfo[]): void {
     this.updateStats();
-    this.listView.update(this.model?.entries() || []);
+    this.listView.update(this.model?.entries().map(this.toCoverageListItem, this) || []);
     this.exportAction.setEnabled(this.model !== null && this.model.entries().length > 0);
     this.decorationManager?.update(updatedEntries);
   }
@@ -527,14 +549,15 @@ export class CoverageView extends UI.Widget.VBox {
       for (const info of this.model.entries()) {
         all.total += info.size();
         all.unused += info.unusedSize();
-        if (this.isVisible(false, info)) {
+        const listItem = this.toCoverageListItem(info);
+        if (this.isVisible(listItem)) {
           if (this.textFilterRegExp?.test(info.url())) {
             filtered.total += info.size();
             filtered.unused += info.unusedSize();
           } else {
             // If it doesn't match the filter, calculate the stats from visible children if there are any
             for (const childInfo of info.sourcesURLCoverageInfo.values()) {
-              if (this.isVisible(false, childInfo)) {
+              if (this.isVisible(this.toCoverageListItem(childInfo))) {
                 filtered.total += childInfo.size();
                 filtered.unused += childInfo.unusedSize();
               }
@@ -583,27 +606,27 @@ export class CoverageView extends UI.Widget.VBox {
     this.updateStats();
   }
 
-  private isVisible(ignoreTextFilter: boolean, coverageInfo: URLCoverageInfo): boolean {
-    const url = coverageInfo.url();
+  private isVisible(coverageInfo: CoverageListItem): boolean {
+    const url = coverageInfo.url;
     if (url.startsWith(CoverageView.EXTENSION_BINDINGS_URL_PREFIX)) {
       return false;
     }
-    if (coverageInfo.isContentScript() && !this.showContentScriptsSetting.get()) {
+    if (coverageInfo.isContentScript && !this.showContentScriptsSetting.get()) {
       return false;
     }
-    if (this.typeFilterValue && !(coverageInfo.type() & this.typeFilterValue)) {
+    if (this.typeFilterValue && !(coverageInfo.type & this.typeFilterValue)) {
       return false;
     }
     // If it's a parent, check if any children are visible
-    if (coverageInfo.sourcesURLCoverageInfo.size > 0) {
-      for (const sourceURLCoverageInfo of coverageInfo.sourcesURLCoverageInfo.values()) {
-        if (this.isVisible(ignoreTextFilter, sourceURLCoverageInfo)) {
+    if (coverageInfo.sources.length > 0) {
+      for (const sourceURLCoverageInfo of coverageInfo.sources) {
+        if (this.isVisible(sourceURLCoverageInfo)) {
           return true;
         }
       }
     }
 
-    return ignoreTextFilter || !this.textFilterRegExp || this.textFilterRegExp.test(url);
+    return !this.textFilterRegExp || this.textFilterRegExp.test(url);
   }
 
   async exportReport(): Promise<void> {
@@ -618,7 +641,7 @@ export class CoverageView extends UI.Widget.VBox {
   }
 
   selectCoverageItemByUrl(url: string): void {
-    this.listView.selectByUrl(url);
+    this.listView.selectByUrl(url as Platform.DevToolsPath.UrlString);
   }
 
   static readonly EXTENSION_BINDINGS_URL_PREFIX = 'extensions::';

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -202,6 +203,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
 
     const onSelect = (conditions: SDK.NetworkManager.Conditions): void => {
       this.dispatchEventToListeners(Events.CONDITIONS_CHANGED, conditions);
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.NETWORK_SPEED_THROTTLED);
     };
 
     const throttlingGroups = [

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -771,6 +771,24 @@ export class NetworkRequestNode extends NetworkNode {
     return aScore - bScore || aRequest.identityCompare(bRequest);
   }
 
+  static IsAdRelatedComparator(a: NetworkNode, b: NetworkNode): number {
+    // TODO(allada) Handle this properly for group nodes.
+    const aRequest = a.requestOrFirstKnownChildRequest();
+    const bRequest = b.requestOrFirstKnownChildRequest();
+    if (!aRequest || !bRequest) {
+      return !aRequest ? -1 : 1;
+    }
+    const aIsAdRelated = aRequest.isAdRelated();
+    const bIsAdRelated = bRequest.isAdRelated();
+    if (aIsAdRelated > bIsAdRelated) {
+      return 1;
+    }
+    if (bIsAdRelated > aIsAdRelated) {
+      return -1;
+    }
+    return aRequest.identityCompare(bRequest);
+  }
+
   static RequestPropertyComparator(propertyName: string, a: NetworkNode, b: NetworkNode): number {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1038,6 +1056,10 @@ export class NetworkRequestNode extends NetworkNode {
         this.renderAddressSpaceCell(cell, this.requestInternal.remoteAddressSpace());
         break;
       }
+      case 'is-ad-related': {
+        this.setTextAndTitle(cell, this.requestInternal.isAdRelated().toLocaleString());
+        break;
+      }
       case 'cookies': {
         this.setTextAndTitle(cell, this.arrayLength(this.requestInternal.includedRequestCookies()));
         break;

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -148,6 +148,10 @@ const UIStrings = {
    * @description Text in Network Log View Columns of the Network panel
    */
   remoteAddressSpace: 'Remote Address Space',
+  /**
+   * @description Text to show whether a request is ad-related
+   */
+  isAdRelated: 'Is Ad-Related',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkLogViewColumns.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1183,6 +1187,11 @@ const DEFAULT_COLUMNS = [
     title: i18n.i18n.lockedLazyString('User-Agent'),
     sortingFunction: NetworkRequestNode.RequestHeaderStringComparator.bind(null, 'user-agent'),
   },
+  {
+    id: 'is-ad-related',
+    title: i18nLazyString(UIStrings.isAdRelated),
+    sortingFunction: NetworkRequestNode.IsAdRelatedComparator,
+  },
   // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
   {
     id: 'waterfall',