chrome-devtools-frontend 1.0.1603822 → 1.0.1605219

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -91,7 +91,6 @@ export class TimelineDetailsPane extends
   #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
-  #thirdPartyTree = new ThirdPartyTreeViewWidget();
   #entityMapper: Trace.EntityMapper.EntityMapper|null = null;
 
   constructor(delegate: TimelineModeViewDelegate) {
@@ -148,20 +147,18 @@ export class TimelineDetailsPane extends
             node => this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, {node: node.data}));
       }
     });
-    this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
-      // Re-dispatch through 3P event to get 3P dimmer.
-      this.dispatchEventToListeners(
-          TimelineTreeView.Events.TREE_ROW_HOVERED, {node: node.data.node, events: node.data.events});
-    });
 
-    this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, node => {
-      this.selectTab(Tab.BottomUp, node.data, AggregatedTimelineTreeView.GroupBy.ThirdParties);
-    });
-    this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.TREE_ROW_CLICKED, node => {
+    this.#summaryContent.onTreeRowHovered = (node, events) => {
       // Re-dispatch through 3P event to get 3P dimmer.
-      this.dispatchEventToListeners(
-          TimelineTreeView.Events.TREE_ROW_CLICKED, {node: node.data.node, events: node.data.events});
-    });
+      this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_HOVERED, {node, events});
+    };
+    this.#summaryContent.onBottomUpButtonClicked = node => {
+      this.selectTab(Tab.BottomUp, node, AggregatedTimelineTreeView.GroupBy.ThirdParties);
+    };
+    this.#summaryContent.onTreeRowClicked = (node, events) => {
+      // Re-dispatch through 3P event to get 3P dimmer.
+      this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_CLICKED, {node, events});
+    };
 
     this.tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, this.tabSelected, this);
 
@@ -294,10 +291,12 @@ export class TimelineDetailsPane extends
     this.#summaryContent.entityMapper = this.#entityMapper;
     this.tabbedPane.closeTabs([Tab.PaintProfiler, Tab.LayerViewer], false);
     for (const view of this.rangeDetailViews.values()) {
-      view.setModelWithEvents(data.selectedEvents, data.parsedTrace, data.entityMapper);
+      view.model = {
+        selectedEvents: data.selectedEvents,
+        parsedTrace: data.parsedTrace,
+        entityMapper: data.entityMapper
+      };
     }
-    // Set the 3p tree model.
-    this.#thirdPartyTree.setModelWithEvents(data.selectedEvents, data.parsedTrace, data.entityMapper);
     this.#summaryContent.requestUpdate();
     this.lazyPaintProfilerView = null;
     this.lazyLayersView = null;
@@ -329,7 +328,7 @@ export class TimelineDetailsPane extends
     // Update the view that we currently have selected.
     const view = this.rangeDetailViews.get(this.tabbedPane.selectedTabId || '');
     if (view) {
-      view.updateContents(this.selection || selectionFromRangeMilliSeconds(visibleWindow.min, visibleWindow.max));
+      view.activeSelection = this.selection || selectionFromRangeMilliSeconds(visibleWindow.min, visibleWindow.max);
     }
   }
 
@@ -544,21 +543,12 @@ export class TimelineDetailsPane extends
     this.#summaryContent.selectedEvent = null;
     this.#summaryContent.selectedRange = {
       events: this.#selectedEvents,
-      thirdPartyTree: this.#thirdPartyTree,
       startTime,
       endTime,
+      selection: this.selection ?? null,
     };
 
-    // This is a bit of a hack as we are midway through migrating this to
-    // the new UI Eng vision.
-    // The 3P tree view will only bother to update its DOM if it has a
-    // parentElement, so we trigger the rendering of the summary content
-    // (so the 3P Tree View is attached to the DOM) and then we tell it to
-    // update.
-    // This will be fixed once we migrate this component fully to the new vision (b/407751379)
-    void this.updateSummaryPane().then(() => {
-      this.#thirdPartyTree.updateContents(this.selection || selectionFromRangeMilliSeconds(startTime, endTime));
-    });
+    void this.updateSummaryPane();
 
     // Find all recalculate style events data from range
     const isSelectorStatsEnabled =
@@ -592,7 +582,7 @@ interface SelectedRange {
   startTime: Trace.Types.Timing.Milli;
   endTime: Trace.Types.Timing.Milli;
   events: Trace.Types.Events.Event[];
-  thirdPartyTree: ThirdPartyTreeViewWidget;
+  selection: TimelineSelection|null;
 }
 
 interface SummaryViewInput {
@@ -604,6 +594,9 @@ interface SummaryViewInput {
   linkifier: Components.Linkifier.Linkifier|null;
   filmStrip: Trace.Extras.FilmStrip.Data|null;
   selectedRange: SelectedRange|null;
+  onTreeRowHovered: (_node: Trace.Extras.TraceTree.Node|null, _events?: Trace.Types.Events.Event[]) => void;
+  onBottomUpButtonClicked: (_node: Trace.Extras.TraceTree.Node|null) => void;
+  onTreeRowClicked: (_node: Trace.Extras.TraceTree.Node|null, _events?: Trace.Types.Events.Event[]) => void;
 }
 
 type View = (input: SummaryViewInput, output: object, target: HTMLElement) => void;
@@ -634,6 +627,9 @@ class SummaryView extends UI.Widget.Widget {
   linkifier: Components.Linkifier.Linkifier|null = null;
   filmStrip: Trace.Extras.FilmStrip.Data|null = null;
   selectedRange: SelectedRange|null = null;
+  onTreeRowHovered = (_node: Trace.Extras.TraceTree.Node|null, _events?: Trace.Types.Events.Event[]): void => {};
+  onBottomUpButtonClicked = (_node: Trace.Extras.TraceTree.Node|null): void => {};
+  onTreeRowClicked = (_node: Trace.Extras.TraceTree.Node|null, _events?: Trace.Types.Events.Event[]): void => {};
 
   constructor(element?: HTMLElement, view = SUMMARY_DEFAULT_VIEW) {
     super(element);
@@ -651,6 +647,9 @@ class SummaryView extends UI.Widget.Widget {
           linkifier: this.linkifier,
           filmStrip: this.filmStrip,
           selectedRange: this.selectedRange,
+          onTreeRowHovered: this.onTreeRowHovered,
+          onBottomUpButtonClicked: this.onBottomUpButtonClicked,
+          onTreeRowClicked: this.onTreeRowClicked,
         },
         {}, this.contentElement);
   }
@@ -658,19 +657,26 @@ class SummaryView extends UI.Widget.Widget {
 
 function generateRangeSummaryDetails(input: SummaryViewInput): LitTemplate {
   // clang-format off
-  return html`
-    <devtools-widget
-      ${widget(TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryView, {
-        data: {
+  return html`${widget(TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryView, {
+    data: {
+      parsedTrace: input.parsedTrace,
+      events: input.selectedRange?.events,
+      startTime: input.selectedRange?.startTime,
+      endTime: input.selectedRange?.endTime,
+      thirdPartyTreeTemplate:  input.selectedRange ? html`${widget(ThirdPartyTreeViewWidget, {
+        model: {
           parsedTrace: input.parsedTrace,
-          events: input.selectedRange?.events,
-          startTime: input.selectedRange?.startTime,
-          endTime: input.selectedRange?.endTime,
-          thirdPartyTreeTemplate: input.selectedRange?.thirdPartyTree ? html`<devtools-performance-third-party-tree-view
-            .treeView=${input.selectedRange?.thirdPartyTree}></devtools-performance-third-party-tree-view>` : nothing,
-        } as TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryViewData,
-      })}
-    ></devtools-widget>`;
+          entityMapper: input.entityMapper,
+          selectedEvents: input.selectedRange.events ?? null,
+        },
+        activeSelection: input.selectedRange.selection ||
+            selectionFromRangeMilliSeconds(input.selectedRange.startTime, input.selectedRange.endTime),
+        onRowHovered: input.onTreeRowHovered,
+        onBottomUpButtonClicked: input.onBottomUpButtonClicked,
+        onRowClicked: input.onTreeRowClicked,
+        })}` : nothing,
+    } as TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryViewData,
+  })}`;
   // clang-format on
 }
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -54,7 +54,6 @@ import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -2463,8 +2462,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       return;
     }
 
-    const liveMetrics = new TimelineComponents.LiveMetricsView.LiveMetricsView();
-    this.landingPage = LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget, liveMetrics);
+    this.landingPage = new TimelineComponents.LiveMetricsView.LiveMetricsView();
     this.landingPage.element.classList.add('timeline-landing-page', 'fill');
     this.landingPage.contentElement.classList.add('fill');
     this.landingPage.show(this.statusPaneContainer);

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -204,8 +204,8 @@ export class TimelineTreeView extends
    */
   protected autoSelectFirstChildOnRefresh = true;
 
-  constructor() {
-    super();
+  constructor(element?: HTMLElement) {
+    super(element);
     this.#selectedEvents = null;
     this.element.classList.add('timeline-tree-view');
     this.registerRequiredCSS(timelineTreeViewStyles);
@@ -225,14 +225,14 @@ export class TimelineTreeView extends
     this.searchableView = searchableView;
   }
 
-  setModelWithEvents(
-      selectedEvents: Trace.Types.Events.Event[]|null,
-      parsedTrace: Trace.TraceModel.ParsedTrace|null = null,
-      entityMappings: Trace.EntityMapper.EntityMapper|null = null,
-      ): void {
-    this.#parsedTrace = parsedTrace;
-    this.#selectedEvents = selectedEvents;
-    this.#entityMapper = entityMappings;
+  set model(model: {
+    selectedEvents: Trace.Types.Events.Event[]|null,
+    parsedTrace: Trace.TraceModel.ParsedTrace|null,
+    entityMapper: Trace.EntityMapper.EntityMapper|null,
+  }) {
+    this.#parsedTrace = model.parsedTrace;
+    this.#selectedEvents = model.selectedEvents;
+    this.#entityMapper = model.entityMapper;
     this.refreshTree();
   }
 
@@ -303,7 +303,7 @@ export class TimelineTreeView extends
     return this.lastSelectedNodeInternal;
   }
 
-  updateContents(selection: TimelineSelection): void {
+  set activeSelection(selection: TimelineSelection) {
     const timings = rangeForSelection(selection);
     const timingMilli = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds(timings);
     this.setRange(timingMilli.min, timingMilli.max);
@@ -971,8 +971,8 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     this.groupBySetting.set(groupBy);
   }
 
-  override updateContents(selection: TimelineSelection): void {
-    super.updateContents(selection);
+  override set activeSelection(selection: TimelineSelection) {
+    super.activeSelection = selection;
     const rootNode = this.dataGrid.rootNode();
     if (rootNode.children.length) {
       rootNode.children[0].select(/* suppressSelectedEvent */ true);