chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -30,42 +30,42 @@ export const LANDING_PAGE_INDEX_DROPDOWN_CHOICE = 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/TimelinePanel.ts

@@ -95,160 +95,155 @@ import type * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text that appears when user drag and drop something (for example, a file) in Timeline Panel of the Performance panel
+   * @description Text shown on the drag-and-drop overlay in the Performance panel.
    */
   dropTimelineFileOrUrlHere: 'Drop trace file or URL here',
   /**
-   * @description Dropdown option in the performance panel for the default screenshot capture preset (500 x 500 pixels,
-   * up to 450 frames).
+   * @description Dropdown option in the Performance panel for the default screenshot capture preset (500 x 500 pixels, up to 450 frames).
    */
   screenshotPresetDefault: '500 x 500 px, up to 450 frames',
   /**
-   * @description Dropdown option in the performance panel for a screenshot capture preset that uses smaller frames so
-   * more of them fit in the per-session memory budget (250 x 250 pixels, up to 1800 frames).
+   * @description Dropdown option in the Performance panel for a screenshot capture preset that uses smaller frames so more fit in memory (250 x 250 pixels, up to 1800 frames).
    */
   screenshotPresetMedium: '250 x 250 px, up to 1800 frames',
   /**
-   * @description Dropdown option in the performance panel for a screenshot capture preset that uses higher-resolution
-   * frames at the cost of capturing fewer of them (1000 x 1000 pixels, up to 100 frames).
+   * @description Dropdown option in the Performance panel for a screenshot capture preset that uses higher-resolution frames (1000 x 1000 pixels, up to 100 frames).
    */
   screenshotPresetLarge: '1000 x 1000 px, up to 100 frames',
   /**
-   * @description Dropdown option in the performance panel for a screenshot capture preset that uses very small frames
-   * so many of them fit in the per-session memory budget (100 x 100 pixels, up to 11250 frames).
+   * @description Dropdown option in the Performance panel for a screenshot capture preset that uses very small frames (100 x 100 pixels, up to 11250 frames).
    */
   screenshotPresetTiny: '100 x 100 px, up to 11250 frames',
   /**
-   * @description Text to clear content
+   * @description Tooltip for the clear button in the Performance panel toolbar.
    */
   clear: 'Clear',
   /**
-   * @description A label for a button that fixes something.
+   * @description Adorner label for a trace event that needs attention.
    */
   fixMe: 'Fix me',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon load button
+   * @description Tooltip for the load trace button in the Performance panel toolbar.
    */
   loadTrace: 'Load trace…',
   /**
-   * @description Text to take screenshots
+   * @description Label for the capture screenshots checkbox in the Performance panel settings.
    */
   captureScreenshots: 'Capture screenshots',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Label for the show memory timeline checkbox in the Performance panel toolbar.
    */
   showMemoryTimeline: 'Show memory timeline',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in timeline panel of the performance panel
+   * @description Tooltip for the capture settings button in the Performance panel toolbar.
    */
   captureSettings: 'Capture settings',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Tooltip for the checkbox that disables JavaScript sampling in the capture settings of the Performance panel.
    */
   disablesJavascriptSampling: 'Disables JavaScript sampling, reduces overhead when running against mobile devices',
   /**
-   *@description Text in Timeline Panel of the Performance panel
+   * @description Tooltip for the checkbox that captures advanced paint instrumentation in the capture settings of the Performance panel.
    */
   capturesAdvancedPaint: 'Captures advanced paint instrumentation, introduces significant performance overhead',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Tooltip for the checkbox that captures CSS selector statistics in the capture settings of the Performance panel.
    */
   capturesSelectorStats: 'Captures CSS selector statistics',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Label for the network throttling setting in the capture settings of the Performance panel.
    */
   network: 'Network:',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Label for the CPU throttling setting in the capture settings of the Performance panel.
    */
   cpu: 'CPU:',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that CPU throttling is enabled in the Performance panel.
    */
   CpuThrottlingIsEnabled: '- CPU throttling is enabled',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that network throttling is enabled in the Performance panel.
    */
   NetworkThrottlingIsEnabled: '- Network throttling is enabled',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that advanced paint instrumentation is active in the Performance panel.
    */
   SignificantOverheadDueToPaint: '- Significant overhead due to paint instrumentation',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that CSS selector statistics capture is enabled in the Performance panel.
    */
   SelectorStatsEnabled: '- Selector stats is enabled',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status message indicating that JavaScript sampling is disabled in the Performance panel.
    */
   JavascriptSamplingIsDisabled: '- JavaScript sampling is disabled',
   /**
-   *@description Text in Timeline Panel of the Performance panel
+   * @description Status text shown while stopping a timeline recording in the Performance panel.
    */
   stoppingTimeline: 'Stopping timeline…',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status label for received data during trace recording in the Performance panel.
    */
   received: 'Received',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status label for processed data during trace recording in the Performance panel.
    */
   processed: 'Processed',
   /**
-   * @description Text to close something
+   * @description Button label to close the status dialog in the Performance panel.
    */
   close: 'Close',
   /**
-   * @description Status text to indicate the recording has failed in the Performance panel
+   * @description Status text indicating that trace recording failed in the Performance panel.
    */
   recordingFailed: 'Recording failed',
   /**
-   * @description Status text to indicate that exporting the trace has failed
+   * @description Status text indicating that exporting the trace failed in the Performance panel.
    */
   exportingFailed: 'Exporting the trace failed',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status text shown while initializing trace recording in the Performance panel.
    */
   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 while recording a trace in the Performance panel.
    */
   tracing: 'Tracing…',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Label for trace buffer usage progress in the status dialog of the Performance panel.
    */
   bufferUsage: 'Buffer usage',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status text shown while loading a trace file in the Performance panel.
    */
   loadingTrace: 'Loading trace…',
   /**
-   * @description Text in Timeline Panel of the Performance panel
+   * @description Status text shown while processing a trace in the Performance panel.
    */
   processingTrace: 'Processing trace…',
   /**
-   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   * @description Status text shown while preparing a trace for download in the Performance panel.
    */
   preparingTraceForDownload: 'Preparing…',
   /**
-   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   * @description Status text shown while compressing a trace for download in the Performance panel.
    */
   compressingTraceForDownload: 'Compressing…',
   /**
-   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   * @description Status text shown while encoding a trace for download in the Performance panel.
    */
   encodingTraceForDownload: 'Encoding…',
   /**
-   * @description Tooltip description for a checkbox that toggles the visibility of data added by extensions of this panel (Performance).
+   * @description Label for the checkbox to show data added by extensions in the Performance panel.
    */
   showDataAddedByExtensions: 'Show data added by extensions of the Performance panel',
   /**
-   * @description Tooltip for the the sidebar toggle in the Performance panel. Command to open/show the sidebar.
+   * @description Tooltip for the button to show the sidebar in the Performance panel.
    */
   showSidebar: 'Show sidebar',
   /**
-   * @description Tooltip for the the sidebar toggle in the Performance panel. Command to close the sidebar.
+   * @description Tooltip for the button to hide the sidebar in the Performance panel.
    */
   hideSidebar: 'Hide sidebar',
   /**
@@ -260,49 +255,48 @@ const UIStrings = {
    */
   sidebarHidden: 'Performance sidebar hidden',
   /**
-   * @description Screen reader announcement when the user clears their selection
+   * @description Screen reader announcement when the selection is cleared in the Performance panel.
    */
   selectionCleared: 'Selection cleared',
   /**
-   * @description Screen reader announcement when the user selects a frame.
+   * @description Screen reader announcement when a frame is selected in the Performance panel.
    */
   frameSelected: 'Frame selected',
   /**
-   * @description Screen reader announcement when the user selects a trace event.
+   * @description Screen reader announcement when a trace event is selected in the Performance panel.
    * @example {Paint} PH1
    */
   eventSelected: 'Event {PH1} selected',
   /**
-   * @description Text of a hyperlink to documentation.
+   * @description Link text to open documentation in the Performance panel.
    */
   learnMore: 'Learn more',
   /**
-   * @description Tooltip text for a button that takes the user back to the default view which shows performance metrics that are live.
+   * @description Tooltip for the button to return to the live metrics page in the Performance panel.
    */
   backToLiveMetrics: 'Go back to the live metrics page',
   /**
-   * @description Description of the Timeline zoom keyboard instructions that appear in the shortcuts dialog
+   * @description Label for zoom keyboard shortcuts in the shortcuts dialog of the Performance panel.
    */
   timelineZoom: 'Zoom',
   /**
-   * @description Description of the Timeline scrolling & panning instructions that appear in the shortcuts dialog.
+   * @description Label for scroll and pan keyboard shortcuts in the shortcuts dialog of the Performance panel.
    */
-  timelineScrollPan: 'Scroll & Pan',
+  timelineScrollPan: 'Scroll & pan',
   /**
-   * @description Description for the Dim 3rd Parties checkbox tooltip describing how 3rd parties are classified.
+   * @description Tooltip describing that third-party entities are classified by the third-party-web database.
    */
   thirdPartiesByThirdPartyWeb: '3rd parties classified by third-party-web',
   /**
-   * @description Title of the shortcuts dialog shown to the user that lists keyboard shortcuts.
+   * @description Title of the shortcuts dialog listing keyboard shortcuts for the timeline flame chart.
    */
-  shortcutsDialogTitle: 'Keyboard shortcuts for flamechart',
+  shortcutsDialogTitle: 'Keyboard shortcuts for flame chart',
   /**
-   * @description Header for the confirmation dialog asking the user whether
-   * to load a CPU profile recorded by console.profile().
+   * @description Header for the confirmation dialog asking whether to load a CPU profile in the Performance panel.
    */
   loadCpuProfileHeader: 'Load CPU profile?',
   /**
-   * @description Confirmation message asking the user whether to load a CPU profile recorded by console.profile().
+   * @description Confirmation message asking whether to load a recorded CPU profile into the Performance panel.
    * @example {Profile 1} PH1
    */
   loadCpuProfileConfirmation: 'Do you want to load the recorded CPU profile "{PH1}" into the Performance panel?',
@@ -372,8 +366,12 @@ type ViewMode = {
   mode: 'STATUS_PANE_OVERLAY',
 };
 
-export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Panel.Panel>(UI.Panel.Panel)
-    implements Client, TimelineModeViewDelegate {
+const TimelinePanelBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Panel.Panel> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Panel.Panel,
+    );
+
+export class TimelinePanel extends TimelinePanelBase implements Client, TimelineModeViewDelegate {
   private readonly dropTarget: UI.DropTarget.DropTarget;
   private readonly recordingOptionUIControls: UI.Toolbar.ToolbarItem[];
   private state: State;

package/front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -19,92 +19,92 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Label for selector stats data table
+   * @description Accessible name for the selector stats data grid in the Performance panel.
    */
   selectorStats: 'Selector stats',
   /**
-   * @description Column name and time unit for elapsed time spent computing a style rule
+   * @description Column header for elapsed time in the selector stats data grid.
    */
   elapsed: 'Elapsed (ms)',
   /**
-   * @description Tooltip description 'Elapsed (ms)'
+   * @description Tooltip explanation for the elapsed time column in the selector stats data grid.
    */
-  elapsedExplanation: 'Elapsed time spent matching a selector against the DOM in milliseconds.',
+  elapsedExplanation: 'Elapsed time spent matching a selector against the DOM in milliseconds',
   /**
-   * @description Column name and percentage of slow mach non-matches computing a style rule
+   * @description Column header for the percentage of slow-path non-matches in the selector stats data grid.
    */
   slowPathNonMatches: '% of slow-path non-matches',
   /**
-   * @description Tooltip description '% of slow-path non-matches'
+   * @description Tooltip explanation for the slow-path non-matches column in the selector stats data grid.
    */
   slowPathNonMatchesExplanation:
-      'The percentage of non-matching nodes (Match Attempts - Match Count) that couldn’t be quickly ruled out by the bloom filter due to high selector complexity. Lower is better.',
+      'The percentage of non-matching nodes (match attempts − match count) that couldn’t be quickly ruled out by the bloom filter due to high selector complexity. Lower is better.',
   /**
-   * @description Column name for count of elements that the engine attempted to match against a style rule
+   * @description Column header for match attempts in the selector stats data grid.
    */
   matchAttempts: 'Match attempts',
   /**
-   * @description Tooltip description 'Match attempts'
+   * @description Tooltip explanation for the match attempts column in the selector stats data grid.
    */
-  matchAttemptsExplanation: 'Count of nodes that the engine attempted to match against a style rule.',
+  matchAttemptsExplanation: 'Count of nodes that the engine attempted to match against a style rule',
   /**
-   * @description Column name for count of elements that matched a style rule
+   * @description Column header for match count in the selector stats data grid.
    */
   matchCount: 'Match count',
   /**
-   * @description Tooltip description 'Match count'
+   * @description Tooltip explanation for the match count column in the selector stats data grid.
    */
-  matchCountExplanation: 'Count of nodes that matched a style rule.',
+  matchCountExplanation: 'Count of nodes that matched a style rule',
   /**
-   * @description Column name for a style rule's CSS selector text
+   * @description Column header for the CSS selector in the selector stats data grid.
    */
   selector: 'Selector',
   /**
-   * @description Tooltip description 'Selector'
+   * @description Tooltip explanation for the selector column in the selector stats data grid.
    */
-  selectorExplanation: 'CSS selector text of a style rule.',
+  selectorExplanation: 'CSS selector text of a style rule',
   /**
-   * @description Column name for a style rule's CSS selector text
+   * @description Column header for the stylesheet link in the selector stats data grid.
    */
-  styleSheetId: 'Style Sheet',
+  styleSheetId: 'Style sheet',
   /**
-   * @description Tooltip description 'Style Sheet'
+   * @description Tooltip explanation for the style sheet column in the selector stats data grid.
    */
   styleSheetIdExplanation:
       'Links to the selector rule definition in the style sheets. Note that a selector rule could be defined in multiple places in a style sheet or defined in multiple style sheets. Selector rules from browser user-agent style sheet or dynamic style sheets don’t have a link.',
   /**
-   * @description A context menu item in data grids to copy entire table to clipboard
+   * @description Context menu item to copy the selector stats table to clipboard.
    */
   copyTable: 'Copy table',
   /**
-   * @description A cell value displayed in table when no source file can be traced via css style
+   * @description Cell value displayed when a stylesheet source file cannot be linked.
    */
   unableToLink: 'Unable to link',
   /**
-   * @description Tooltip for the cell that no source file can be traced via style sheet id
+   * @description Tooltip displayed when a stylesheet source file cannot be linked via its ID.
    * @example {style-sheet-4} PH1
    */
   unableToLinkViaStyleSheetId: 'Unable to link via {PH1}',
   /**
-   * @description Text for announcing that the entire table was copied to clipboard
+   * @description Screen reader announcement when the selector stats table is copied to clipboard.
    */
   tableCopiedToClipboard: 'Table copied to clipboard',
   /**
-   * @description Text shown as the "Selectelector" cell value for one row of the Selector Stats table, however this particular row is the totals. While normally the Selector cell is values like "div.container", the parenthesis can denote this description is not an actual selector, but a general row description.
+   * @description Row description for the aggregated totals of all selectors in the selector stats data grid.
    */
   totalForAllSelectors: '(Totals for all selectors)',
   /**
-   * @description Text for showing the location of a selector in the style sheet
+   * @description Link text showing the line and column number of a selector rule in a stylesheet.
    * @example {256} PH1
    * @example {14} PH2
    */
   lineNumber: 'Line {PH1}:{PH2}',
   /**
-   * @description Count of invalidation for a specific selector. Note that a node can be invalidated multiple times.
+   * @description Column header for invalidation count in the selector stats data grid.
    */
   invalidationCount: 'Invalidation count',
   /**
-   * @description Tooltip description 'Invalidation count'
+   * @description Tooltip explanation for the invalidation count column in the selector stats data grid.
    */
   invalidationCountExplanation:
       'Aggregated count of invalidations on nodes and subsequently had style recalculated, all of which are matched by this selector. Note that a node can be invalidated multiple times and by multiple selectors.',