chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -252,6 +252,7 @@ export interface TimespanBreakdown {
   type: 'TIMESPAN_BREAKDOWN';
   sections: Array<Components.TimespanBreakdownOverlay.EntryBreakdown>;
   entry?: Trace.Types.Events.Event;
+  renderLocation?: 'BOTTOM_OF_TIMELINE'|'BELOW_EVENT'|'ABOVE_EVENT';
 }
 
 export interface CursorTimestampMarker {
@@ -623,7 +624,7 @@ export class Overlays extends EventTarget {
    * existing overlays will have their positions changed to ensure they are
    * rendered in the right place.
    */
-  update(): void {
+  async update(): Promise<void> {
     const timeRangeOverlays: TimeRangeLabel[] = [];
     for (const [overlay, existingElement] of this.#overlaysToElements) {
       const element = existingElement || this.#createElementForNewOverlay(overlay);
@@ -633,11 +634,17 @@ export class Overlays extends EventTarget {
         this.#overlaysContainer.appendChild(element);
       }
 
+      // A chance to update the overlay before we re-position it. If an
+      // overlay's data changed, this is where we can pass that data into the
+      // overlay's component so it has the latest data.
+      this.#updateOverlayBeforePositioning(overlay, element);
+
       // Now we position the overlay on the timeline.
       this.#positionOverlay(overlay, element);
 
-      // And now we give every overlay a chance to react to its new position, if it needs to
-      this.#updateOverlayElementAfterPositioning(overlay, element);
+      // And now we give every overlay a chance to react to its new position,
+      // if it needs to
+      this.#updateOverlayAfterPositioning(overlay, element);
 
       if (overlay.type === 'TIME_RANGE') {
         timeRangeOverlays.push(overlay);
@@ -758,13 +765,12 @@ export class Overlays extends EventTarget {
         // chart, so we figure out the best visible entry pairs to draw
         // between.
         const entriesToConnect = this.#calculateFromAndToForEntriesLink(overlay);
-        if (entriesToConnect === null) {
-          // Unexpected situation: hide the overlay and move on
-          this.#setOverlayElementVisibility(element, false);
-          break;
-        }
-        this.#positionEntriesLinkOverlay(overlay, element, entriesToConnect);
+        const isVisible = entriesToConnect !== null && !annotationsAreHidden;
+        this.#setOverlayElementVisibility(element, isVisible);
 
+        if (isVisible) {
+          this.#positionEntriesLinkOverlay(overlay, element, entriesToConnect);
+        }
         break;
       }
       case 'TIMESPAN_BREAKDOWN': {
@@ -828,13 +834,13 @@ export class Overlays extends EventTarget {
   }
 
   #positionTimespanBreakdownOverlay(overlay: TimespanBreakdown, element: HTMLElement): void {
-    const component = element.querySelector<HTMLElement>('devtools-timespan-breakdown-overlay');
-    const shadow = component?.shadowRoot;
-    const elementSections = shadow?.querySelectorAll<HTMLElement>('.timespan-breakdown-overlay-section');
-
     if (overlay.sections.length === 0) {
       return;
     }
+
+    const component = element.querySelector('devtools-timespan-breakdown-overlay');
+    const elementSections = component?.renderedSections() ?? [];
+
     // Handle horizontal positioning.
     const leftEdgePixel = this.#xPixelForMicroSeconds('main', overlay.sections[0].bounds.min);
     const rightEdgePixel =
@@ -847,7 +853,7 @@ export class Overlays extends EventTarget {
     element.style.left = `${leftEdgePixel}px`;
     element.style.width = `${rangeWidth}px`;
 
-    if (!(elementSections?.length)) {
+    if (elementSections.length === 0) {
       return;
     }
 
@@ -867,30 +873,38 @@ export class Overlays extends EventTarget {
     }
 
     // Handle vertical positioning based on the entry's vertical position.
-    if (overlay.entry) {
+    if (overlay.entry && (overlay.renderLocation === 'BELOW_EVENT' || overlay.renderLocation === 'ABOVE_EVENT')) {
+      // Max height for the overlay box when attached to an entry.
+      const MAX_BOX_HEIGHT = 50;
+      element.style.maxHeight = `${MAX_BOX_HEIGHT}px`;
+
       const y = this.yPixelForEventOnChart(overlay.entry);
       if (y === null) {
         return;
       }
+      const eventHeight = this.pixelHeightForEventOnChart(overlay.entry);
+      if (eventHeight === null) {
+        return;
+      }
 
-      // Max height for the overlay box.
-      const MAX_BOX_HEIGHT = 50;
-      // Some padding so the box hovers just on top.
-      const PADDING = 7;
-
-      // Where the timespan breakdown should sit. Slightly on top of the entry.
-      const bottom = y - PADDING;
+      if (overlay.renderLocation === 'BELOW_EVENT') {
+        const top = y + eventHeight;
+        element.style.top = `${top}px`;
+      } else {
+        // Some padding so the box hovers just on top.
+        const PADDING = 7;
 
-      // Available space between the bottom of the overlay and top of the chart.
-      const minSpace = Math.max(bottom, 0);
-      // Contrain height to available space.
-      const height = Math.min(MAX_BOX_HEIGHT, minSpace);
+        // Where the timespan breakdown should sit. Slightly on top of the entry.
+        const bottom = y - PADDING;
 
-      elementSections[0].style.maxHeight = `${MAX_BOX_HEIGHT}px`;
-      elementSections[0].style.height = `${height}px`;
+        // Available space between the bottom of the overlay and top of the chart.
+        const minSpace = Math.max(bottom, 0);
+        // Contrain height to available space.
+        const height = Math.min(MAX_BOX_HEIGHT, minSpace);
 
-      const top = bottom - height;
-      element.style.top = `${top}px`;
+        const top = bottom - height;
+        element.style.top = `${top}px`;
+      }
     }
   }
 
@@ -930,13 +944,20 @@ export class Overlays extends EventTarget {
         return;
       }
 
+      const fromEntryParams = this.#positionEntryBorderOutlineType(entriesToConnect.entryFrom, entryFromWrapper);
+
+      if (!fromEntryParams) {
+        // Something went wrong, we should always have parameters for the 'from' entry
+        return;
+      }
+
       const {
         entryHeight: fromEntryHeight,
         entryWidth: fromEntryWidth,
         cutOffHeight: fromCutOffHeight = 0,
         x: fromEntryX,
         y: fromEntryY,
-      } = this.#positionEntryBorderOutlineType(entriesToConnect.entryFrom, entryFromWrapper) || {};
+      } = fromEntryParams;
 
       const entryFromVisibility = this.entryIsVisibleOnChart(entryFrom) && !fromEntryInCollapsedTrack;
       const entryToVisibility = entryTo ? this.entryIsVisibleOnChart(entryTo) && !toEntryInCollapsedTrack : false;
@@ -958,36 +979,38 @@ export class Overlays extends EventTarget {
         toEntryVisibility: entryToVisibility,
       };
 
-      if (fromEntryHeight && fromEntryWidth && fromEntryX && fromEntryY) {
-        component.fromEntryCoordinateAndDimentions =
-            {x: fromEntryX, y: yPixelForFromArrow, length: fromEntryWidth, height: fromEntryHeight - fromCutOffHeight};
-      }
+      component.fromEntryCoordinateAndDimentions =
+          {x: fromEntryX, y: yPixelForFromArrow, length: fromEntryWidth, height: fromEntryHeight - fromCutOffHeight};
 
-      const entryToWrapper = component.entryToWrapper();
       // If entryTo exists, pass the coordinates and dimentions of the entry that the arrow snaps to.
       // If it does not, the event tracking mouse coordinates updates 'to coordinates' so the arrow follows the mouse instead.
+      const entryToWrapper = component.entryToWrapper();
+
       if (entryTo && entryToWrapper) {
+        const toEntryParams = this.#positionEntryBorderOutlineType(entryTo, entryToWrapper);
+
+        if (!toEntryParams) {
+          // Something went wrong, we should have those parameters if 'to' entry exists
+          return;
+        }
         const {
           entryHeight: toEntryHeight,
           entryWidth: toEntryWidth,
           cutOffHeight: toCutOffHeight = 0,
           x: toEntryX,
           y: toEntryY,
-        } = this.#positionEntryBorderOutlineType(entryTo, entryToWrapper) || {};
-
-        if (toEntryHeight && toEntryX) {
-          // If the 'to' entry is visible, set the entry Y as an arrow coordinate to point ot. If not, get the canvas edge coordate to point the arrow to.
-          const yPixelForToArrow =
-              ((this.entryIsVisibleOnChart(entryTo)) ? toEntryY : this.#yCoordinateForNotVisibleEntry(entryTo)) ?? 0;
-
-          component.toEntryCoordinateAndDimentions = {
-            x: toEntryX,
-            y: yPixelForToArrow,
-            length: toEntryWidth,
-            height: toEntryHeight - toCutOffHeight,
-          };
-        }
+        } = toEntryParams;
+
+        // If the 'to' entry is visible, set the entry Y as an arrow coordinate to point to. If not, get the canvas edge coordate to point the arrow to.
+        const yPixelForToArrow =
+            this.entryIsVisibleOnChart(entryTo) ? toEntryY : this.#yCoordinateForNotVisibleEntry(entryTo) ?? 0;
 
+        component.toEntryCoordinateAndDimentions = {
+          x: toEntryX,
+          y: yPixelForToArrow,
+          length: toEntryWidth,
+          height: toEntryHeight - toCutOffHeight,
+        };
       } else if (this.#lastMouseOffsetX && this.#lastMouseOffsetY) {
         // The second coordinate for in progress link gets updated on mousemove
         this.#entriesLinkInProgress = overlay;
@@ -1037,7 +1060,7 @@ export class Overlays extends EventTarget {
       }
 
       // The event is off the bottom of the network chart. In this case return the bottom of the network chart.
-      if (y > this.#dimensions.charts.network.heightPixels ?? 0) {
+      if (y > this.#dimensions.charts.network.heightPixels) {
         return this.#dimensions.charts.network.heightPixels;
       }
     }
@@ -1084,7 +1107,7 @@ export class Overlays extends EventTarget {
     const {entryHeight, entryWidth, cutOffHeight = 0, x, y} =
         this.#positionEntryBorderOutlineType(overlay.entry, entryWrapper) || {};
 
-    if (!entryHeight || !entryWidth || !x || !y) {
+    if (!entryHeight || !entryWidth || x === null || !y) {
       return null;
     }
 
@@ -1182,8 +1205,10 @@ export class Overlays extends EventTarget {
     const chartName = chartForEntry(entry);
     let x = this.xPixelForEventStartOnChart(entry);
     let y = this.yPixelForEventOnChart(entry);
+    const chartWidth = (chartName === 'main') ? this.#dimensions.charts.main?.widthPixels :
+                                                this.#dimensions.charts.network?.widthPixels;
 
-    if (x === null || y === null) {
+    if (x === null || y === null || !chartWidth) {
       return null;
     }
 
@@ -1217,6 +1242,21 @@ export class Overlays extends EventTarget {
       widthPixels = customPos.width;
     }
 
+    // Calculate the visible overlay width by substracting the entry width that is outside of the flamechart width
+    const cutOffRight = (x + widthPixels > chartWidth) ? (x + widthPixels) - chartWidth : null;
+    const cutOffLeft = (x < 0) ? Math.abs(x) : null;
+    element.classList.toggle('cut-off-right', cutOffRight !== null);
+
+    if (cutOffRight) {
+      widthPixels = widthPixels - cutOffRight;
+    }
+
+    if (cutOffLeft) {
+      // If the entry is cut off from the left, move its beginning to the left most part of the flamechart
+      x = 0;
+      widthPixels = widthPixels - cutOffLeft;
+    }
+
     // The entry selected overlay is always at least 2px wide.
     const finalWidth = Math.max(2, widthPixels);
     element.style.width = `${finalWidth}px`;
@@ -1384,6 +1424,7 @@ export class Overlays extends EventTarget {
         const component = new Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay();
         component.sections = overlay.sections;
         component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
+        component.isBelowEntry = overlay.renderLocation === 'BELOW_EVENT';
         div.appendChild(component);
         return div;
       }
@@ -1394,20 +1435,21 @@ export class Overlays extends EventTarget {
   }
 
   /**
-   * Some of the HTML elements for overlays might need updating between each render
-   * (for example, if a time range has changed, we update its duration text)
+   * Some overlays store data in their components that needs to be updated
+   * before we position an overlay. Else, we might position an overlay based on
+   * stale data. This method is used to update an overlay BEFORE it is then
+   * positioned onto the canvas. It is the right place to ensure an overlay has
+   * the latest data it needs.
    */
-  #updateOverlayElementAfterPositioning(overlay: TimelineOverlay, element: HTMLElement): void {
+  #updateOverlayBeforePositioning(overlay: TimelineOverlay, element: HTMLElement): void {
     switch (overlay.type) {
       case 'ENTRY_SELECTED':
-        // Nothing to do here.
         break;
       case 'TIME_RANGE': {
         const component = element.querySelector('devtools-time-range-overlay');
         if (component) {
           component.duration = overlay.showDuration ? overlay.bounds.range : null;
           component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
-          component.updateLabelPositioning();
         }
         break;
       }
@@ -1425,12 +1467,44 @@ export class Overlays extends EventTarget {
         if (component) {
           component.sections = overlay.sections;
           component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
-          component.checkSectionLabelPositioning();
         }
         break;
       }
       case 'CURSOR_TIMESTAMP_MARKER':
-        // No contents within this that need updating.
+        break;
+      case 'CANDY_STRIPED_TIME_RANGE':
+        break;
+      default:
+        Platform.TypeScriptUtilities.assertNever(overlay, `Unexpected overlay ${overlay}`);
+    }
+  }
+  /**
+   * Some overlays have custom logic within them to manage visibility of
+   * labels/etc that can be impacted if the positioning or size of the overlay
+   * has changed. This method can be used to run code after an overlay has
+   * been updated + repositioned on the timeline.
+   */
+  #updateOverlayAfterPositioning(overlay: TimelineOverlay, element: HTMLElement): void {
+    switch (overlay.type) {
+      case 'ENTRY_SELECTED':
+        break;
+      case 'TIME_RANGE': {
+        const component = element.querySelector('devtools-time-range-overlay');
+        component?.updateLabelPositioning();
+        break;
+      }
+      case 'ENTRY_LABEL':
+        break;
+      case 'ENTRY_OUTLINE':
+        break;
+      case 'ENTRIES_LINK':
+        break;
+      case 'TIMESPAN_BREAKDOWN': {
+        const component = element.querySelector('devtools-timespan-breakdown-overlay');
+        component?.checkSectionLabelPositioning();
+        break;
+      }
+      case 'CURSOR_TIMESTAMP_MARKER':
         break;
       case 'CANDY_STRIPED_TIME_RANGE':
         break;
@@ -1540,7 +1614,7 @@ export class Overlays extends EventTarget {
         return false;
       }
 
-      if (y > this.#dimensions.charts.network.heightPixels ?? 0) {
+      if (y > this.#dimensions.charts.network.heightPixels) {
         // The event is off the bottom of the network chart.
         return false;
       }

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

@@ -1,13 +1,13 @@
-
 // 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 '../../../../ui/components/icon_button/icon_button.js';
+
 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 * 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';
 
 const UIStrings = {
   /**
@@ -20,18 +20,18 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 import styles from './entriesLinkOverlay.css.js';
 
+const {html} = LitHtml;
+
 export class EntryLinkStartCreating extends Event {
   static readonly eventName = 'entrylinkstartcreating';
 
   constructor() {
-    super(EntryLinkStartCreating.eventName);
+    super(EntryLinkStartCreating.eventName, {bubbles: true, composed: true});
   }
 }
 
 export class EntriesLinkOverlay extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-entries-link-overlay`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #boundRender = this.#render.bind(this);
   #coordinateFrom: {x: number, y: number};
   #fromEntryDimentions: {width: number, height: number};
   #coordinateTo: {x: number, y: number};
@@ -84,7 +84,7 @@ export class EntriesLinkOverlay extends HTMLElement {
       return;
     }
     this.#canvasRect = rect;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+    this.#render();
   }
 
   entryFromWrapper(): HTMLElement|null {
@@ -160,6 +160,8 @@ export class EntriesLinkOverlay extends HTMLElement {
     }
 
     if (this.#linkState === Trace.Types.File.EntriesLinkState.CREATION_NOT_STARTED) {
+      this.#entryFromConnector.setAttribute('visibility', 'hidden');
+      this.#entryToConnector.setAttribute('visibility', 'hidden');
       return;
     }
 
@@ -234,7 +236,6 @@ export class EntriesLinkOverlay extends HTMLElement {
     }
 
     this.#render();
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   /*
@@ -306,7 +307,7 @@ export class EntriesLinkOverlay extends HTMLElement {
     const arrowColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
     // clang-format off
     LitHtml.render(
-        LitHtml.html`
+        html`
           <svg class="connectorContainer" width="100%" height="100%" role="region" aria-label=${i18nString(UIStrings.diagram)}>
             <defs>
               <linearGradient
@@ -357,11 +358,12 @@ export class EntriesLinkOverlay extends HTMLElement {
           <div class="entry-wrapper from-highlight-wrapper ${this.#fromEntryIsSource ? '' : 'entry-is-not-source'}"></div>
           <div class="entry-wrapper to-highlight-wrapper ${this.#toEntryIsSource ? '' : 'entry-is-not-source'}"></div>
           <div class="create-link-box ${this.#linkState ? 'visible' : 'hidden'}">
-            <${IconButton.Icon.Icon.litTagName}
+            <devtools-icon
               class='create-link-icon'
+              jslog=${VisualLogging.action('timeline.annotations.create-entry-link').track({click: true})}
               @click=${this.#startCreatingConnection}
               name='arrow-right-circle'>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
           </div>
         `,
         this.#shadow, {host: this});

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