chrome-devtools-frontend 1.0.1689415 → 1.0.1690531

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;

package/front_end/panels/timeline/UIDevtoolsUtils.ts

@@ -8,63 +8,63 @@ import * as Trace from '../../models/trace/trace.js';
 
 const UIStrings = {
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for a frame start event in the Performance panel.
    */
   frameStart: 'Frame start',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for a draw frame event in the Performance panel.
    */
   drawFrame: 'Draw frame',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for a layout event in the Performance panel.
    */
   layout: 'Layout',
   /**
-   * @description Text in UIDevtools Utils of the Performance panel
+   * @description Label for a rasterizing event in the Performance panel.
    */
   rasterizing: 'Rasterizing',
   /**
-   * @description Text in UIDevtools Utils of the Performance panel
+   * @description Label for a drawing event in the Performance panel.
    */
   drawing: 'Drawing',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for a painting event in the Performance panel.
    */
   painting: 'Painting',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Event category for system activity in the Performance panel.
    */
   system: 'System',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Event category for idle time in the Performance panel.
    */
   idle: 'Idle',
   /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent to load resources
+   * @description Event category for network and resource loading in the Performance panel.
    */
   loading: 'Loading',
   /**
-   * @description Text in Timeline for the Experience title
+   * @description Header for the user experience events track in the Performance panel.
    */
   experience: 'Experience',
   /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent in script execution
+   * @description Event category for script execution in the Performance panel.
    */
   scripting: 'Scripting',
   /**
-   * @description Category in the Summary view of the Performance panel to indicate time spent in rendering the web page
+   * @description Event category for layout and rendering in the Performance panel.
    */
   rendering: 'Rendering',
   /**
-   * @description Event category in the Performance panel for time spent in the GPU
+   * @description Event category for GPU activity in the Performance panel.
    */
   gpu: 'GPU',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Event category for asynchronous activity in the Performance panel.
    */
   async: 'Async',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Event category for messaging activity in the Performance panel.
    */
   messaging: 'Messaging',
 } as const;

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

@@ -88,14 +88,15 @@ export interface ViewInput {
   togglePopover: (e: MouseEvent) => void;
   onEventClick: (event: Trace.Types.Events.Event) => void;
 }
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export class LayoutShiftDetails extends UI.Widget.Widget {
-  #view: typeof DEFAULT_VIEW;
+  #view: View;
   #event: Trace.Types.Events.SyntheticLayoutShift|Trace.Types.Events.SyntheticLayoutShiftCluster|null = null;
   #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
   #isFreshRecording = false;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }
@@ -155,7 +156,7 @@ export class LayoutShiftDetails extends UI.Widget.Widget {
   }
 }
 
-export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElement) => void =
+export const DEFAULT_VIEW: View =
     (input, _output, target) => {
       if (!input.event || !input.parsedTrace) {
         render(Lit.nothing, target);

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

@@ -1123,7 +1123,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 
 export class LiveMetricsView extends UI.Widget.Widget {
-  isNode = Root.Runtime.Runtime.isNode();
+  isNode: boolean = Root.Runtime.Runtime.isNode();
 
   #lcpValue?: LiveMetrics.LcpValue;
   #clsValue?: LiveMetrics.ClsValue;

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

@@ -117,8 +117,19 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestDetails.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface ViewInput {
+  request: Trace.Types.Events.SyntheticNetworkRequest|null;
+  target: SDK.Target.Target|null;
+  previewElementsCache: WeakMap<Trace.Types.Events.SyntheticNetworkRequest, HTMLElement>;
+  entityMapper: Trace.EntityMapper.EntityMapper|null;
+  serverTimings: SDK.ServerTiming.ServerTiming[]|null;
+  linkifier: LegacyComponents.Linkifier.Linkifier|null;
+  parsedTrace: Trace.TraceModel.ParsedTrace|null;
+}
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
 export class NetworkRequestDetails extends UI.Widget.Widget {
-  #view: typeof DEFAULT_VIEW;
+  #view: View;
   #request: Trace.Types.Events.SyntheticNetworkRequest|null = null;
   #requestPreviewElements = new WeakMap<Trace.Types.Events.SyntheticNetworkRequest, HTMLElement>();
   #entityMapper: Trace.EntityMapper.EntityMapper|null = null;
@@ -127,7 +138,7 @@ export class NetworkRequestDetails extends UI.Widget.Widget {
   #serverTimings: SDK.ServerTiming.ServerTiming[]|null = null;
   #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
     this.requestUpdate();
@@ -186,27 +197,17 @@ export class NetworkRequestDetails extends UI.Widget.Widget {
   }
 }
 
-export interface ViewInput {
-  request: Trace.Types.Events.SyntheticNetworkRequest|null;
-  target: SDK.Target.Target|null;
-  previewElementsCache: WeakMap<Trace.Types.Events.SyntheticNetworkRequest, HTMLElement>;
-  entityMapper: Trace.EntityMapper.EntityMapper|null;
-  serverTimings: SDK.ServerTiming.ServerTiming[]|null;
-  linkifier: LegacyComponents.Linkifier.Linkifier|null;
-  parsedTrace: Trace.TraceModel.ParsedTrace|null;
-}
-
-export const DEFAULT_VIEW: (
-    input: ViewInput, output: object, target: HTMLElement) => void = (input, _output, target) => {
-  if (!input.request) {
-    render(Lit.nothing, target);
-    return;
-  }
-  const {request} = input;
-  const {data} = request.args;
+export const DEFAULT_VIEW: View =
+    (input, _output, target) => {
+      if (!input.request) {
+        render(Lit.nothing, target);
+        return;
+      }
+      const {request} = input;
+      const {data} = request.args;
 
-  const redirectsHtml = NetworkRequestTooltip.renderRedirects(request);
-  // clang-format off
+      const redirectsHtml = NetworkRequestTooltip.renderRedirects(request);
+      // clang-format off
       render(html`
         <style>${networkRequestDetailsStyles}</style>
         <style>${networkRequestTooltipStyles}</style>
@@ -251,8 +252,8 @@ export const DEFAULT_VIEW: (
           </div>
         </div>
      `, target);
-  // clang-format on
-};
+      // clang-format on
+    };
 
 function renderTitle(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult {
   const style = {

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

@@ -37,6 +37,7 @@ export interface ViewInput {
   eventToInsightsMap: EventToRelatedInsightsMap;
   onInsightClick: (insight: RelatedInsight) => void;
 }
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export interface Data {
   eventToRelatedInsightsMap: EventToRelatedInsightsMap|null;
@@ -44,12 +45,12 @@ export interface Data {
 }
 
 export class RelatedInsightChips extends UI.Widget.Widget {
-  #view: typeof DEFAULT_VIEW;
+  #view: View;
 
   #activeEvent: Trace.Types.Events.Event|null = null;
   #eventToInsightsMap: EventToRelatedInsightsMap = new Map();
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }
@@ -81,7 +82,7 @@ export class RelatedInsightChips extends UI.Widget.Widget {
   }
 }
 
-export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElement) => void =
+export const DEFAULT_VIEW: View =
     (input, _output, target) => {
       const {activeEvent, eventToInsightsMap} = input;
       const relatedInsights = activeEvent ? eventToInsightsMap.get(activeEvent) ?? [] : [];

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

@@ -59,7 +59,7 @@ export const enum SidebarTabs {
   INSIGHTS = 'insights',
   ANNOTATIONS = 'annotations',
 }
-export const DEFAULT_SIDEBAR_TAB = SidebarTabs.INSIGHTS;
+export const DEFAULT_SIDEBAR_TAB: SidebarTabs = SidebarTabs.INSIGHTS;
 
 export const DEFAULT_SIDEBAR_WIDTH_PX = 240;
 const MIN_SIDEBAR_WIDTH_PX = 170;

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

@@ -100,6 +100,7 @@ export interface SidebarAnnotationsTabViewInput {
   onAnnotationHoverOut: () => void;
   onAnnotationDelete: (annotation: Trace.Types.File.Annotation) => void;
 }
+export type View = (input: SidebarAnnotationsTabViewInput, output: object, target: HTMLElement) => void;
 
 export class SidebarAnnotationsTab extends UI.Widget.Widget {
   #annotations: Trace.Types.File.Annotation[] = [];
@@ -108,9 +109,9 @@ export class SidebarAnnotationsTab extends UI.Widget.Widget {
   #annotationEntryToColorMap = new Map<Trace.Types.Events.Event|Trace.Types.Events.LegacyTimelineFrame, string>();
 
   readonly #annotationsHiddenSetting: Common.Settings.Setting<boolean>;
-  #view: typeof DEFAULT_VIEW;
+  #view: View;
 
-  constructor(view = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super();
     this.#view = view;
     this.#annotationsHiddenSetting = Common.Settings.Settings.instance().moduleSetting('annotations-hidden');
@@ -406,7 +407,7 @@ function renderTutorial(): Lit.LitTemplate {
   // clang-format on
 }
 
-export const DEFAULT_VIEW: (input: SidebarAnnotationsTabViewInput, output: object, target: HTMLElement) => void =
+export const DEFAULT_VIEW: View =
     (input, _output, target) => {
       // clang-format off
       render(html`

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

@@ -20,7 +20,7 @@ const UIStrings = {
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Table.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {html} = Lit;
 

package/front_end/panels/timeline/enable-easter-egg.js

@@ -14,7 +14,7 @@ if (process.argv.includes('--should-enable')) {
   value = 'true';
 }
 
-writeIfChanged(
+await writeIfChanged(
     path.join(targetGenDir, 'EasterEgg.js'),
     `export const SHOULD_SHOW_EASTER_EGG = ${value};`,
 );

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

@@ -13,123 +13,123 @@ import type * as Timeline from './timeline.js';
 
 const UIStrings = {
   /**
-   * @description Text for the performance of something
+   * @description Name of the Performance panel.
    */
   performance: 'Performance',
   /**
-   * @description Command for showing the 'Performance' tool
+   * @description Command to show the Performance panel.
    */
   showPerformance: 'Show Performance',
   /**
-   * @description Text to record a series of actions for analysis
+   * @description Title of an action to start recording a performance trace.
    */
   record: 'Record',
   /**
-   * @description Text of an item that stops the running task
+   * @description Title of an action to stop recording a performance trace.
    */
   stop: 'Stop',
   /**
-   * @description Title of an action in the timeline tool to record reload
+   * @description Title of an action to record a performance trace while reloading the page.
    */
   recordAndReload: 'Record and reload',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon download button
+   * @description Title of an action to save the current performance profile.
    */
   saveProfile: 'Save profile…',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon load button
+   * @description Title of an action to load a performance profile.
    */
   loadProfile: 'Load profile…',
   /**
-   * @description Prev button title in Film Strip View of the Performance panel
+   * @description Title of an action to navigate to the previous frame in the film strip view of the Performance panel.
    */
   previousFrame: 'Previous frame',
   /**
-   * @description Next button title in Film Strip View of the Performance panel
+   * @description Title of an action to navigate to the next frame in the film strip view of the Performance panel.
    */
   nextFrame: 'Next frame',
   /**
-   * @description Title of an action in the timeline tool to show history
+   * @description Title of an action to show recent timeline sessions in the Performance panel.
    */
   showRecentTimelineSessions: 'Show recent timeline sessions',
   /**
-   * @description Title of an action that opens the previous recording in the performance panel
+   * @description Title of an action to switch to the previous recording in the Performance panel.
    */
   previousRecording: 'Previous recording',
   /**
-   * @description Title of an action that opens the next recording in the performance panel
+   * @description Title of an action to switch to the next recording in the Performance panel.
    */
   nextRecording: 'Next recording',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings to show Chrome frame in the Layers view.
    */
   chromeFrameInLayersView: 'Chrome frame in Layers view',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings to show all events.
    */
   timelineShowAllEvents: 'Show all events',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings to enable soft navigation monitoring.
    */
   enableSoftNavigations: 'Enable soft navigation performance monitoring',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings to enable timeline debug mode.
    */
   timelineDebugMode: 'Timeline debug mode (trace event details, etc.)',
   /**
-   * @description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings for invalidation tracking.
    */
   timelineInvalidationTracking: 'Invalidation tracking',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to disable JavaScript samples.
    */
   disableJavascriptSamples: 'Disable JavaScript samples',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to enable advanced paint instrumentation.
    */
   enableAdvancedPaint: 'Enable advanced paint instrumentation (slow)',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to enable CSS selector stats.
    */
   enableSelectorStats: 'Enable CSS selector stats (slow)',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to configure screenshot capture.
    */
   screenshotCapture: 'Screenshot capture',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to capture screenshots.
    */
   screenshots: 'Screenshots',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to show memory counters.
    */
   memory: 'Memory',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to dim third parties.
    */
   dimThirdParties: 'Dim 3rd parties',
   /**
-   * @description Title of a setting in Performance panel.
+   * @description Title of a setting in the Performance panel to show custom tracks.
    */
   showCustomtracks: 'Show custom tracks',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for the JS heap.
    */
   jsHeap: 'JS heap',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for documents.
    */
   documents: 'Documents',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for DOM nodes.
    */
   nodes: 'Nodes',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for event listeners.
    */
   listeners: 'Listeners',
   /**
-   * @description Title of a setting in Performance panel counters graph.
+   * @description Title of a counter setting in the Performance panel counters graph for GPU memory.
    */
   gpuMemory: 'GPU memory',
 } as const;

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -41,7 +41,7 @@
 .overlay-type-ENTRY_SELECTED,
 .overlay-type-ENTRY_OUTLINE {
   pointer-events: none;
-  border: 2px solid var(--sys-color-primary);
+  border: var(--sys-size-2) solid var(--sys-color-primary);
   background-color: var(--sys-color-state-ripple-primary);
 
   &.cut-off-top {
@@ -68,7 +68,7 @@
 
 .overlay-type-ENTRY_OUTLINE {
   background-color: transparent;
-  border-width: 1px;
+  border-width: var(--sys-size-1);
   /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
   z-index: 0;
 
@@ -82,7 +82,7 @@
 }
 
 .overlay-type-CANDY_STRIPED_TIME_RANGE {
-  --red-stripe-width: 2px;
+  --red-stripe-width: var(--sys-size-2);
   --white-stripe-width: 7px;
 
   background-image:
@@ -93,7 +93,7 @@
       transparent var(--red-stripe-width),
       transparent var(--white-stripe-width)
     );
-  border: 1px solid var(--sys-color-error-bright);
+  border: var(--sys-size-1) solid var(--sys-color-error-bright);
 
   &.cut-off-bottom {
     border-bottom: none;
@@ -133,7 +133,7 @@
 .overlay-type-TIMESTAMP_MARKER {
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: var(--sys-size-2);
   background-color: var(--sys-color-primary);
   pointer-events: none;
 }
@@ -176,7 +176,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 40px;
+  height: var(--sys-size-14);
   /* Unlike other overlays, the user can click + interact with this one */
   pointer-events: auto;
   /* Ensure this one is always on top of any others */
@@ -211,9 +211,9 @@
 }
 
 .timeline-flamechart-resizer {
-  flex: 8px 0 0;
+  flex: var(--sys-size-5) 0 0;
   background-color: var(--sys-color-surface2);
-  border: 1px var(--sys-color-divider);
+  border: var(--sys-size-1) var(--sys-color-divider);
   border-style: solid none;
   display: flex;
   flex-direction: row;
@@ -227,6 +227,6 @@
 
 .timeline-flamechart-resizer::after {
   content: "...";
-  font-size: 14px;
-  margin-bottom: -1px;
+  font-size: var(--sys-typescale-body2-size);
+  margin-bottom: calc(-1 * var(--sys-size-1));
 }

package/front_end/panels/timeline/timelineFlamechartPopover.css

@@ -7,8 +7,8 @@
 .timeline-flamechart-popover {
   overflow: hidden;
   /* extend padding into the parent element to avoid clipping the focus-visible outline. */
-  padding: 4px;
-  margin: -4px;
+  padding: var(--sys-size-3);
+  margin: calc(-1 * var(--sys-size-3));
 }
 
 .timeline-flamechart-popover devtools-interaction-breakdown {
@@ -34,7 +34,7 @@
 .timeline-flamechart-popover span.popoverinfo-url-path,
 .timeline-flamechart-popover span.popoverinfo-url-origin {
   color: var(--sys-color-token-subtle);
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   white-space: normal;
   word-break: break-all;
 }
@@ -50,11 +50,11 @@
 .layout-shift-viz {
   position: relative;
   margin: var(--sys-size-8) var(--sys-size-5);
-  outline: 1px solid var(--sys-color-divider);
+  outline: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .layout-shift-viz-rect {
-  outline: 1px solid color-mix(in srgb, var(--color-background-inverted) 20%, var(--app-color-rendering));
+  outline: var(--sys-size-1) solid color-mix(in srgb, var(--color-background-inverted) 20%, var(--app-color-rendering));
   background-color: color-mix(in srgb, var(--color-background-inverted-opacity-0) 50%, var(--app-color-rendering-children));
   position: absolute;
   z-index: 100;

package/front_end/panels/timeline/timelineHistoryManager.css

@@ -10,13 +10,13 @@
 }
 
 .preview-item {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
   &:first-child {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
-  padding: 6px 10px;
+  padding: var(--sys-size-4) 10px;
   position: relative;
 
   .metadata {
@@ -32,7 +32,7 @@
     top: 0;
     bottom: 0;
     left: 0;
-    width: 2px;
+    width: var(--sys-size-2);
     background-color: var(--sys-color-primary);
   }
 }
@@ -57,7 +57,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 240px;
+  max-width: var(--sys-size-28);
 }
 
 .text-details .metadata {
@@ -68,8 +68,8 @@
 
 .screenshot-thumb {
   display: flex;
-  border: 1px solid var(--sys-color-surface3);
-  margin: 2px 4px;
+  border: var(--sys-size-1) solid var(--sys-color-surface3);
+  margin: var(--sys-size-2) var(--sys-size-3);
 }
 
 .screenshot-thumb img {

package/front_end/panels/timeline/timelinePaintProfiler.css

@@ -13,7 +13,7 @@
 }
 
 .paint-profiler-image-view .paint-profiler-image-container div {
-  border-color: 1px solid var(--sys-color-divider);
+  border-color: var(--sys-size-1) solid var(--sys-color-divider);
   border-style: solid;
   z-index: 100;
   position: absolute;
@@ -22,5 +22,5 @@
 }
 
 .paint-profiler-image-view img {
-  border: solid 1px var(--sys-color-inverse-surface);
+  border: solid var(--sys-size-1) var(--sys-color-inverse-surface);
 }

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

@@ -138,6 +138,6 @@ export class RevealableTimeRange {
 }
 
 export class RevealableBottomUpProfile {
-  constructor(public bounds: Trace.Types.Timing.TraceWindowMicro, public node?: Trace.Extras.TraceTree.Node) {
+  constructor(public bounds: Trace.Types.Timing.TraceWindowMicro, public node?: Trace.Extras.TraceTree.Node|undefined) {
   }
 }