chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/ui/legacy/components/data_grid/DataGridWithPreview.ts

@@ -50,10 +50,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 interface Callbacks {
   // Called to refresh items, e.g when the sorting order is changed.
   refreshItems: () => void;
-  // Called when a key is deleted in the UI.
-  removeItem: (key: string) => void;
-  // Called when an item is created or updated in the UI.
-  setItem: (key: string, value: string) => void;
+  // Edit callbacks. If undefined, the data grid is not editable.
+  edit?: {
+    // Called when a key is deleted in the UI.
+    removeItem: (key: string) => void,
+    // Called when an item is created or updated in the UI.
+    setItem: (key: string, value: string) => void,
+  };
   // Called when the selection state changes.
   setCanDeleteSelected: (canSelect: boolean) => void;
   // Called to create the preview widget when a new item is selected.
@@ -86,9 +89,12 @@ export class DataGridWithPreview {
     this.#dataGrid = new DataGridImpl({
       displayName: this.#messages.title,
       columns,
-      editCallback: this.#editingCallback.bind(this),
-      deleteCallback: this.#deleteCallback.bind(this),
       refreshCallback: this.#callbacks.refreshItems,
+      ...(this.#callbacks.edit ? {
+        editCallback: this.#editingCallback.bind(this),
+        deleteCallback: this.#deleteCallback.bind(this),
+      } :
+                                 {}),
     });
     this.#dataGrid.addEventListener(Events.SELECTED_NODE, event => {
       void this.#previewEntry(event.data);
@@ -188,6 +194,7 @@ export class DataGridWithPreview {
         continue;
       }
       selectedKey = node.data.key;
+      void this.#previewEntry(node);
       break;
     }
     rootNode.removeChildren();
@@ -226,12 +233,12 @@ export class DataGridWithPreview {
       void {
     if (columnIdentifier === 'key') {
       if (typeof oldText === 'string') {
-        this.#callbacks.removeItem(oldText);
+        this.#callbacks.edit?.removeItem(oldText);
       }
-      this.#callbacks.setItem(newText, editingNode.data.value || '');
+      this.#callbacks.edit?.setItem(newText, editingNode.data.value || '');
       this.#removeDupes(editingNode);
     } else {
-      this.#callbacks.setItem(editingNode.data.key || '', newText);
+      this.#callbacks.edit?.setItem(editingNode.data.key || '', newText);
     }
   }
 
@@ -251,7 +258,7 @@ export class DataGridWithPreview {
       return;
     }
 
-    this.#callbacks.removeItem(node.data.key);
+    this.#callbacks.edit?.removeItem(node.data.key);
 
     ARIAUtils.alert(this.#messages.itemDeleted);
   }
@@ -283,4 +290,8 @@ export class DataGridWithPreview {
       this.showPreview(null, value);
     }
   }
+
+  detach(): void {
+    this.#splitWidget.detach();
+  }
 }

package/front_end/ui/legacy/components/inline_editor/AnimationTimingUI.ts

@@ -6,7 +6,7 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
-import {type AnimationTimingModel} from './AnimationTimingModel.js';
+import type {AnimationTimingModel} from './AnimationTimingModel.js';
 import {BezierUI} from './BezierUI.js';
 import {CSSLinearEasingModel, type Point} from './CSSLinearEasingModel.js';
 

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -2,11 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './CSSAngleSwatch.js';
+import './CSSAngleEditor.js';
+
 import * as LitHtml from '../../../lit-html/lit-html.js';
 
 import cssAngleStyles from './cssAngle.css.js';
-import {CSSAngleEditor, type CSSAngleEditorData} from './CSSAngleEditor.js';
-import {CSSAngleSwatch, type CSSAngleSwatchData} from './CSSAngleSwatch.js';
+import type {CSSAngleEditorData} from './CSSAngleEditor.js';
+import type {CSSAngleSwatchData} from './CSSAngleSwatch.js';
 import {
   type Angle,
   AngleUnit,
@@ -116,7 +119,7 @@ export class CSSAngle extends HTMLElement {
     if (miniIconBottom && miniIconLeft) {
       // We offset mini icon's X and Y positions with the containing styles
       // pane's positions because DevTools' root SplitWidget's
-      // insertion-point-sidebar slot, where most of the DevTools content lives,
+      // sidebar slot, where most of the DevTools content lives,
       // has an offset of positions, which makes all of its children's DOMRect
       // positions to have this offset.
       const offsetTop = this.containingPane.getBoundingClientRect().top;
@@ -227,14 +230,14 @@ export class CSSAngle extends HTMLElement {
     render(html`
       <div class="css-angle" @focusout=${this.minify} @keydown=${this.onKeydown} tabindex="-1">
         <div class="preview">
-          <${CSSAngleSwatch.litTagName}
+          <devtools-css-angle-swatch
             @click=${this.onMiniIconClick}
             @mousedown=${this.consume}
             @dblclick=${this.consume}
             .data=${{
               angle: this.angle,
             } as CSSAngleSwatchData}>
-          </${CSSAngleSwatch.litTagName}><slot></slot></div>
+          </devtools-css-angle-swatch><slot></slot></div>
         ${this.popoverOpen ? this.renderPopover() : null}
       </div>
     `, this.shadow, {
@@ -252,7 +255,7 @@ export class CSSAngle extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-    <${CSSAngleEditor.litTagName}
+    <devtools-css-angle-editor
       class="popover popover-css-angle"
       style=${styleMap({top: this.popoverStyleTop, left: this.popoverStyleLeft})}
       .data=${{
@@ -262,7 +265,7 @@ export class CSSAngle extends HTMLElement {
         },
         background: contextualBackground,
       } as CSSAngleEditorData}
-    ></${CSSAngleEditor.litTagName}>
+    ></devtools-css-angle-editor>
     `;
     // clang-format on
   }

package/front_end/ui/legacy/components/inline_editor/ColorMixSwatch.ts

@@ -9,6 +9,8 @@ import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 
 import colorMixSwatchStyles from './colorMixSwatch.css.js';
 
+const {html} = LitHtml;
+
 export const enum Events {
   COLOR_CHANGED = 'colorChanged',
 }
@@ -95,7 +97,7 @@ export class ColorMixSwatch extends Common.ObjectWrapper.eventMixin<EventTypes,
     // Note also that whitespace between nodes is removed on purpose to avoid pushing these elements apart. Do not
     // re-format the HTML code.
     LitHtml.render(
-      LitHtml.html`<div class="swatch-icon" jslog=${VisualLogging.cssColorMix()} style="--color: ${this.colorMixText}">
+      html`<div class="swatch-icon" jslog=${VisualLogging.cssColorMix()} style="--color: ${this.colorMixText}">
         <span class="swatch swatch-left" id="swatch-1" style="--color: ${this.firstColorText}"></span>
         <span class="swatch swatch-right" id="swatch-2" style="--color: ${this.secondColorText}"></span>
         <span class="swatch swatch-mix" id="mix-result" style="--color: ${this.colorMixText}"></span>

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.ts

@@ -10,6 +10,8 @@ import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 
 import colorSwatchStyles from './colorSwatch.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Icon element title in Color Swatch of the inline editor in the Styles tab
@@ -106,7 +108,7 @@ export class ColorSwatch extends HTMLElement {
     // Note also that whitespace between nodes is removed on purpose to avoid pushing these elements apart. Do not
     // re-format the HTML code.
     LitHtml.render(
-      LitHtml.html`<span class=${colorSwatchClasses} title=${this.tooltip}><span class="color-swatch-inner"
+      html`<span class=${colorSwatchClasses} title=${this.tooltip}><span class="color-swatch-inner"
         style="background-color: ${this.getText()};"
         jslog=${VisualLogging.showStyleEditor('color').track({click: true})}
         @click=${this.onClick}

package/front_end/ui/legacy/components/inline_editor/LinkSwatch.ts

@@ -19,7 +19,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/inline_editor/LinkSwatch.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html, Directives} = LitHtml;
+const {render, html, Directives: {ifDefined, classMap}} = LitHtml;
 
 interface BaseLinkSwatchRenderData {
   text: string;
@@ -59,7 +59,7 @@ class BaseLinkSwatch extends HTMLElement {
 
   private render(data: BaseLinkSwatchRenderData): void {
     const {isDefined, text, title} = data;
-    const classes = Directives.classMap({
+    const classes = classMap({
       'link-style': true,
       'text-button': true,
       'link-swatch-link': true,
@@ -71,10 +71,10 @@ class BaseLinkSwatch extends HTMLElement {
     // We added var popover, so don't need the title attribute when no need for showing title and
     // only provide the data-title for the popover to get the data.
     const {startNode} = render(
-        html`<button .disabled=${!isDefined} class=${classes} title=${
-            LitHtml.Directives.ifDefined(data.showTitle ? title : null)} data-title=${
-            LitHtml.Directives.ifDefined(
-                !data.showTitle ? title : null)} @click=${onActivate} role="link" tabindex="-1">${text}</button>`,
+        html`<button .disabled=${!isDefined} class=${classes}
+                     title=${ifDefined(data.showTitle ? title : undefined)}
+                     data-title=${ifDefined(!data.showTitle ? title : undefined)}
+                     @click=${onActivate} role="link" tabindex="-1">${text}</button>`,
         this.shadow, {host: this});
     if (startNode?.nextSibling instanceof HTMLButtonElement) {
       this.#linkElement = startNode?.nextSibling;
@@ -161,13 +161,13 @@ export class LinkSwatch extends HTMLElement {
     const {text, isDefined, onLinkActivate, jslogContext} = data;
     const title = isDefined ? text : i18nString(UIStrings.sIsNotDefined, {PH1: text});
     render(
-        html`<span title=${data.text} jslog=${VisualLogging.link().track({click: true}).context(jslogContext)}><${
-            BaseLinkSwatch.litTagName} .data=${{
+        html`<span title=${data.text} jslog=${
+            VisualLogging.link().track({click: true}).context(jslogContext)}><devtools-base-link-swatch .data=${{
           text,
           isDefined,
           title,
           onLinkActivate,
-        } as BaseLinkSwatchRenderData}></${BaseLinkSwatch.litTagName}></span>`,
+        } as BaseLinkSwatchRenderData}></devtools-base-link-swatch></span>`,
         this.shadow, {host: this});
   }
 }

package/front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -8,9 +8,11 @@ import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import bezierSwatchStyles from './bezierSwatch.css.js';
-import {type CSSShadowModel} from './CSSShadowEditor.js';
+import type {CSSShadowModel} from './CSSShadowEditor.js';
 import cssShadowSwatchStyles from './cssShadowSwatch.css.js';
 
+const {html} = LitHtml;
+
 export class BezierSwatch extends HTMLSpanElement {
   private readonly iconElementInternal: IconButton.Icon.Icon;
   private textElement: HTMLElement;
@@ -71,9 +73,8 @@ export class CSSShadowSwatch extends HTMLElement {
     ];
 
     LitHtml.render(
-        LitHtml.html`<${IconButton.Icon.Icon.litTagName} name="shadow" class="shadow-swatch-icon"></${
-            IconButton.Icon.Icon.litTagName}><slot></slot>`,
-        this.#shadow, {host: this});
+        html`<devtools-icon name="shadow" class="shadow-swatch-icon"></devtools-icon><slot></slot>`, this.#shadow,
+        {host: this});
 
     this.#icon = this.#shadow.querySelector(IconButton.Icon.Icon.litTagName.value as string) as IconButton.Icon.Icon;
   }

package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -6,7 +6,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as WindowBounds from '../../../../services/window_bounds/window_bounds.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
-import {type FlameChart} from './FlameChart.js';
+import type {FlameChart} from './FlameChart.js';
 
 const UIStrings = {
   /**
@@ -108,7 +108,7 @@ const colorPallettes: ColorPalette[] = [
   },
 ];
 
-/* eslint-disable rulesdir/check_component_naming, rulesdir/no_underscored_properties, rulesdir/ban_style_tags_in_lit_html, rulesdir/ban_a_tags_in_lit_html, rulesdir/lit_html_host_this */
+/* rulesdir/no_underscored_properties, rulesdir/ban_style_tags_in_lit_html, rulesdir/ban_a_tags_in_lit_html, rulesdir/lit_html_host_this */
 export class BrickBreaker extends HTMLElement {
   #canvas: HTMLCanvasElement;
   #ctx: CanvasRenderingContext2D;

package/front_end/ui/legacy/components/perf_ui/FilmStripView.test.ts

@@ -44,7 +44,7 @@ describeWithEnvironment('FilmStripView', function() {
     // data. And that the time label is as expected.
     renderedFrames.forEach((frame, index) => {
       const img = querySelectorErrorOnMissing<HTMLImageElement>(frame, 'img');
-      assert.isTrue(img.src.includes(parsedTrace.Screenshots[index].args.dataUri));
+      assert.isTrue(img.src.includes(parsedTrace.Screenshots.all[index].args.dataUri));
 
       const timeElement = querySelectorErrorOnMissing<HTMLDivElement>(frame, '.time');
       // Remove whitespace to avoid having to compare with &nbsp; in the
@@ -77,7 +77,7 @@ describeWithEnvironment('FilmStripView', function() {
       const filmStrip = Trace.Extras.FilmStrip.fromParsedTrace(parsedTrace);
       const {dialog, shadowRoot} = await renderDialogWithTrace(filmStrip, 0);
       const renderedImage = shadowRoot.querySelector<HTMLImageElement>('[data-film-strip-dialog-img]');
-      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots[0].args.dataUri));
+      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots.all[0].args.dataUri));
       dialog.hide();
     });
 
@@ -93,7 +93,7 @@ describeWithEnvironment('FilmStripView', function() {
       dispatchClickEvent(previousBtn);
       await raf();
       const renderedImage = shadowRoot.querySelector<HTMLImageElement>('[data-film-strip-dialog-img]');
-      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots[0].args.dataUri));
+      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots.all[0].args.dataUri));
       dialog.hide();
     });
 
@@ -109,7 +109,7 @@ describeWithEnvironment('FilmStripView', function() {
       dispatchClickEvent(previousBtn);
       await raf();
       const renderedImage = shadowRoot.querySelector<HTMLImageElement>('[data-film-strip-dialog-img]');
-      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots[0].args.dataUri));
+      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots.all[0].args.dataUri));
       dialog.hide();
     });
 
@@ -126,7 +126,7 @@ describeWithEnvironment('FilmStripView', function() {
         bubbles: true,
       });
       await raf();
-      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots[0].args.dataUri));
+      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots.all[0].args.dataUri));
       dialog.hide();
     });
 
@@ -143,7 +143,7 @@ describeWithEnvironment('FilmStripView', function() {
       dispatchClickEvent(nextBtn);
       await raf();
       const renderedImage = shadowRoot.querySelector<HTMLImageElement>('[data-film-strip-dialog-img]');
-      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots[1].args.dataUri));
+      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots.all[1].args.dataUri));
       dialog.hide();
     });
 
@@ -154,7 +154,7 @@ describeWithEnvironment('FilmStripView', function() {
       const {dialog, shadowRoot} = await renderDialogWithTrace(filmStrip, numberOfFrames - 1);
 
       let renderedImage = shadowRoot.querySelector<HTMLImageElement>('[data-film-strip-dialog-img]');
-      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots[numberOfFrames - 1].args.dataUri));
+      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots.all[numberOfFrames - 1].args.dataUri));
 
       const nextBtn = shadowRoot.querySelectorAll('devtools-button')[1];
       assert.isTrue(nextBtn.textContent === '▶' || nextBtn.textContent === '&#9654;');
@@ -164,7 +164,7 @@ describeWithEnvironment('FilmStripView', function() {
       dispatchClickEvent(nextBtn);
       await raf();
       renderedImage = shadowRoot.querySelector<HTMLImageElement>('[data-film-strip-dialog-img]');
-      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots[numberOfFrames - 1].args.dataUri));
+      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots.all[numberOfFrames - 1].args.dataUri));
       dialog.hide();
     });
 
@@ -181,7 +181,7 @@ describeWithEnvironment('FilmStripView', function() {
         bubbles: true,
       });
       await raf();
-      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots[1].args.dataUri));
+      assert.isTrue(renderedImage?.currentSrc.includes(parsedTrace.Screenshots.all[1].args.dataUri));
       dialog.hide();
     });
   });

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -34,6 +34,7 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as Root from '../../../../core/root/root.js';
 import type * as TimelineModel from '../../../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as Buttons from '../../../components/buttons/buttons.js';
 import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
@@ -84,6 +85,10 @@ const UIStrings = {
    *@description Text for an action that adds link annotation between entries in the Flame Chart
    */
   linkEntries: 'Link entries',
+  /**
+   *@description Text for an action that removes all annotations associated with an entry
+   */
+  deleteAnnotations: 'Delete annotations',
   /**
    *@description Shown in the context menu when right clicking on a track header to enable the user to enter the track configuration mode.
    */
@@ -162,13 +167,15 @@ export const enum HoverType {
   ERROR = 'ERROR',
 }
 
-export class FlameChartDelegate {
-  windowChanged(_startTime: number, _endTime: number, _animate: boolean): void {
-  }
-  updateRangeSelection(_startTime: number, _endTime: number): void {
-  }
-  updateSelectedGroup(_flameChart: FlameChart, _group: Group|null): void {
-  }
+export interface FlameChartDelegate {
+  windowChanged(_startTime: number, _endTime: number, _animate: boolean): void;
+  updateRangeSelection(_startTime: number, _endTime: number): void;
+  updateSelectedGroup(_flameChart: FlameChart, _group: Group|null): void;
+  /**
+   * Returns the element that the FlameChart has been rendered into. Used to
+   * provide element references for attaching to Visual Element logs.
+   */
+  containingElement?: () => HTMLElement;
 }
 
 interface GroupExpansionState {
@@ -844,7 +851,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       mouseX = coordinate?.x ? coordinate.x - canvasViewportOffsetX : mouseX;
       mouseY = coordinate?.y ? coordinate.y - canvasViewportOffsetY : mouseY;
     }
-
+    // The parent dimensions are the maximum the popover can use.
     const parentWidth = this.popoverElement.parentElement ? this.popoverElement.parentElement.clientWidth : 0;
     const parentHeight = this.popoverElement.parentElement ? this.popoverElement.parentElement.clientHeight : 0;
     const infoWidth = this.popoverElement.clientWidth;
@@ -881,8 +888,15 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
      */
     if (this.highlightedEntryIndex !== -1) {
       this.#selectGroup(groupIndex);
+
       this.dispatchEventToListeners(
           Events.ENTRY_LABEL_ANNOTATION_ADDED, {entryIndex: this.highlightedEntryIndex, withLinkCreationButton: true});
+
+      // Log the double click on the TimelineFlameChartView for VE logs.
+      const flameChartView = this.flameChartDelegate.containingElement?.();
+      if (flameChartView) {
+        VisualLogging.logClick(flameChartView, mouseEvent, {doubleClick: true});
+      }
     }
   }
 
@@ -1300,6 +1314,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       const labelEntryAnnotationOption = annotationSection.appendItem(i18nString(UIStrings.labelEntry), () => {
         this.dispatchEventToListeners(
             Events.ENTRY_LABEL_ANNOTATION_ADDED, {entryIndex: this.selectedEntryIndex, withLinkCreationButton: false});
+      }, {
+        jslogContext: 'timeline.annotations.create-entry-label',
       });
 
       labelEntryAnnotationOption.setShortcut('Double Click');
@@ -1307,8 +1323,17 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       const linkEntriesAnnotationOption = annotationSection.appendItem(i18nString(UIStrings.linkEntries), () => {
         this.dispatchEventToListeners(
             Events.ENTRIES_LINK_ANNOTATION_CREATED, {entryFromIndex: this.selectedEntryIndex});
+      }, {
+        jslogContext: 'timeline.annotations.create-entries-link',
       });
       linkEntriesAnnotationOption.setShortcut('Double Click');
+
+      annotationSection.appendItem(i18nString(UIStrings.deleteAnnotations), () => {
+        this.dataProvider.deleteAnnotationsForEntry?.(this.selectedEntryIndex);
+      }, {
+        disabled: !this.dataProvider.entryHasAnnotations?.(this.selectedEntryIndex),
+        jslogContext: 'timeline.annotations.delete-entry-annotations',
+      });
     }
 
     void this.contextMenu.show();
@@ -2687,7 +2712,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   #drawCustomSymbols(context: CanvasRenderingContext2D, timelineData: FlameChartTimelineData): void {
-    const {entryStartTimes, entryLevels} = timelineData;
+    const {entryStartTimes, entryTotalTimes, entryLevels} = timelineData;
     this.customDrawnPositions.clear();
     context.save();
 
@@ -2695,12 +2720,17 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const posArray = [];
     for (const [entryIndex, drawOverride] of this.#indexToDrawOverride.entries()) {
       const entryStartTime = entryStartTimes[entryIndex];
+      const entryTotalTime = entryTotalTimes[entryIndex];
       const level = entryLevels[entryIndex];
-      const x = this.timeToPositionClipped(entryStartTime);
+
+      const unclippedXStart = this.chartViewport.timeToPosition(entryStartTime);
+      const unclippedXEnd = this.chartViewport.timeToPosition(entryStartTime + entryTotalTime);
+
+      const x = unclippedXStart;
       const y = this.levelToOffset(level);
       const height = this.levelHeight(level);
-      const width = this.#eventBarWidth(timelineData, entryIndex);
-      const pos = drawOverride(context, x, y, width, height, time => this.timeToPositionClipped(time));
+      const width = unclippedXEnd - unclippedXStart;
+      const pos = drawOverride(context, x, y, width, height, time => this.chartViewport.timeToPosition(time));
       posArray.push({entryIndex, pos});
     }
     // Place in z order so coordinatesToEntryIndex finds the highest z-index match first.
@@ -3994,7 +4024,7 @@ export interface FlameChartDataProvider {
   hasTrackConfigurationMode(): boolean;
 
   // The following functions are optional and are used in Performance panel.
-  eventByIndex?(entryIndex: number): Trace.Types.Events.Event|Trace.Handlers.ModelHandlers.Frames.TimelineFrame|null;
+  eventByIndex?(entryIndex: number): Trace.Types.Events.Event|null;
 
   indexForEvent?(event: Trace.Types.Events.Event|Trace.Types.Events.LegacyTimelineFrame): number|null;
 
@@ -4010,6 +4040,12 @@ export interface FlameChartDataProvider {
   // The following three functions are used for the flame chart entry customization.
   modifyTree?(action: FilterAction, entryIndex: number): void;
 
+  getTraceEntryTreeForAIFromEntryIndex?(entryIndex: number): Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null;
+
+  entryHasAnnotations?(entryIndex: number): boolean;
+
+  deleteAnnotationsForEntry?(entryIndex: number): void;
+
   findPossibleContextMenuActions?(node: number): PossibleFilterActions|void;
 
   handleFlameChartTransformKeyboardEvent?(event: KeyboardEvent, entryIndex: number, groupIndex: number): void;

package/front_end/ui/legacy/components/perf_ui/PieChart.ts

@@ -125,6 +125,7 @@ export class PieChart extends HTMLElement {
           </div>
         </div>
         ` : ''}
+      </div>
     `;
     // clang-format on
     render(output, this.shadow, {host: this});

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator.ts

@@ -4,7 +4,7 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Trace from '../../../../models/trace/trace.js';
 
-import {type Calculator} from './TimelineGrid.js';
+import type {Calculator} from './TimelineGrid.js';
 
 export class TimelineOverviewCalculator implements Calculator {
   #minimumBoundary: Trace.Types.Timing.MilliSeconds = Trace.Types.Timing.MilliSeconds(0);

package/front_end/ui/legacy/inspectorCommon.css

@@ -407,7 +407,6 @@ input::placeholder {
   background-image: var(--image-file-arrow-drop-down-dark);
 }
 
-/* stylelint-disable no-descending-specificity */
 .chrome-select:enabled {
   &:hover {
     background-color: var(--sys-color-state-hover-on-subtle);

package/front_end/ui/legacy/themeColors.css

@@ -387,6 +387,11 @@
   * Color for scrollable area shadow gradient
   */
   --app-color-scroll-area-shadow-start: color-mix(in sRGB, var(--ref-palette-neutral0) 30%, transparent);
+
+  /**
+   * Colors for element panel sidebar subtitle
+   */
+  --app-color-element-sidebar-subtitle: var(--ref-palette-neutral50);
 }
 
 :root.baseline-default {
@@ -761,4 +766,9 @@
   * Color for scrollable area shadow gradient
   */
   --app-color-scroll-area-shadow-start: color-mix(in sRGB, var(--ref-palette-neutral100) 30%, transparent);
+
+  /**
+   * Colors for element panel sidebar subtitle
+   */
+  --app-color-element-sidebar-subtitle: var(--sys-color-token-subtle);
 }

package/front_end/ui/legacy/toolbar.css

@@ -163,6 +163,10 @@ select.toolbar-item:disabled + .toolbar-dropdown-arrow {
     background-color: var(--sys-color-state-disabled-container);
     color: var(--sys-color-state-disabled);
   }
+
+  &:first-child {
+    margin-left: var(--sys-size-2);
+  }
 }
 
 .toolbar-has-dropdown-shrinkable {

package/front_end/ui/legacy/treeoutline.css

@@ -172,8 +172,6 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
   padding: var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-3);
 }
 
-/* It does not look like the linter works with CSS nesting correctly. */
-/* stylelint-disable no-descending-specificity */
 .tree-outline.tree-variant-navigation li,
 .tree-outline.hide-selection-when-blurred.tree-variant-navigation li {
   height: var(--sys-size-10);
@@ -218,7 +216,6 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
     color: var(--app-color-navigation-drawer-label-selected);
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 ol.tree-outline.tree-variant-navigation:not(.hide-selection-when-blurred) li.selected:focus .selection {
   background-color: var(--app-color-navigation-drawer-background-selected);

package/front_end/ui/lit-html/static.test.ts

@@ -7,6 +7,8 @@ import * as i18nRaw from '../../third_party/i18n/i18n.js';
 
 import * as LitHtml from './lit-html.js';
 
+const {html} = LitHtml;
+
 const templateArray = (value: string[]) => {
   // We assume here it's okay to lose the `raw` value from the TemplateStringsArray
   // for the purposes of testing.
@@ -61,7 +63,7 @@ describe('Static', () => {
 
   describe('rendering', () => {
     it('renders non-statics', () => {
-      const tmpl = LitHtml.html`Hello, world ${123}!`;
+      const tmpl = html`Hello, world ${123}!`;
       const target = document.createElement('div');
       LitHtml.render(tmpl, target, {host: this});
 
@@ -70,7 +72,7 @@ describe('Static', () => {
 
     it('renders static tags', () => {
       const tag = LitHtml.literal`div`;
-      const tmpl = LitHtml.html`<${tag}>Hello, world!</${tag}>`;
+      const tmpl = html`<${tag}>Hello, world!</${tag}>`;
       const target = document.createElement('section');
       LitHtml.render(tmpl, target, {host: this});
 
@@ -81,7 +83,7 @@ describe('Static', () => {
     it('renders multiple', () => {
       const tag = LitHtml.literal`div`;
       const message = 'Hello, everyone!';
-      const tmpl = LitHtml.html`<${tag} .data={{x: 1}}>${1}${2}${3}, ${message}! ${'Static value'}!</${tag}>`;
+      const tmpl = html`<${tag} .data={{x: 1}}>${1}${2}${3}, ${message}! ${'Static value'}!</${tag}>`;
 
       const target = document.createElement('div');
       LitHtml.render(tmpl, target, {host: this});
@@ -94,7 +96,7 @@ describe('Static', () => {
       const tag1 = LitHtml.literal`div`;
       const tag2 = LitHtml.literal`p`;
       const tmpls = [tag1, tag2].map(tag => {
-        return LitHtml.html`<${tag}>I am ${tag.value}</${tag}>`;
+        return html`<${tag}>I am ${tag.value}</${tag}>`;
       });
 
       const target = document.createElement('div');
@@ -130,8 +132,7 @@ describe('Static', () => {
       const strings = i18nInstance.registerFileStrings('test.ts', uiStrings);
       setLocale('en-US');
 
-      const result =
-          LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: LitHtml.html`TEMPLATE`});
+      const result = LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: html`TEMPLATE`});
       const element = LitHtml.render(result, document.createElement('div'), {host: this});
       assert.deepStrictEqual(
           (element.parentNode as HTMLDivElement).innerText, 'a message with a STRING and TEMPLATE placeholder');
@@ -143,8 +144,7 @@ describe('Static', () => {
       const strings = i18nInstance.registerFileStrings('test.ts', uiStrings);
       setLocale('de');
 
-      const result =
-          LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: LitHtml.html`TEMPLATE`});
+      const result = LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: html`TEMPLATE`});
       const element = LitHtml.render(result, document.createElement('div'), {host: this});
       assert.deepStrictEqual(
           (element.parentNode as HTMLDivElement).innerText, 'a message with a TEMPLATE and STRING placeholder');

package/front_end/ui/visual_logging/Debugging.ts

@@ -4,7 +4,7 @@
 
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 
-import {type Loggable} from './Loggable.js';
+import type {Loggable} from './Loggable.js';
 import {type LoggingConfig, VisualElements} from './LoggingConfig.js';
 import {getLoggingState, type LoggingState} from './LoggingState.js';