chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

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

@@ -9,12 +9,13 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
+import type {SlowCSSSelectorInsightModel} from '../../../../models/trace/insights/SlowCSSSelector.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import type * as Linkifier from '../../../../ui/components/linkifier/linkifier.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import type * as SidebarInsight from './SidebarInsight.js';
 import type {TableData} from './Table.js';
 import {Category} from './types.js';
@@ -22,17 +23,6 @@ import {Category} from './types.js';
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   *@description Title of an insight that provides details about slow CSS selectors.
-   */
-  title: 'CSS Selector costs',
-
-  /**
-   * @description Text to describe how to improve the performance of CSS selectors.
-   */
-  description:
-      'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',
-
   /**
    *@description Column name for count of elements that the engine attempted to match against a style rule
    */
@@ -58,13 +48,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/SlowCSSSelector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SlowCSSSelector extends BaseInsight {
+export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-slow-css-selector`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'slow-css-selector';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
-  #slowCSSSelector: Trace.Insights.InsightRunners.SlowCSSSelector.SlowCSSSelectorInsightResult|null = null;
   #selectorLocations: Map<string, Protocol.CSS.SourceRange[]> = new Map();
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
@@ -133,17 +120,21 @@ export class SlowCSSSelector extends BaseInsight {
   }
 
   renderSlowCSSSelector(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     const cssModel = target?.model(SDK.CSSModel.CSSModel);
     const time = (us: Trace.Types.Timing.MicroSeconds): string =>
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
     // clang-format off
-    return this.#slowCSSSelector ? html`
+    return html`
       <div class="insights">
         <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
+              title: this.model.title,
+              description: this.model.description,
               internalName: this.internalName,
               expanded: this.isActive(),
           } as SidebarInsight.InsightDetails}
@@ -155,9 +146,9 @@ export class SlowCSSSelector extends BaseInsight {
                   insight: this,
                   headers: [i18nString(UIStrings.total), ''],
                   rows: [
-                    {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.#slowCSSSelector.totalElapsedMs)]},
-                    {values: [i18nString(UIStrings.matchAttempts), this.#slowCSSSelector.totalMatchAttempts]},
-                    {values: [i18nString(UIStrings.matchCount), this.#slowCSSSelector.totalMatchCount]},
+                    {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
+                    {values: [i18nString(UIStrings.matchAttempts), this.model.totalMatchAttempts]},
+                    {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
                   ],
                 } as TableData}>
               </devtools-performance-table>`}
@@ -167,7 +158,7 @@ export class SlowCSSSelector extends BaseInsight {
                 .data=${{
                   insight: this,
                   headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
-                  rows: this.#slowCSSSelector.topElapsedMs.map(selector => {
+                  rows: this.model.topElapsedMs.map(selector => {
                     return {
                       values: [
                       html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}`,
@@ -182,7 +173,7 @@ export class SlowCSSSelector extends BaseInsight {
                 .data=${{
                   insight: this,
                   headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
-                  rows: this.#slowCSSSelector.topMatchAttempts.map(selector => {
+                  rows: this.model.topMatchAttempts.map(selector => {
                     return {
                       values: [
                       html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}` as unknown as string,
@@ -194,20 +185,16 @@ export class SlowCSSSelector extends BaseInsight {
             </div>
           </div>
         </devtools-performance-sidebar-insight>
-      </div>` : LitHtml.nothing;
+      </div>`;
     // clang-format on
   }
 
   #hasDataToRender(): boolean {
-    this.#slowCSSSelector =
-        Trace.Insights.Common.getInsight('SlowCSSSelector', this.data.insights, this.data.insightSetKey);
-    return this.#slowCSSSelector !== null && this.#slowCSSSelector.topElapsedMs.length !== 0 &&
-        this.#slowCSSSelector.topMatchAttempts.length !== 0;
+    return this.model !== null && this.model.topElapsedMs.length !== 0 && this.model.topMatchAttempts.length !== 0;
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('SlowCSSSelector', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {

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

@@ -6,7 +6,7 @@ import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js'
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import type {BaseInsight} from './Helpers.js';
+import type {BaseInsightComponent} from './Helpers.js';
 import tableStyles from './table.css.js';
 
 const {html} = LitHtml;
@@ -33,7 +33,8 @@ export type TableState = {
 };
 
 export interface TableData {
-  insight: BaseInsight;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  insight: BaseInsightComponent<any>;
   headers: string[];
   rows: TableDataRow[];
 }
@@ -47,7 +48,8 @@ export class Table extends HTMLElement {
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
-  #insight?: BaseInsight;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  #insight?: BaseInsightComponent<any>;
   #state?: TableState;
   #headers?: string[];
   #rows?: TableDataRow[];

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

@@ -6,11 +6,12 @@ import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import type {ThirdPartiesInsightModel} from '../../../../models/trace/insights/ThirdParties.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
@@ -21,14 +22,6 @@ type ThirdPartiesEntries = Array<[
 ]>;
 
 const UIStrings = {
-  /** Title of an insight that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). */
-  title: 'Third parties',
-  /**
-   * @description Description of a DevTools insight that identifies the code on the page that the user doesn't control.
-   * This is displayed after a user expands the section to see more. No character length limits.
-   */
-  description: 'Third party code can significantly impact load performance. ' +
-      '[Reduce and defer loading of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) to prioritize your page\'s content.',
   /** Label for a table column that displays the name of a third-party provider. */
   columnThirdParty: 'Third party',
   /** Label for a column in a data table; entries will be the download size of a web resource in kilobytes. */
@@ -40,26 +33,23 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/ThirdParties.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class ThirdParties extends BaseInsight {
+export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-third-parties`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'third-parties';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   #overlaysForEntity = new Map<Trace.Extras.ThirdParties.Entity, Overlays.Overlays.TimelineOverlay[]>();
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     this.#overlaysForEntity.clear();
 
-    const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return [];
     }
 
     const overlays: Overlays.Overlays.TimelineOverlay[] = [];
-    for (const [entity, requests] of insight.requestsByEntity) {
-      if (entity === insight.firstPartyEntity) {
+    for (const [entity, requests] of this.model.requestsByEntity) {
+      if (entity === this.model.firstPartyEntity) {
         continue;
       }
 
@@ -80,7 +70,11 @@ export class ThirdParties extends BaseInsight {
     return overlays;
   }
 
-  #render(entries: ThirdPartiesEntries): LitHtml.TemplateResult {
+  #render(entries: ThirdPartiesEntries): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const topTransferSizeEntries = entries.sort((a, b) => b[1].transferSize - a[1].transferSize).slice(0, 6);
     const topMainThreadTimeEntries = entries.sort((a, b) => b[1].mainThreadTime - a[1].mainThreadTime).slice(0, 6);
 
@@ -88,8 +82,8 @@ export class ThirdParties extends BaseInsight {
     return html`
         <div class="insights">
             <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
+              title: this.model.title,
+              description: this.model.description,
               internalName: this.internalName,
               expanded: this.isActive(),
             }}
@@ -103,7 +97,7 @@ export class ThirdParties extends BaseInsight {
                         rows: topTransferSizeEntries.map(([entity, summary]) => ({
                           values: [
                             entity.name,
-                            Platform.NumberUtilities.bytesToString(summary.transferSize),
+                            i18n.ByteUtilities.bytesToString(summary.transferSize),
                           ],
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
@@ -133,13 +127,12 @@ export class ThirdParties extends BaseInsight {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
-    const entries = insight && [...insight.summaryByEntity.entries()].filter(kv => kv[0] !== insight.firstPartyEntity);
+    const model = this.model;
+    const entries = model && [...model.summaryByEntity.entries()].filter(kv => kv[0] !== model.firstPartyEntity);
     const shouldShow = entries?.length;
 
     const matchesCategory = shouldRenderForCategory({

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

@@ -4,50 +4,39 @@
 
 import './NodeLink.js';
 
-import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import type {ViewportInsightModel} from '../../../../models/trace/insights/Viewport.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
 
-const UIStrings = {
-  /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
-  title: 'Viewport not optimized for mobile',
-  /**
-   * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
-   */
-  description:
-      'The page\'s viewport is not mobile-optimized, so tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',
-};
-
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Viewport.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class Viewport extends BaseInsight {
+export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-viewport`;
   override insightCategory: Category = Category.INP;
   override internalName: string = 'viewport';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     // TODO(b/351757418): create overlay for synthetic input delay events
     return [];
   }
 
-  #render(insight: Trace.Insights.Types.InsightResults['Viewport']): LitHtml.TemplateResult {
+  #render(insight: Trace.Insights.Types.InsightModels['Viewport']): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const backendNodeId = insight.viewportEvent?.args.data.node_id;
 
     // clang-format off
     return html`
         <div class="insights">
             <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
+              title: this.model.title,
+              description: this.model.description,
               expanded: this.isActive(),
               internalName: this.internalName,
               estimatedSavingsTime: insight.metricSavings?.INP,
@@ -65,14 +54,14 @@ export class Viewport extends BaseInsight {
   }
 
   override render(): void {
-    const viewportInsight = Trace.Insights.Common.getInsight('Viewport', this.data.insights, this.data.insightSetKey);
-    const shouldShow = viewportInsight && viewportInsight.mobileOptimized === false;
+    const model = this.model;
+    const shouldShow = model && model.mobileOptimized === false;
 
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = shouldShow && matchesCategory ? this.#render(viewportInsight) : LitHtml.nothing;
+    const output = shouldShow && matchesCategory ? this.#render(model) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -73,11 +73,6 @@
   margin-bottom: 10px;
 }
 
-.section-title-help {
-  height: var(--sys-typescale-headline4-line-height);
-  vertical-align: top;
-}
-
 .settings-card {
   border-radius: var(--sys-shape-corner-small);
   padding: 14px 16px 16px;
@@ -135,6 +130,10 @@
   min-width: 0;
 }
 
+.local-field-link {
+  margin-top: 8px;
+}
+
 .logs-section {
   margin-top: 24px;
   display: flex;
@@ -293,13 +292,6 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   margin-top: 8px;
 }
 
-.setting-hint {
-  margin-left: 6px;
-  vertical-align: bottom;
-  height: 18px;
-  width: 18px;
-}
-
 .environment-recs-title {
   margin-top: 12px;
   font-weight: var(--ref-typeface-weight-medium);
@@ -336,7 +328,7 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
 
 .phase-table {
   border-top: 1px solid var(--sys-color-divider);
-  padding: 7px 0;
+  padding: 7px 4px;
   margin-left: var(--phase-table-margin);
 }
 

package/front_end/panels/timeline/components/metricCard.css

@@ -10,9 +10,15 @@
   background-color: var(--sys-color-surface3);
   height: 100%;
   box-sizing: border-box;
+
+  &:not(:hover) .title-help {
+    visibility: hidden;
+  }
 }
 
 .title {
+  display: flex;
+  justify-content: space-between;
   font-size: var(--sys-typescale-headline5-size);
   line-height: var(--sys-typescale-headline5-line-height);
   font-weight: var(--ref-typeface-weight-medium);
@@ -20,6 +26,11 @@
   margin-bottom: 6px;
 }
 
+.title-help {
+  height: var(--sys-typescale-headline5-line-height);
+  margin-left: 4px;
+}
+
 .metric-values-section {
   position: relative;
   display: flex;

package/front_end/panels/timeline/components/sidebarInsightsTab.css

@@ -49,8 +49,8 @@
     details:first-child & {
       border-top: 1px solid var(--sys-color-divider);
     }
-    }
   }
+}
 
 .zoom-button {
   margin-left: auto;

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

@@ -398,15 +398,15 @@ describeWithEnvironment('Overlays', () => {
       assert.isOk(overlayDOM);
     });
 
-    it('only renders one CURSOR_TIMESTAMP_MARKER as it is a singleton', async function() {
+    it('only renders one TIMESTAMP_MARKER as it is a singleton', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       overlays.add({
-        type: 'CURSOR_TIMESTAMP_MARKER',
+        type: 'TIMESTAMP_MARKER',
         timestamp: parsedTrace.Meta.traceBounds.min,
       });
       overlays.add({
-        type: 'CURSOR_TIMESTAMP_MARKER',
+        type: 'TIMESTAMP_MARKER',
         timestamp: parsedTrace.Meta.traceBounds.max,
       });
       await overlays.update();
@@ -979,8 +979,8 @@ describeWithEnvironment('Overlays', () => {
     });
 
     it('defines a log for cursor timestamp marker', () => {
-      const overlay: Overlays.Overlays.CursorTimestampMarker = {
-        type: 'CURSOR_TIMESTAMP_MARKER',
+      const overlay: Overlays.Overlays.TimestampMarker = {
+        type: 'TIMESTAMP_MARKER',
         timestamp: 1_000 as Trace.Types.Timing.MicroSeconds,
       };
       const context = Overlays.Overlays.jsLogContext(overlay);

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

@@ -155,7 +155,7 @@ function traceWindowForOverlay(overlay: TimelineOverlay): Trace.Types.Timing.Tra
       }
       break;
     }
-    case 'CURSOR_TIMESTAMP_MARKER': {
+    case 'TIMESTAMP_MARKER': {
       overlayMinBounds.push(overlay.timestamp);
       break;
     }
@@ -212,7 +212,8 @@ export function entriesForOverlay(overlay: TimelineOverlay): readonly OverlayEnt
       }
       break;
     }
-    case 'CURSOR_TIMESTAMP_MARKER': {
+    case 'TIMESTAMP_MARKER': {
+      // This overlay type isn't associated to any entry, so just break here.
       break;
     }
     case 'CANDY_STRIPED_TIME_RANGE': {
@@ -255,8 +256,8 @@ export interface TimespanBreakdown {
   renderLocation?: 'BOTTOM_OF_TIMELINE'|'BELOW_EVENT'|'ABOVE_EVENT';
 }
 
-export interface CursorTimestampMarker {
-  type: 'CURSOR_TIMESTAMP_MARKER';
+export interface TimestampMarker {
+  type: 'TIMESTAMP_MARKER';
   timestamp: Trace.Types.Timing.MicroSeconds;
 }
 
@@ -264,7 +265,7 @@ export interface CursorTimestampMarker {
  * All supported overlay types.
  */
 export type TimelineOverlay = EntrySelected|EntryOutline|TimeRangeLabel|EntryLabel|EntriesLink|TimespanBreakdown|
-    CursorTimestampMarker|CandyStripedTimeRange;
+    TimestampMarker|CandyStripedTimeRange;
 
 export interface TimelineOverlaySetOptions {
   updateTraceWindow: boolean;
@@ -275,9 +276,9 @@ export interface TimelineOverlaySetOptions {
  * exist at any given time. If one exists and the add() method is called, the
  * new overlay will replace the existing one.
  */
-type SingletonOverlay = EntrySelected|CursorTimestampMarker;
+type SingletonOverlay = EntrySelected|TimestampMarker;
 export function overlayIsSingleton(overlay: TimelineOverlay): overlay is SingletonOverlay {
-  return overlay.type === 'CURSOR_TIMESTAMP_MARKER' || overlay.type === 'ENTRY_SELECTED';
+  return overlay.type === 'TIMESTAMP_MARKER' || overlay.type === 'ENTRY_SELECTED';
 }
 
 /**
@@ -790,7 +791,7 @@ export class Overlays extends EventTarget {
         break;
       }
 
-      case 'CURSOR_TIMESTAMP_MARKER': {
+      case 'TIMESTAMP_MARKER': {
         const {visibleWindow} = this.#dimensions.trace;
         // Only update the position if the timestamp of this marker is within
         // the visible bounds.
@@ -827,7 +828,7 @@ export class Overlays extends EventTarget {
     }
   }
 
-  #positionTimestampMarker(overlay: CursorTimestampMarker, element: HTMLElement): void {
+  #positionTimestampMarker(overlay: TimestampMarker, element: HTMLElement): void {
     // Because we are adjusting the x position, we can use either chart here.
     const x = this.#xPixelForMicroSeconds('main', overlay.timestamp);
     element.style.left = `${x}px`;
@@ -1470,7 +1471,7 @@ export class Overlays extends EventTarget {
         }
         break;
       }
-      case 'CURSOR_TIMESTAMP_MARKER':
+      case 'TIMESTAMP_MARKER':
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
@@ -1504,7 +1505,7 @@ export class Overlays extends EventTarget {
         component?.checkSectionLabelPositioning();
         break;
       }
-      case 'CURSOR_TIMESTAMP_MARKER':
+      case 'TIMESTAMP_MARKER':
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
@@ -1830,7 +1831,7 @@ export function jsLogContext(overlay: TimelineOverlay): string|null {
     case 'TIMESPAN_BREAKDOWN': {
       return 'timeline.overlays.timespan-breakdown';
     }
-    case 'CURSOR_TIMESTAMP_MARKER': {
+    case 'TIMESTAMP_MARKER': {
       return 'timeline.overlays.cursor-timestamp-marker';
     }
     case 'CANDY_STRIPED_TIME_RANGE': {

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -111,7 +111,7 @@
   }
 }
 
-.overlay-type-CURSOR_TIMESTAMP_MARKER {
+.overlay-type-TIMESTAMP_MARKER {
   top: 0;
   bottom: 0;
   width: 2px;