chrome-devtools-frontend 1.0.1604514 → 1.0.1605219

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -169,6 +169,10 @@ const HIGHLIGHTABLE_PROPERTIES = [
   {mode: 'flexibility', properties: ['flex', 'flex-basis', 'flex-grow', 'flex-shrink']},
 ];
 
+const DISCLAIMER_TOOLTIP_ID = 'styles-ai-code-completion-disclaimer-tooltip';
+const SPINNER_TOOLTIP_ID = 'styles-ai-code-completion-spinner-tooltip';
+const CITATIONS_TOOLTIP_ID = 'styles-ai-code-completion-citations-tooltip';
+
 export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof ElementsSidebarPane>(
     ElementsSidebarPane) implements StylesContainer {
   private matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
@@ -214,6 +218,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #updateAbortController?: AbortController;
   #updateComputedStylesAbortController?: AbortController;
 
+  aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
+  aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
+  #aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
+  #aiCodeCompletionSummaryToolbar?: PanelsCommon.AiCodeCompletionSummaryToolbar;
+
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true});
     this.setMinimumSize(96, 26);
@@ -259,6 +268,26 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         this.#scheduleResetUpdateIfNotEditing();
       }
     });
+
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
+      this.aiCodeCompletionConfig = {
+        completionContext: {},
+        generationContext: {},
+        onFeatureEnabled: () => {
+          this.#createAiCodeCompletionSummaryToolbar();
+        },
+        onFeatureDisabled: () => {
+          this.#cleanupAiCodeCompletion();
+        },
+        onSuggestionAccepted: this.#onAiCodeCompletionSuggestionAccepted.bind(this),
+        onRequestTriggered: this.#onAiCodeCompletionRequestTriggered.bind(this),
+        onResponseReceived: this.#onAiCodeCompletionResponseReceived.bind(this),
+        panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+      };
+      this.aiCodeCompletionProvider =
+          StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
+    }
   }
 
   get webCustomData(): WebCustomData|undefined {
@@ -1528,6 +1557,45 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     return button;
   }
+
+  #cleanupAiCodeCompletion(): void {
+    this.#aiCodeCompletionSummaryToolbarContainer?.remove();
+    this.#aiCodeCompletionSummaryToolbarContainer = undefined;
+    this.#aiCodeCompletionSummaryToolbar = undefined;
+  }
+
+  #createAiCodeCompletionSummaryToolbar(): void {
+    if (this.#aiCodeCompletionSummaryToolbar) {
+      return;
+    }
+    this.#aiCodeCompletionSummaryToolbar = new PanelsCommon.AiCodeCompletionSummaryToolbar({
+      citationsTooltipId: CITATIONS_TOOLTIP_ID,
+      disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
+      spinnerTooltipId: SPINNER_TOOLTIP_ID,
+      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
+    });
+    const containingPane = this.contentElement.enclosingNodeOrSelfWithClass('style-panes-wrapper') as HTMLElement;
+    this.#aiCodeCompletionSummaryToolbarContainer =
+        containingPane.createChild('div', 'ai-code-completion-summary-toolbar-container');
+    this.#aiCodeCompletionSummaryToolbarContainer.role = 'toolbar';
+    this.#aiCodeCompletionSummaryToolbar.show(this.#aiCodeCompletionSummaryToolbarContainer, undefined, true);
+  }
+
+  #onAiCodeCompletionSuggestionAccepted(citations: Host.AidaClient.Citation[]): void {
+    if (!this.#aiCodeCompletionSummaryToolbar || citations.length === 0) {
+      return;
+    }
+    const citationsUri = citations.map(citation => citation.uri).filter((uri): uri is string => Boolean(uri));
+    this.#aiCodeCompletionSummaryToolbar.updateCitations(citationsUri);
+  }
+
+  #onAiCodeCompletionRequestTriggered(): void {
+    this.#aiCodeCompletionSummaryToolbar?.setLoading(true);
+  }
+
+  #onAiCodeCompletionResponseReceived(): void {
+    this.#aiCodeCompletionSummaryToolbar?.setLoading(false);
+  }
 }
 
 export const enum Events {
@@ -1757,8 +1825,9 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
   private treeElement: StylePropertyTreeElement;
   private isEditingName: boolean;
   private readonly cssVariables: string[];
-  aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   aiCodeCompletionProvider?: StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider;
+  private activeAiSuggestionInfo?:
+      {citations: Host.AidaClient.Citation[], rpcGlobalId?: Host.AidaClient.RpcGlobalId, sampleId?: number};
 
   #debouncedTriggerAiCodeCompletion = Common.Debouncer.debounce(() => {
     void this.triggerAiCodeCompletion();
@@ -1822,25 +1891,13 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       }
     }
 
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
-      this.aiCodeCompletionConfig = {
-        completionContext: {},
-        generationContext: {},
-        onFeatureEnabled: () => {},
-        onFeatureDisabled: () => {},
-        onSuggestionAccepted: () => {},
-        onRequestTriggered: () => {},
-        onResponseReceived: () => {},
-        panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES,
-        getCompletionHint: this.getCompletionHint.bind(this),
-        getCurrentText: () => {
-          return this.text();
-        },
-        setAiAutoCompletion: this.setAiAutoCompletion.bind(this),
-      };
-      this.aiCodeCompletionProvider =
-          StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
+    const stylesContainer = this.treeElement.stylesContainer();
+    if (stylesContainer instanceof StylesSidebarPane) {
+      this.aiCodeCompletionProvider = stylesContainer.aiCodeCompletionProvider;
+      if (this.aiCodeCompletionProvider) {
+        this.aiCodeCompletionProvider.getCompletionHint = this.getCompletionHint.bind(this);
+        this.aiCodeCompletionProvider.setAiAutoCompletion = this.setAiAutoCompletion.bind(this);
+      }
     }
   }
 
@@ -2192,11 +2249,13 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     startTime: number,
     onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void,
     clearCachedRequest: () => void,
+    citations: Host.AidaClient.Citation[],
     rpcGlobalId?: Host.AidaClient.RpcGlobalId,
     sampleId?: number,
   }|null): void {
     if (!args) {
       this.treeElement.section().activeAiSuggestion = undefined;
+      this.activeAiSuggestionInfo = undefined;
       return;
     }
 
@@ -2207,6 +2266,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       clearCachedRequest: args.clearCachedRequest,
       cssProperty: this.treeElement.property,
     };
+    this.activeAiSuggestionInfo = {citations: args.citations, rpcGlobalId: args.rpcGlobalId, sampleId: args.sampleId};
     const latency = performance.now() - args.startTime;
     if (args.rpcGlobalId) {
       args.onImpression(args.rpcGlobalId, latency, args.sampleId);
@@ -2305,6 +2365,11 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
 
   async commitAiSuggestion(): Promise<void> {
     await this.treeElement.section().commitActiveAiSuggestion();
+    if (this.activeAiSuggestionInfo) {
+      this.aiCodeCompletionProvider?.onSuggestionAccepted(
+          this.activeAiSuggestionInfo.citations, this.activeAiSuggestionInfo.rpcGlobalId,
+          this.activeAiSuggestionInfo.sampleId);
+    }
     // Clear state and return
     this.setAiAutoCompletion(null);
   }

package/front_end/panels/elements/elementsPanel.css

@@ -47,6 +47,20 @@
     border-bottom: 1px solid var(--sys-color-divider);
 }
 
+.style-panes-wrapper > div:has(+ .ai-code-completion-summary-toolbar-container) {
+  border-bottom: 0;
+}
+
+.style-panes-wrapper .ai-code-completion-summary-toolbar-container {
+  container-type: inline-size;
+  flex-shrink: 0;
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+  background-color: var(--sys-color-cdt-base-container);
+  width: 100%;
+}
+
 #elements-content:not(.elements-wrap) > div {
   display: inline-block;
   min-width: 100%;

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -236,13 +236,13 @@ export class NetworkLogViewColumns {
     const title = columnConfig.title instanceof Function ? columnConfig.title() : columnConfig.title;
     return {
       id: columnConfig.id,
-      title,
+      title: title as Common.UIString.LocalizedString,
       sortable: columnConfig.sortable,
       align: columnConfig.align,
       nonSelectable: columnConfig.nonSelectable,
       weight: columnConfig.weight,
       allowInSortByEvenWhenHidden: columnConfig.allowInSortByEvenWhenHidden,
-    } as DataGrid.DataGrid.ColumnDescriptor;
+    };
   }
 
   wasShown(): void {
@@ -1251,7 +1251,7 @@ export interface Descriptor {
   hideableGroup: string|null;
   nonSelectable: boolean;
   sortable: boolean;
-  align?: string|null;
+  align?: DataGrid.DataGrid.Align|null;
   isResponseHeader: boolean;
   isRequestHeader: boolean;
   sortingFunction: (arg0: NetworkNode, arg1: NetworkNode) => number | undefined;

package/front_end/panels/recorder/components/recordingView.css

@@ -27,7 +27,6 @@
 
   .sections {
     min-height: 0;
-    overflow: hidden;
     background-color: var(--sys-color-cdt-base-container);
     z-index: 0;
     position: relative;
@@ -357,11 +356,6 @@
     border-bottom: 1px solid var(--sys-color-divider);
   }
 
-  .show-code {
-    margin-right: 14px;
-    margin-top: 8px;
-  }
-
   devtools-recorder-extension-view {
     flex: 1;
   }

package/front_end/panels/sensors/SensorsView.ts

@@ -333,13 +333,15 @@ export class SensorsView extends UI.Widget.VBox {
             <input
               id="latitude-input"
               type="number"
+              min="-90"
+              max="90"
               step="any"
+              required
               .value=${String(location.latitude)}
               name="latitude"
               title=${modifierKeyMessage}
               jslog=${VisualLogging.textField('latitude').track({change: true})}
               ${Directives.ref((el: Element | undefined) => { if (el) { this.latitudeInput = el as HTMLInputElement; } })}
-              @input=${this.#onLocationInput.bind(this)}
               @change=${this.#onLocationChange.bind(this)}
               @keydown=${this.#onLocationKeyDown.bind(this)}
               @focus=${this.#onLocationFocus.bind(this)}
@@ -351,13 +353,15 @@ export class SensorsView extends UI.Widget.VBox {
             <input
               id="longitude-input"
               type="number"
+              min="-180"
+              max="180"
               step="any"
+              required
               .value=${String(location.longitude)}
               name="longitude"
               title=${modifierKeyMessage}
               jslog=${VisualLogging.textField('longitude').track({change: true})}
               ${Directives.ref((el: Element | undefined) => { if (el) { this.longitudeInput = el as HTMLInputElement; } })}
-              @input=${this.#onLocationInput.bind(this)}
               @change=${this.#onLocationChange.bind(this)}
               @keydown=${this.#onLocationKeyDown.bind(this)}
               @focus=${this.#onLocationFocus.bind(this)}
@@ -368,11 +372,11 @@ export class SensorsView extends UI.Widget.VBox {
             <input
               id="timezone-input"
               type="text"
+              pattern=".*[a-zA-Z].*"
               .value=${location.timezoneId}
               name="timezone"
               jslog=${VisualLogging.textField('timezone').track({change: true})}
               ${Directives.ref((el: Element | undefined) => { if (el) { this.timezoneInput = el as HTMLInputElement; } })}
-              @input=${this.#onLocationInput.bind(this)}
               @change=${this.#onLocationChange.bind(this)}
               @keydown=${this.#onLocationKeyDown.bind(this)}
               @focus=${this.#onLocationFocus.bind(this)}
@@ -384,11 +388,11 @@ export class SensorsView extends UI.Widget.VBox {
             <input
               id="locale-input"
               type="text"
+              pattern=".*[a-zA-Z]{2}.*"
               .value=${location.locale}
               name="locale"
               jslog=${VisualLogging.textField('locale').track({change: true})}
               ${Directives.ref((el: Element | undefined) => { if (el) { this.localeInput = el as HTMLInputElement; } })}
-              @input=${this.#onLocationInput.bind(this)}
               @change=${this.#onLocationChange.bind(this)}
               @keydown=${this.#onLocationKeyDown.bind(this)}
               @focus=${this.#onLocationFocus.bind(this)}
@@ -401,12 +405,12 @@ export class SensorsView extends UI.Widget.VBox {
             <input
               id="accuracy-input"
               type="number"
+              min="0"
               step="any"
               .value=${String(location.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY)}
               name="accuracy"
               jslog=${VisualLogging.textField('accuracy').track({change: true})}
               ${Directives.ref((el: Element | undefined) => { if (el) { this.accuracyInput = el as HTMLInputElement; } })}
-              @input=${this.#onLocationInput.bind(this)}
               @change=${this.#onLocationChange.bind(this)}
               @keydown=${this.#onLocationKeyDown.bind(this)}
               @focus=${this.#onLocationFocus.bind(this)}
@@ -448,12 +452,11 @@ export class SensorsView extends UI.Widget.VBox {
       this.#location = new SDK.EmulationModel.Location(
           coordinates.lat, coordinates.long, coordinates.timezoneId, coordinates.locale,
           coordinates.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY, false);
-      this.#setInputValue(this.latitudeInput, coordinates.lat);
-      this.#setInputValue(this.longitudeInput, coordinates.long);
-      this.#setInputValue(this.timezoneInput, coordinates.timezoneId);
-      this.#setInputValue(this.localeInput, coordinates.locale);
-      this.#setInputValue(
-          this.accuracyInput, String(coordinates.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY));
+      this.latitudeInput.value = coordinates.lat;
+      this.longitudeInput.value = coordinates.long;
+      this.timezoneInput.value = coordinates.timezoneId;
+      this.localeInput.value = coordinates.locale;
+      this.accuracyInput.value = String(coordinates.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY);
     }
 
     this.applyLocation();
@@ -462,17 +465,9 @@ export class SensorsView extends UI.Widget.VBox {
     }
   }
 
-  #onLocationInput(event: Event): void {
-    const input = event.currentTarget as HTMLInputElement;
-    const valid = this.#validateInput(input, input.value);
-    input.classList.toggle('error-input', !valid);
-  }
-
   #onLocationChange(event: Event): void {
     const input = event.currentTarget as HTMLInputElement;
-    const valid = this.#validateInput(input, input.value);
-    input.classList.toggle('error-input', !valid);
-    if (valid) {
+    if (input.checkValidity()) {
       this.applyLocationUserInput();
     }
   }
@@ -480,8 +475,7 @@ export class SensorsView extends UI.Widget.VBox {
   #onLocationKeyDown(event: KeyboardEvent): void {
     const input = event.currentTarget as HTMLInputElement;
     if (event.key === 'Enter') {
-      const valid = this.#validateInput(input, input.value);
-      if (valid) {
+      if (input.checkValidity()) {
         this.applyLocationUserInput();
       }
       event.preventDefault();
@@ -498,10 +492,13 @@ export class SensorsView extends UI.Widget.VBox {
     if (value === null) {
       return;
     }
-    const stringValue = String(value);
-    const valid = this.#validateInput(input, stringValue);
-    if (valid) {
-      this.#setInputValue(input, stringValue);
+    const prevValue = input.value;
+    input.value = String(value);
+    if (input.checkValidity()) {
+      this.applyLocationUserInput();
+    } else {
+      // If ArrowUp/ArrowDown adjusts the value out of bounds, we reset it.
+      input.value = prevValue;
     }
     event.preventDefault();
   }
@@ -511,34 +508,6 @@ export class SensorsView extends UI.Widget.VBox {
     input.select();
   }
 
-  #validateInput(input: HTMLInputElement, value: string): boolean {
-    if (input === this.latitudeInput) {
-      return SDK.EmulationModel.Location.latitudeValidator(value);
-    }
-    if (input === this.longitudeInput) {
-      return SDK.EmulationModel.Location.longitudeValidator(value);
-    }
-    if (input === this.timezoneInput) {
-      return SDK.EmulationModel.Location.timezoneIdValidator(value);
-    }
-    if (input === this.localeInput) {
-      return SDK.EmulationModel.Location.localeValidator(value);
-    }
-    if (input === this.accuracyInput) {
-      return SDK.EmulationModel.Location.accuracyValidator(value).valid;
-    }
-    return false;
-  }
-
-  #setInputValue(input: HTMLInputElement, value: string): void {
-    if (value === input.value) {
-      return;
-    }
-    const valid = this.#validateInput(input, value);
-    input.classList.toggle('error-input', !valid);
-    input.value = value;
-  }
-
   private applyLocationUserInput(): void {
     const location = SDK.EmulationModel.Location.parseUserInput(
         this.latitudeInput.value.trim(), this.longitudeInput.value.trim(), this.timezoneInput.value.trim(),
@@ -582,11 +551,11 @@ export class SensorsView extends UI.Widget.VBox {
   }
 
   private clearFieldsetElementInputs(): void {
-    this.#setInputValue(this.latitudeInput, '0');
-    this.#setInputValue(this.longitudeInput, '0');
-    this.#setInputValue(this.timezoneInput, '');
-    this.#setInputValue(this.localeInput, '');
-    this.#setInputValue(this.accuracyInput, SDK.EmulationModel.Location.DEFAULT_ACCURACY.toString());
+    this.latitudeInput.value = '0';
+    this.longitudeInput.value = '0';
+    this.timezoneInput.value = '';
+    this.localeInput.value = '';
+    this.accuracyInput.value = SDK.EmulationModel.Location.DEFAULT_ACCURACY.toString();
   }
 
   private createDeviceOrientationSection(): void {

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -51,8 +51,8 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     return [...super.filters(), ...this.filtersControl.filters()];
   }
 
-  override updateContents(selection: TimelineSelection): void {
-    super.updateContents(selection);
+  override set activeSelection(selection: TimelineSelection) {
+    super.activeSelection = selection;
     if (selectionIsEvent(selection)) {
       this.selectEvent(selection.event, true);
     }

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -6,7 +6,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import thirdPartyTreeViewStyles from './thirdPartyTreeView.css.js';
@@ -39,8 +38,12 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
   // want to do this when the user hovers.
   protected override autoSelectFirstChildOnRefresh = false;
 
-  constructor() {
-    super();
+  #onRowHovered?: (node: Trace.Extras.TraceTree.Node|null, events?: Trace.Types.Events.Event[]) => void;
+  #onBottomUpButtonClicked?: (node: Trace.Extras.TraceTree.Node|null) => void;
+  #onRowClicked?: (node: Trace.Extras.TraceTree.Node|null, events?: Trace.Types.Events.Event[]) => void;
+
+  constructor(element?: HTMLElement) {
+    super(element);
     this.element.setAttribute('jslog', `${VisualLogging.pane('third-party-tree').track({hover: true})}`);
     this.init();
     this.dataGrid.markColumnAsSortedBy('self', DataGrid.DataGrid.Order.Descending);
@@ -61,12 +64,14 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     this.registerRequiredCSS(thirdPartyTreeViewStyles);
   }
 
-  override setModelWithEvents(
-      selectedEvents: Trace.Types.Events.Event[]|null, parsedTrace?: Trace.TraceModel.ParsedTrace|null,
-      entityMappings?: Trace.EntityMapper.EntityMapper|null): void {
-    super.setModelWithEvents(selectedEvents, parsedTrace, entityMappings);
+  override set model(model: {
+    selectedEvents: Trace.Types.Events.Event[]|null,
+    parsedTrace: Trace.TraceModel.ParsedTrace|null,
+    entityMapper: Trace.EntityMapper.EntityMapper|null,
+  }) {
+    super.model = model;
 
-    const hasEvents = Boolean(selectedEvents && selectedEvents.length > 0);
+    const hasEvents = Boolean(model.selectedEvents && model.selectedEvents.length > 0);
     this.element.classList.toggle('empty-table', !hasEvents);
   }
 
@@ -252,42 +257,36 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     const entity = mapper.entityForEvent(node.event);
     return Boolean(entity) && entity?.category === 'Chrome Extension';
   }
-}
-
-export class ThirdPartyTreeElement extends UI.Widget.WidgetElement<UI.Widget.Widget> {
-  #treeView?: ThirdPartyTreeViewWidget;
-
-  static readonly observedAttributes = ['max-rows'];
-
-  set treeView(treeView: ThirdPartyTreeViewWidget) {
-    this.#treeView = treeView;
-  }
 
-  constructor() {
-    super();
-    this.style.display = 'contents';
+  set maxRows(maxRows: number) {
+    this.element.style.setProperty('--max-rows', String(maxRows));
+    this.element.classList.toggle('has-max-rows', Boolean(maxRows));
   }
 
-  attributeChangedCallback(name: string, _oldValue: string|null, newValue: string|null): void {
-    if (name === 'max-rows' && newValue) {
-      this.style.setProperty('--max-rows', newValue);
+  set onRowHovered(callback: (node: Trace.Extras.TraceTree.Node|null, events?: Trace.Types.Events.Event[]) => void) {
+    if (!this.#onRowHovered) {
+      this.addEventListener(TimelineTreeView.TimelineTreeView.Events.TREE_ROW_HOVERED, ({data}) => {
+        this.#onRowHovered?.(data.node, data.events);
+      });
     }
+    this.#onRowHovered = callback;
   }
 
-  override createWidget(): UI.Widget.Widget {
-    const containerWidget = new UI.Widget.Widget(this);
-    containerWidget.contentElement.style.display = 'contents';
-    if (this.#treeView) {
-      this.#treeView.show(containerWidget.contentElement);
+  set onBottomUpButtonClicked(callback: (node: Trace.Extras.TraceTree.Node|null) => void) {
+    if (!this.#onBottomUpButtonClicked) {
+      this.addEventListener(TimelineTreeView.TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, ({data}) => {
+        this.#onBottomUpButtonClicked?.(data);
+      });
     }
-    return containerWidget;
+    this.#onBottomUpButtonClicked = callback;
   }
-}
 
-customElements.define('devtools-performance-third-party-tree-view', ThirdPartyTreeElement);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-third-party-tree-view': ThirdPartyTreeElement;
+  set onRowClicked(callback: (node: Trace.Extras.TraceTree.Node|null, events?: Trace.Types.Events.Event[]) => void) {
+    if (!this.#onRowClicked) {
+      this.addEventListener(TimelineTreeView.TimelineTreeView.Events.TREE_ROW_CLICKED, ({data}) => {
+        this.#onRowClicked?.(data.node, data.events);
+      });
+    }
+    this.#onRowClicked = callback;
   }
 }