chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -3,12 +3,14 @@
 // found in the LICENSE file.
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 
 import styles from './entryLabelOverlay.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Accessible label used to explain to a user that they are viewing an entry label.
@@ -51,10 +53,7 @@ export class EntryLabelOverlay extends HTMLElement {
       EntryLabelOverlay.LABEL_HEIGHT + EntryLabelOverlay.LABEL_PADDING * 2 + EntryLabelOverlay.LABEL_CONNECTOR_HEIGHT;
   // Set the max label length to avoid labels that could signicantly increase the file size.
   static readonly MAX_LABEL_LENGTH = 100;
-  // Width of the icon next to the label input field. This is same as the width in CSS.
-  static readonly USER_CREATED_ICON_WIDTH = 16;
 
-  static readonly litTagName = LitHtml.literal`devtools-entry-label-overlay`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
@@ -73,7 +72,6 @@ export class EntryLabelOverlay extends HTMLElement {
   #labelPartsWrapper: HTMLElement|null = null;
   #entryHighlightWrapper: HTMLElement|null = null;
   #inputField: HTMLElement|null = null;
-  #labelBox: HTMLElement|null = null;
   #connectorLineContainer: SVGAElement|null = null;
   #label: string;
   #shouldDrawBelowEntry: boolean;
@@ -102,7 +100,6 @@ export class EntryLabelOverlay extends HTMLElement {
     this.#render();
     this.#shouldDrawBelowEntry = shouldDrawBelowEntry;
     this.#labelPartsWrapper = this.#shadow.querySelector<HTMLElement>('.label-parts-wrapper');
-    this.#labelBox = this.#labelPartsWrapper?.querySelector<HTMLElement>('.label-box') ?? null;
     this.#inputField = this.#labelPartsWrapper?.querySelector<HTMLElement>('.input-field') ?? null;
     this.#connectorLineContainer = this.#labelPartsWrapper?.querySelector<SVGAElement>('.connectorContainer') ?? null;
     this.#entryHighlightWrapper =
@@ -154,10 +151,9 @@ export class EntryLabelOverlay extends HTMLElement {
     // Therefore, if the new key is `Enter` key, treat it
     // as the end of the label input and blur the input field.
     if (event.key === 'Enter' || event.key === 'Escape') {
-      // In DevTools, the `Escape` button will by default toggle the console
-      // drawer, which we don't want here, so we need to call
-      // `stopPropagation()`.
-      event.stopPropagation();
+      // Note that we do not stop the event propagating here; this is on
+      // purpose because we need it to bubble up into TimelineFlameChartView's
+      // handler. That updates the state and deals with the keydown.
       this.#inputField.dispatchEvent(new FocusEvent('blur', {bubbles: true}));
       return false;
     }
@@ -267,8 +263,8 @@ export class EntryLabelOverlay extends HTMLElement {
   }
 
   #drawLabel(initialLabel?: string): void {
-    if (!this.#inputField || !this.#labelBox) {
-      console.error('`labelBox` or `labelBox` element is missing.');
+    if (!this.#inputField) {
+      console.error('`labelBox`element is missing.');
       return;
     }
 
@@ -281,12 +277,11 @@ export class EntryLabelOverlay extends HTMLElement {
     // PART 1: draw the label box
     if (this.#shouldDrawBelowEntry) {
       // Label is drawn below and slightly to the right.
-      xTranslation = EntryLabelOverlay.LABEL_AND_CONNECTOR_SHIFT_LENGTH - EntryLabelOverlay.USER_CREATED_ICON_WIDTH / 2;
+      xTranslation = EntryLabelOverlay.LABEL_AND_CONNECTOR_SHIFT_LENGTH;
     } else {
       // If the label is drawn above, the connector goes up and to the left, so
       // we pull the label back slightly to align it nicely.
-      xTranslation =
-          EntryLabelOverlay.LABEL_AND_CONNECTOR_SHIFT_LENGTH * -1 - EntryLabelOverlay.USER_CREATED_ICON_WIDTH / 2;
+      xTranslation = EntryLabelOverlay.LABEL_AND_CONNECTOR_SHIFT_LENGTH * -1;
     }
 
     if (this.#shouldDrawBelowEntry && this.#entryLabelVisibleHeight) {
@@ -308,7 +303,7 @@ export class EntryLabelOverlay extends HTMLElement {
     }
 
     if (transformString.length) {
-      this.#labelBox.style.transform = transformString;
+      this.#inputField.style.transform = transformString;
     }
   }
 
@@ -340,27 +335,24 @@ export class EntryLabelOverlay extends HTMLElement {
   #render(): void {
     // clang-format off
     LitHtml.render(
-        LitHtml.html`
+        html`
         <span class="label-parts-wrapper" role="region" aria-label=${i18nString(UIStrings.entryLabel)}>
-          <div class="label-box">
-            <${IconButton.Icon.Icon.litTagName} class='user-created-icon' name='profile'>
-            </${IconButton.Icon.Icon.litTagName}>
-            <span
-              class="input-field"
-              role="textbox"
-              @dblclick=${() => this.setLabelEditabilityAndRemoveEmptyLabel(true)}
-              @blur=${() => this.setLabelEditabilityAndRemoveEmptyLabel(false)}
-              @keydown=${this.#handleLabelInputKeyDown}
-              @paste=${this.#handleLabelInputPaste}
-              @keyup=${this.#handleLabelInputKeyUp}
-              contenteditable=${this.#isLabelEditable ? 'plaintext-only' : false}>
-            </span>
-          </div>
+          <span
+            class="input-field"
+            role="textbox"
+            @dblclick=${() => this.setLabelEditabilityAndRemoveEmptyLabel(true)}
+            @blur=${() => this.setLabelEditabilityAndRemoveEmptyLabel(false)}
+            @keydown=${this.#handleLabelInputKeyDown}
+            @paste=${this.#handleLabelInputPaste}
+            @keyup=${this.#handleLabelInputKeyUp}
+            contenteditable=${this.#isLabelEditable ? 'plaintext-only' : false}
+            jslog=${VisualLogging.textField('timeline.annotations.entry-label-input').track({keydown: true, click: true})}
+          ></span>
           <svg class="connectorContainer">
             <line/>
             <circle/>
           </svg>
-          <div class="entry-highlight-wrapper"/>
+          <div class="entry-highlight-wrapper"></div>
         </span>`,
         this.#shadow, {host: this});
     // clang-format on

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/entryLabelOverlay.css

@@ -36,17 +36,3 @@
   box-sizing: border-box;
   border: 2px solid var(--sys-color-on-surface);
 }
-
-.label-box {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.user-created-icon {
-  margin: var(--sys-size-3);
-  color: var(--color-background-inverted);
-  /* USER_CREATED_ICON_WIDTH */
-  width: 16px;
-  height: 16px;
-}

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/timelineFlameChartView.css

@@ -56,7 +56,7 @@
 
 .overlay-type-CANDY_STRIPED_TIME_RANGE {
   --red-stripe-width: 2px;
-  --white-stripe-width: 10px;
+  --white-stripe-width: 7px;
 
   background-image:
     repeating-linear-gradient(
@@ -116,7 +116,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 */