chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/timeline/overlays/components/TimeRangeOverlay.ts

@@ -3,12 +3,13 @@
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 
 import styles from './timeRangeOverlay.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Accessible label used to explain to a user that they are viewing an entry label.
@@ -35,9 +36,7 @@ export class TimeRangeRemoveEvent extends Event {
 }
 
 export class TimeRangeOverlay extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-time-range-overlay`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #boundRender = this.#render.bind(this);
   #duration: Trace.Types.Timing.MicroSeconds|null = null;
   #canvasRect: DOMRect|null = null;
   #label: string;
@@ -81,7 +80,7 @@ export class TimeRangeOverlay extends HTMLElement {
       return;
     }
     this.#canvasRect = rect;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+    this.#render();
   }
 
   set duration(duration: Trace.Types.Timing.MicroSeconds|null) {
@@ -89,7 +88,7 @@ export class TimeRangeOverlay extends HTMLElement {
       return;
     }
     this.#duration = duration;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+    this.#render();
   }
 
   /**
@@ -124,7 +123,7 @@ export class TimeRangeOverlay extends HTMLElement {
       return;
     }
 
-    if (!this.#canvasRect) {
+    if (!this.#canvasRect || !this.#labelBox) {
       return;
     }
 
@@ -133,16 +132,22 @@ export class TimeRangeOverlay extends HTMLElement {
     // values and label positioning from the left hand side in order to be
     // consistent on both edges of the UI.
     const paddingForScrollbar = 9;
-
     const overlayRect = this.getBoundingClientRect();
     const labelFocused = this.#shadow.activeElement === this.#labelBox;
 
     const labelRect = this.#rangeContainer.getBoundingClientRect();
     const visibleOverlayWidth = this.#visibleOverlayWidth(overlayRect) - paddingForScrollbar;
-    const overlayTooNarrow = visibleOverlayWidth <= labelRect.width - paddingForScrollbar;
+
+    const durationBox = this.#rangeContainer.querySelector<HTMLElement>('.duration') ?? null;
+    const durationBoxLength = durationBox?.getBoundingClientRect().width;
+    if (!durationBoxLength) {
+      return;
+    }
+    const overlayTooNarrow = visibleOverlayWidth <= durationBoxLength;
     // We do not hide the label if:
     // 1. it is focused (user is typing into it)
     // 2. it is empty - this means it's a new label and we need to let the user type into it!
+    // 3. it is too narrow - narrower than the duration length
     const hideLabel = overlayTooNarrow && !labelFocused && this.#label.length > 0;
     this.#rangeContainer.classList.toggle('labelHidden', hideLabel);
 
@@ -177,18 +182,13 @@ export class TimeRangeOverlay extends HTMLElement {
       // side.
       this.#rangeContainer.style.marginLeft = `${Math.abs(this.#canvasRect.x - overlayRect.x) + paddingForScrollbar}px`;
     } else if (labelOffRightOfScreen) {
-      // To calculate how far left to push the label, we take the right hand
-      // bound (the canvas width and subtract the label's width).
-      // Finally, we subtract the X position of the overlay (if the overlay is
-      // 200px within the view, we don't need to push the label that 200px too
-      // otherwise it will be off-screen)
-      const leftMargin = rightBound - labelRect.width - overlayRect.x;
-
-      this.#rangeContainer.style.marginLeft = `${leftMargin}px`;
-
+      // If the label is off the right of the screen, we adjust by adding the
+      // right margin equal to the difference between the right edge of the
+      // overlay and the right edge of the canvas.
+      this.#rangeContainer.style.marginRight = `${overlayRect.right - this.#canvasRect.right + paddingForScrollbar}px`;
     } else {
       // Keep the label central.
-      this.#rangeContainer.style.marginLeft = `${labelLeftMarginToCenter}px`;
+      this.#rangeContainer.style.margin = '0px';
     }
 
     // If the text is empty, set the label editibility to true.
@@ -255,10 +255,8 @@ export class TimeRangeOverlay extends HTMLElement {
     const durationText = this.#duration ? i18n.TimeUtilities.formatMicroSecondsTime(this.#duration) : '';
     // clang-format off
     LitHtml.render(
-        LitHtml.html`
+        html`
           <span class="range-container" role="region" aria-label=${i18nString(UIStrings.timeRange)}>
-            <${IconButton.Icon.Icon.litTagName} class="user-created-icon" name='profile'}>
-            </${IconButton.Icon.Icon.litTagName}>
             <span
              class="label-text"
              role="textbox"
@@ -266,8 +264,9 @@ export class TimeRangeOverlay extends HTMLElement {
              @dblclick=${() => this.#setLabelEditability(true)}
              @keydown=${this.#handleLabelInputKeyDown}
              @keyup=${this.#handleLabelInputKeyUp}
-             contenteditable=${this.#isLabelEditable ? 'plaintext-only' : false}>
-            </span>
+             contenteditable=${this.#isLabelEditable ? 'plaintext-only' : false}
+             jslog=${VisualLogging.textField('timeline.annotations.time-range-label-input').track({keydown: true, click: true})}
+            ></span>
             <span class="duration">${durationText}</span>
           </span>
           `,

package/front_end/panels/timeline/overlays/components/TimespanBreakdownOverlay.test.ts

@@ -0,0 +1,42 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {getCleanTextContentFromElements} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import {
+  microsecondsTraceWindow,
+} from '../../../../testing/TraceHelpers.js';
+import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+
+import * as Components from './components.js';
+const coordinator = RenderCoordinator.RenderCoordinator.RenderCoordinator.instance();
+
+describeWithEnvironment('TimespanBreakdownOverlay', () => {
+  it('renders the sections with the labels and time', async () => {
+    const component = new Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay();
+    const sections: Components.TimespanBreakdownOverlay.EntryBreakdown[] = [
+      {
+        bounds: microsecondsTraceWindow(0, 1_000),
+        label: 'section one',
+        showDuration: true,
+      },
+      {
+        bounds: microsecondsTraceWindow(1_000, 20_055),
+        label: 'section two',
+        showDuration: true,
+
+      },
+    ];
+    component.sections = sections;
+    await coordinator.done();
+    assert.isOk(component.shadowRoot);
+
+    const sectionElems =
+        Array.from(component.shadowRoot.querySelectorAll<HTMLElement>('.timespan-breakdown-overlay-section'));
+    const labels = sectionElems.flatMap(elem => {
+      return getCleanTextContentFromElements(elem, '.timespan-breakdown-overlay-label');
+    });
+    assert.deepEqual(labels, ['1 ms section one', '19 ms section two']);
+  });
+});

package/front_end/panels/timeline/overlays/components/TimespanBreakdownOverlay.ts

@@ -2,12 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 
 import styles from './timespanBreakdownOverlay.css.js';
 
+const {html} = LitHtml;
+
 /**
  * An EntryBreakdown, or section, that makes up a TimespanBreakdown.
  */
@@ -18,20 +19,16 @@ export type EntryBreakdown = {
 };
 
 export class TimespanBreakdownOverlay extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-timespan-breakdown-overlay`;
-  /**
-   * Size to stagger sections of a TimespanBreakdownOverlay.
-   */
-  static readonly TIMESPAN_BREAKDOWN_OVERLAY_STAGGER_PX = 5;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #boundRender = this.#render.bind(this);
   #canvasRect: DOMRect|null = null;
   #sections: Array<EntryBreakdown>|null = null;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [styles];
-    this.#render();
+  }
+
+  set isBelowEntry(isBelow: boolean) {
+    this.classList.toggle('is-below', isBelow);
   }
 
   set canvasRect(rect: DOMRect|null) {
@@ -39,7 +36,7 @@ export class TimespanBreakdownOverlay extends HTMLElement {
       return;
     }
     this.#canvasRect = rect;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+    this.#render();
   }
 
   set sections(sections: Array<EntryBreakdown>|null) {
@@ -47,7 +44,7 @@ export class TimespanBreakdownOverlay extends HTMLElement {
       return;
     }
     this.#sections = sections;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+    this.#render();
   }
 
   /**
@@ -153,24 +150,33 @@ export class TimespanBreakdownOverlay extends HTMLElement {
     }
   }
 
-  renderSection(section: EntryBreakdown): LitHtml.TemplateResult {
-    const sectionRange = Trace.Helpers.Timing.microSecondsToMilliseconds(section.bounds.range);
+  renderedSections(): HTMLElement[] {
+    return Array.from(this.#shadow.querySelectorAll('.timespan-breakdown-overlay-section'));
+  }
+
+  #renderSection(section: EntryBreakdown): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="timespan-breakdown-overlay-section">
         <div class="timespan-breakdown-overlay-label">
         ${section.showDuration ?
-          LitHtml.html`
-            <span class="duration-text">${i18n.TimeUtilities.preciseMillisToString(sectionRange, 2)}</span>
+          html`
+            <span class="duration-text">${i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(section.bounds.range)}</span>
           ` : LitHtml.nothing}
-          ${section.label}
+          <span class="section-label-text">
+            ${section.label}
+          </span>
         </div>
       </div>`;
     // clang-format on
   }
 
   #render(): void {
-    LitHtml.render(LitHtml.html`${this.#sections?.map(this.renderSection)}`, this.#shadow, {host: this});
+    if (this.#sections) {
+      this.classList.toggle('odd-number-of-sections', this.#sections.length % 2 === 1);
+      this.classList.toggle('even-number-of-sections', this.#sections.length % 2 === 0);
+    }
+    LitHtml.render(html`${this.#sections?.map(this.#renderSection)}`, this.#shadow, {host: this});
     this.checkSectionLabelPositioning();
   }
 }

package/front_end/panels/timeline/overlays/components/entriesLinkOverlay.css

@@ -24,6 +24,14 @@
   &.cut-off-bottom {
     border-bottom: none;
   }
+
+  &.cut-off-right {
+    border-right: none;
+  }
+
+  &.cut-off-left {
+    border-left: none;
+  }
 }
 
 .entry-is-not-source {

package/front_end/panels/timeline/overlays/components/entryLabelOverlay.css

@@ -35,18 +35,20 @@
 .entry-highlight-wrapper {
   box-sizing: border-box;
   border: 2px solid var(--sys-color-on-surface);
-}
 
-.label-box {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
+  &.cut-off-top {
+    border-top: none;
+  }
 
-.user-created-icon {
-  margin: var(--sys-size-3);
-  color: var(--color-background-inverted);
-  /* USER_CREATED_ICON_WIDTH */
-  width: 16px;
-  height: 16px;
+  &.cut-off-bottom {
+    border-bottom: none;
+  }
+
+  &.cut-off-right {
+    border-right: none;
+  }
+
+  &.cut-off-left {
+    border-left: none;
+  }
 }

package/front_end/panels/timeline/overlays/components/timeRangeOverlay.css

@@ -21,11 +21,11 @@
 }
 
 .range-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
   text-align: center;
   box-sizing: border-box;
-  width: max-content;
-  max-width: 250px;
-  padding: 0 3px;
   pointer-events: all;
   user-select: none;
   color: var(--sys-color-pink);
@@ -38,18 +38,30 @@
   }
 
   &.offScreenLeft {
+    align-items: flex-start;
     text-align: left;
   }
 
   &.offScreenRight {
+    align-items: flex-end;
     text-align: right;
   }
 }
 
 .label-text {
+  /*
+  * The width priority is min-width > max-width > width
+  * When the range itself is smaller that 70px, expand 100% to fill the whole width.
+  * When the range is wider, only expand the textfield to over 70px
+  * if it's needed to fit the label text.
+  */
+  width: 100%;
+  max-width: 70px;
+  min-width: fit-content;
   text-overflow: ellipsis;
-  max-height: 40px;
   overflow: hidden;
+  overflow-wrap: break-word;
+  word-break: break-word;
   margin-bottom: 3px;
   display: -webkit-box;
   white-space: break-spaces;
@@ -61,12 +73,3 @@
   outline: none;
   box-shadow: 0 0 0 1px var(--ref-palette-pink55);
 }
-
-.user-created-icon {
-  position: absolute;
-  left: 4px;
-  bottom: 5px;
-  color: inherit;
-  width: 16px;
-  height: 17px;
-}

package/front_end/panels/timeline/overlays/components/timespanBreakdownOverlay.css

@@ -4,6 +4,34 @@
  * found in the LICENSE file.
  */
 
+.timespan-breakdown-overlay-section {
+  border: solid;
+  border-color: var(--sys-color-on-surface);
+  border-width: 4px 1px 0;
+  align-content: flex-start;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-image: linear-gradient(180deg, var(--sys-color-on-primary), transparent);
+  height: 90%;
+  box-sizing: border-box;
+  padding-top: var(--sys-size-2);
+
+  :host(.is-below) & {
+    border-top-width: 0;
+    border-bottom-width: 4px;
+    align-content: flex-end; /* anchor the text at the bottom */
+    padding-bottom: var(--sys-size-2);
+    padding-top: 0;
+
+    /* re-order so the timestamp is below label */
+    .timespan-breakdown-overlay-label {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+  }
+}
+
 :host {
   display: flex;
   overflow: hidden;
@@ -12,37 +40,47 @@
   align-items: flex-end;
   width: 100%;
   box-sizing: border-box;
+  height: 100%;
+  max-height: 100px;
+
+  /* Ensure that the first & last sections always have the left/right border */
+  /* (disable stylelint because we need the !important to override border
+   * styles below + keeping them here is clearer to read) */
+  .timespan-breakdown-overlay-section:first-child {
+    border-left-width: 1px !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .timespan-breakdown-overlay-section:last-child {
+    border-right-width: 1px !important; /* stylelint-disable-line declaration-no-important */
+  }
 }
 
-.timespan-breakdown-overlay-section {
-  border: solid;
-  border-color: var(--sys-color-on-surface);
-  border-left-width: 1px;
-  border-right-width: 1px;
-  border-top-width: 4px;
-  border-bottom: none;
-  align-content: flex-start;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background-image: linear-gradient(180deg, var(--sys-color-on-primary), transparent);
-  height: 90px;
+:host(.is-below) {
+  align-items: flex-start;
+}
 
-  &:nth-child(odd) {
-    height: 100px;
+/* Depending on if the number of sections is odd or even, we alternate the
+ * heights of the even/odd sections. We do this to ensure that the first item
+ * is never a "high" item, because that looks a bit clunky. */
+:host(.odd-number-of-sections) {
+  .timespan-breakdown-overlay-section:nth-child(even) {
+    height: 100%;
   }
 
-  &:nth-child(even) {
+  .timespan-breakdown-overlay-section:nth-child(odd) {
     border-left-width: 0;
     border-right-width: 0;
   }
+}
 
-  &:first-child {
-    border-left-width: 1px;
+:host(.even-number-of-sections) {
+  .timespan-breakdown-overlay-section:nth-child(odd) {
+    height: 100%;
   }
 
-  &:last-child {
-    border-right-width: 1px;
+  .timespan-breakdown-overlay-section:nth-child(even) {
+    border-left-width: 0;
+    border-right-width: 0;
   }
 }
 
@@ -61,6 +99,7 @@
   text-wrap: nowrap;
 
   .duration-text {
+    font-size: var(--sys-typescale-body4-size);
     text-overflow: ellipsis;
     overflow: hidden;
     text-wrap: nowrap;

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

@@ -355,3 +355,14 @@ Common.Revealer.registerRevealer({
     return new Timeline.TimelinePanel.TraceRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [SDK.TraceObject.RevealableEvent];
+  },
+  destination: Common.Revealer.RevealerDestination.TIMELINE_PANEL,
+  async loadRevealer() {
+    const Timeline = await loadTimelineModule();
+    return new Timeline.TimelinePanel.EventRevealer();
+  },
+});

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -40,6 +40,14 @@
   &.cut-off-bottom {
     border-bottom: none;
   }
+
+  &.cut-off-right {
+    border-right: none;
+  }
+
+  &.cut-off-left {
+    border-left: none;
+  }
 }
 
 .overlay-type-ENTRY_OUTLINE {
@@ -56,7 +64,7 @@
 
 .overlay-type-CANDY_STRIPED_TIME_RANGE {
   --red-stripe-width: 2px;
-  --white-stripe-width: 10px;
+  --white-stripe-width: 7px;
 
   background-image:
     repeating-linear-gradient(
@@ -75,6 +83,14 @@
   &.cut-off-top {
     border-top: none;
   }
+
+  &.cut-off-right {
+    border-right: none;
+  }
+
+  &.cut-off-left {
+    border-left: none;
+  }
 }
 
 .overlay-type-ENTRIES_LINK {
@@ -116,7 +132,8 @@
 }
 
 .overlay-type-TIMESPAN_BREAKDOWN {
-  /* This overlay is shown at the bottom of the UI, not the top */
+  /* This overlay by default is shown at the bottom of the UI, not the top */
   top: unset;
   bottom: 0;
+  height: 100px;
 }

package/front_end/panels/timeline/timelineFlamechartPopover.css

@@ -31,3 +31,22 @@
 .timeline-flamechart-popover span.timeline-info-warning * {
   color: inherit;
 }
+
+.layout-shift-viz {
+  position: relative;
+  margin: var(--sys-size-8) var(--sys-size-5);
+  outline: 1px 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));
+  background-color: color-mix(in sRGB, var(--color-background-inverted-opacity-0) 50%, var(--app-color-rendering-children));
+  position: absolute;
+  z-index: 100;
+}
+
+.layout-shift-viz > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/front_end/panels/timeline/timelineHistoryManager.css

@@ -19,6 +19,10 @@
   padding: 6px 10px;
   position: relative;
 
+  .time {
+    margin-left: 3px;
+  }
+
   /* done this way because if we have a border it
    * awkwardly merges in a diagonal with the top and
    * bottom border */

package/front_end/panels/timeline/timelinePanel.css

@@ -175,6 +175,7 @@
   position: relative;
   background-color: var(--sys-color-cdt-base-container);
   user-select: text;
+  display: block;
 }
 
 .timeline-details-view-block {
@@ -360,7 +361,6 @@
 }
 
 .timeline-filmstrip-preview > img {
-  margin-top: 5px;
   max-width: 500px;
   max-height: 300px;
   cursor: pointer;
@@ -532,7 +532,7 @@
 
   .timeline-tree-view .data-grid tr.selected span.percent-column,
   .timeline-tree-view .data-grid tr.selected div.background-percent-bar span,
-  .timeline-tree-view .data-grid tr.selected .name-container .activity-link .devtools-link {
+  .timeline-tree-view .data-grid tr.selected .name-container .activity-link .devtools-link .timeline-link {
     color: HighlightText;
   }
 
@@ -589,14 +589,6 @@
   height: 100%;
 }
 
-.timeline-concurrency-input {
-  width: 50px;
-}
-
-.timeline-concurrency-hidden {
-  visibility: hidden;
-}
-
 devtools-feedback-button {
   float: right;
 }

package/front_end/panels/timeline/track_appenders/AnimationsTrackAppender.test.ts

@@ -11,8 +11,7 @@ import * as Timeline from '../timeline.js';
 
 function initTrackAppender(
     flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[],
-    entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
+    entryData: Trace.Types.Events.Event[], entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[]):
     Timeline.AnimationsTrackAppender.AnimationsTrackAppender {
   const compatibilityTracksAppender = new Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender(
       flameChartData, parsedTrace, entryData, entryTypeByLevel);
@@ -22,7 +21,7 @@ function initTrackAppender(
 describeWithEnvironment('AnimationsTrackAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let animationsTrackAppender: Timeline.AnimationsTrackAppender.AnimationsTrackAppender;
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];
 

package/front_end/panels/timeline/track_appenders/AppenderUtils.test.ts

@@ -37,10 +37,6 @@ describeWithEnvironment('AppenderUtils', () => {
   });
 
   describe('buildTrackHeader', () => {
-    const legends: PerfUI.FlameChart.Legend[] = [{
-      color: 'yellow',
-      category: 'test',
-    }];
     const trackHeader = {
       startLevel: 0,
       name: 'Header Name',
@@ -48,7 +44,6 @@ describeWithEnvironment('AppenderUtils', () => {
       selectable: true,
       expanded: true,
       showStackContextMenu: true,
-      legends,
       jslogContext: 'animations',
     } as PerfUI.FlameChart.Group;
 
@@ -56,7 +51,7 @@ describeWithEnvironment('AppenderUtils', () => {
       const builtHeader = Timeline.AppenderUtils.buildTrackHeader(
           Timeline.CompatibilityTracksAppender.VisualLoggingTrackName.ANIMATIONS,
           /* startLevel= */ 0, 'Header Name', Timeline.AppenderUtils.buildGroupStyle(), /* selectable= */ true,
-          /* expanded= */ true, /* showStackContextMenu= */ true, legends);
+          /* expanded= */ true, /* showStackContextMenu= */ true);
       assert.deepEqual(builtHeader, trackHeader);
     });
   });

package/front_end/panels/timeline/track_appenders/CompatibilityTracksAppender.test.ts

@@ -12,7 +12,7 @@ import * as Timeline from '../timeline.js';
 describeWithEnvironment('CompatibilityTracksAppender', function() {
   let parsedTrace: Trace.Handlers.Types.ParsedTrace;
   let tracksAppender: Timeline.CompatibilityTracksAppender.CompatibilityTracksAppender;
-  let entryData: Timeline.TimelineFlameChartDataProvider.TimelineFlameChartEntry[] = [];
+  let entryData: Trace.Types.Events.Event[] = [];
   let flameChartData = PerfUI.FlameChart.FlameChartTimelineData.createEmpty();
   let entryTypeByLevel: Timeline.TimelineFlameChartDataProvider.EntryType[] = [];