RPP: allow insights to be highlighted

We had feedback for the Insights AI flow that the "Insight: LCP by
Phase" button did nothing. This CL updates it so that when clicked it
reveals the insight by:

1. Opening the sidebar.
2. Expanding the insight.
3. Highlighting it using the same highlight in the network panel.

Fixed: 409337524
Change-Id: Ieff6e835155d7a156c12cede2e7be99daaa87f26
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6438856
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1005,6 +1005,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       const trace = new SDK.TraceObject.RevealableEvent(event);
       return Common.Revealer.reveal(trace);
     }
+    if (context instanceof AiAssistanceModel.InsightContext) {
+      const item = context.getItem();
+      return Common.Revealer.reveal(item);
+    }
     // Node picker is using linkifier.
   }
 

front_end/panels/timeline/TimelinePanel.ts

@@ -715,13 +715,17 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     });
   }
 
-  #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null): void {
-    // When an insight is selected, ensure that the 3P checkbox is disabled
-    // to avoid dimming interference.
+  /**
+   * Activates an insight and ensures the sidebar is open too.
+   * Pass `highlightInsight: true` to flash the insight with the background highlight colour.
+   */
+  #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null, opts: {
+    highlightInsight: boolean,
+  } = {highlightInsight: false}): void {
     if (insight) {
       this.#splitWidget.showBoth();
     }
-    this.#sideBar.setActiveInsight(insight);
+    this.#sideBar.setActiveInsight(insight, {highlight: opts.highlightInsight});
     this.flameChart.setActiveInsight(insight);
 
     if (insight) {
@@ -2796,6 +2800,19 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.flameChart.setSelectionAndReveal(null);
     this.flameChart.selectDetailsViewTab(Tab.Details, null);
   }
+
+  /**
+   * Used to reveal an insight - and is called from the AI Assistance panel when the user clicks on the Insight context button that is shown.
+   * Revealing an insight should:
+   * 1. Ensure the sidebar is open
+   * 2. Ensure the insight is expanded
+   *    (both of these should be true in the AI Assistance case)
+   * 3. Flash the Insight with the highlight colour we use in other panels.
+   */
+  revealInsight(insightModel: Trace.Insights.Types.InsightModel): void {
+    const insightSetKey = insightModel.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
+    this.#setActiveInsight({model: insightModel, insightSetKey}, {highlightInsight: true});
+  }
 }
 
 export const enum State {
@@ -3007,6 +3024,13 @@ export class EventRevealer implements Common.Revealer.Revealer<SDK.TraceObject.R
   }
 }
 
+export class InsightRevealer implements Common.Revealer.Revealer<Utils.InsightAIContext.ActiveInsight> {
+  async reveal(revealable: Utils.InsightAIContext.ActiveInsight): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('timeline');
+    TimelinePanel.instance().revealInsight(revealable.insight);
+  }
+}
+
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = context.flavor(TimelinePanel);

front_end/panels/timeline/components/Sidebar.ts

@@ -5,6 +5,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import type * as Trace from '../../../models/trace/trace.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 
 import {SidebarAnnotationsTab} from './SidebarAnnotationsTab.js';
@@ -120,8 +121,10 @@ export class SidebarWidget extends UI.Widget.VBox {
     );
   }
 
-  setActiveInsight(activeInsight: ActiveInsight|null): void {
-    this.#insightsView.setActiveInsight(activeInsight);
+  setActiveInsight(activeInsight: ActiveInsight|null, opts: {
+    highlight: boolean,
+  }): void {
+    this.#insightsView.setActiveInsight(activeInsight, opts);
 
     if (activeInsight) {
       this.#tabbedPane.selectTab(SidebarTabs.INSIGHTS);
@@ -147,8 +150,16 @@ class InsightsView extends UI.Widget.VBox {
     this.#component.insights = data;
   }
 
-  setActiveInsight(active: ActiveInsight|null): void {
+  setActiveInsight(active: ActiveInsight|null, opts: {highlight: boolean}): void {
     this.#component.activeInsight = active;
+    if (opts.highlight && active) {
+      // Wait for the rendering of the component to be done, otherwise we
+      // might highlight the wrong insight. The UI needs to be fully
+      // re-rendered before we can highlight the newly-expanded insight.
+      void RenderCoordinator.done().then(() => {
+        this.#component.highlightActiveInsight();
+      });
+    }
   }
 }
 

front_end/panels/timeline/components/SidebarInsightsTab.ts

@@ -17,7 +17,7 @@ import * as Utils from '../utils/utils.js';
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
 import stylesRaw from './sidebarInsightsTab.css.js';
-import type {SidebarSingleInsightSetData} from './SidebarSingleInsightSet.js';
+import type {SidebarSingleInsightSet, SidebarSingleInsightSetData} from './SidebarSingleInsightSet.js';
 
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const styles = new CSSStyleSheet();
@@ -194,6 +194,19 @@ export class SidebarInsightsTab extends HTMLElement {
     // clang-format on
   }
 
+  highlightActiveInsight(): void {
+    if (!this.#activeInsight) {
+      return;
+    }
+    // Find the right set for this insight via the set key.
+    const set = this.#shadow?.querySelector<SidebarSingleInsightSet>(
+        `devtools-performance-sidebar-single-navigation[data-insight-set-key="${this.#activeInsight.insightSetKey}"]`);
+    if (!set) {
+      return;
+    }
+    set.highlightActiveInsight();
+  }
+
   #render(): void {
     if (!this.#parsedTrace || !this.#insights) {
       Lit.render(Lit.nothing, this.#shadow, {host: this});
@@ -219,6 +232,7 @@ export class SidebarInsightsTab extends HTMLElement {
 
           const contents = html`
             <devtools-performance-sidebar-single-navigation
+              data-insight-set-key=${id}
               .data=${data}>
             </devtools-performance-sidebar-single-navigation>
           `;

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -14,6 +14,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {md} from '../utils/Helpers.js';
 
+import type {BaseInsightComponent} from './insights/BaseInsightComponent.js';
 import {shouldRenderForCategory} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
@@ -90,8 +91,7 @@ export interface SidebarSingleInsightSetData {
  * "enable experimental performance insights" experiment. This is used to enable
  * us to ship incrementally without turning insights on by default for all
  * users. */
-const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
-]);
+const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([]);
 
 type InsightNameToComponentMapping =
     Record<string, typeof Insights.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel>>;
@@ -126,6 +126,8 @@ export class SidebarSingleInsightSet extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #renderBound = this.#render.bind(this);
 
+  #activeInsightElement: BaseInsightComponent<Trace.Insights.Types.InsightModel>|null = null;
+
   #data: SidebarSingleInsightSetData = {
     insights: null,
     insightSetKey: null,
@@ -136,6 +138,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
   };
 
   #dismissedFieldMismatchNotice = false;
+  #activeHighlightTimeout = -1;
 
   set data(data: SidebarSingleInsightSetData) {
     this.#data = data;
@@ -146,6 +149,26 @@ export class SidebarSingleInsightSet extends HTMLElement {
     this.#render();
   }
 
+  disconnectedCallback(): void {
+    window.clearTimeout(this.#activeHighlightTimeout);
+  }
+
+  highlightActiveInsight(): void {
+    if (!this.#activeInsightElement) {
+      return;
+    }
+    // First clear any existing highlight that is going on.
+    this.#activeInsightElement.removeAttribute('highlight-insight');
+    window.clearTimeout(this.#activeHighlightTimeout);
+
+    requestAnimationFrame(() => {
+      this.#activeInsightElement?.setAttribute('highlight-insight', 'true');
+      this.#activeHighlightTimeout = window.setTimeout(() => {
+        this.#activeInsightElement?.removeAttribute('highlight-insight');
+      }, 2_000);
+    });
+  }
+
   #metricIsVisible(label: 'LCP'|'CLS'|'INP'): boolean {
     if (this.#data.activeCategory === Trace.Insights.Types.InsightCategory.ALL) {
       return true;
@@ -389,6 +412,11 @@ export class SidebarSingleInsightSet extends HTMLElement {
       const component = html`<div>
         <${componentClass.litTagName}
           .selected=${this.#data.activeInsight?.model === model}
+          ${Lit.Directives.ref(elem => {
+            if(this.#data.activeInsight?.model === model && elem) {
+              this.#activeInsightElement = elem as BaseInsightComponent<Trace.Insights.Types.InsightModel>;
+            }
+          })}
           .model=${model}
           .bounds=${insightSet.bounds}
           .insightSetKey=${insightSetKey}

front_end/panels/timeline/components/insights/baseInsightComponent.css

@@ -4,6 +4,22 @@
  * found in the LICENSE file.
  */
 
+@keyframes insight-highlight-fade-out {
+  from {
+    background-color: var(--sys-color-yellow-container);
+  }
+
+  to {
+    background-color: transparent;
+  }
+}
+
+:host([highlight-insight]) {
+  .insight {
+    animation: insight-highlight-fade-out 2s 0s;
+  }
+}
+
 .insight {
   display: block;
   position: relative;

front_end/panels/timeline/timeline-meta.ts

@@ -366,3 +366,14 @@ Common.Revealer.registerRevealer({
     return new Timeline.TimelinePanel.EventRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return maybeRetrieveContextTypes(Timeline => [Timeline.Utils.InsightAIContext.ActiveInsight]);
+  },
+  destination: Common.Revealer.RevealerDestination.TIMELINE_PANEL,
+  async loadRevealer() {
+    const Timeline = await loadTimelineModule();
+    return new Timeline.TimelinePanel.InsightRevealer();
+  },
+});