chrome-devtools-frontend/front_end/panels/coverage/CoverageView.ts

Chrome DevTools UI

// Copyright 2016 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import '../../ui/legacy/legacy.js';

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 Platform from '../../core/platform/platform.js';
import * as SDK from '../../core/sdk/sdk.js';
import * as Bindings from '../../models/bindings/bindings.js';
import * as Workspace from '../../models/workspace/workspace.js';
import * as Buttons from '../../ui/components/buttons/buttons.js';
import * as UI from '../../ui/legacy/legacy.js';
import {Directives, html, i18nTemplate as unboundI18nTemplate, render, type TemplateResult} from '../../ui/lit/lit.js';
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';

import {CoverageDecorationManager} from './CoverageDecorationManager.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 = {
  /**
   * @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
   */
  perFunction: 'Per function',
  /**
   * @description Text in Coverage List View of the Coverage tab
   */
  perBlock: 'Per block',
  /**
   * @description Text in Coverage View of the Coverage tab
   */
  filterByUrl: 'Filter by URL',
  /**
   * @description Label for the type filter in the Coverage Panel
   */
  filterCoverageByType: 'Filter coverage by type',
  /**
   * @description Text for everything
   */
  all: 'All',
  /**
   * @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
   */
  javascript: 'JavaScript',
  /**
   * @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
   */
  contentScripts: 'Content scripts',
  /**
   * @description Message in Coverage View of the Coverage tab
   */
  noCoverageData: 'No coverage data',
  /**
   * @description Message in Coverage View of the Coverage tab
   */
  reloadPage: 'Reload page',
  /**
   * @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
   */
  clickTheReloadButtonSToReloadAnd: 'Click the "{PH1}" button to reload and start capturing coverage.',
  /**
   * @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.
   */
  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.
   */
  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
   */
  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
   */
  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
   */
  sOfSSUsedSoFarSUnused: '{PH1} of {PH2} ({PH3}%) used so far, {PH4} unused.',
} as const;
const str_ = i18n.i18n.registerUIStrings('panels/coverage/CoverageView.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
const i18nTemplate = unboundI18nTemplate.bind(undefined, str_);
const {ref} = Directives;
const {bindToAction, bindToSetting} = UI.UIUtils;
const {widgetConfig} = UI.Widget;

let coverageViewInstance: CoverageView|undefined;

export interface CoverageViewInput {
  coverageType: number;
  recording: boolean;
  supportsRecordOnReload: boolean;
  textFilter: RegExp|null;
  typeFilter: number|null;
  showContentScriptsSetting: Common.Settings.Setting<boolean>;

  needsReload: 'bfcache-page'|'prerender-page'|null;
  coverageInfo: CoverageListItem[]|null;
  selectedUrl: Platform.DevToolsPath.UrlString|null;
  statusMessage: string;

  onCoverageTypeChanged: (newValue: number) => void;
  onFilterChanged: (e: string) => void;
  onTypeFilterChanged: (newValue: number) => void;
}

export interface CoverageViewOutput {
  focusResults: () => void;
}

export type View = (input: CoverageViewInput, output: CoverageViewOutput, target: HTMLElement) => void;

export const DEFAULT_VIEW: View = (input, output, target) => {
  // clang-format off
  render(html`
      <style>${coverageViewStyles}</style>
      <div class="coverage-toolbar-container" jslog=${VisualLogging.toolbar()} role="toolbar">
        <devtools-toolbar class="coverage-toolbar" role="presentation" wrappable>
          <select title=${i18nString(UIStrings.chooseCoverageGranularityPer)}
              aria-label=${i18nString(UIStrings.chooseCoverageGranularityPer)}
              jslog=${VisualLogging.dropDown('coverage-type').track({change: true})}
              @change=${(event: Event) => input.onCoverageTypeChanged((event.target as HTMLSelectElement).selectedIndex)}
              .selectedIndex=${input.coverageType}
              ?disabled=${input.recording}>
            <option value=${CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION}
                    jslog=${VisualLogging.item(`${CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION}`).track({click: true})}>
                 ${i18nString(UIStrings.perFunction)}
            </option>
            <option value=${CoverageType.JAVA_SCRIPT}
                    jslog=${VisualLogging.item(`${CoverageType.JAVA_SCRIPT}`).track({click: true})}>
              ${i18nString(UIStrings.perBlock)}
            </option>
          </select>
          <devtools-button ${bindToAction(input.supportsRecordOnReload && !input.recording ?
                            'coverage.start-with-reload' : 'coverage.toggle-recording')}>
          </devtools-button>
          <devtools-button ${bindToAction('coverage.clear')}></devtools-button>
          <div class="toolbar-divider"></div>
          <devtools-button ${bindToAction('coverage.export')}></devtools-button>
          <div class="toolbar-divider"></div>
          <devtools-toolbar-input type="filter" placeholder=${i18nString(UIStrings.filterByUrl)}
              ?disabled=${!Boolean(input.coverageInfo)}
               @change=${(e: CustomEvent<string>) => input.onFilterChanged(e.detail)}
               style="flex-grow:1; flex-shrink:1">
          </devtools-toolbar-input>
          <div class="toolbar-divider"></div>
          <select title=${i18nString(UIStrings.filterCoverageByType)}
              aria-label=${i18nString(UIStrings.filterCoverageByType)}
              jslog=${VisualLogging.dropDown('coverage-by-type').track({change: true})}
              ?disabled=${!Boolean(input.coverageInfo)}
              @change=${(event: Event) => input.onTypeFilterChanged(
                  Number((event.target as HTMLSelectElement).selectedOptions[0]?.value))}>
            <option value="" jslog=${VisualLogging.item('').track({click: true})}
                    .selected=${input.typeFilter === null}>${i18nString(UIStrings.all)}</option>
            <option value=${CoverageType.CSS}
                    jslog=${VisualLogging.item(`${CoverageType.CSS}`).track({click: true})}
                    .selected=${input.typeFilter === CoverageType.CSS}>
              ${i18nString(UIStrings.css)}
            </option>
            <option value=${CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION}
                   jslog=${VisualLogging.item(`${CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION}`).track({click: true})}
                   .selected=${(input.typeFilter !== null && Boolean(input.typeFilter & (CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION)))}>
              ${i18nString(UIStrings.javascript)}
            </option>
          </select>
          <div class="toolbar-divider"></div>
          <devtools-checkbox title=${i18nString(UIStrings.includeExtensionContentScripts)}
              ${bindToSetting(input.showContentScriptsSetting)}
              ?disabled=${!Boolean(input.coverageInfo)}>
            ${i18nString(UIStrings.contentScripts)}
          </devtools-checkbox>
        </devtools-toolbar>
      </div>
      <div class="coverage-results">
        ${input.needsReload ?
            renderReloadPromptPage(input.needsReload === 'bfcache-page' ?
              i18nString(UIStrings.bfcacheNoCapture) : i18nString(UIStrings.activationNoCapture),
              input.needsReload)
        : input.coverageInfo ? html`
          <devtools-widget autofocus class="results" .widgetConfig=${widgetConfig(CoverageListView, {
              coverageInfo: input.coverageInfo,
              highlightRegExp: input.textFilter,
              selectedUrl: input.selectedUrl,
            })}
            ${ref(e => { if (e instanceof HTMLElement) { output.focusResults = () => { e.focus(); };}})}>`
        : renderLandingPage(input.supportsRecordOnReload)}
      </div>
      <div class="coverage-toolbar-summary">
        <div class="coverage-message">
            ${input.statusMessage}
        </div>
    </div>`, target);
  // clang-format on
};

function renderLandingPage(supportsRecordOnReload: boolean): TemplateResult {
  if (supportsRecordOnReload) {
    // clang-format off
    return html`
      <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget,{
          header: i18nString(UIStrings.noCoverageData),
          link: 'https://developer.chrome.com/docs/devtools/coverage' as Platform.DevToolsPath.UrlString,
          text: i18nString(UIStrings.clickTheReloadButtonSToReloadAnd, {PH1: i18nString(UIStrings.reloadPage)}),
          })}>
        <devtools-button ${bindToAction('coverage.start-with-reload')}
                          .variant=${Buttons.Button.Variant.TONAL} .iconName=${undefined}>
          ${i18nString(UIStrings.reloadPage)}
        </devtools-button>
      </devtools-widget>`;
    // clang-format on
  }
  // clang-format off
  return html`
    <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget,{
        header: i18nString(UIStrings.noCoverageData),
        link: 'https://developer.chrome.com/docs/devtools/coverage' as Platform.DevToolsPath.UrlString,
        text: i18nString(UIStrings.clickTheRecordButtonSToStart, {PH1: i18nString(UIStrings.startRecording)}),
        })}>
      <devtools-button ${bindToAction('coverage.toggle-recording')}
                       .variant=${Buttons.Button.Variant.TONAL} .iconName=${undefined}>
        ${i18nString(UIStrings.startRecording)}
      </devtools-button>
    </devtools-widget>`;
  // clang-format on
}

function renderReloadPromptPage(message: Common.UIString.LocalizedString, className: string): TemplateResult {
  // clang-format off
  return html`
    <div class="widget vbox ${className}">
      <div class="message">${message}</div>
      <span class="message">
        ${i18nTemplate(UIStrings.reloadPrompt, {PH1: html`
          <devtools-button class="inline-button" ${bindToAction('inspector-main.reload')}></devtools-button>`})}
      </span>
    </div>`;
  // clang-format on
}

export class CoverageView extends UI.Widget.VBox {
  #model: CoverageModel|null;
  #decorationManager: CoverageDecorationManager|null;
  readonly #coverageTypeComboBoxSetting: Common.Settings.Setting<number>;
  readonly #toggleRecordAction: UI.ActionRegistration.Action;
  readonly #clearAction: UI.ActionRegistration.Action;
  readonly #exportAction: UI.ActionRegistration.Action;
  #textFilter: RegExp|null;
  #typeFilter: number|null;
  readonly #showContentScriptsSetting: Common.Settings.Setting<boolean>;

  readonly #view: View;
  #supportsRecordOnReload: boolean;
  #needsReload: 'bfcache-page'|'prerender-page'|null = null;
  #statusMessage = '';
  #output: CoverageViewOutput = {focusResults: () => {}};
  #coverageInfo: CoverageListItem[]|null = null;
  #selectedUrl: Platform.DevToolsPath.UrlString|null = null;

  constructor(view: View = DEFAULT_VIEW) {
    super({
      jslog: `${VisualLogging.panel('coverage').track({resize: true})}`,
      useShadowDom: true,
      delegatesFocus: true,
    });
    this.registerRequiredCSS(coverageViewStyles);
    this.#view = view;

    this.#model = null;
    this.#decorationManager = null;

    this.#coverageTypeComboBoxSetting =
        Common.Settings.Settings.instance().createSetting('coverage-view-coverage-type', 0);

    this.#toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.toggle-recording');

    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
    this.#supportsRecordOnReload = Boolean(mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel));
    this.#clearAction = UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.clear');
    this.#clearAction.setEnabled(false);
    this.#exportAction = UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.export');
    this.#exportAction.setEnabled(false);

    this.#textFilter = null;

    this.#typeFilter = null;

    this.#showContentScriptsSetting = Common.Settings.Settings.instance().createSetting('show-content-scripts', false);
    this.#showContentScriptsSetting.addChangeListener(this.#onFilterChanged, this);

    this.requestUpdate();
  }

  override performUpdate(): void {
    const input: CoverageViewInput = {
      coverageType: this.#coverageTypeComboBoxSetting.get(),
      recording: this.#toggleRecordAction.toggled(),
      supportsRecordOnReload: this.#supportsRecordOnReload,
      typeFilter: this.#typeFilter,
      showContentScriptsSetting: this.#showContentScriptsSetting,
      needsReload: this.#needsReload,
      coverageInfo: this.#coverageInfo,
      textFilter: this.#textFilter,
      selectedUrl: this.#selectedUrl,
      statusMessage: this.#statusMessage,
      onCoverageTypeChanged: this.#onCoverageTypeChanged.bind(this),
      onFilterChanged: (value: string) => {
        this.#textFilter = value ? Platform.StringUtilities.createPlainTextSearchRegex(value, 'i') : null;
        this.#onFilterChanged();
      },
      onTypeFilterChanged: this.#onTypeFilterChanged.bind(this),
    };
    this.#view(input, this.#output, this.contentElement);
  }

  static instance(): CoverageView {
    if (!coverageViewInstance) {
      coverageViewInstance = new CoverageView();
    }
    return coverageViewInstance;
  }

  static removeInstance(): void {
    coverageViewInstance = undefined;
  }

  clear(): void {
    if (this.#model) {
      this.#model.reset();
    }
    this.#reset();
  }

  #reset(): void {
    if (this.#decorationManager) {
      this.#decorationManager.dispose();
      this.#decorationManager = null;
    }
    this.#needsReload = null;
    this.#coverageInfo = null;
    this.#statusMessage = '';
    this.#exportAction.setEnabled(false);
    this.requestUpdate();
  }

  toggleRecording(): void {
    const enable = !this.#toggleRecordAction.toggled();

    if (enable) {
      void this.startRecording({reload: false, jsCoveragePerBlock: this.isBlockCoverageSelected()});
    } else {
      void this.stopRecording();
    }
  }

  isBlockCoverageSelected(): boolean {
    // Check that Coverage.CoverageType.JavaScriptPerFunction is not present.
    return this.#coverageTypeComboBoxSetting.get() === CoverageType.JAVA_SCRIPT;
  }

  #selectCoverageType(jsCoveragePerBlock: boolean): void {
    const selectedIndex = jsCoveragePerBlock ? 1 : 0;
    this.#coverageTypeComboBoxSetting.set(selectedIndex);
  }

  #onCoverageTypeChanged(newValue: number): void {
    this.#coverageTypeComboBoxSetting.set(newValue);
  }

  async startRecording(options: {reload: (boolean|undefined), jsCoveragePerBlock: (boolean|undefined)}|null):
      Promise<void> {
    this.#reset();
    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
    if (!mainTarget) {
      return;
    }

    const {reload, jsCoveragePerBlock} = {reload: false, jsCoveragePerBlock: false, ...options};

    if (!this.#model || reload) {
      this.#model = mainTarget.model(CoverageModel);
    }
    if (!this.#model) {
      return;
    }
    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CoverageStarted);
    if (jsCoveragePerBlock) {
      Host.userMetrics.actionTaken(Host.UserMetrics.Action.CoverageStartedPerBlock);
    }
    const success = await this.#model.start(Boolean(jsCoveragePerBlock));
    if (!success) {
      return;
    }
    this.#selectCoverageType(Boolean(jsCoveragePerBlock));
    this.#model.addEventListener(Events.CoverageUpdated, this.#onCoverageDataReceived, this);
    this.#model.addEventListener(Events.SourceMapResolved, this.#updateListView, this);
    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
    SDK.TargetManager.TargetManager.instance().addModelListener(
        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
        this.#onPrimaryPageChanged, this);
    this.#decorationManager = new CoverageDecorationManager(
        this.#model, Workspace.Workspace.WorkspaceImpl.instance(),
        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
        Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance());
    this.#toggleRecordAction.setToggled(true);
    this.#clearAction.setEnabled(false);
    this.#coverageInfo = [];
    this.#needsReload = null;
    this.requestUpdate();
    await this.updateComplete;

    this.#output.focusResults();
    if (reload && resourceTreeModel) {
      resourceTreeModel.reloadPage();
    } else {
      void this.#model.startPolling();
    }
  }

  #onCoverageDataReceived(event: Common.EventTarget.EventTargetEvent<CoverageInfo[]>): void {
    const data = event.data;
    this.#updateViews(data);
  }

  #updateListView(): void {
    const entries =
        (this.#model?.entries() || [])
            .map(entry => this.#toCoverageListItem(entry))
            .filter(info => this.#isVisible(info))
            .map(
                (entry: CoverageListItem) =>
                    ({...entry, sources: entry.sources.filter((entry: CoverageListItem) => this.#isVisible(entry))}));
    this.#coverageInfo = entries;
  }

  #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> {
    SDK.TargetManager.TargetManager.instance().removeModelListener(
        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
        this.#onPrimaryPageChanged, this);
    // Stopping the model triggers one last poll to get the final data.
    if (this.#model) {
      await this.#model.stop();
      this.#model.removeEventListener(Events.CoverageUpdated, this.#onCoverageDataReceived, this);
    }
    this.#toggleRecordAction.setToggled(false);
    this.#clearAction.setEnabled(true);
    this.requestUpdate();
  }

  async #onPrimaryPageChanged(
      event: Common.EventTarget.EventTargetEvent<
          {frame: SDK.ResourceTreeModel.ResourceTreeFrame, type: SDK.ResourceTreeModel.PrimaryPageChangeType}>):
      Promise<void> {
    const frame = event.data.frame;
    const coverageModel = frame.resourceTreeModel().target().model(CoverageModel);
    if (!coverageModel) {
      return;
    }
    // If the primary page target has changed (due to MPArch activation), switch to new CoverageModel.
    if (this.#model !== coverageModel) {
      if (this.#model) {
        await this.#model.stop();
        this.#model.removeEventListener(Events.CoverageUpdated, this.#onCoverageDataReceived, this);
      }
      this.#model = coverageModel;
      const success = await this.#model.start(this.isBlockCoverageSelected());
      if (!success) {
        return;
      }

      this.#model.addEventListener(Events.CoverageUpdated, this.#onCoverageDataReceived, this);
      this.#decorationManager = new CoverageDecorationManager(
          this.#model, Workspace.Workspace.WorkspaceImpl.instance(),
          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
          Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance());
    }

    if (event.data.type === SDK.ResourceTreeModel.PrimaryPageChangeType.ACTIVATION) {
      this.#needsReload = 'prerender-page';
    } else if (frame.backForwardCacheDetails.restoredFromCache) {
      this.#needsReload = 'bfcache-page';
    } else {
      this.#needsReload = null;
      this.#coverageInfo = [];
    }
    this.requestUpdate();

    this.#model.reset();
    this.#decorationManager?.reset();
    void this.#model.startPolling();
  }

  #updateViews(updatedEntries: CoverageInfo[]): void {
    this.#updateStats();
    this.#updateListView();
    this.#exportAction.setEnabled(this.#model !== null && this.#model.entries().length > 0);
    this.#decorationManager?.update(updatedEntries);
    this.requestUpdate();
  }

  #updateStats(): void {
    const all = {total: 0, unused: 0};
    const filtered = {total: 0, unused: 0};
    const filterApplied = this.#textFilter !== null;
    if (this.#model) {
      for (const info of this.#model.entries()) {
        all.total += info.size();
        all.unused += info.unusedSize();
        const listItem = this.#toCoverageListItem(info);
        if (this.#isVisible(listItem)) {
          if (this.#textFilter?.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(this.#toCoverageListItem(childInfo))) {
                filtered.total += childInfo.size();
                filtered.unused += childInfo.unusedSize();
              }
            }
          }
        }
      }
    }
    this.#statusMessage = filterApplied ?
        i18nString(UIStrings.filteredSTotalS, {PH1: formatStat(filtered), PH2: formatStat(all)}) :
        formatStat(all);

    function formatStat({total, unused}: {total: number, unused: number}): string {
      const used = total - unused;
      const percentUsed = total ? Math.round(100 * used / total) : 0;
      return i18nString(UIStrings.sOfSSUsedSoFarSUnused, {
        PH1: i18n.ByteUtilities.bytesToString(used),
        PH2: i18n.ByteUtilities.bytesToString(total),
        PH3: percentUsed,
        PH4: i18n.ByteUtilities.bytesToString(unused),
      });
    }
  }

  #onFilterChanged(): void {
    this.#updateListView();
    this.#updateStats();
    this.requestUpdate();
  }

  #onTypeFilterChanged(typeFilter: number): void {
    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CoverageReportFiltered);

    this.#typeFilter = typeFilter;
    this.#updateListView();
    this.#updateStats();
    this.requestUpdate();
  }

  #isVisible(coverageInfo: CoverageListItem): boolean {
    const url = coverageInfo.url;
    if (url.startsWith(CoverageView.EXTENSION_BINDINGS_URL_PREFIX)) {
      return false;
    }
    if (coverageInfo.isContentScript && !this.#showContentScriptsSetting.get()) {
      return false;
    }
    if (this.#typeFilter && !(coverageInfo.type & this.#typeFilter)) {
      return false;
    }
    // If it's a parent, check if any children are visible
    if (coverageInfo.sources.length > 0) {
      for (const sourceURLCoverageInfo of coverageInfo.sources) {
        if (this.#isVisible(sourceURLCoverageInfo)) {
          return true;
        }
      }
    }

    return !this.#textFilter || this.#textFilter.test(url);
  }

  async exportReport(): Promise<void> {
    const fos = new Bindings.FileUtils.FileOutputStream();
    const fileName =
        `Coverage-${Platform.DateUtilities.toISO8601Compact(new Date())}.json` as Platform.DevToolsPath.RawPathString;
    const accepted = await fos.open(fileName);
    if (!accepted) {
      return;
    }
    this.#model && await this.#model.exportReport(fos);
  }

  selectCoverageItemByUrl(url: string): void {
    this.#selectedUrl = url as Platform.DevToolsPath.UrlString;
    this.requestUpdate();
  }

  static readonly EXTENSION_BINDINGS_URL_PREFIX = 'extensions::';

  override wasShown(): void {
    UI.Context.Context.instance().setFlavor(CoverageView, this);
    super.wasShown();
  }

  override willHide(): void {
    super.willHide();
    UI.Context.Context.instance().setFlavor(CoverageView, null);
  }

  get model(): CoverageModel|null {
    return this.#model;
  }
}

export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
  handleAction(_context: UI.Context.Context, actionId: string): boolean {
    const coverageViewId = 'coverage';
    void UI.ViewManager.ViewManager.instance()
        .showView(coverageViewId, /** userGesture= */ false, /** omitFocus= */ true)
        .then(() => {
          const view = UI.ViewManager.ViewManager.instance().view(coverageViewId);
          return view?.widget();
        })
        .then(widget => this.#handleAction(widget as CoverageView, actionId));

    return true;
  }

  #handleAction(coverageView: CoverageView, actionId: string): void {
    switch (actionId) {
      case 'coverage.toggle-recording':
        coverageView.toggleRecording();
        break;
      case 'coverage.start-with-reload':
        void coverageView.startRecording({reload: true, jsCoveragePerBlock: coverageView.isBlockCoverageSelected()});
        break;
      case 'coverage.clear':
        coverageView.clear();
        break;
      case 'coverage.export':
        void coverageView.exportReport();
        break;
      default:
        console.assert(false, `Unknown action: ${actionId}`);
    }
  }
}