chrome-devtools-frontend 1.0.1548980 → 1.0.1549484

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';

package/front_end/panels/settings/SettingsScreen.ts

@@ -5,16 +5,16 @@
 
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.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 Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import type * as Cards from '../../ui/components/cards/cards.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
+import type {Card} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -83,7 +83,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let settingsScreenInstance: SettingsScreen;
 
-function createSettingsCard(heading: Common.UIString.LocalizedString, ...content: HTMLElement[]): Cards.Card.Card {
+function createSettingsCard(heading: Common.UIString.LocalizedString, ...content: HTMLElement[]): Card {
   const card = document.createElement('devtools-card');
   card.heading = heading;
   card.append(...content);
@@ -382,8 +382,8 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
 }
 
 export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTab {
-  #experimentsSection: Cards.Card.Card|undefined;
-  #unstableExperimentsSection: Cards.Card.Card|undefined;
+  #experimentsSection: Card|undefined;
+  #unstableExperimentsSection: Card|undefined;
   private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
   private readonly containerElement: HTMLElement;
 
@@ -581,7 +581,7 @@ export class Revealer implements Common.Revealer.Revealer<Root.Runtime.Experimen
     }
 
     // Reveal settings views
-    for (const view of UI.ViewManager.getRegisteredViewExtensions()) {
+    for (const view of UI.ViewManager.ViewManager.instance().getRegisteredViewExtensions()) {
       const id = view.viewId();
       const location = view.location();
       if (location !== UI.ViewManager.ViewLocationValues.SETTINGS_VIEW) {

package/front_end/panels/settings/WorkspaceSettingsTab.ts

@@ -4,7 +4,7 @@
 
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/buttons/buttons.js';
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../../ui/components/cards/cards.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';

package/front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -81,9 +81,11 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return this.snippets[itemIndex].name();
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
+  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
+    const itemElement = wrapperElement.createChild('div');
+    const titleElement = itemElement.createChild('div');
     const icon = IconButton.Icon.create('snippet', 'snippet');
-    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
+    wrapperElement.insertBefore(icon, itemElement);
     titleElement.textContent = this.snippets[itemIndex].name();
     QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query, true);
   }

package/front_end/panels/sources/CSSPlugin.ts

@@ -61,7 +61,7 @@ function findPropertyAt(node: CodeMirror.SyntaxNode, pos: number): CodeMirror.Sy
 }
 
 function getCurrentStyleSheet(
-    url: Platform.DevToolsPath.UrlString, cssModel: SDK.CSSModel.CSSModel): Protocol.CSS.StyleSheetId {
+    url: Platform.DevToolsPath.UrlString, cssModel: SDK.CSSModel.CSSModel): Protocol.DOM.StyleSheetId {
   const currentStyleSheet = cssModel.getStyleSheetIdsForURL(url);
   if (currentStyleSheet.length === 0) {
     throw new Error('Can\'t find style sheet ID for current URL');

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -7,10 +7,12 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {FilePathScoreFunction} from './FilePathScoreFunction.js';
+import filteredUISourceCodeListProviderStyles from './filteredUISourceCodeListProvider.css.js';
 
 const UIStrings = {
   /**
@@ -143,8 +145,13 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     return score + multiplier * (contentTypeBonus + this.scorer.calculateScore(fullDisplayName, null));
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {
-    titleElement.parentElement?.parentElement?.classList.toggle('search-mode', Boolean(query));
+  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
+    wrapperElement.createChild('style').textContent = filteredUISourceCodeListProviderStyles;
+    const itemElement = wrapperElement.createChild('div', 'filtered-ui-source-code-list-item');
+
+    const titleElement = itemElement.createChild('div', 'filtered-ui-source-code-title');
+
+    titleElement.classList.toggle('search-mode', Boolean(query));
     query = this.rewriteQuery(query);
     const uiSourceCode = this.uiSourceCodes[itemIndex];
     const fullDisplayName = uiSourceCode.fullDisplayName();
@@ -157,11 +164,12 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     let tooltipText = fullDisplayName;
 
     if (isIgnoreListed) {
-      titleElement.parentElement?.classList.add('is-ignore-listed');
+      itemElement.classList.add('is-ignore-listed');
       tooltipText = i18nString(UIStrings.sIgnoreListed, {PH1: tooltipText});
     }
 
     titleElement.textContent = uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '');
+    const subtitleElement = itemElement.createChild('div', 'filtered-ui-source-code-subtitle');
     this.renderSubtitleElement(subtitleElement, fullDisplayName.substring(0, fileNameIndex + 1));
     UI.Tooltip.Tooltip.install((subtitleElement as HTMLElement), tooltipText);
 
@@ -174,9 +182,9 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
       for (let i = 0; i < ranges.length; ++i) {
         ranges[i].offset -= fileNameIndex + 1;
       }
-      UI.UIUtils.highlightRangesWithStyleClass(titleElement, ranges, 'highlight');
+      Highlighting.highlightRangesWithStyleClass(titleElement, ranges, 'highlight');
     } else {
-      UI.UIUtils.highlightRangesWithStyleClass(subtitleElement, ranges, 'highlight');
+      Highlighting.highlightRangesWithStyleClass(subtitleElement, ranges, 'highlight');
     }
   }
 

package/front_end/panels/sources/GoToLineQuickOpen.ts

@@ -77,9 +77,11 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return this.#goToLineStrings.length;
   }
 
-  override renderItem(itemIndex: number, _query: string, titleElement: Element, _subtitleElement: Element): void {
+  override renderItem(itemIndex: number, _query: string, wrapperElement: Element): void {
+    const itemElement = wrapperElement.createChild('div');
+    const titleElement = itemElement.createChild('div');
     const icon = IconButton.Icon.create('colon');
-    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
+    wrapperElement.insertBefore(icon, itemElement);
     UI.UIUtils.createTextChild(titleElement, this.#goToLineStrings[itemIndex]);
   }
 

package/front_end/panels/sources/NavigatorView.ts

@@ -819,9 +819,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
     if (this.scriptsTree.selectedTreeElement) {
       // If the tree outline is being marked as "being edited" (i.e. we're renaming a file
-      // or chosing the name for a new snippet), we shall not proceed with revealing here,
+      // or choosing the name for a new snippet), we shall not proceed with revealing here,
       // as that will steal focus from the input widget and thus cancel editing. The
-      // test/e2e/snippets/breakpoint_test.ts exercises this.
+      // test/e2e/snippets/breakpoint.test.ts exercises this.
       if (UI.UIUtils.isBeingEdited(this.scriptsTree.selectedTreeElement.treeOutline?.element)) {
         return null;
       }

package/front_end/panels/sources/OpenFileQuickOpen.ts

@@ -40,9 +40,12 @@ export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
     return !project.isServiceProject();
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, subtitleElement: Element): void {
-    super.renderItem(itemIndex, query, titleElement, subtitleElement);
-
+  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
+    super.renderItem(itemIndex, query, wrapperElement);
+    const itemElement = wrapperElement.firstChild;
+    if (!itemElement) {
+      return;
+    }
     const iconElement = new IconButton.Icon.Icon();
     const {iconName, color} = PanelUtils.iconDataForResourceType(this.itemContentTypeAt(itemIndex));
     iconElement.name = iconName;
@@ -50,10 +53,6 @@ export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
       iconElement.style.color = color;
     }
     iconElement.classList.add('large');
-    titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
-  }
-
-  override renderAsTwoRows(): boolean {
-    return true;
+    wrapperElement.insertBefore(iconElement, itemElement);
   }
 }

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -317,10 +317,13 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return -item.lineNumber - 1;
   }
 
-  override renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
+  override renderItem(itemIndex: number, query: string, wrapperElement: Element): void {
     const item = this.items[itemIndex];
+    const itemElement = wrapperElement.createChild('div');
+    const titleElement = itemElement.createChild('div');
+
     const icon = IconButton.Icon.create('deployed');
-    titleElement.parentElement?.parentElement?.insertBefore(icon, titleElement.parentElement);
+    wrapperElement.insertBefore(icon, itemElement);
     titleElement.textContent = item.title + (item.subtitle ? item.subtitle : '');
     QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query);
 
@@ -329,7 +332,7 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
       return;
     }
 
-    const tagElement = titleElement.parentElement?.parentElement?.createChild('span', 'tag');
+    const tagElement = wrapperElement.createChild('span', 'tag');
     if (!tagElement) {
       return;
     }

package/front_end/panels/sources/ProfilePlugin.ts

@@ -8,6 +8,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
 import {Plugin} from './Plugin.js';
 
@@ -89,20 +90,16 @@ class PerformanceMarker extends CodeMirror.GutterMarker {
 }
 
 function markersFromProfileData(
-    map: Map<number, number>|Map<number, Map<number, number>>, state: CodeMirror.EditorState,
+    map: Workspace.UISourceCode.LineColumnProfileMap, state: CodeMirror.EditorState,
     type: Workspace.UISourceCode.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
   const markerType = type === Workspace.UISourceCode.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
   const markers: Array<CodeMirror.Range<CodeMirror.GutterMarker>> = [];
   const aggregatedByLine = new Map<number, number>();
   for (const [line, value] of map) {
     if (line <= state.doc.lines) {
-      if (value instanceof Map) {
-        for (const [, data] of value) {
-          aggregatedByLine.set(line, (aggregatedByLine.get(line) || 0) + data);
-        }
-        continue;
+      for (const [, data] of value) {
+        aggregatedByLine.set(line, (aggregatedByLine.get(line) || 0) + data);
       }
-      aggregatedByLine.set(line, value);
     }
   }
   for (const [line, value] of aggregatedByLine) {
@@ -112,13 +109,15 @@ function markersFromProfileData(
   return CodeMirror.RangeSet.of(markers, true);
 }
 
-const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin => class extends Plugin {
-  updateEffect = CodeMirror.StateEffect.define<Map<number, number>|Map<number, Map<number, number>>>();
+const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin =>
+    class ProfilePlugin extends Plugin {
+  updateEffect = CodeMirror.StateEffect.define<Workspace.UISourceCode.LineColumnProfileMap>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
   compartment: CodeMirror.Compartment = new CodeMirror.Compartment();
+  readonly #transformer: SourceFrame.SourceFrame.Transformer;
 
-  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode, transformer: SourceFrame.SourceFrame.Transformer) {
     super(uiSourceCode);
 
     this.field = CodeMirror.StateField.define<CodeMirror.RangeSet<CodeMirror.GutterMarker>>({
@@ -136,14 +135,24 @@ const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType):
       markers: view => view.state.field(this.field),
       class: `cm-${type}Gutter`,
     });
+
+    this.#transformer = transformer;
   }
 
   static override accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
     return uiSourceCode.contentType().hasScripts();
   }
 
-  private getLineMap(): Map<number, number>|Map<number, Map<number, number>>|undefined {
-    return this.uiSourceCode.getDecorationData(type);
+  private getLineMap(): Workspace.UISourceCode.LineColumnProfileMap|undefined {
+    const uiSourceCodeProfileMap = this.uiSourceCode.getDecorationData(type);
+    if (!uiSourceCodeProfileMap) {
+      return undefined;
+    }
+
+    return Workspace.UISourceCode.createMappedProfileData(uiSourceCodeProfileMap, (line, column) => {
+      const editorLocation = this.#transformer.uiLocationToEditorLocation(line, column);
+      return [editorLocation.lineNumber, editorLocation.columnNumber];
+    });
   }
 
   override editorExtension(): CodeMirror.Extension {

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -238,7 +238,6 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   override async setContent(content: string): Promise<void> {
-    this.#uiSourceCode.formatChanged(this.formattedMap);
     this.disposePlugins();
     this.loadPlugins();
     await super.setContent(content);

package/front_end/panels/sources/filteredUISourceCodeListProvider.css

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.filtered-list-widget-item > .filtered-ui-source-code-list-item {
+  align-content: center;
+  display: grid;
+  gap: var(--sys-size-2);
+  line-height: initial;
+}
+
+.filtered-ui-source-code-list-item.is-ignore-listed * {
+  color: var(--sys-color-state-disabled);
+}
+
+.filtered-ui-source-code-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filtered-ui-source-code-title:not(.search-mode) {
+  font-weight: var(--ref-typeface-weight-bold);
+}
+
+.filtered-ui-source-code-subtitle {
+  flex: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--sys-color-on-surface-subtle);
+  padding-left: var(--sys-size-3);
+  display: flex;
+  white-space: pre;
+}
+
+.filtered-ui-source-code-subtitle .first-part {
+  flex-shrink: 1000;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2105,8 +2105,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     Trace.Helpers.SyntheticEvents.SyntheticEventsManager.activate(syntheticEventsManager);
-    // Clear the line level profile that could exist from the previous trace.
-    PerfUI.LineLevelProfile.Performance.instance().reset();
 
     this.#minimapComponent.reset();
 
@@ -2164,20 +2162,15 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.flameChart.bulkAddOverlays(currModificationManager.getOverlays());
     }
 
-    // Set up line level profiling with CPU profiles, if we found any.
-    PerfUI.LineLevelProfile.Performance.instance().reset();
-    if (parsedTrace.data.Samples.profilesInProcess.size) {
-      const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-      // Gather up all CPU Profiles we found when parsing this trace.
-      const cpuProfiles =
-          Array.from(parsedTrace.data.Samples.profilesInProcess).flatMap(([_processId, threadsInProcess]) => {
-            const profiles = Array.from(threadsInProcess.values()).map(profileData => profileData.parsedProfile);
-            return profiles;
-          });
-      for (const profile of cpuProfiles) {
-        PerfUI.LineLevelProfile.Performance.instance().appendCPUProfile(profile, primaryPageTarget);
-      }
-    }
+    // Set up line level profiling with CPU profiles.
+    const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    // Gather up all CPU Profiles we found when parsing this trace.
+    const cpuProfiles =
+        Array.from(parsedTrace.data.Samples.profilesInProcess).flatMap(([_processId, threadsInProcess]) => {
+          const profiles = Array.from(threadsInProcess.values()).map(profileData => profileData.parsedProfile);
+          return profiles;
+        });
+    PerfUI.LineLevelProfile.Performance.instance().initialize(cpuProfiles, primaryPageTarget);
 
     // Initialize EntityMapper
     this.#entityMapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
@@ -2650,6 +2643,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
           initiatorUrl: script.url as Platform.DevToolsPath.UrlString
         };
         rawSourceMap = await SDK.SourceMapManager.tryLoadSourceMap(
+            SDK.PageResourceLoader.PageResourceLoader.instance(),
             script.sourceMapUrl as Platform.DevToolsPath.UrlString, initiator);
       }
 
@@ -2747,8 +2741,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       // non-final navigations during the trace will never have their source maps
       // fetched by the debugger model. That's only ever done here.
 
-      const initiator = {target: null, frameId: frame, initiatorUrl: sourceUrl};
-      const payload = await SDK.SourceMapManager.tryLoadSourceMap(sourceMapUrl, initiator);
+      const initiator = {
+        target: debuggerModelForFrameId.get(frame)?.target() ?? null,
+        frameId: frame,
+        initiatorUrl: sourceUrl
+      };
+      const payload = await SDK.SourceMapManager.tryLoadSourceMap(
+          SDK.PageResourceLoader.PageResourceLoader.instance(), sourceMapUrl, initiator);
       return payload ? new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, payload) : null;
     };
   }

package/front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -235,7 +235,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
         const nonMatches = timing[SelectorTimingsKey.MatchAttempts] - timing[SelectorTimingsKey.MatchCount];
         const slowPathNonMatches =
             (nonMatches ? 1.0 - timing[SelectorTimingsKey.FastRejectCount] / nonMatches : 0) * 100;
-        const styleSheetId = timing[SelectorTimingsKey.StyleSheetId] as Protocol.CSS.StyleSheetId;
+        const styleSheetId = timing[SelectorTimingsKey.StyleSheetId] as Protocol.DOM.StyleSheetId;
         let linkData = '';
         const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
         const cssModel = target?.model(SDK.CSSModel.CSSModel);
@@ -462,7 +462,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
 
   private async processSelectorTimings(timings: Trace.Types.Events.SelectorTiming[]): Promise<SelectorTiming[]> {
     async function toSourceFileLocation(
-        cssModel: SDK.CSSModel.CSSModel, styleSheetId: Protocol.CSS.StyleSheetId, selectorText: string,
+        cssModel: SDK.CSSModel.CSSModel, styleSheetId: Protocol.DOM.StyleSheetId, selectorText: string,
         selectorLocations: Map<string, Protocol.CSS.SourceRange[]>):
         Promise<Linkifier.Linkifier.LinkifierData[]|undefined> {
       if (!cssModel) {
@@ -505,7 +505,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
 
     return await Promise.all(
         timings.sort((a, b) => b[SelectorTimingsKey.Elapsed] - a[SelectorTimingsKey.Elapsed]).map(async x => {
-          const styleSheetId = x[SelectorTimingsKey.StyleSheetId] as Protocol.CSS.StyleSheetId;
+          const styleSheetId = x[SelectorTimingsKey.StyleSheetId] as Protocol.DOM.StyleSheetId;
           const selectorText = x[SelectorTimingsKey.Selector].trim();
           const locations = styleSheetId === 'n/a' ?
               null :

package/front_end/panels/timeline/components/insights/SlowCSSSelector.ts

@@ -35,7 +35,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     if (!cssModel) {
       return undefined;
     }
-    const styleSheetHeader = cssModel.styleSheetHeaderForId(selector.style_sheet_id as Protocol.CSS.StyleSheetId);
+    const styleSheetHeader = cssModel.styleSheetHeaderForId(selector.style_sheet_id as Protocol.DOM.StyleSheetId);
     if (!styleSheetHeader?.resourceURL()) {
       return undefined;
     }
@@ -45,7 +45,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     let ranges = this.#selectorLocations.get(key);
     if (!ranges) {
       const result = await cssModel.agent.invoke_getLocationForSelector(
-          {selectorText: selector.selector, styleSheetId: selector.style_sheet_id as Protocol.CSS.StyleSheetId});
+          {selectorText: selector.selector, styleSheetId: selector.style_sheet_id as Protocol.DOM.StyleSheetId});
       if (result.getError() || !result.ranges) {
         return undefined;
       }

package/front_end/panels/timeline/docs/flame_chart_migration.md

@@ -16,21 +16,20 @@ Flame chart data providers have two jobs:
 
 The main flame chart is currently being migrated to use the data of the new engine. This migration is supposed to be done on a track by track basis (https://crbug.com/1416533).
 
-
 ## Migrating a track from the main flame chart to use the new engine
 
 Migrating a track consists of taking the code in the data provider corresponding to a track (both the appending into the flame chart data and the handling of extra features) and moving it to a dedicated "track appender". Generally this boils down to these steps (note that steps 3 - 6 must be implemented together in the same change):
 
-0. Add screenshot tests for the track. In order to ensure no regressions are introduced after a migration we use screenshot tests for expanded and collapsed track. See for example the [gpu_track_test](../../../test/interactions/panels/performance/timeline/gpu_track_test.ts).
+0. Add screenshot tests for the track. In order to ensure no regressions are introduced after a migration we use screenshot tests for expanded and collapsed track. See for example the [gpu_track_test](../../../test/interactions/panels/performance/timeline/gpu_track.test.ts).
 
-    After adding the test file, you can run `npm run auto-screenshotstest` to generate the screenshot locally to check before submitting.
+   After adding the test file, you can run `npm run auto-screenshotstest` to generate the screenshot locally to check before submitting.
 
-    Or you can upload to the Gerrit and after the screenshot tests fails, run `./scripts/tools/update_goldens.py` to update the screenshots.
-    See [update_goldens.py](../../../scripts/tools/update_goldens.py) for more information.
+   Or you can upload to the Gerrit and after the screenshot tests fails, run `./scripts/tools/update_goldens.py` to update the screenshots.
+   See [update_goldens.py](../../../scripts/tools/update_goldens.py) for more information.
 
 1. Add missing related functionality to the new engine (not always needed).
 
-    Whatever's needed to support using the new engine as source of data for the track being migrated. This could mean adding a new handler or buffering/exporting a new kind of event in a particular handler, for example.
+   Whatever's needed to support using the new engine as source of data for the track being migrated. This could mean adding a new handler or buffering/exporting a new kind of event in a particular handler, for example.
 
 2. Define a new appender for the track being migrated. Make sure the class implements the `CompatibilityTracksAppender.TrackAppender` interface. See for example the [TimingsTrackAppender](TimingsTrackAppender.ts).
 
@@ -38,24 +37,20 @@ Migrating a track consists of taking the code in the data provider corresponding
 
 4. Move the appending of the data track in the data provider into the new track appender:
 
-    The data appending happens at the [appendLegacyTrackData method](https://source.chromium.org/chromium/_/chromium/devtools/devtools-frontend/+/3925b7d73681966c9a8c844c49c7e815ecdcff82:front_end/panels/timeline/TimelineFlameChartDataProvider.ts;l=528). The implementation for each track should be under the switch case with the track being migrated.
+   The data appending happens at the [appendLegacyTrackData method](https://source.chromium.org/chromium/_/chromium/devtools/devtools-frontend/+/3925b7d73681966c9a8c844c49c7e815ecdcff82:front_end/panels/timeline/TimelineFlameChartDataProvider.ts;l=528). The implementation for each track should be under the switch case with the track being migrated.
 
-    The appending is usually the result of calling `appendSyncEvents` and/or `appendAsyncEventsGroup`. These two methods are commonly shared across tracks in the legacy system, and as such contain the handling of particular details of all tracks, which makes them very complex. To migrate a track to the new system, you will have to inspect the code paths invoked to append a track in the legacy system and extract them. The extracted code should be re-implemented in a functionally-equivalent way under the `appendTrackAtLevel` method implementation of the new track appender.
+   The appending is usually the result of calling `appendSyncEvents` and/or `appendAsyncEventsGroup`. These two methods are commonly shared across tracks in the legacy system, and as such contain the handling of particular details of all tracks, which makes them very complex. To migrate a track to the new system, you will have to inspect the code paths invoked to append a track in the legacy system and extract them. The extracted code should be re-implemented in a functionally-equivalent way under the `appendTrackAtLevel` method implementation of the new track appender.
 
-    Note that there might be similarities in the way multiple track appenders "append" their data, in that case it would make sense to introduce new helpers that are shared between appenders to prevent code duplication.
+   Note that there might be similarities in the way multiple track appenders "append" their data, in that case it would make sense to introduce new helpers that are shared between appenders to prevent code duplication.
 
 5. Move the handling of the extra features.
 
-    This is usually achieved by implementing the methods `colorForEvent`, `titleForEvent` and `popoverInfo`. Note how The implementation of these methods should be equivalent to the codepaths of the methods with the same names in the data provider related to the tracks/events being migrated. Here again we should look out for opportunities to introduce helpers to share between track appenders.
+   This is usually achieved by implementing the methods `colorForEvent`, `titleForEvent` and `popoverInfo`. Note how The implementation of these methods should be equivalent to the codepaths of the methods with the same names in the data provider related to the tracks/events being migrated. Here again we should look out for opportunities to introduce helpers to share between track appenders.
 
-    Note: Queries done by the FlameChart renderer for events' extra features are passed from the data provider to the CompatibilityTracksAppender ([see example](https://source.chromium.org/chromium/_/chromium/devtools/devtools-frontend/+/3925b7d73681966c9a8c844c49c7e815ecdcff82:front_end/panels/timeline/TimelineFlameChartDataProvider.ts;l=1083)), which then [forwards](https://source.chromium.org/chromium/_/chromium/devtools/devtools-frontend/+/3925b7d73681966c9a8c844c49c7e815ecdcff82:front_end/panels/timeline/CompatibilityTracksAppender.ts;l=107) the query to the appropriate track appender.
+   Note: Queries done by the FlameChart renderer for events' extra features are passed from the data provider to the CompatibilityTracksAppender ([see example](https://source.chromium.org/chromium/_/chromium/devtools/devtools-frontend/+/3925b7d73681966c9a8c844c49c7e815ecdcff82:front_end/panels/timeline/TimelineFlameChartDataProvider.ts;l=1083)), which then [forwards](https://source.chromium.org/chromium/_/chromium/devtools/devtools-frontend/+/3925b7d73681966c9a8c844c49c7e815ecdcff82:front_end/panels/timeline/CompatibilityTracksAppender.ts;l=107) the query to the appropriate track appender.
 
 6. Look for any remaining references to the track, or events in the track being migrated, throughout [TimelineFlameChartDataProvider.ts](TimelineFlameChartDataProvider.ts). Make sure they have an equivalent in the new system and that it would be invoked at the same time as it was before the migration. There is no more specific rule that can be followed: each track needs to be checked independently.
 
-
 ### Things to look out for:
 
-* Timings: Trace events in the new engine uses raw timestamps coming from a trace. This means the new engine uses **microseconds**. However, most features in the panel use **milliseconds**. Make sure you make the appropriate time conversion when appending new tracks.
-
-
-
+- Timings: Trace events in the new engine uses raw timestamps coming from a trace. This means the new engine uses **microseconds**. However, most features in the panel use **milliseconds**. Make sure you make the appropriate time conversion when appending new tracks.

package/front_end/panels/utils/utils.ts

@@ -42,6 +42,16 @@ const UIStrings = {
    * @example {3G} PH2
    */
   resourceTypeWithThrottling: '{PH1} (throttled to {PH2})',
+  /**
+   * @description Tooltip for a failed request
+   * @example {Document} PH1
+   */
+  requestFailed: '{PH1} request failed',
+  /**
+   * @description Tooltip for a failed request
+   * @example {Document} PH1
+   */
+  prefetchFailed: '{PH1} prefetch request failed',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/utils/utils.ts', UIStrings);
@@ -74,16 +84,19 @@ export class PanelUtils {
 
     if (PanelUtils.isFailedNetworkRequest(request)) {
       let iconName: string;
+      let title: string;
       // Failed prefetch network requests are displayed as warnings instead of errors.
       if (request.resourceType() === Common.ResourceType.resourceTypes.Prefetch) {
+        title = i18nString(UIStrings.prefetchFailed, {PH1: type.title()});
         iconName = 'warning-filled';
       } else {
+        title = i18nString(UIStrings.requestFailed, {PH1: type.title()});
         iconName = 'cross-circle-filled';
       }
 
       // clang-format off
       return html`<devtools-icon
-          class="icon" name=${iconName} title=${type.title()}>
+          class="icon" name=${iconName} title=${title}> role=img
         </devtools-icon>`;
       // clang-format on
     }
@@ -93,6 +106,7 @@ export class PanelUtils {
       return html`<devtools-icon
         class="icon"
         name="warning-filled"
+        role=img
         title=${i18nString(UIStrings.thirdPartyPhaseout)}
       ></devtools-icon>`;
       // clang-format on
@@ -112,7 +126,7 @@ export class PanelUtils {
 
       // clang-format off
       return html`<div class="network-override-marker">
-          <devtools-icon class="icon" name="document" title=${title}></devtools-icon>
+          <devtools-icon class="icon" name="document" role=img title=${title}></devtools-icon>
         </div>`;
       // clang-format on
     }
@@ -149,7 +163,7 @@ export class PanelUtils {
         Common.ResourceType.ResourceType.simplifyContentType(request.mimeType) === 'application/json') {
       // clang-format off
       return html`<devtools-icon
-          class="icon" name="file-json" title=${iconTitleForRequest(request)}
+          class="icon" name="file-json" title=${iconTitleForRequest(request)} role=img
           style="color:var(--icon-file-script)">
         </devtools-icon>`;
       // clang-format on