[UI] Migrate SidebarInsightsTab to UI eng vision

Fixed: 407941810
Change-Id: I91edffdee4ffc8763680223bbeb68e4e1d177784
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7230586
Auto-Submit: Connor Clark <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>

Author: Connor Clark

front_end/panels/timeline/components/Sidebar.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 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 {InsightActivated, InsightDeactivated} from './insights/SidebarInsight.js';
@@ -156,7 +155,7 @@ export class SidebarWidget extends UI.Widget.VBox {
 }
 
 class InsightsView extends UI.Widget.VBox {
-  #component = new SidebarInsightsTab();
+  #component = SidebarInsightsTab.createWidgetElement();
 
   constructor() {
     super();
@@ -165,21 +164,31 @@ class InsightsView extends UI.Widget.VBox {
   }
 
   setParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace|null): void {
-    this.#component.parsedTrace = parsedTrace;
+    this.#component.widgetConfig = UI.Widget.widgetConfig(SidebarInsightsTab, {parsedTrace});
   }
 
   getActiveInsight(): ActiveInsight|null {
-    return this.#component.activeInsight;
+    const widget = this.#component.getWidget();
+    if (widget) {
+      return widget.activeInsight;
+    }
+
+    return null;
   }
 
   setActiveInsight(active: ActiveInsight|null, opts: {highlight: boolean}): void {
-    this.#component.activeInsight = active;
+    const widget = this.#component.getWidget();
+    if (!widget) {
+      return;
+    }
+
+    widget.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();
+      void widget.updateComplete.then(() => {
+        widget.highlightActiveInsight();
       });
     }
   }

front_end/panels/timeline/components/SidebarInsightsTab.test.ts

@@ -5,7 +5,6 @@
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
 
@@ -16,11 +15,11 @@ describeWithEnvironment('SidebarInsightsTab', () => {
     const component = new Components.SidebarInsightsTab.SidebarInsightsTab();
     renderElementIntoDOM(component);
     component.parsedTrace = parsedTrace;
-    await RenderCoordinator.done();
-    assert.isOk(component.shadowRoot);
+    await component.updateComplete;
+    assert.isOk(component.element.shadowRoot);
 
-    const navigationURLs =
-        Array.from(component.shadowRoot.querySelectorAll<HTMLElement>('details > summary')).map(elem => elem.title);
+    const navigationURLs = Array.from(component.element.shadowRoot.querySelectorAll<HTMLElement>('details > summary'))
+                               .map(elem => elem.title);
     assert.deepEqual(navigationURLs, [
       'https://www.google.com/',
       'https://www.google.com/',
@@ -29,15 +28,16 @@ describeWithEnvironment('SidebarInsightsTab', () => {
     ]);
 
     const navigationURLLabels =
-        Array.from(component.shadowRoot.querySelectorAll<HTMLElement>('details > summary')).map(elem => elem.innerText);
+        Array.from(component.element.shadowRoot.querySelectorAll<HTMLElement>('details > summary'))
+            .map(elem => elem.innerText);
     assert.deepEqual(navigationURLLabels, [
       '/',
       '/',
       '/imghp?hl=en&ogbl',
       '/search?q=dogs&hl=en&tbm=isch&source=hp&biw=738&bih=893&ei=_ER4YPD…&oq=dogs&gs_lcp=CgNpbWc…&sclient=img&ved=0ahUKEw…&uact=5',
     ]);
 
-    const sets = component.shadowRoot.querySelectorAll('[data-insight-set-key]');
+    const sets = component.element.shadowRoot.querySelectorAll('[data-insight-set-key]');
     assert.lengthOf(sets, 4);  // same number of sets as there are navigations
   });
 });