chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/timeline/components/OriginMap.ts

@@ -0,0 +1,278 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../../ui/components/icon_button/icon_button.js';
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import originMapStyles from './originMap.css.js';
+
+const {html} = LitHtml;
+
+const UIStrings = {
+  /**
+   * @description Title for a column in a data table representing a site origin used for development
+   */
+  developmentOrigin: 'Development origin',
+  /**
+   * @description Title for a column in a data table representing a site origin used by real users in a production environment
+   */
+  productionOrigin: 'Production origin',
+  /**
+   * @description Warning message explaining that an input origin is not a valid origin or URL.
+   * @example {http//malformed.com} PH1
+   */
+  invalidOrigin: '"{PH1}" is not a valid origin or URL.',
+  /**
+   * @description Warning message explaining that an development origin is already mapped to a productionOrigin.
+   * @example {https://example.com} PH1
+   */
+  alreadyMapped: '"{PH1}" is already mapped to a production origin.',
+  /**
+   * @description Warning message explaining that a page doesn't have enough real user data to show any information for. "Chrome UX Report" is a product name and should not be translated.
+   */
+  pageHasNoData: 'The Chrome UX Report does not have sufficient real user data for this page.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/OriginMap.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const DEV_ORIGIN_CONTROL = 'developmentOrigin';
+const PROD_ORIGIN_CONTROL = 'productionOrigin';
+
+interface ListItem extends CrUXManager.OriginMapping {
+  isTitleRow?: boolean;
+}
+
+export class OriginMap extends UI.Widget.WidgetElement<UI.Widget.Widget> implements UI.ListWidget.Delegate<ListItem> {
+  #list: UI.ListWidget.ListWidget<ListItem>;
+  #editor?: UI.ListWidget.Editor<ListItem>;
+
+  constructor() {
+    super();
+
+    this.#list = new UI.ListWidget.ListWidget<ListItem>(this, false /* delegatesFocus */, true /* isTable */);
+
+    CrUXManager.CrUXManager.instance().getConfigSetting().addChangeListener(this.#updateListFromSetting, this);
+    this.#updateListFromSetting();
+  }
+
+  override createWidget(): UI.Widget.Widget {
+    const containerWidget = new UI.Widget.Widget(false, false, this);
+
+    this.#list.registerCSSFiles([originMapStyles]);
+    this.#list.show(containerWidget.contentElement);
+
+    return containerWidget;
+  }
+
+  #pullMappingsFromSetting(): ListItem[] {
+    return CrUXManager.CrUXManager.instance().getConfigSetting().get().originMappings || [];
+  }
+
+  #pushMappingsToSetting(originMappings: ListItem[]): void {
+    const setting = CrUXManager.CrUXManager.instance().getConfigSetting();
+    const settingCopy = {...setting.get()};
+    settingCopy.originMappings = originMappings;
+    setting.set(settingCopy);
+  }
+
+  #updateListFromSetting(): void {
+    const mappings = this.#pullMappingsFromSetting();
+    this.#list.clear();
+    this.#list.appendItem(
+        {
+          developmentOrigin: i18nString(UIStrings.developmentOrigin),
+          productionOrigin: i18nString(UIStrings.productionOrigin),
+          isTitleRow: true,
+        },
+        false);
+    for (const originMapping of mappings) {
+      this.#list.appendItem(originMapping, true);
+    }
+  }
+
+  #getOrigin(url: string): string|null {
+    try {
+      return new URL(url).origin;
+    } catch {
+      return null;
+    }
+  }
+
+  #renderOriginWarning(url: string): Promise<LitHtml.LitTemplate> {
+    return RenderCoordinator.write(async () => {
+      if (!CrUXManager.CrUXManager.instance().isEnabled()) {
+        return LitHtml.nothing;
+      }
+
+      const cruxManager = CrUXManager.CrUXManager.instance();
+      const result = await cruxManager.getFieldDataForPage(url);
+
+      const hasFieldData = Object.entries(result).some(([key, value]) => {
+        if (key === 'warnings') {
+          return false;
+        }
+        return Boolean(value);
+      });
+      if (hasFieldData) {
+        return LitHtml.nothing;
+      }
+
+      return html`
+        <devtools-icon
+          class="origin-warning-icon"
+          name="warning-filled"
+          title=${i18nString(UIStrings.pageHasNoData)}
+        ></devtools-icon>
+      `;
+    });
+  }
+
+  startCreation(): void {
+    const targetManager = SDK.TargetManager.TargetManager.instance();
+    const inspectedURL = targetManager.inspectedURL();
+    const currentOrigin = this.#getOrigin(inspectedURL) || '';
+
+    this.#list.addNewItem(-1, {
+      developmentOrigin: currentOrigin,
+      productionOrigin: '',
+    });
+  }
+
+  renderItem(originMapping: ListItem): Element {
+    const element = document.createElement('div');
+    element.classList.add('origin-mapping-row');
+    element.role = 'row';
+
+    let cellRole: 'columnheader'|'cell';
+    let warningIcon;
+    if (originMapping.isTitleRow) {
+      element.classList.add('header');
+      cellRole = 'columnheader';
+      warningIcon = LitHtml.nothing;
+    } else {
+      cellRole = 'cell';
+      warningIcon = LitHtml.Directives.until(this.#renderOriginWarning(originMapping.productionOrigin));
+    }
+
+    // clang-format off
+    LitHtml.render(html`
+      <div class="origin-mapping-cell development-origin" role=${cellRole}>
+        <div class="origin" title=${originMapping.developmentOrigin}>${originMapping.developmentOrigin}</div>
+      </div>
+      <div class="origin-mapping-cell production-origin" role=${cellRole}>
+        ${warningIcon}
+        <div class="origin" title=${originMapping.productionOrigin}>${originMapping.productionOrigin}</div>
+      </div>
+    `, element, {host: this});
+    // clang-format on
+    return element;
+  }
+
+  removeItemRequested(_item: ListItem, index: number): void {
+    const mappings = this.#pullMappingsFromSetting();
+
+    // `index` will be 1-indexed due to the header row
+    mappings.splice(index - 1, 1);
+
+    this.#pushMappingsToSetting(mappings);
+  }
+
+  commitEdit(originMapping: ListItem, editor: UI.ListWidget.Editor<ListItem>, isNew: boolean): void {
+    originMapping.developmentOrigin = this.#getOrigin(editor.control(DEV_ORIGIN_CONTROL).value) || '';
+    originMapping.productionOrigin = this.#getOrigin(editor.control(PROD_ORIGIN_CONTROL).value) || '';
+
+    const mappings = this.#pullMappingsFromSetting();
+    if (isNew) {
+      mappings.push(originMapping);
+    }
+    this.#pushMappingsToSetting(mappings);
+  }
+
+  beginEdit(originMapping: ListItem): UI.ListWidget.Editor<ListItem> {
+    const editor = this.#createEditor();
+    editor.control(DEV_ORIGIN_CONTROL).value = originMapping.developmentOrigin;
+    editor.control(PROD_ORIGIN_CONTROL).value = originMapping.productionOrigin;
+    return editor;
+  }
+
+  #developmentValidator(_item: ListItem, index: number, input: UI.ListWidget.EditorControl):
+      UI.ListWidget.ValidatorResult {
+    const origin = this.#getOrigin(input.value);
+
+    if (!origin) {
+      return {valid: false, errorMessage: i18nString(UIStrings.invalidOrigin, {PH1: input.value})};
+    }
+
+    const mappings = this.#pullMappingsFromSetting();
+    for (let i = 0; i < mappings.length; ++i) {
+      // `index` will be 1-indexed due to the header row
+      if (i === index - 1) {
+        continue;
+      }
+
+      const mapping = mappings[i];
+      if (mapping.developmentOrigin === origin) {
+        return {valid: true, errorMessage: i18nString(UIStrings.alreadyMapped, {PH1: origin})};
+      }
+    }
+
+    return {valid: true};
+  }
+
+  #productionValidator(_item: ListItem, _index: number, input: UI.ListWidget.EditorControl):
+      UI.ListWidget.ValidatorResult {
+    const origin = this.#getOrigin(input.value);
+
+    if (!origin) {
+      return {valid: false, errorMessage: i18nString(UIStrings.invalidOrigin, {PH1: input.value})};
+    }
+
+    return {valid: true};
+  }
+
+  #createEditor(): UI.ListWidget.Editor<ListItem> {
+    if (this.#editor) {
+      return this.#editor;
+    }
+
+    const editor = new UI.ListWidget.Editor<ListItem>();
+    this.#editor = editor;
+    const content = editor.contentElement().createChild('div', 'origin-mapping-editor');
+
+    const devInput = editor.createInput(
+        DEV_ORIGIN_CONTROL, 'text', i18nString(UIStrings.developmentOrigin), this.#developmentValidator.bind(this));
+    const prodInput = editor.createInput(
+        PROD_ORIGIN_CONTROL, 'text', i18nString(UIStrings.productionOrigin), this.#productionValidator.bind(this));
+
+    // clang-format off
+    LitHtml.render(html`
+      <label class="development-origin-input">
+        ${i18nString(UIStrings.developmentOrigin)}
+        ${devInput}
+      </label>
+      <label class="production-origin-input">
+        ${i18nString(UIStrings.productionOrigin)}
+        ${prodInput}
+      </label>
+    `, content, {host: this});
+    // clang-format on
+
+    return editor;
+  }
+}
+
+customElements.define('devtools-origin-map', OriginMap);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-origin-map': OriginMap;
+  }
+}

package/front_end/panels/timeline/components/RelatedInsightChips.test.ts

@@ -9,12 +9,10 @@ import {
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithEnvironment('RelatedInsightChips', () => {
   // Event doesn't matter, so let's keep this test quick and avoid parsing a trace.
   const FAKE_EVENT = {} as unknown as Trace.Types.Events.Event;
@@ -24,7 +22,7 @@ describeWithEnvironment('RelatedInsightChips', () => {
     renderElementIntoDOM(component);
     component.activeEvent = FAKE_EVENT;
     component.eventToRelatedInsightsMap = new Map();
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isOk(component.shadowRoot);
     assert.strictEqual(component.shadowRoot.childElementCount, 0);
   });
@@ -33,6 +31,7 @@ describeWithEnvironment('RelatedInsightChips', () => {
     const relatedInsight: Components.RelatedInsightChips.RelatedInsight = {
       insightLabel: 'Some fake insight',
       activateInsight: () => {},
+      messages: [],
     };
     const relatedMap: Components.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
     relatedMap.set(FAKE_EVENT, [relatedInsight]);
@@ -41,7 +40,7 @@ describeWithEnvironment('RelatedInsightChips', () => {
     renderElementIntoDOM(component);
     component.activeEvent = FAKE_EVENT;
     component.eventToRelatedInsightsMap = relatedMap;
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isOk(component.shadowRoot);
 
     const chips = component.shadowRoot.querySelectorAll<HTMLElement>('li.insight-chip');
@@ -50,11 +49,43 @@ describeWithEnvironment('RelatedInsightChips', () => {
     assert.deepEqual(text, ['Some fake insight']);
   });
 
+  it('renders any insight messages', async () => {
+    const relatedInsight: Components.RelatedInsightChips.RelatedInsight = {
+      insightLabel: 'Some fake insight',
+      activateInsight: () => {},
+      messages: [
+        'Message 1',
+        'Message 2',
+      ],
+    };
+    const relatedMap: Components.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
+    relatedMap.set(FAKE_EVENT, [relatedInsight]);
+
+    const component = new Components.RelatedInsightChips.RelatedInsightChips();
+    renderElementIntoDOM(component);
+    component.activeEvent = FAKE_EVENT;
+    component.eventToRelatedInsightsMap = relatedMap;
+    await RenderCoordinator.done();
+    assert.isOk(component.shadowRoot);
+
+    const regularChips = component.shadowRoot.querySelectorAll<HTMLElement>('li.insight-chip');
+    assert.lengthOf(regularChips, 1);
+
+    const optimizationChips = component.shadowRoot.querySelectorAll<HTMLElement>('li.insight-message-box');
+    assert.lengthOf(optimizationChips, 2);
+
+    const text1 = getCleanTextContentFromElements(optimizationChips[0], 'button');
+    assert.deepEqual(text1, ['Insight: Some fake insight Message 1']);
+    const text2 = getCleanTextContentFromElements(optimizationChips[1], 'button');
+    assert.deepEqual(text2, ['Insight: Some fake insight Message 2']);
+  });
+
   it('calls the activateInsight function when the insight is clicked', async () => {
     const activateStub = sinon.stub();
     const relatedInsight: Components.RelatedInsightChips.RelatedInsight = {
       insightLabel: 'Some fake insight',
       activateInsight: () => activateStub(),
+      messages: [],
     };
     const relatedMap: Components.RelatedInsightChips.EventToRelatedInsightsMap = new Map();
     relatedMap.set(FAKE_EVENT, [relatedInsight]);
@@ -63,7 +94,7 @@ describeWithEnvironment('RelatedInsightChips', () => {
     renderElementIntoDOM(component);
     component.activeEvent = FAKE_EVENT;
     component.eventToRelatedInsightsMap = relatedMap;
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isOk(component.shadowRoot);
 
     const button = component.shadowRoot.querySelector('button');

package/front_end/panels/timeline/components/RelatedInsightChips.ts

@@ -16,12 +16,18 @@ const UIStrings = {
    *@description prefix shown next to related insight chips
    */
   insightKeyword: 'Insight',
+  /**
+   * @description Prefix shown next to related insight chips and containing the insight name.
+   * @example {Improve image delivery} PH1
+   */
+  insightWithName: 'Insight: {PH1}',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/RelatedInsightChips.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface RelatedInsight {
   insightLabel: string;
+  messages: string[];
   activateInsight: () => void;
 }
 export type EventToRelatedInsightsMap = Map<Trace.Types.Events.Event, RelatedInsight[]>;
@@ -70,21 +76,39 @@ export class RelatedInsightChips extends HTMLElement {
       return;
     }
 
-    const insightChips = relatedInsights.map(insight => {
+    // TODO: Render insight messages in a separate UX
+    // Right before insight chips is acceptable for now
+    const insightMessages = relatedInsights.flatMap(insight => {
+      return insight.messages.map(message => html`
+        <li class="insight-message-box">
+          <button type="button" @click=${this.#insightClick(insight)}>
+            <div class="insight-label">${i18nString(UIStrings.insightWithName, {
+                                    PH1: insight.insightLabel,
+                                  })}</div>
+            <div class="insight-message">${message}</div>
+          </button>
+        </li>
+      `);
+    });
+
+    const insightChips = relatedInsights.flatMap(insight => {
       // clang-format off
-      return html`
-      <li class="insight-chip">
-        <button type="button" @click=${this.#insightClick(insight)}>
-          <span class="keyword">${i18nString(UIStrings.insightKeyword)}</span>
-          <span class="insight-label">${insight.insightLabel}</span>
-        </button>
-      </li>
-      `;
+      return [html`
+        <li class="insight-chip">
+          <button type="button" @click=${this.#insightClick(insight)}>
+            <span class="keyword">${i18nString(UIStrings.insightKeyword)}</span>
+            <span class="insight-label">${insight.insightLabel}</span>
+          </button>
+        </li>
+      `];
       // clang-format on
     });
 
     // clang-format off
-    LitHtml.render(html`<ul>${insightChips}</ul>`, this.#shadow, {host: this});
+    LitHtml.render(html`
+      <ul>${insightMessages}</ul>
+      <ul>${insightChips}</ul>
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }

package/front_end/panels/timeline/components/Sidebar.test.ts

@@ -2,10 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../../core/root/root.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import {raf, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
-import {describeWithEnvironment, enableFeatureForTest} from '../../../testing/EnvironmentHelpers.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 
 import * as Components from './components.js';
@@ -26,11 +25,6 @@ describeWithEnvironment('Sidebar', () => {
     return sidebar;
   }
 
-  beforeEach(() => {
-    enableFeatureForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
-    enableFeatureForTest(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS);
-  });
-
   it('renders with two tabs for insights & annotations', async function() {
     const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 

package/front_end/panels/timeline/components/Sidebar.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
-import * as Root from '../../../core/root/root.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -72,16 +71,12 @@ export class SidebarWidget extends UI.Widget.VBox {
   constructor() {
     super();
     this.setMinimumSize(MIN_SIDEBAR_WIDTH_PX, 0);
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS)) {
-      this.#tabbedPane.appendTab(
-          SidebarTabs.INSIGHTS, 'Insights', this.#insightsView, undefined, undefined, false, false, 0,
-          'timeline.insights-tab');
-    }
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_ANNOTATIONS)) {
-      this.#tabbedPane.appendTab(
-          SidebarTabs.ANNOTATIONS, 'Annotations', this.#annotationsView, undefined, undefined, false, false, 1,
-          'timeline.annotations-tab');
-    }
+    this.#tabbedPane.appendTab(
+        SidebarTabs.INSIGHTS, 'Insights', this.#insightsView, undefined, undefined, false, false, 0,
+        'timeline.insights-tab');
+    this.#tabbedPane.appendTab(
+        SidebarTabs.ANNOTATIONS, 'Annotations', this.#annotationsView, undefined, undefined, false, false, 1,
+        'timeline.annotations-tab');
 
     // Default the selected tab to Insights. In wasShown() we will change this
     // if this is a trace that has no insights.

package/front_end/panels/timeline/components/SidebarAnnotationsTab.test.ts

@@ -6,19 +6,17 @@ import * as Trace from '../../../models/trace/trace.js';
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as TimelineComponents from './components.js';
 
 describeWithEnvironment('SidebarAnnotationsTab', () => {
   const {SidebarAnnotationsTab} = TimelineComponents.SidebarAnnotationsTab;
-  const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
   it('renders annotations tab in the sidebar', async () => {
     const component = new SidebarAnnotationsTab();
     renderElementIntoDOM(component);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.isNotNull(component.shadowRoot);
     const annotationsWrapperElement = component.shadowRoot.querySelector<HTMLElement>('.annotations');
@@ -63,7 +61,7 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
 
     assert.isNotNull(component.shadowRoot);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const annotationsWrapperElement = component.shadowRoot.querySelector<HTMLElement>('.annotations');
     assert.isNotNull(annotationsWrapperElement);
@@ -75,10 +73,10 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     // 2 entry labels and 1 labelled time range
     const annotationEntryIdentifierElements =
         component.shadowRoot.querySelectorAll<HTMLElement>('.annotation-identifier');
-    assert.strictEqual(annotationEntryIdentifierElements.length, 3);
+    assert.lengthOf(annotationEntryIdentifierElements, 3);
 
     const annotationEntryLabelElements = component.shadowRoot.querySelectorAll<HTMLElement>('.label');
-    assert.strictEqual(annotationEntryIdentifierElements.length, 3);
+    assert.lengthOf(annotationEntryIdentifierElements, 3);
 
     assert.strictEqual(annotationEntryLabelElements[0].innerText, 'Entry Label 1');
     assert.strictEqual(annotationEntryIdentifierElements[0].style['backgroundColor'], 'rgb(82, 252, 3)');
@@ -99,7 +97,7 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     };
     component.annotations = [entryLabelAnnotation];
     assert.isNotNull(component.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const deleteButton = component.shadowRoot.querySelector<HTMLElement>('.delete-button');
     assert.isNotNull(deleteButton);
@@ -122,7 +120,7 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     const component = new SidebarAnnotationsTab();
     renderElementIntoDOM(component);
     component.annotations = [annotation];
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.isNotNull(component.shadowRoot);
 
@@ -148,7 +146,7 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     };
 
     component.annotations = [entryLabelAnnotation];
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isNotNull(component.shadowRoot);
 
     const deleteButton = component.shadowRoot.querySelector<HTMLElement>('.delete-button');
@@ -181,16 +179,16 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     component.annotations = [entryLabelAnnotation, entryLabelAnnotation2];
     assert.isNotNull(component.shadowRoot);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const annotationsWrapperElement = component.shadowRoot.querySelector<HTMLElement>('.annotations');
     assert.isNotNull(annotationsWrapperElement);
 
     // Ensure there are 2 labels and their entry identifiers and labels and rendered
     const annotationIdentifierElements = component.shadowRoot.querySelectorAll<HTMLElement>('.annotation-identifier');
-    assert.strictEqual(annotationIdentifierElements.length, 2);
+    assert.lengthOf(annotationIdentifierElements, 2);
     let annotationLabelElements = component.shadowRoot.querySelectorAll<HTMLElement>('.label');
-    assert.strictEqual(annotationIdentifierElements.length, 2);
+    assert.lengthOf(annotationIdentifierElements, 2);
 
     assert.strictEqual(annotationLabelElements[0].innerText, 'Entry Label 1');
     assert.strictEqual(annotationLabelElements[1].innerText, 'Entry Label 2');
@@ -210,12 +208,12 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     };
 
     component.annotations = [entryLabelAnnotation, entryLabelAnnotation2, labelledTimeRangeAnnotation];
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     annotationLabelElements = component.shadowRoot.querySelectorAll<HTMLElement>('.label');
 
     // Ensure the labels changed to new ones and a labbel range was added
-    assert.strictEqual(annotationLabelElements.length, 3);
+    assert.lengthOf(annotationLabelElements, 3);
     assert.strictEqual(annotationLabelElements[0].innerText, 'New Entry Label 1');
     assert.strictEqual(annotationLabelElements[1].innerText, 'New Entry Label 2');
     assert.strictEqual(annotationLabelElements[2].innerText, 'Labelled Time Range');
@@ -243,14 +241,14 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     component.annotations = [entryLabelAnnotation, entriesLink];
     assert.isNotNull(component.shadowRoot);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const annotationsWrapperElement = component.shadowRoot.querySelector<HTMLElement>('.annotations');
     assert.isNotNull(annotationsWrapperElement);
 
     // Ensure there is only one annotation displayed
     const annotationIdentifierElements = component.shadowRoot.querySelectorAll<HTMLElement>('.annotation-identifier');
-    assert.strictEqual(annotationIdentifierElements.length, 1);
+    assert.lengthOf(annotationIdentifierElements, 1);
   });
 
   it('displays multiple not started annotations if they are not different entries', async function() {
@@ -276,14 +274,13 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     component.annotations = [entryLabelAnnotation, entriesLink];
     assert.isNotNull(component.shadowRoot);
 
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const annotationsWrapperElement = component.shadowRoot.querySelector<HTMLElement>('.annotations');
     assert.isNotNull(annotationsWrapperElement);
 
     // Ensure both annotations are displayed
     const annotationIdentifierElements = component.shadowRoot.querySelectorAll<HTMLElement>('.annotation-identifier');
-    assert.strictEqual(annotationIdentifierElements.length, 2);
+    assert.lengthOf(annotationIdentifierElements, 2);
   });
-
 });

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

@@ -5,11 +5,9 @@
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithEnvironment('SidebarInsightsTab', () => {
   it('renders a list of insights per navigation in the sidebar', async function() {
     const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'multiple-navigations.json.gz');
@@ -18,7 +16,7 @@ describeWithEnvironment('SidebarInsightsTab', () => {
     renderElementIntoDOM(component);
     component.parsedTrace = parsedTrace;
     component.insights = insights;
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isOk(component.shadowRoot);
 
     const navigationURLs =

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

@@ -193,7 +193,6 @@ export class SidebarInsightsTab extends HTMLElement {
       <div class="insight-sets-wrapper">
         ${[...this.#insights.values()].map(({id, url}, index) => {
           const data = {
-            parsedTrace: this.#parsedTrace,
             insights: this.#insights,
             insightSetKey: id,
             activeCategory: this.#selectedCategory,