UI Eng Vision: migrate Timeline.RelatedInsightChips

Fixed: 407941548
Change-Id: Ifad450e2fd55694481948f59706929a2c425e485
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6760831
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: jackfranklin

config/gni/devtools_grd_files.gni

@@ -1987,6 +1987,7 @@ grd_files_unbundled_sources = [
   "front_end/panels/timeline/overlays/components/timeRangeOverlay.css.js",
   "front_end/panels/timeline/overlays/components/timespanBreakdownOverlay.css.js",
   "front_end/panels/timeline/thirdPartyTreeView.css.js",
+  "front_end/panels/timeline/timelineDetailsView.css.js",
   "front_end/panels/timeline/timelineFlameChartView.css.js",
   "front_end/panels/timeline/timelineFlamechartPopover.css.js",
   "front_end/panels/timeline/timelineHistoryManager.css.js",

front_end/panels/timeline/BUILD.gn

@@ -41,6 +41,7 @@ devtools_pre_built("easter-egg") {
 generate_css("css_files") {
   sources = [
     "thirdPartyTreeView.css",
+    "timelineDetailsView.css",
     "timelineFlameChartView.css",
     "timelineFlamechartPopover.css",
     "timelineHistoryManager.css",

front_end/panels/timeline/TimelineDetailsView.test.ts

@@ -3,10 +3,11 @@
 // found in the LICENSE file.
 
 import * as Trace from '../../models/trace/trace.js';
-import {doubleRaf} from '../../testing/DOMHelpers.js';
+import {doubleRaf, raf, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
 
+import * as Components from './components/components.js';
 import * as Timeline from './timeline.js';
 
 class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegate {
@@ -28,6 +29,8 @@ describeWithEnvironment('TimelineDetailsView', function() {
     const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'lcp-web-font.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
 
+    renderElementIntoDOM(detailsView);
+
     const networkRequests = parsedTrace.NetworkRequests.byTime;
     const cssRequest = networkRequests.find(request => {
       return request.args.data.url === 'https://chromedevtools.github.io/performance-stories/lcp-web-font/app.css';
@@ -37,30 +40,32 @@ describeWithEnvironment('TimelineDetailsView', function() {
     }
     const selection = Timeline.TimelineSelection.selectionFromEvent(cssRequest);
 
+    // Set up a related insight to test the rendering of the chips
+    const relatedInsights: Components.RelatedInsightChips.EventToRelatedInsightsMap = new Map([
+      [cssRequest, [{insightLabel: 'Test insight', activateInsight: () => {}, messages: []}]],
+    ]);
+
     await detailsView.setModel({
       parsedTrace,
       selectedEvents: null,
       traceInsightsSets: insights,
-      eventToRelatedInsightsMap: null,
+      eventToRelatedInsightsMap: relatedInsights,
       entityMapper: null
     });
     await detailsView.setSelection(selection);
+    await raf();
 
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
-    assert.deepEqual(
-        Array.from(detailsContentElement.children).map(n => n.localName),
-        ['devtools-performance-network-request-details']);
-
-    const content = detailsContentElement.firstElementChild?.shadowRoot;
-    assert(content);
-    assert.lengthOf(content.querySelectorAll('div.network-request-details-row'), 9);
-    assert.lengthOf(content.querySelectorAll('div.network-request-details-item'), 2);
-    assert.lengthOf(content.querySelectorAll('devtools-related-insight-chips'), 1);
+    assert.instanceOf(
+        detailsContentElement.querySelector('devtools-performance-network-request-details'),
+        Components.NetworkRequestDetails.NetworkRequestDetails);
+    assert.instanceOf(detailsContentElement.querySelector('.insight-label'), HTMLElement);
   });
 
   it('displays the details for a frame correctly', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
+    renderElementIntoDOM(detailsView);
     await detailsView.setModel({
       parsedTrace,
       selectedEvents: null,
@@ -87,6 +92,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
   it('renders the layout shift component for a single layout shift', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
+    renderElementIntoDOM(detailsView);
     await detailsView.setModel({
       parsedTrace,
       selectedEvents: null,
@@ -109,6 +115,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
   it('renders the layout shift component for a selected cluster', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
+    renderElementIntoDOM(detailsView);
     await detailsView.setModel({
       parsedTrace,
       selectedEvents: null,
@@ -131,6 +138,7 @@ describeWithEnvironment('TimelineDetailsView', function() {
   it('updates the range details when the user has a range selected', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsPane(mockViewDelegate);
+    renderElementIntoDOM(detailsView);
     await detailsView.setModel({
       parsedTrace,
       // We have to set selected events for the range selection UI to be drawn
@@ -146,9 +154,11 @@ describeWithEnvironment('TimelineDetailsView', function() {
         bounds.max,
     );
     await detailsView.setSelection(selection);
+    await raf();
+
     const detailsContentElement = detailsView.getDetailsContentElementForTest();
     const component = detailsContentElement.querySelector<HTMLElement>('devtools-performance-timeline-summary');
     const range = component?.shadowRoot?.querySelector<HTMLElement>('.summary-range');
-    assert.strictEqual(range?.innerText, 'Range:  0 ms – 5.39 s');
+    assert.strictEqual(range?.innerText, 'Range: 0 ms – 5.39 s');
   });
 });

front_end/panels/timeline/TimelineDetailsView.ts

@@ -11,13 +11,15 @@ import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as TimelineComponents from './components/components.js';
 import {EventsTimelineTreeView} from './EventsTimelineTreeView.js';
 import {Tracker} from './FreshRecording.js';
 import {targetForEvent} from './TargetForEvent.js';
 import {ThirdPartyTreeViewWidget} from './ThirdPartyTreeView.js';
+import detailsViewStyles from './timelineDetailsView.css.js';
 import {TimelineLayersView} from './TimelineLayersView.js';
 import {TimelinePaintProfilerView} from './TimelinePaintProfilerView.js';
 import type {TimelineModeViewDelegate} from './TimelinePanel.js';
@@ -76,7 +78,7 @@ export class TimelineDetailsPane extends
   private readonly detailsLinkifier: Components.Linkifier.Linkifier;
   private tabbedPane: UI.TabbedPane.TabbedPane;
   private readonly defaultDetailsWidget: UI.Widget.VBox;
-  private defaultDetailsContentWidget: UI.Widget.VBox;
+  #summaryContent = new SummaryView();
   private rangeDetailViews: Map<string, TimelineTreeView>;
   #selectedEvents?: Trace.Types.Events.Event[]|null;
   private lazyPaintProfilerView?: TimelinePaintProfilerView|null;
@@ -87,18 +89,17 @@ export class TimelineDetailsPane extends
   private lazySelectorStatsView: TimelineSelectorStatsView|null;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null = null;
-
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #filmStrip: Trace.Extras.FilmStrip.Data|null = null;
   #networkRequestDetails: TimelineComponents.NetworkRequestDetails.NetworkRequestDetails;
   #layoutShiftDetails: TimelineComponents.LayoutShiftDetails.LayoutShiftDetails;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
-  #relatedInsightChips = new TimelineComponents.RelatedInsightChips.RelatedInsightChips();
   #thirdPartyTree = new ThirdPartyTreeViewWidget();
   #entityMapper: Utils.EntityMapper.EntityMapper|null = null;
 
   constructor(delegate: TimelineModeViewDelegate) {
     super();
+    this.registerRequiredCSS(detailsViewStyles);
     this.element.classList.add('timeline-details');
 
     this.detailsLinkifier = new Components.Linkifier.Linkifier();
@@ -112,7 +113,8 @@ export class TimelineDetailsPane extends
     this.defaultDetailsWidget = new UI.Widget.VBox();
     this.defaultDetailsWidget.element.classList.add('timeline-details-view');
     this.defaultDetailsWidget.element.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    this.defaultDetailsContentWidget = this.#createContentWidget();
+    this.#summaryContent.contentElement.classList.add('timeline-details-view-body');
+    this.#summaryContent.show(this.defaultDetailsWidget.contentElement);
     this.appendTab(Tab.Details, i18nString(UIStrings.summary), this.defaultDetailsWidget);
     this.setPreferredTab(Tab.Details);
 
@@ -237,13 +239,6 @@ export class TimelineDetailsPane extends
     }
   }
 
-  #createContentWidget(): UI.Widget.VBox {
-    const defaultDetailsContentWidget = new UI.Widget.VBox();
-    defaultDetailsContentWidget.element.classList.add('timeline-details-view-body');
-    defaultDetailsContentWidget.show(this.defaultDetailsWidget.element);
-    return defaultDetailsContentWidget;
-  }
-
   private selectorStatsView(): TimelineSelectorStatsView {
     if (this.lazySelectorStatsView) {
       return this.lazySelectorStatsView;
@@ -256,7 +251,7 @@ export class TimelineDetailsPane extends
   }
 
   getDetailsContentElementForTest(): HTMLElement {
-    return this.defaultDetailsContentWidget.element;
+    return this.#summaryContent.contentElement;
   }
 
   revealEventInTreeView(event: Trace.Types.Events.Event|null): void {
@@ -304,35 +299,30 @@ export class TimelineDetailsPane extends
     this.#selectedEvents = data.selectedEvents;
     this.#traceInsightsSets = data.traceInsightsSets;
     this.#eventToRelatedInsightsMap = data.eventToRelatedInsightsMap;
-    if (data.eventToRelatedInsightsMap) {
-      this.#relatedInsightChips.eventToRelatedInsightsMap = data.eventToRelatedInsightsMap;
-    }
+    this.#summaryContent.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
     this.tabbedPane.closeTabs([Tab.PaintProfiler, Tab.LayerViewer], false);
     for (const view of this.rangeDetailViews.values()) {
       view.setModelWithEvents(data.selectedEvents, data.parsedTrace, 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;
     await this.setSelection(null);
   }
 
-  private setSummaryContent(node: Node): void {
+  private async setSummaryContent(node: Node): Promise<void> {
     const allTabs = this.tabbedPane.otherTabs(Tab.Details);
     for (let i = 0; i < allTabs.length; ++i) {
       if (!this.rangeDetailViews.has(allTabs[i])) {
         this.tabbedPane.closeTab(allTabs[i]);
       }
     }
 
-    // Append relatedChips inside of the node being shown.
-    const chipParent = (node instanceof Element && node.shadowRoot || node);
-    chipParent.appendChild(this.#relatedInsightChips);
-
-    this.defaultDetailsContentWidget.detach();
-    this.defaultDetailsContentWidget = this.#createContentWidget();
-    this.defaultDetailsContentWidget.contentElement.append(node);
+    this.#summaryContent.node = node;
+    this.#summaryContent.requestUpdate();
+    await this.#summaryContent.updateComplete;
   }
 
   private updateContents(): void {
@@ -374,7 +364,7 @@ export class TimelineDetailsPane extends
    */
   private scheduleUpdateContentsFromWindow(forceImmediateUpdate = false): void {
     if (!this.#parsedTrace) {
-      this.setSummaryContent(UI.Fragment.html`<div/>`);
+      void this.setSummaryContent(UI.Fragment.html`<div/>`);
       return;
     }
     if (forceImmediateUpdate) {
@@ -423,7 +413,7 @@ export class TimelineDetailsPane extends
 
   #setSelectionForTimelineFrame(frame: Trace.Types.Events.LegacyTimelineFrame): void {
     const matchedFilmStripFrame = this.#getFilmStripFrame(frame);
-    this.setSummaryContent(
+    void this.setSummaryContent(
         TimelineUIUtils.generateDetailsContentForFrame(frame, this.#filmStrip, matchedFilmStripFrame));
     const target = SDK.TargetManager.TargetManager.instance().rootTarget();
     if (frame.layerTree && target) {
@@ -442,31 +432,27 @@ export class TimelineDetailsPane extends
     }
     const maybeTarget = targetForEvent(this.#parsedTrace, networkRequest);
     await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget, this.#entityMapper);
-    this.#relatedInsightChips.activeEvent = networkRequest;
-    if (this.#eventToRelatedInsightsMap) {
-      this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
-    }
 
-    this.setSummaryContent(this.#networkRequestDetails);
+    this.#summaryContent.selectedEvent = networkRequest;
+    this.#summaryContent.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    await this.setSummaryContent(this.#networkRequestDetails);
   }
 
   async #setSelectionForTraceEvent(event: Trace.Types.Events.Event): Promise<void> {
     if (!this.#parsedTrace) {
       return;
     }
 
-    this.#relatedInsightChips.activeEvent = event;
-    if (this.#eventToRelatedInsightsMap) {
-      this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
-    }
+    this.#summaryContent.selectedEvent = event;
+    this.#summaryContent.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    this.#summaryContent.requestUpdate();
 
     // Special case: if the user selects a layout shift or a layout shift cluster,
     // render the new layout shift details component.
     if (Trace.Types.Events.isSyntheticLayoutShift(event) || Trace.Types.Events.isSyntheticLayoutShiftCluster(event)) {
       const isFreshRecording = Boolean(this.#parsedTrace && Tracker.instance().recordingIsFresh(this.#parsedTrace));
       this.#layoutShiftDetails.setData(event, this.#traceInsightsSets, this.#parsedTrace, isFreshRecording);
-      this.setSummaryContent(this.#layoutShiftDetails);
-      return;
+      return await this.setSummaryContent(this.#layoutShiftDetails);
     }
 
     // Otherwise, build the generic trace event details UI.
@@ -482,8 +468,8 @@ export class TimelineDetailsPane extends
     }
     this.detailsLinkifier.reset();
     this.selection = selection;
-    this.#relatedInsightChips.activeEvent = null;
     if (!this.selection) {
+      this.#summaryContent.selectedEvent = null;
       // Update instantly using forceImmediateUpdate, since we are only
       // making a single call and don't need to debounce.
       this.scheduleUpdateContentsFromWindow(/* forceImmediateUpdate */ true);
@@ -563,7 +549,7 @@ export class TimelineDetailsPane extends
   }
 
   private appendDetailsTabsForTraceEventAndShowDetails(event: Trace.Types.Events.Event, content: Node): void {
-    this.setSummaryContent(content);
+    void this.setSummaryContent(content);
     if (Trace.Types.Events.isPaint(event) || Trace.Types.Events.isRasterTask(event)) {
       this.showEventInPaintProfiler(event);
     }
@@ -605,9 +591,16 @@ export class TimelineDetailsPane extends
     const summaryDetailElem = TimelineUIUtils.generateSummaryDetails(
         aggregatedStats, startOffset, endOffset, this.#selectedEvents, this.#thirdPartyTree);
 
-    this.#thirdPartyTree.updateContents(this.selection || selectionFromRangeMilliSeconds(startTime, endTime));
-
-    this.setSummaryContent(summaryDetailElem);
+    // 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.setSummaryContent(summaryDetailElem).then(() => {
+      this.#thirdPartyTree.updateContents(this.selection || selectionFromRangeMilliSeconds(startTime, endTime));
+    });
 
     // Find all recalculate style events data from range
     const isSelectorStatsEnabled =
@@ -636,3 +629,56 @@ export enum Tab {
   SelectorStats = 'selector-stats',
   /* eslint-enable @typescript-eslint/naming-convention */
 }
+
+/**
+ * This code renders the contents of the summary view.
+ * To assist with the migration to the UI Eng vision, its primary job is to
+ * render a given Node (which is usually a DocumentFragmetn). These are what get
+ * build via TimelineUIUtils depending on what sort of event or range is
+ * selected. In time once this is migrated we can remove the "render this node"
+ * functionality.
+ */
+
+interface SummaryViewInput {
+  // A helper as we migrate to the new eng vision: this is arbitrary DOM that we want to render within the summary.
+  node: Node|null;
+  selectedEvent: Trace.Types.Events.Event|null;
+  eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null;
+}
+
+type View = (input: SummaryViewInput, output: object, target: HTMLElement) => void;
+const SUMMARY_DEFAULT_VIEW: View = (input, _output, target) => {
+  render(
+      html`
+        <style>${detailsViewStyles}</style>
+        ${input.node ?? nothing}
+        <devtools-widget .widgetConfig=${
+          UI.Widget.widgetConfig(TimelineComponents.RelatedInsightChips.RelatedInsightChips, {
+            activeEvent: input.selectedEvent,
+            eventToInsightsMap: input.eventToRelatedInsightsMap,
+          })}></devtools-widget>
+      `,
+      target, {host: input});
+};
+
+class SummaryView extends UI.Widget.VBox {
+  #view: View;
+  node: Node|null = null;
+  selectedEvent: Trace.Types.Events.Event|null = null;
+  eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
+
+  constructor(element?: HTMLElement, view = SUMMARY_DEFAULT_VIEW) {
+    super(false, false, element);
+    this.#view = view;
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          node: this.node,
+          selectedEvent: this.selectedEvent,
+          eventToRelatedInsightsMap: this.eventToRelatedInsightsMap,
+        },
+        {}, this.contentElement);
+  }
+}