chrome-devtools-frontend 1.0.1522585 → 1.0.1525561

package/front_end/panels/timeline/CountersGraph.ts

@@ -71,9 +71,14 @@ export class CountersGraph extends UI.Widget.VBox {
 
   #noEventsFoundMessage = document.createElement('div');
   #showNoEventsMessage = false;
+  #defaultNumberFormatter: Intl.NumberFormat;
 
   constructor(delegate: TimelineModeViewDelegate) {
     super();
+    this.#defaultNumberFormatter = new Intl.NumberFormat(
+        i18n.DevToolsLocale.DevToolsLocale.instance().locale,
+    );
+
     this.element.id = 'memory-graphs-container';
 
     this.delegate = delegate;
@@ -180,6 +185,7 @@ export class CountersGraph extends UI.Widget.VBox {
       }
     }
     this.#showNoEventsMessage = counterEventsFound === 0;
+    this.requestUpdate();
   }
 
   private createCurrentValuesBar(): void {
@@ -192,7 +198,8 @@ export class CountersGraph extends UI.Widget.VBox {
       formatter?: ((arg0: number) => string)): Counter {
     const counter = new Counter();
     this.counters.push(counter);
-    this.counterUI.push(new CounterUI(this, uiName, settingsKey, color, counter, formatter));
+    this.counterUI.push(
+        new CounterUI(this, uiName, settingsKey, color, counter, formatter ?? this.#defaultNumberFormatter.format));
     return counter;
   }
 
@@ -388,7 +395,7 @@ export class Counter {
 export class CounterUI {
   private readonly countersPane: CountersGraph;
   counter: Counter;
-  private readonly formatter: (arg0: number) => string;
+  readonly formatter: (arg0: number) => string;
   private readonly setting: Common.Settings.Setting<boolean>;
   private readonly filter: UI.Toolbar.ToolbarSettingCheckbox;
   private readonly value: HTMLElement;
@@ -401,10 +408,10 @@ export class CounterUI {
 
   constructor(
       countersPane: CountersGraph, title: Common.UIString.LocalizedString, settingsKey: string, graphColor: string,
-      counter: Counter, formatter?: (arg0: number) => string) {
+      counter: Counter, formatter: (arg0: number) => string) {
     this.countersPane = countersPane;
     this.counter = counter;
-    this.formatter = formatter || Platform.NumberUtilities.withThousandsSeparator;
+    this.formatter = formatter;
 
     this.setting = Common.Settings.Settings.instance().createSetting('timeline-counters-graph-' + settingsKey, true);
     this.setting.setTitle(title);
@@ -474,7 +481,7 @@ export class CounterUI {
       return;
     }
     const index = this.recordIndexAt(x);
-    const value = Platform.NumberUtilities.withThousandsSeparator(this.counter.values[index]);
+    const value = this.formatter(this.counter.values[index]);
     this.value.textContent = `${this.counterName}: ${value}`;
     const y = this.graphYValues[index] / window.devicePixelRatio;
     this.marker.style.left = x + 'px';

package/front_end/panels/timeline/EasterEgg.d.ts

@@ -1,4 +1,6 @@
-// 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.
+/**
+ * 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.
+ **/
 export const SHOULD_SHOW_EASTER_EGG: boolean;

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -40,12 +40,14 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/LayoutShiftsTrackAppender.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// Bit of a hack: LayoutShifts are instant events, so have no duration. But
-// OPP doesn't do well at making tiny events easy to spot and click. So we
-// set it to a small duration so that the user is able to see and click
-// them more easily. Long term we will explore a better UI solution to
-// allow us to do this properly and not hack around it.
-// TODO: Delete this once the new Layout Shift UI ships out of the TIMELINE_LAYOUT_SHIFT_DETAILS experiment
+/**
+ * Bit of a hack: LayoutShifts are instant events, so have no duration. But
+ * OPP doesn't do well at making tiny events easy to spot and click. So we
+ * set it to a small duration so that the user is able to see and click
+ * them more easily. Long term we will explore a better UI solution to
+ * allow us to do this properly and not hack around it.
+ * TODO: Delete this once the new Layout Shift UI ships out of the TIMELINE_LAYOUT_SHIFT_DETAILS experiment
+ **/
 export const LAYOUT_SHIFT_SYNTHETIC_DURATION = Trace.Types.Timing.Micro(5_000);
 
 export class LayoutShiftsTrackAppender implements TrackAppender {

package/front_end/panels/timeline/ModificationsManager.ts

@@ -16,9 +16,11 @@ let activeManager: ModificationsManager|null;
 export type UpdateAction =
     'Remove'|'Add'|'UpdateLabel'|'UpdateTimeRange'|'UpdateLinkToEntry'|'EnterLabelEditState'|'LabelBringForward';
 
-// Event dispatched after an annotation was added, removed or updated.
-// The event argument is the Overlay that needs to be created,removed
-// or updated by `Overlays.ts` and the action that needs to be applied to it.
+/**
+ * Event dispatched after an annotation was added, removed or updated.
+ * The event argument is the Overlay that needs to be created,removed
+ * or updated by `Overlays.ts` and the action that needs to be applied to it.
+ **/
 export class AnnotationModifiedEvent extends Event {
   static readonly eventName = 'annotationmodifiedevent';
 

package/front_end/panels/timeline/ThreadAppender.ts

@@ -135,11 +135,13 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ThreadAppender.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// This appender is only triggered when the Renderer handler is run. At
-// the moment this only happens in the basic component server example.
-// In the future, once this appender fully supports the behaviour of the
-// old engine's thread/sync tracks we can always run it by enabling the
-// Renderer and Samples handler by default.
+/**
+ * This appender is only triggered when the Renderer handler is run. At
+ * the moment this only happens in the basic component server example.
+ * In the future, once this appender fully supports the behaviour of the
+ * old engine's thread/sync tracks we can always run it by enabling the
+ * Renderer and Samples handler by default.
+ **/
 export class ThreadAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'Thread';
 

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -1111,7 +1111,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     context.fillRect(barX, barY - 0.5, desiredBoxStartX - barX, barHeight);
     context.fillRect(desiredBoxEndX, barY - 0.5, entireBarEndXPixel - desiredBoxEndX, barHeight);
 
-    // Draws left and right whiskers
+    /** Draws left and right whiskers **/
     function drawTick(begin: number, end: number, y: number): void {
       const tickHeightPx = 6;
       context.moveTo(begin, y - tickHeightPx / 2);
@@ -1398,13 +1398,15 @@ export interface EventTypes {
   };
 }
 
-// an entry is a trace event, they are classified into "entry types"
-// because some events are rendered differently. For example, screenshot
-// events are rendered as images. Checks for entry types allow to have
-// different styles, names, etc. for events that look differently.
-// In the future we won't have this checks: instead we will forward
-// the event to the corresponding "track appender" and it will determine
-// how the event shall be rendered.
+/**
+ * an entry is a trace event, they are classified into "entry types"
+ * because some events are rendered differently. For example, screenshot
+ * events are rendered as images. Checks for entry types allow to have
+ * different styles, names, etc. for events that look differently.
+ * In the future we won't have this checks: instead we will forward
+ * the event to the corresponding "track appender" and it will determine
+ * how the event shall be rendered.
+ **/
 export const enum EntryType {
   FRAME = 'Frame',
   TRACK_APPENDER = 'TrackAppender',

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -307,7 +307,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     context.fillRect(barX, barY - 0.5, sendStart - barX, barHeight);
     context.fillRect(finish, barY - 0.5, barX + barWidth - finish, barHeight);
 
-    // Draws left and right whiskers
+    /** Draws left and right whiskers **/
     function drawTick(begin: number, end: number, y: number): void {
       const /** @constant */ tickHeightPx = 6;
       context.moveTo(begin, y - tickHeightPx / 2);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -1810,11 +1810,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         return;
       }
 
-      // To clear out the page and any state from prior test runs, we
-      // navigate to about:blank before initiating the trace recording.
-      // Once we have navigated to about:blank, we start recording and
-      // then navigate to the original page URL, to ensure we profile the
-      // page load.
+      /**
+       * To clear out the page and any state from prior test runs, we
+       * navigate to about:blank before initiating the trace recording.
+       * Once we have navigated to about:blank, we start recording and
+       * then navigate to the original page URL, to ensure we profile the
+       * page load.
+       **/
       function waitForAboutBlank(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>):
           void {
         if (event.data.url === 'about:blank') {
@@ -2024,14 +2026,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.toggleRecordAction.setToggled(this.state === State.RECORDING);
     this.toggleRecordAction.setEnabled(this.state === State.RECORDING || this.state === State.IDLE);
     this.askAiButton?.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
+    this.panelToolbar.setEnabled(this.state !== State.LOADING);
+    this.panelRightToolbar.setEnabled(this.state !== State.LOADING);
 
     if (!this.canRecord()) {
       return;
     }
 
     this.recordReloadAction.setEnabled(isNode ? false : this.state === State.IDLE);
-    this.panelToolbar.setEnabled(this.state !== State.LOADING);
-    this.panelRightToolbar.setEnabled(this.state !== State.LOADING);
     this.homeButton?.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
   }
 
@@ -3154,7 +3156,7 @@ export const enum State {
   RECORDING_FAILED = 'RecordingFailed',
 }
 
-// Define row and header height, should be in sync with styles for timeline graphs.
+/** Define row and header height, should be in sync with styles for timeline graphs. **/
 export const rowHeight = 18;
 
 export const headerHeight = 20;

package/front_end/panels/timeline/TimelineSelection.ts

@@ -5,8 +5,10 @@
 import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
 
-// We could add a `type` field here to distinguish them, but it is not needed
-// as we use the existence of "event" or "bounds" to do that.
+/**
+ * We could add a `type` field here to distinguish them, but it is not needed
+ * as we use the existence of "event" or "bounds" to do that.
+ **/
 export interface EventSelection {
   event: Trace.Types.Events.Event;
 }

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -480,7 +480,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineUIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// Look for scheme:// plus text and exclude any punctuation at the end.
+/** Look for scheme:// plus text and exclude any punctuation at the end. **/
 export const URL_REGEX = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/)[^\s"]{2,}[^\s"'\)\}\],:;.!?]/u;
 
 let eventDispatchDesciptors: EventDispatchTypeDescriptor[];
@@ -1684,8 +1684,10 @@ export class TimelineUIUtils {
     elem.textContent = eventStr;
     // Highlighting is done async (shrug), but we'll return the container immediately.
     void CodeHighlighter.CodeHighlighter.highlightNode(elem, 'text/javascript').then(() => {
-      // Linkify any URLs within the text nodes.
-      // Use a TreeWalker to find all our text nodes
+      /**
+       * Linkify any URLs within the text nodes.
+       * Use a TreeWalker to find all our text nodes
+       **/
       function* iterateTreeWalker(walker: TreeWalker): IterableIterator<Node> {
         while (walker.nextNode()) {
           yield walker.currentNode;

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

@@ -33,10 +33,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/BreadcrumbsUI.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// `initialBreadcrumb` is the first breadcrumb in the breadcrumbs linked list. Since
-// breadcrumbs are a linked list, the first breadcrumb is enought to be able to iterate through all of them.
-//
-// `activeBreadcrumb` is the currently active breadcrumb that the timeline is limited to.
+/**
+ * `initialBreadcrumb` is the first breadcrumb in the breadcrumbs linked list. Since
+ * breadcrumbs are a linked list, the first breadcrumb is enough to be able to iterate through all of them.
+ *
+ * `activeBreadcrumb` is the currently active breadcrumb that the timeline is limited to.
+ **/
 export interface BreadcrumbsUIData {
   initialBreadcrumb: Trace.Types.File.Breadcrumb;
   activeBreadcrumb: Trace.Types.File.Breadcrumb;

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

@@ -119,7 +119,7 @@ export function colorForNetworkRequest(request: Trace.Types.Events.SyntheticNetw
 export type MetricRating = 'good'|'needs-improvement'|'poor';
 export type MetricThresholds = [number, number];
 
-// TODO: Consolidate our metric rating logic with the trace engine.
+/** TODO: Consolidate our metric rating logic with the trace engine. **/
 export const LCP_THRESHOLDS = [2500, 4000] as MetricThresholds;
 export const CLS_THRESHOLDS = [0.1, 0.25] as MetricThresholds;
 export const INP_THRESHOLDS = [200, 500] as MetricThresholds;

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -209,9 +209,11 @@ export interface OverlayEntryQueries {
   firstVisibleParentForEntry: (entry: Trace.Types.Events.Event) => Trace.Types.Events.Event | null;
 }
 
-// An event dispatched when one of the Annotation Overlays (overlay created by the user,
-// ex. Trace.Types.Overlays.EntryLabel) is removed or updated. When one of the Annotation Overlays is removed or updated,
-// ModificationsManager listens to this event and updates the current annotations.
+/**
+ * An event dispatched when one of the Annotation Overlays (overlay created by the user,
+ * ex. Trace.Types.Overlays.EntryLabel) is removed or updated. When one of the Annotation Overlays is removed or updated,
+ * ModificationsManager listens to this event and updates the current annotations.
+ **/
 export type UpdateAction = 'Remove'|'Update';
 export class AnnotationOverlayActionEvent extends Event {
   static readonly eventName = 'annotationoverlayactionsevent';

package/front_end/panels/timeline/utils/Helpers.ts

@@ -147,7 +147,7 @@ export function formatOriginWithEntity(
   return originWithEntity;
 }
 
-// Thin wrapper class to enable revealing an individual insight in Timeline panel.
+/** Thin wrapper class to enable revealing an individual insight in Timeline panel. **/
 export class RevealableInsight {
   constructor(public insight: Trace.Insights.Types.InsightModel) {
   }

package/front_end/panels/utils/utils.ts

@@ -40,7 +40,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/utils/utils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// These utilities are packaged in a class to allow unittests to stub or spy the implementation.
+/** These utilities are packaged in a class to allow unittests to stub or spy the implementation. **/
 export class PanelUtils {
   static isFailedNetworkRequest(request: SDK.NetworkRequest.NetworkRequest|null): boolean {
     if (!request) {
@@ -56,9 +56,6 @@ export class PanelUtils {
     if (signedExchangeInfo !== null && Boolean(signedExchangeInfo.errors)) {
       return true;
     }
-    if (request.webBundleInfo()?.errorMessage || request.webBundleInnerRequestInfo()?.errorMessage) {
-      return true;
-    }
     if (request.corsErrorStatus()) {
       return true;
     }
@@ -186,9 +183,6 @@ export class PanelUtils {
     if (resourceType.name() === Common.ResourceType.resourceTypes.Media.name()) {
       return {iconName: 'file-media'};
     }
-    if (resourceType.isWebbundle()) {
-      return {iconName: 'bundle'};
-    }
 
     if (resourceType.name() === Common.ResourceType.resourceTypes.Fetch.name() ||
         resourceType.name() === Common.ResourceType.resourceTypes.XHR.name()) {

package/front_end/services/trace_bounds/TraceBounds.ts

@@ -19,8 +19,10 @@ export class StateChangedEvent extends Event {
   }
 }
 
-// Exposed as a shortcut to BoundsManager.instance().addEventListener, which
-// also takes care of type-casting the event to StateChangedEvent.
+/**
+ * Exposed as a shortcut to BoundsManager.instance().addEventListener, which
+ * also takes care of type-casting the event to StateChangedEvent.
+ **/
 export function onChange(cb: (event: StateChangedEvent) => void): void {
   BoundsManager.instance().addEventListener(
       StateChangedEvent.eventName,

package/front_end/services/tracing/PerformanceTracing.ts

@@ -82,7 +82,7 @@ interface Delegate {
   tracingComplete(events: Object[]): void;
 }
 
-// Used by an implementation of Common.Revealer to transfer data from the recorder to the performance panel.
+/** Used by an implementation of Common.Revealer to transfer data from the recorder to the performance panel. **/
 export class RawTraceEvents {
   constructor(private events: Object[]) {
   }

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: c7c3037a902ef52ab055674cd106721ea54d13d1
+Revision: 21c0e9d79181fd991f782bb74b0eb1c8bce10209
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE