chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

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/TimelineHistoryManager.ts

@@ -7,7 +7,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 Trace from '../../models/trace/trace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -582,7 +582,7 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
 
     div.style.width = `${previewWidth}px`;
 
-    const icon = IconButton.Icon.create('arrow-back');
+    const icon = createIcon('arrow-back');
     icon.title = i18nString(UIStrings.backButtonTooltip);
     icon.classList.add('back-arrow');
     div.appendChild(icon);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -431,8 +431,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
   #hiddenTracksInfoBarByParsedTrace = new WeakMap<Trace.TraceModel.ParsedTrace, UI.Infobar.Infobar|'DISMISSED'>();
 
-  constructor(traceModel?: Trace.TraceModel.Model) {
+  readonly #resourceLoader: SDK.PageResourceLoader.ResourceLoader;
+
+  constructor(resourceLoader: SDK.PageResourceLoader.ResourceLoader, traceModel?: Trace.TraceModel.Model) {
     super('timeline');
+    this.#resourceLoader = resourceLoader;
     this.registerRequiredCSS(timelinePanelStyles);
     const adornerContent = document.createElement('span');
     adornerContent.innerHTML = `<div style="
@@ -698,13 +701,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   static instance(opts: {
-    forceNew: boolean|null,
+    forceNew: true,
+    resourceLoader: SDK.PageResourceLoader.ResourceLoader,
     traceModel?: Trace.TraceModel.Model,
-  }|undefined = {forceNew: null}): TimelinePanel {
-    const {forceNew} = opts;
+  }|undefined = undefined): TimelinePanel {
+    if (opts) {
+      timelinePanelInstance = new TimelinePanel(opts.resourceLoader, opts.traceModel);
+    }
 
-    if (!timelinePanelInstance || forceNew) {
-      timelinePanelInstance = new TimelinePanel(opts.traceModel);
+    if (!timelinePanelInstance) {
+      throw new Error('No TimelinePanel instance');
     }
 
     return timelinePanelInstance;
@@ -2105,8 +2111,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 +2168,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,7 +2649,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
           initiatorUrl: script.url as Platform.DevToolsPath.UrlString
         };
         rawSourceMap = await SDK.SourceMapManager.tryLoadSourceMap(
-            script.sourceMapUrl as Platform.DevToolsPath.UrlString, initiator);
+            this.#resourceLoader, script.sourceMapUrl as Platform.DevToolsPath.UrlString, initiator);
       }
 
       if (script.url && rawSourceMap) {
@@ -2747,8 +2746,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(
+          TimelinePanel.instance().#resourceLoader, 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/CPUThrottlingSelector.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/menus/menus.js';
 
 import * as Common from '../../../core/common/common.js';

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -5,7 +5,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/settings/settings.js';
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './FieldSettingsDialog.js';
 import './NetworkThrottlingSelector.js';
 import '../../../ui/components/menus/menus.js';

package/front_end/panels/timeline/components/NetworkRequestTooltip.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';

package/front_end/panels/timeline/components/NetworkThrottlingSelector.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/menus/menus.js';
 
 import * as Common from '../../../core/common/common.js';

package/front_end/panels/timeline/components/OriginMap.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';

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

@@ -7,7 +7,7 @@
  * @file A list of pass/fail conditions for an insight.
  */
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 import './Table.js';
 import './NodeLink.js';
 

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import type {ImageDeliveryInsightModel} from '../../../../models/trace/insights/ImageDelivery.js';
 import * as Trace from '../../../../models/trace/trace.js';

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

@@ -4,7 +4,7 @@
 
 import './Table.js';
 import './NodeLink.js';
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {

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/timeline/overlays/components/EntriesLinkOverlay.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 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/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 import '../../../../ui/components/tooltips/tooltips.js';
 import '../../../../ui/components/spinners/spinners.js';
 

package/front_end/panels/timeline/timeline-meta.ts

@@ -87,9 +87,10 @@ UI.ViewManager.registerViewExtension({
   title: i18nLazyString(UIStrings.performance),
   commandPrompt: i18nLazyString(UIStrings.showPerformance),
   order: 50,
-  async loadView() {
+  async loadView(universe) {
     const Timeline = await loadTimelineModule();
-    return Timeline.TimelinePanel.TimelinePanel.instance();
+    const resourceLoader = universe.context.get(SDK.PageResourceLoader.PageResourceLoader);
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, resourceLoader});
   },
 });
 

package/front_end/panels/utils/utils.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.
 
+import '../../ui/kit/kit.js';
 import '../../ui/components/icon_button/icon_button.js';
 
 import * as Common from '../../core/common/common.js';
@@ -42,6 +43,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 +85,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 +107,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 +127,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 +164,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

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,32 +40,22 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 83,
-  header: 'What\'s new in DevTools 142',
+  version: 143,
+  header: 'What\'s new in DevTools 143',
   markdownLinks: [
     {
-      key: 'perf-ai-agent',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#perf-ai-agent',
+      key: 'mcp-server',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#mcp-server',
     },
     {
-      key: 'ai-code-completion',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#ai-code-completion',
+      key: 'trace-sharing',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#trace-sharing',
     },
     {
-      key: 'gdp',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#gdp',
-    },
-    {
-      key: 'ai-main-button',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-142/#ai-main-button',
-    },
-  ],
-  videoLinks: [
-    {
-      description: 'See past highlights from Chrome 141',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-141' as Platform.DevToolsPath.UrlString,
-      type: VideoType.WHATS_NEW,
+      key: 'starting-style',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-143/#starting-style',
     },
   ],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-142/',
+  videoLinks: [],
+  link: 'https://developer.chrome.com/blog/new-in-devtools-143/',
 };

package/front_end/panels/whats_new/resources/WNDT.md

@@ -1,11 +1,11 @@
-### [Full stack trace AI agent in Performance panel](perf-ai-agent)
-The Performance panel now integrates a more capable AI agent that has full access to the stack trace.
+### [MCP server](mcp-server)
 
-### [AI code completion in Sources and Console](ai-code-completion)
-Code completion powered by AI is now available in the Sources panel and the Console.
+Let your favourite coding agent debug your pages at runtime, using the Chrome DevTools MCP server.
 
-### [Google Developer Program support](gdp)
-The Google Developer Program, a ready-made subscription and community platform, is now in DevTools, offering a more personalized experience, a badge system, and easier discovery of new features.
+### [Improved trace sharing](trace-sharing)
 
-### [One main 'Debug with AI' button](ai-main-button)
-The primary action bar at the top of DevTools now features the primary "Debug with AI" button which opens the 'AI assistance' panel in a right-hand side bar.
+Optionally include resource content and script source maps in exported performance traces.
+
+### [Support for @starting-style](starting-style)
+
+Debug and identify CSS entry animations using the new adorner in the Elements panel.

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: d967be56e70076834aad74008418755b70035538
+Revision: 5bbbb9ffe6bf19fdc31b46add466cd6ef53d75b4
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/puppeteer/third_party/mitt/README.chromium

@@ -1,6 +1,7 @@
 Name: mitt
 Short Name: mitt
 URL: https://github.com/developit/mitt
+Version: 3.0.1
 License: MIT
 License File: LICENSE
 Security Critical: no

package/front_end/third_party/puppeteer/third_party/parsel/README.chromium

@@ -1,6 +1,7 @@
 Name: parsel
 Short Name: parsel
 URL: https://github.com/LeaVerou/parsel
+Version: 1.2.2
 License: MIT
 License File: LICENSE
 Security Critical: no

package/front_end/third_party/puppeteer/third_party/rxjs/README.chromium

@@ -1,6 +1,7 @@
 Name: rxjs
 Short Name: rxjs
 URL: https://github.com/ReactiveX/rxjs
+Version: 7.8.2
 License: Apache-2.0
 License File: LICENSE
 Security Critical: no

package/front_end/ui/components/adorners/Adorner.ts

@@ -1,7 +1,7 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import type * as Platform from '../../../core/platform/platform.js';
 import {html, render} from '../../../ui/lit/lit.js';
@@ -16,7 +16,12 @@ export interface AdornerData {
   jslogContext?: string;
 }
 
+/**
+ * @deprecated Do not add new usages. The custom component will be removed an
+ * embedded into the corresponding views.
+ */
 export class Adorner extends HTMLElement {
+  static readonly observedAttributes = ['active', 'toggleable'];
   name = '';
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -53,6 +58,21 @@ export class Adorner extends HTMLElement {
     this.#render();
   }
 
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    switch (name) {
+      case 'active':
+        this.toggle(newValue === 'true');
+        break;
+      case 'toggleable':
+        this.#isToggle = newValue === 'true';
+        break;
+    }
+  }
+
   isActive(): boolean {
     return this.getAttribute('aria-pressed') === 'true';
   }