chrome-devtools-frontend 1.0.1689415 → 1.0.1690116

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -51,8 +51,6 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-// eslint-disable-next-line @devtools/es-modules-import
-import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -76,401 +74,428 @@ import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text that only contain a placeholder
+   * @description Format string that only contains a single placeholder value.
    * @example {100ms (at 200ms)} PH1
    */
   emptyPlaceholder: '{PH1}',  // eslint-disable-line @devtools/l10n-uistrings-text-style
   /**
-   * @description Text for timestamps of items
+   * @description Label for the timestamp field in the details view of the Performance panel.
    */
   timestamp: 'Timestamp',
   /**
-   * @description Text shown next to the interaction event's ID in the detail view.
+   * @description Label for an interaction event ID in the details view of the Performance panel.
    */
   interactionID: 'ID',
   /**
-   * @description Text shown next to the interaction event's input delay time in the detail view.
+   * @description Label for an interaction event input delay in the details view of the Performance panel.
    */
   inputDelay: 'Input delay',
   /**
-   * @description Text shown next to the interaction event's thread processing duration in the detail view.
+   * @description Label for an interaction event processing duration in the details view of the Performance panel.
    */
   processingDuration: 'Processing duration',
   /**
-   * @description Text shown next to the interaction event's presentation delay time in the detail view.
+   * @description Label for an interaction event presentation delay in the details view of the Performance panel.
    */
   presentationDelay: 'Presentation delay',
   /**
-   * @description Text shown when the user has selected an event that represents script compiliation.
+   * @description Label for a script compilation event in the Performance panel.
    */
   compile: 'Compile',
   /**
-   * @description Text shown when the user selects an event that represents script parsing.
+   * @description Label for a script parsing event in the Performance panel.
    */
   parse: 'Parse',
   /**
-   * @description Text with two placeholders separated by a colon
+   * @description Format for a label and value pair separated by a colon.
    * @example {Node removed} PH1
    * @example {div#id1} PH2
    */
   sS: '{PH1}: {PH2}',
   /**
-   * @description Text that is usually a hyperlink to more documentation
+   * @description Link text to open documentation.
    */
   learnMore: 'Learn more',
   /**
-   * @description Text referring to the status of the browser's compilation cache.
+   * @description Label for the compilation cache status in the details view of the Performance panel.
    */
   compilationCacheStatus: 'Compilation cache status',
   /**
-   * @description Text referring to the size of the browser's compiliation cache.
+   * @description Label for the compilation cache size in the details view of the Performance panel.
    */
   compilationCacheSize: 'Compilation cache size',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel. "Compilation
-   * cache" refers to the code cache described at
-   * https://v8.dev/blog/code-caching-for-devs . This label is followed by the
-   * type of code cache data used, either "normal" or "full" as described in the
-   * linked article.
+   * @description Label for the compilation cache kind in the details view of the Performance panel.
    */
   compilationCacheKind: 'Compilation cache kind',
   /**
-   * @description Text used to inform the user that the script they are looking
-   *             at was loaded from the browser's cache.
+   * @description Status text indicating that a script was loaded from compilation cache.
    */
   scriptLoadedFromCache: 'script loaded from cache',
   /**
-   * @description Text to inform the user that the script they are looking at
-   *             was unable to be loaded from the browser's cache.
+   * @description Status text indicating that a script failed to load from compilation cache.
    */
   failedToLoadScriptFromCache: 'failed to load script from cache',
   /**
-   * @description Text to inform the user that the script they are looking at was not eligible to be loaded from the browser's cache.
+   * @description Status text indicating that a script wasn't eligible for compilation cache.
    */
   scriptNotEligibleToBeLoadedFromCache: 'script not eligible',
   /**
-   * @description Label in the summary view in the Performance panel for a number which indicates how much managed memory has been reclaimed by performing Garbage Collection
+   * @description Label in the summary view for the amount of memory reclaimed by garbage collection in the Performance panel.
    */
   collected: 'Collected',
   /**
-   * @description Text for a programming function
+   * @description Label for a function entry in the details view of the Performance panel.
    */
   function: 'Function',
   /**
-   * @description Text for referring to the ID of a timer.
+   * @description Label for a timer ID in the details view of the Performance panel.
    */
   timerId: 'Timer ID',
   /**
-   * @description Text for referring to a timer that has timed-out and therefore is being removed.
+   * @description Label for a timer timeout duration in the details view of the Performance panel.
    */
   timeout: 'Timeout',
   /**
-   * @description Text used to refer to a positive timeout value that schedules the idle callback once elapsed, even if no idle time is available.
+   * @description Label for an idle callback timeout in the details view of the Performance panel.
    */
   requestIdleCallbackTimeout: 'Timeout',
   /**
-   * @description Text used to indicate that a timer is repeating (e.g. every X seconds) rather than a one off.
+   * @description Label indicating whether a timer is repeating in the details view of the Performance panel.
    */
   repeats: 'Repeats',
   /**
-   * @description Text for referring to the ID of a callback function installed by an event.
+   * @description Label for a callback function ID in the details view of the Performance panel.
    */
   callbackId: 'Callback ID',
   /**
-   * @description Text for a module, the programming concept
+   * @description Label for a module file in the details view of the Performance panel.
    */
   module: 'Module',
   /**
-   * @description Label for a group of JavaScript files
+   * @description Label for a script file in the details view of the Performance panel.
    */
   script: 'Script',
   /**
-   * @description Text used to tell a user that a compilation trace event was streamed.
+   * @description Label indicating whether script compilation was streamed in the details view of the Performance panel.
    */
   streamed: 'Streamed',
   /**
-   * @description Text to indicate if a compilation event was eager.
+   * @description Status text indicating eager compilation of all functions in the details view of the Performance panel.
    */
   eagerCompile: 'Compiling all functions eagerly',
   /**
-   * @description Text to refer to the URL associated with a given event.
+   * @description Label for a URL in the details view of the Performance panel.
    */
   url: 'URL',
   /**
-   * @description Text to indicate to the user the size of the cache (as a filesize - e.g. 5mb).
+   * @description Label for the size of cache produced in the details view of the Performance panel.
    */
   producedCacheSize: 'Produced cache size',
   /**
-   * @description Text to indicate to the user the amount of the cache (as a filesize - e.g. 5mb) that has been used.
+   * @description Label for the size of cache consumed in the details view of the Performance panel.
    */
   consumedCacheSize: 'Consumed cache size',
   /**
-   * @description Related node label in Timeline UIUtils of the Performance panel
+   * @description Label for the layer root node in the details view of the Performance panel.
    */
   layerRoot: 'Layer root',
   /**
-   * @description Related node label in Timeline UIUtils of the Performance panel
+   * @description Label for the owner element in the details view of the Performance panel.
    */
   ownerElement: 'Owner element',
   /**
-   * @description Text used to show the user the URL of the image they are viewing.
+   * @description Label for the image URL in the details view of the Performance panel.
    */
   imageUrl: 'Image URL',
   /**
-   * @description Text used to show the user that the URL they are viewing is loading a CSS stylesheet.
+   * @description Label for the stylesheet URL in the details view of the Performance panel.
    */
   stylesheetUrl: 'Stylesheet URL',
   /**
-   * @description Text used next to a number to show the user how many elements were affected.
+   * @description Label for the count of elements affected in the details view of the Performance panel.
    */
   elementsAffected: 'Elements affected',
   /**
-   * @description Text used next to a number to show the user how many nodes required the browser to update and re-layout the page.
+   * @description Label for the count of nodes that need layout in the details view of the Performance panel.
    */
   nodesThatNeedLayout: 'Nodes that need layout',
   /**
-   * @description Text used to show the amount in a subset - e.g. "2 of 10".
+   * @description Subset range indicator showing the count of matching items out of total items.
    * @example {2} PH1
    * @example {10} PH2
    */
   sOfS: '{PH1} of {PH2}',
   /**
-   * @description Related node label in Timeline UIUtils of the Performance panel
+   * @description Label for the layout root node in the details view of the Performance panel.
    */
   layoutRoot: 'Layout root',
   /**
-   * @description Text used when viewing an event that can have a custom message attached.
+   * @description Label for a message attached to an event in the details view of the Performance panel.
    */
   message: 'Message',
   /**
-   * @description Text used to tell the user they are viewing an event that has a function embedded in it, which is referred to as the "callback function".
+   * @description Label for a callback function in the details view of the Performance panel.
    */
   callbackFunction: 'Callback function',
   /**
-   * @description Text used to show the relevant range of a file - e.g. "lines 2-10".
+   * @description Label for a range of lines in the details view of the Performance panel.
    */
   range: 'Range',
   /**
-   * @description Text used to refer to the amount of time some event or code was given to complete within.
+   * @description Label for the allotted time given to an event in the details view of the Performance panel.
    */
   allottedTime: 'Allotted time',
   /**
-   * @description Text used to tell a user that a particular event or function was automatically run by a timeout.
+   * @description Label indicating that an event was invoked by a timeout in the details view of the Performance panel.
    */
   invokedByTimeout: 'Invoked by timeout',
   /**
-   * @description Text that refers to some types
+   * @description Label for an event type in the details view of the Performance panel.
    */
   type: 'Type',
   /**
-   * @description Text for the size of something
+   * @description Label for size in the details view of the Performance panel.
    */
   size: 'Size',
   /**
-   * @description Text for the details of something
+   * @description Label for event details in the details view of the Performance panel.
    */
   details: 'Details',
   /**
-   * @description Text to indicate an item is a warning
+   * @description Label for a warning in the details view of the Performance panel.
    */
   warning: 'Warning',
   /**
-   * @description Text that indicates a particular HTML element or node is related to what the user is viewing.
+   * @description Label for a related node in the details view of the Performance panel.
    */
   relatedNode: 'Related node',
   /**
-   * @description Text for previewing items
+   * @description Label for previewing content in the details view of the Performance panel.
    */
   preview: 'Preview',
   /**
-   * @description Text used to refer to the total time summed up across multiple events.
+   * @description Label for aggregated time summed across multiple events in the Performance panel.
    */
   aggregatedTime: 'Aggregated time',
   /**
-   * @description Text for the duration of something
+   * @description Label for event duration in the details view of the Performance panel.
    */
   duration: 'Duration',
   /**
-   * @description Text for the stack trace of the initiator of something. The Initiator is the event or factor that directly triggered or precipitated a subsequent action.
+   * @description Label for the stack trace of an initiator in the details view of the Performance panel.
    */
   initiatorStackTrace: 'Initiator stack trace',
   /**
-   * @description Text for the event initiated by another one
+   * @description Label for the initiator event in the details view of the Performance panel.
    */
   initiatedBy: 'Initiated by',
   /**
-   * @description Text for the event that is an initiator for another one
+   * @description Label for the event initiated by this one in the details view of the Performance panel.
    */
   initiatorFor: 'Initiator for',
   /**
-   * @description Text for the underlying data behing a specific flamechart selection. Trace events are the browser instrumentation that are emitted as JSON objects.
+   * @description Label for raw trace event data in the details view of the Performance panel.
    */
   traceEvent: 'Trace event',
   /**
-   * @description Call site stack label in Timeline UIUtils of the Performance panel
+   * @description Call site stack label for timer installation in the Performance panel.
    */
   timerInstalled: 'Timer installed',
   /**
-   * @description Call site stack label in Timeline UIUtils of the Performance panel
+   * @description Call site stack label for requested animation frames in the Performance panel.
    */
   animationFrameRequested: 'Animation frame requested',
   /**
-   * @description Call site stack label in Timeline UIUtils of the Performance panel
+   * @description Call site stack label for requested idle callbacks in the Performance panel.
    */
   idleCallbackRequested: 'Idle callback requested',
   /**
-   * @description Call site stack label in Timeline UIUtils of the Performance panel
+   * @description Call site stack label for first layout invalidation in the Performance panel.
    */
   firstLayoutInvalidation: 'First layout invalidation',
   /**
-   * @description Label in front of CSS property (eg `opacity`) being animated or a CSS animation name (eg `layer-4-fade-in-out`)
+   * @description Label for an animated CSS property or animation name in the Performance panel.
    */
   animating: 'Animating',
   /**
-   * @description Label in front of reasons why a CSS animation wasn't composited (aka hardware accelerated)
+   * @description Header for the list of reasons why animation compositing failed in the Performance panel.
    */
   compositingFailed: 'Compositing failed',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to accelerated animations being disabled. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to accelerated animations being disabled.
+   */
   compositingFailedAcceleratedAnimationsDisabled: 'Accelerated animations disabled',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to DevTools suppressing the effect. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedEffectSuppressedByDevtools: 'Effect suppressed by DevTools ',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation or effect being invalid. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to DevTools suppressing the effect.
+   */
+  compositingFailedEffectSuppressedByDevtools: 'Effect suppressed by DevTools',
+  /**
+   * @description Reason why an animation wasn't composited due to an invalid animation or effect.
+   */
   compositingFailedInvalidAnimationOrEffect: 'Invalid animation or effect',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect having unsupported timing parameters. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to unsupported timing parameters.
+   */
   compositingFailedEffectHasUnsupportedTimingParams: 'Effect has unsupported timing parameters',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect having a composite mode which is not `replace`. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to having a non-replace composite mode.
+   */
   compositingFailedEffectHasNonReplaceCompositeMode: 'Effect has composite mode other than "replace"',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the target being in an invalid compositing state. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to the target having an invalid compositing state.
+   */
   compositingFailedTargetHasInvalidCompositingState: 'Target has invalid compositing state',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to another animation on the same target being incompatible. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to an incompatible animation on the same target.
+   */
   compositingFailedTargetHasIncompatibleAnimations: 'Target has another animation which is incompatible',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the target having a CSS offset. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to the target having a CSS offset.
+   */
   compositingFailedTargetHasCSSOffset: 'Target has CSS offset',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation affecting non-CSS properties. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to the animation affecting non-CSS properties.
+   */
   compositingFailedAnimationAffectsNonCSSProperties: 'Animation affects non-CSS properties',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the transform-related property not being able to be animated on the target. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited because a transform-related property cannot be accelerated on the target.
+   */
   compositingFailedTransformRelatedPropertyCannotBeAcceleratedOnTarget:
       'Transform-related property cannot be accelerated on target',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to a `transform` property being dependent on the size of the element itself. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited because a transform-related property depends on box size.
+   */
   compositingFailedTransformDependsBoxSize: 'Transform-related property depends on box size',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to a `filter` property possibly moving pixels. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited because a filter-related property may move pixels.
+   */
   compositingFailedFilterRelatedPropertyMayMovePixels: 'Filter-related property may move pixels',
   /**
-   * @description [ICU Syntax] Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animated CSS property not being supported on the compositor. Shown in a table with a list of other potential failure reasons.
+   * @description Reason why an animation wasn't composited due to unsupported CSS properties.
    * @example {height, width} properties
    */
   compositingFailedUnsupportedCSSProperty: `{propertyCount, plural,
     =1 {Unsupported CSS property: {properties}}
     other {Unsupported CSS properties: {properties}}
   }`,
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to mixing keyframe value types. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited due to mixed keyframe value types.
+   */
   compositingFailedMixedKeyframeValueTypes: 'Mixed keyframe value types',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the timeline source being in an invalid compositing state. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited because the timeline source has an invalid compositing state.
+   */
   compositingFailedTimelineSourceHasInvalidCompositingState: 'Timeline source has invalid compositing state',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the animation having no visible change. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited because the animation has no visible change.
+   */
   compositingFailedAnimationHasNoVisibleChange: 'Animation has no visible change',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an effect affecting an important property. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited because the effect affects a property with !important.
+   */
   compositingFailedAffectsImportantProperty: 'Effect affects a property with !important',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to the SVG target having an independent transfrom property. Shown in a table with a list of other potential failure reasons.  */
+  /**
+   * @description Reason why an animation wasn't composited because the SVG target has an independent transform property.
+   */
   compositingFailedSVGTargetHasIndependentTransformProperty: 'SVG target has independent transform property',
-  /** Descriptive reason for why a user-provided animation failed to be optimized by the browser due to an unknown reason. Shown in a table with a list of other potential failure reasons.  */
-  compositingFailedUnknownReason: 'Unknown Reason',
+  /**
+   * @description Reason why an animation wasn't composited due to an unknown reason.
+   */
+  compositingFailedUnknownReason: 'Unknown reason',
 
   /**
-   * @description Text for the execution "stack trace". It is not technically a stack trace, because it points to the beginning of each function
-   * and not to each call site, so we call it a function stack instead to avoid confusion.
+   * @description Label for the execution function stack in the details view of the Performance panel.
    */
   functionStack: 'Function stack',
   /**
-   * @description Text used to show any invalidations for a particular event that caused the browser to have to do more work to update the page.
+   * @description Label showing the total number of invalidations for an event in the Performance panel.
    * @example {2} PH1
    */
   invalidations: 'Invalidations ({PH1} total)',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel. Phrase is followed by a number of milliseconds.
-   * Some events or tasks might have been only started, but have not ended yet. Such events or tasks are considered
-   * "pending".
+   * @description Label for the pending duration of a task in the Performance panel.
    */
   pendingFor: 'Pending for',
   /**
-   * @description Noun label for a stack trace which indicates the first time some condition was invalidated.
+   * @description Label for a stack trace indicating when a condition was first invalidated in the Performance panel.
    */
   firstInvalidated: 'First invalidated',
   /**
-   * @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 Text in Timeline Flame Chart View of the Performance panel
+   * @description Accessible title for a frame at a given timestamp in the timeline flame chart.
    * @example {Frame} PH1
    * @example {10ms} PH2
    */
   sAtS: '{PH1} at {PH2}',
   /**
-   * @description Text used next to a time to indicate that the particular event took that much time itself. In context this might look like "3ms blink.console (self)"
+   * @description Text indicating the self time spent in an event in the Performance panel.
    * @example {blink.console} PH1
    */
   sSelf: '{PH1} (self)',
   /**
-   * @description Text used next to a time to indicate that the event's children took that much time. In context this might look like "3ms blink.console (children)"
+   * @description Text indicating the time spent in an event's child nodes in the Performance panel.
    * @example {blink.console} PH1
    */
   sChildren: '{PH1} (children)',
   /**
-   * @description Text used to show the user how much time the browser spent on rendering (drawing the page onto the screen).
+   * @description Label for the total time spent rendering in the details view of the Performance panel.
    */
   timeSpentInRendering: 'Time spent in rendering',
   /**
-   * @description Text for a rendering frame
+   * @description Label for a rendering frame in the details view of the Performance panel.
    */
   frame: 'Frame',
   /**
-   * @description Text used to refer to the duration of an event at a given offset - e.g. "2ms at 10ms" which can be read as "2ms starting after 10ms".
+   * @description Text showing duration and start offset of an event in the details view of the Performance panel.
    * @example {10ms} PH1
    * @example {10ms} PH2
    */
   sAtSParentheses: '{PH1} (at {PH2})',
   /**
-   * @description Text of a DOM element in Timeline UIUtils of the Performance panel
+   * @description Placeholder text for an unknown DOM node in the details view of the Performance panel.
    */
   UnknownNode: '[ unknown node ]',
   /**
-   * @description Text used to refer to a particular element and the file it was referred to in.
+   * @description Text showing an invalidated element and its source call frame in the Performance panel.
    * @example {node} PH1
    * @example {app.js} PH2
    */
   invalidationWithCallFrame: '{PH1} at {PH2}',
   /**
-   * @description Text indicating that something is outside of the Performace Panel Timeline Minimap range
+   * @description Status text indicating that an item is outside the breadcrumb range in the Performance panel.
    */
   outsideBreadcrumbRange: '(outside of the breadcrumb range)',
   /**
-   * @description Text indicating that something is hidden from the Performace Panel Timeline
+   * @description Status text indicating that an entry is hidden in the timeline flame chart.
    */
   entryIsHidden: '(entry is hidden)',
   /**
-   * @description Title of a row in the details view for a `Recalculate Styles` event that contains more info about selector stats tracing.
+   * @description Section title for CSS selector statistics in the details view of the Performance panel.
    */
   selectorStatsTitle: 'Selector stats',
   /**
-   * @description Info text that explains to the user how to enable selector stats tracing.
+   * @description Explanatory text instructing the user how to enable CSS selector statistics in the Performance panel.
    * @example {Setting Name} PH1
    */
-  sSelectorStatsInfo: 'Select "{PH1}" to collect detailed CSS selector matching statistics.',
+  sSelectorStatsInfo: 'Select "{PH1}" to collect detailed CSS selector matching statistics',
   /**
-   * @description Label for a numeric value that was how long to wait before a function was run.
+   * @description Label for task scheduling delay in the details view of the Performance panel.
    */
   delay: 'Delay',
   /**
-   * @description Label for a string that describes the priority at which a task was scheduled, like 'background' for low-priority tasks, and 'user-blocking' for high priority.
+   * @description Label for task scheduling priority in the details view of the Performance panel.
    */
   priority: 'Priority',
   /**
-   * @description Label for the a source URL.
+   * @description Label for the source file in the details view of the Performance panel.
    */
   source: 'Source',
   /**
-   * @description Label for a URL origin.
+   * @description Label for a URL origin in the details view of the Performance panel.
    */
   origin: 'Origin',
 } as const;
@@ -1581,7 +1606,8 @@ export class TimelineUIUtils {
 
     // Use CodeHighlighter for syntax highlighting.
     const highlightContainer = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(highlightContainer, {cssFile: codeHighlighterStyles});
+    const shadowRoot =
+        UI.UIUtils.createShadowRootWithCoreStyles(highlightContainer, {cssFile: CodeHighlighter.codeHighlighterStyles});
     const elem = shadowRoot.createChild('div');
     elem.classList.add('monospace', 'source-code');
     elem.textContent = eventStr;

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -21,7 +21,7 @@ import type {TimelineMarkerStyle} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline Flame Chart Data Provider of the Performance panel
+   * @description Header for the timings track in the timeline flame chart of the Performance panel.
    */
   timings: 'Timings',
 } as const;

package/front_end/panels/timeline/TrackConfigBanner.ts

@@ -9,16 +9,16 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   * @description Message shown in a banner when some tracks are hidden in the timeline.
+   * @description Message shown in a banner when some tracks are hidden in the Performance panel.
    */
   someTracksAreHidden:
-      'Some tracks are hidden in this trace. You can configure tracks by right clicking the track name.',
+      'Some tracks are hidden in this trace. You can configure tracks by right-clicking the track name.',
   /**
-   * @description Text for a button to show all hidden tracks.
+   * @description Button label to show all hidden tracks in the Performance panel.
    */
   showAll: 'Show all',
   /**
-   * @description Text for a button that opens a view to configure which tracks are visible.
+   * @description Button label to open the track configuration view in the Performance panel.
    */
   configureTracks: 'Configure tracks',
 } as const;