chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

package/front_end/panels/timeline/ThreadAppender.ts

@@ -29,61 +29,59 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text shown for an entry in the flame chart that is ignored because it matches
-   * a predefined ignore list.
+   * @description Text shown for an entry in the flame chart that matches an ignore list rule.
    * @example {/analytics\.js$} rule
    */
   onIgnoreList: 'On ignore list ({rule})',
   /**
-   * @description Refers to the "Main frame", meaning the top level frame. See https://www.w3.org/TR/html401/present/frames.html
+   * @description Header for the main thread track of a top-level frame in the timeline flame chart.
    * @example {example.com} PH1
    */
   mainS: 'Main — {PH1}',
   /**
-   * @description Refers to the main thread of execution of a program. See https://developer.mozilla.org/en-US/docs/Glossary/Main_thread
+   * @description Header for the main thread track in the timeline flame chart.
    */
   main: 'Main',
   /**
-   * @description Refers to any frame in the page. See https://www.w3.org/TR/html401/present/frames.html
+   * @description Header for a frame thread track in the timeline flame chart.
    * @example {https://example.com} PH1
    */
   frameS: 'Frame — {PH1}',
   /**
-   * @description A web worker in the page. See https://developer.mozilla.org/en-US/docs/Web/API/Worker
+   * @description Header for a dedicated worker thread track in the timeline flame chart.
    * @example {https://google.com} PH1
    */
   workerS: '`Worker` — {PH1}',
   /**
-   * @description A web worker in the page. See https://developer.mozilla.org/en-US/docs/Web/API/Worker
+   * @description Header for a named dedicated worker thread track in the timeline flame chart.
    * @example {FormatterWorker} PH1
    * @example {https://google.com} PH2
    */
   workerSS: '`Worker`: {PH1} — {PH2}',
   /**
-   * @description Label for a web worker exclusively allocated for a purpose.
+   * @description Header for an unnamed dedicated worker thread track in the timeline flame chart.
    */
   dedicatedWorker: 'Dedicated `Worker`',
   /**
-   * @description A generic name given for a thread running in the browser (sequence of programmed instructions).
-   * The placeholder is an enumeration given to the thread.
+   * @description Generic header for a thread track in the timeline flame chart.
    * @example {1} PH1
    */
   threadS: 'Thread {PH1}',
   /**
-   * @description Rasterization in computer graphics.
+   * @description Header for the rasterizer thread track in the timeline flame chart.
    */
   raster: 'Raster',
   /**
-   * @description Threads used for background tasks.
+   * @description Header for the thread pool track in the timeline flame chart.
    */
   threadPool: 'Thread pool',
   /**
-   * @description Name for a thread that rasterizes graphics in a website.
+   * @description Header for an indexed rasterizer thread track in the timeline flame chart.
    * @example {2} PH1
    */
   rasterizerThreadS: 'Rasterizer thread {PH1}',
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Header for an indexed thread pool worker track in the timeline flame chart.
    * @example {2} PH1
    */
   threadPoolThreadS: 'Thread pool worker {PH1}',

package/front_end/panels/timeline/TimelineController.ts

@@ -18,26 +18,23 @@ import * as RecordingMetadata from './RecordingMetadata.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status text shown in the Performance panel when tracing is being initialized.
    */
   initializingTracing: 'Initializing tracing…',
   /**
-   * @description Text to indicate the progress of a trace. Informs the user that we are currently
-   * creating a performance trace.
+   * @description Status text shown in the Performance panel while recording a trace.
    */
   tracing: 'Tracing…',
   /**
-   * @description Text in Timeline Controller of the Performance panel indicating that the Performance Panel cannot
-   * record a performance trace because the type of target (where possible types are page, service worker and shared
-   * worker) doesn't support it.
+   * @description Error message shown when performance trace recording is not supported for the selected target type in the Performance panel.
    */
   tracingNotSupported: 'Performance trace recording not supported for this type of target',
   /**
-   * @description Text in a status dialog shown during a performance trace of a web page. It indicates to the user what the tracing is currently waiting on.
+   * @description Status text shown in the status dialog while waiting for the page load event.
    */
   waitingForLoadEvent: 'Waiting for load event…',
   /**
-   * @description Text in a status dialog shown during a performance trace of a web page. It indicates to the user what the tracing is currently waiting on.
+   * @description Status text shown in the status dialog while waiting for the page load event and five additional seconds.
    */
   waitingForLoadEventPlus5Seconds: 'Waiting for load event (+5s)…',
 } as const;

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -42,31 +42,31 @@ import {TracingFrameLayerTree} from './TracingLayerTree.js';
 
 const UIStrings = {
   /**
-   * @description Text for the summary view
+   * @description Title for the summary tab in the details view of the Performance panel.
    */
   summary: 'Summary',
   /**
-   * @description Text in Timeline Details View of the Performance panel
+   * @description Title for the bottom-up tab in the details view of the Performance panel.
    */
   bottomup: 'Bottom-up',
   /**
-   * @description Text in Timeline Details View of the Performance panel
+   * @description Title for the call tree tab in the details view of the Performance panel.
    */
   callTree: 'Call tree',
   /**
-   * @description Text in Timeline Details View of the Performance panel
+   * @description Title for the event log tab in the details view of the Performance panel.
    */
   eventLog: 'Event log',
   /**
-   * @description Title of the paint profiler, old name of the performance pane
+   * @description Title for the paint profiler tab in the details view of the Performance panel.
    */
   paintProfiler: 'Paint profiler',
   /**
-   * @description Title of the Layers tool
+   * @description Title for the layers tab in the details view of the Performance panel.
    */
   layers: 'Layers',
   /**
-   * @description Title of the selector stats tab
+   * @description Title for the selector stats tab in the details view of the Performance panel.
    */
   selectorStats: 'Selector stats',
 } as const;
@@ -74,8 +74,12 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineDetailsView.ts
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {widget} = UI.Widget;
 
-export class TimelineDetailsPane extends
-    Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const TimelineDetailsPaneBase: Common.ObjectWrapper.EventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TimelineDetailsPane extends TimelineDetailsPaneBase {
   private readonly detailsLinkifier: Components.Linkifier.Linkifier;
   private tabbedPane: UI.TabbedPane.TabbedPane;
   private readonly defaultDetailsWidget: UI.Widget.VBox;

package/front_end/panels/timeline/TimelineEventOverview.ts

@@ -14,19 +14,19 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
-   * @description Short for Network. Label for the network requests section of the Performance panel.
+   * @description Label for the network overview strip in the Performance panel.
    */
   net: 'NET',
   /**
-   * @description Text in Timeline Event Overview of the Performance panel
+   * @description Label for the CPU overview strip in the Performance panel.
    */
   cpu: 'CPU',
   /**
-   * @description Text in Timeline Event Overview of the Performance panel
+   * @description Label for the heap memory overview strip in the Performance panel.
    */
   heap: 'HEAP',
   /**
-   * @description Heap size label text content in Timeline Event Overview of the Performance panel
+   * @description Range label for minimum and maximum heap size in the heap memory overview strip of the Performance panel.
    * @example {10 MB} PH1
    * @example {30 MB} PH2
    */

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -31,71 +31,71 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text for rendering frames
+   * @description Header for the frames track in the timeline flame chart.
    */
   frames: 'Frames',
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Label for an idle frame in the frames track.
    */
   idleFrame: 'Idle frame',
   /**
-   * @description Text in Timeline Frame Chart Data Provider of the Performance panel
+   * @description Label for a dropped frame in the frames track.
    */
   droppedFrame: 'Dropped frame',
   /**
-   * @description Text in Timeline Frame Chart Data Provider of the Performance panel
+   * @description Label for a partially-presented frame in the frames track.
    */
   partiallyPresentedFrame: 'Partially-presented frame',
   /**
-   * @description Text for a rendering frame
+   * @description Label for a presented frame in the frames track.
    */
   frame: 'Frame',
   /**
-   * @description Text for Hiding a function from the Flame Chart
+   * @description Context menu item to hide a function in the timeline flame chart.
    */
   hideFunction: 'Hide function',
   /**
-   * @description Text for Hiding all children of a function from the Flame Chart
+   * @description Context menu item to hide child entries of a function in the timeline flame chart.
    */
   hideChildren: 'Hide children',
   /**
-   * @description Text for Hiding all child entries that are identical to the selected entry from the Flame Chart
+   * @description Context menu item to hide identical repeating child entries in the timeline flame chart.
    */
   hideRepeatingChildren: 'Hide repeating children',
   /**
-   * @description Text for remove script from ignore list from the Flame Chart
+   * @description Context menu item to remove a script from the ignore list in the timeline flame chart.
    */
   removeScriptFromIgnoreList: 'Remove script from ignore list',
   /**
-   * @description Text for add script to ignore list from the Flame Chart
+   * @description Context menu item to add a script to the ignore list in the timeline flame chart.
    */
   addScriptToIgnoreList: 'Add script to ignore list',
   /**
-   * @description Text for an action that shows all of the hidden children of an entry
+   * @description Context menu item to restore hidden child entries of an entry in the timeline flame chart.
    */
   resetChildren: 'Reset children',
   /**
-   * @description Text for an action that shows all of the hidden entries of the Flame Chart
+   * @description Context menu item to restore all hidden entries in the timeline flame chart.
    */
   resetTrace: 'Reset trace',
   /**
-   * @description Text of a context menu item to redirect to the AI assistance panel and to start a chat.
+   * @description Context menu item to start a chat in the AI assistance panel.
    */
   startAChat: 'Start a chat',
   /**
-   * @description Context menu item in Performance panel to label an entry.
+   * @description Context menu item to add a label annotation to an entry in the Performance panel.
    */
   labelEntry: 'Label entry',
   /**
-   * @description Context menu item in Performance panel to assess the purpose of an entry via AI.
+   * @description Context menu item to assess the purpose of an entry using AI assistance in the Performance panel.
    */
   assessThePurpose: 'Assess the purpose',
   /**
-   * @description Context menu item in Performance panel to identify time spent in a call tree via AI.
+   * @description Context menu item to identify time spent in a call tree using AI assistance in the Performance panel.
    */
   identifyTimeSpent: 'Identify time spent',
   /**
-   * @description Context menu item in Performance panel to find improvements for a call tree via AI.
+   * @description Context menu item to find performance improvements for a call tree using AI assistance in the Performance panel.
    */
   findImprovements: 'Find improvements',
 } as const;
@@ -1404,7 +1404,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   }
 }
 
-export const InstantEventVisibleDurationMs = Trace.Types.Timing.Milli(0.001);
+export const InstantEventVisibleDurationMs: Trace.Types.Timing.Milli = Trace.Types.Timing.Milli(0.001);
 
 export const enum Events {
   DATA_CHANGED = 'DataChanged',

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -49,7 +49,7 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Flame Chart View of the Performance panel
+   * @description Accessible title for a timeline marker at a given timestamp in the Performance panel.
    * @example {Frame} PH1
    * @example {10ms} PH2
    */
@@ -89,8 +89,13 @@ interface FlameChartDimmer {
   outline: boolean|{main: number[] | boolean, network: number[]|boolean};
 }
 
-export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate, UI.SearchableView.Searchable {
+const TimelineFlameChartViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TimelineFlameChartView extends TimelineFlameChartViewBase implements PerfUI.FlameChart.FlameChartDelegate,
+                                                                                  UI.SearchableView.Searchable {
   private readonly delegate: TimelineModeViewDelegate;
   /**
    * Tracks the indexes of matched entries when the user searches the panel.

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -26,46 +26,46 @@ import type {TimelineMiniMap} from './TimelineMiniMap.js';
  * represent that as Infinity so we never accidentally collide with an actual
  * trace (in reality a large number like 99 would probably suffice...)
  */
-export const LANDING_PAGE_INDEX_DROPDOWN_CHOICE = Infinity;
+export const LANDING_PAGE_INDEX_DROPDOWN_CHOICE: number = Infinity;
 
 const UIStrings = {
   /**
-   * @description Screen reader label for the Timeline History dropdown button
+   * @description Screen reader announcement for the current session in the timeline history dropdown button.
    * @example {example.com #3} PH1
    * @example {Show recent timeline sessions} PH2
    */
   currentSessionSS: 'Current session: {PH1}. {PH2}',
   /**
-   * @description the title shown when the user is viewing the landing page which is showing live performance metrics that are updated automatically.
+   * @description Title shown when viewing the live metrics landing page in the Performance panel.
    */
   landingPageTitle: 'Live metrics',
   /**
-   * @description the title shown when the user is viewing the landing page which can be used to make a new performance recording.
+   * @description Title shown when viewing the new recording landing page for Node.js in the Performance panel.
    */
   nodeLandingPageTitle: 'New recording',
   /**
-   * @description Text in Timeline History Manager of the Performance panel
+   * @description Format for a trace title with domain and sequence number in the timeline history dropdown.
    * @example {example.com} PH1
    * @example {2} PH2
    */
   sD: '{PH1} #{PH2}',
   /**
-   * @description Text in Timeline History Manager showing custom title alongside domain sequence number
+   * @description Format for a custom trace title with sequence number in the timeline history dropdown.
    * @example {Custom Profile} PH1
    * @example {example.com #2} PH2
    */
   customTitleWithSequence: '{PH1} ({PH2})',
   /**
-   * @description Accessible label for the timeline session selection menu
+   * @description Accessible label for the timeline session selection dropdown in the Performance panel.
    */
   selectTimelineSession: 'Select timeline session',
   /**
-   * @description Text label for a menu item indicating that a specific slowdown multiplier is applied.
+   * @description Label indicating a CPU slowdown multiplier applied to a recording in the timeline history dropdown.
    * @example {2} PH1
    */
   dSlowdown: '{PH1}× slowdown',
   /**
-   * @description Tooltip text that appears when hovering over the Back arrow inside the 'Select Timeline Session' dropdown in the Performance pane.
+   * @description Tooltip for the back button in the timeline session selection dropdown in the Performance panel.
    */
   backButtonTooltip: 'View live metrics page',
 } as const;

package/front_end/panels/timeline/TimelineLoader.ts

@@ -15,7 +15,7 @@ import type {Client} from './TimelineController.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Loader of the Performance panel
+   * @description Error message displayed when timeline trace data cannot be parsed in the Performance panel.
    * @example {Unknown JSON format} PH1
    */
   malformedTimelineDataS: 'Malformed timeline data: {PH1}',

package/front_end/panels/timeline/TimelineMiniMap.ts

@@ -40,8 +40,13 @@ export interface OverviewData {
  * update the visible trace window, and when this happens it will update the
  * TraceBounds service with the new values.
  */
-export class TimelineMiniMap extends
-    Common.ObjectWrapper.eventMixin<PerfUI.TimelineOverviewPane.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
+const TimelineMiniMapBase:
+    Common.ObjectWrapper.EventMixin<PerfUI.TimelineOverviewPane.EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TimelineMiniMap extends TimelineMiniMapBase {
   #overviewComponent = new PerfUI.TimelineOverviewPane.TimelineOverviewPane('timeline');
   #controls: TimelineEventOverview[] = [];
   breadcrumbs: TimelineComponents.Breadcrumbs.Breadcrumbs|null = null;

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -221,7 +221,11 @@ export interface TimelinePaintImageViewInput {
   };
 }
 
-export const DEFAULT_VIEW = (input: TimelinePaintImageViewInput, output: undefined, target: HTMLElement): {
+export type View = (input: TimelinePaintImageViewInput, output: undefined, target: HTMLElement) => {
+  imageElementNaturalHeight: number, imageElementNaturalWidth: number,
+};
+
+export const DEFAULT_VIEW: View = (input: TimelinePaintImageViewInput, _output: undefined, target: HTMLElement): {
   imageElementNaturalHeight: number,
   imageElementNaturalWidth: number,
 } => {
@@ -262,13 +266,13 @@ export class TimelinePaintImageView extends UI.Widget.Widget {
     maskElementStyle: {},
   };
 
-  #view: typeof DEFAULT_VIEW;
+  #view: View;
   #imageElementDimensions?: {
     naturalHeight: number,
     naturalWidth: number,
   };
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super();
     this.registerRequiredCSS(timelinePaintProfilerStyles);
     this.#view = view;