chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

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

@@ -8,16 +8,16 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as TraceBounds from '../../../services/trace_bounds/trace_bounds.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Utils from '../utils/utils.js';
 
-import {RemoveAnnotation, RevealAnnotation} from './Sidebar.js';
+import {AnnotationHoverOut, HoverAnnotation, RemoveAnnotation, RevealAnnotation} from './Sidebar.js';
 import sidebarAnnotationsTabStyles from './sidebarAnnotationsTab.css.js';
 
-const {html} = Lit;
+const {html, render} = Lit;
 
 const diagramImageUrl = new URL('../../../Images/performance-panel-diagram.svg', import.meta.url).toString();
 const entryLabelImageUrl = new URL('../../../Images/performance-panel-entry-label.svg', import.meta.url).toString();
@@ -71,20 +71,20 @@ const UIStrings = {
   deleteButton: 'Delete annotation: {PH1}',
   /**
    * @description label used to describe an annotation on an entry
-   *@example {Paint} PH1
-   *@example {"Hello world"} PH2
+   * @example {Paint} PH1
+   * @example {"Hello world"} PH2
    */
   entryLabelDescriptionLabel: 'A "{PH1}" event annotated with the text "{PH2}"',
   /**
    * @description label used to describe a time range annotation
-   *@example {2.5 milliseconds} PH1
-   *@example {13.5 milliseconds} PH2
+   * @example {2.5 milliseconds} PH1
+   * @example {13.5 milliseconds} PH2
    */
   timeRangeDescriptionLabel: 'A time range starting at {PH1} and ending at {PH2}',
   /**
    * @description label used to describe a link from one entry to another.
-   *@example {Paint} PH1
-   *@example {Recalculate styles} PH2
+   * @example {Paint} PH1
+   * @example {Recalculate styles} PH2
    */
   entryLinkDescriptionLabel: 'A link between a "{PH1}" event and a "{PH2}" event',
 } as const;
@@ -92,17 +92,28 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarAnnotationsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SidebarAnnotationsTab extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export interface SidebarAnnotationsTabViewInput {
+  annotations: readonly Trace.Types.File.Annotation[];
+  annotationsHiddenSetting: Common.Settings.Setting<boolean>;
+  annotationEntryToColorMap: ReadonlyMap<Trace.Types.Events.Event|Trace.Types.Events.LegacyTimelineFrame, string>;
+  onAnnotationClick: (annotation: Trace.Types.File.Annotation) => void;
+  onAnnotationHover: (annotation: Trace.Types.File.Annotation) => void;
+  onAnnotationHoverOut: () => void;
+  onAnnotationDelete: (annotation: Trace.Types.File.Annotation) => void;
+}
+
+export class SidebarAnnotationsTab extends UI.Widget.Widget {
   #annotations: Trace.Types.File.Annotation[] = [];
   // A map with annotated entries and the colours that are used to display them in the FlameChart.
   // We need this map to display the entries in the sidebar with the same colours.
   #annotationEntryToColorMap = new Map<Trace.Types.Events.Event|Trace.Types.Events.LegacyTimelineFrame, string>();
 
   readonly #annotationsHiddenSetting: Common.Settings.Setting<boolean>;
+  #view: typeof DEFAULT_VIEW;
 
-  constructor() {
+  constructor(view = DEFAULT_VIEW) {
     super();
+    this.#view = view;
     this.#annotationsHiddenSetting = Common.Settings.Settings.instance().moduleSetting('annotations-hidden');
   }
 
@@ -110,13 +121,13 @@ export class SidebarAnnotationsTab extends HTMLElement {
     return this.#annotations;
   }
 
-  set annotations(annotations: Trace.Types.File.Annotation[]) {
-    this.#annotations = this.#processAnnotationsList(annotations);
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  set annotationEntryToColorMap(annotationEntryToColorMap: Map<Trace.Types.Events.Event, string>) {
-    this.#annotationEntryToColorMap = annotationEntryToColorMap;
+  setData(data: {
+    annotations: Trace.Types.File.Annotation[],
+    annotationEntryToColorMap: Map<Trace.Types.Events.Event, string>,
+  }): void {
+    this.#annotations = this.#processAnnotationsList(data.annotations);
+    this.#annotationEntryToColorMap = data.annotationEntryToColorMap;
+    this.requestUpdate();
   }
 
   #processAnnotationsList(annotations: Trace.Types.File.Annotation[]): Trace.Types.File.Annotation[] {
@@ -190,205 +201,25 @@ export class SidebarAnnotationsTab extends HTMLElement {
     }
   }
 
-  connectedCallback(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  #renderEntryToIdentifier(annotation: Trace.Types.File.EntriesLinkAnnotation): Lit.LitTemplate {
-    if (annotation.entryTo) {
-      const entryToName = Utils.EntryName.nameForEntry(annotation.entryTo);
-      const toBackgroundColor = this.#annotationEntryToColorMap.get(annotation.entryTo) ?? '';
-      const toTextColor = findTextColorForContrast(toBackgroundColor);
-      const styleForToAnnotationIdentifier = {
-        backgroundColor: toBackgroundColor,
-        color: toTextColor,
-      };
-      // clang-format off
-      return html`
-        <span class="annotation-identifier" style=${Lit.Directives.styleMap(styleForToAnnotationIdentifier)}>
-          ${entryToName}
-        </span>`;
-      // clang-format on
-    }
-    return Lit.nothing;
-  }
-
-  /**
-   * Renders the Annotation 'identifier' or 'name' in the annotations list.
-   * This is the text rendered before the annotation label that we use to indentify the annotation.
-   *
-   * Annotations identifiers for different annotations:
-   * Entry label -> Entry name
-   * Labelled range -> Start to End Range of the label in ms
-   * Connected entries -> Connected entries names
-   *
-   * All identifiers have a different colour background.
-   */
-  #renderAnnotationIdentifier(annotation: Trace.Types.File.Annotation): Lit.LitTemplate {
-    switch (annotation.type) {
-      case 'ENTRY_LABEL': {
-        const entryName = Utils.EntryName.nameForEntry(annotation.entry);
-        const backgroundColor = this.#annotationEntryToColorMap.get(annotation.entry) ?? '';
-        const color = findTextColorForContrast(backgroundColor);
-        const styleForAnnotationIdentifier = {
-          backgroundColor,
-          color,
-        };
-        return html`
-              <span class="annotation-identifier" style=${Lit.Directives.styleMap(styleForAnnotationIdentifier)}>
-                ${entryName}
-              </span>
-        `;
-      }
-      case 'TIME_RANGE': {
-        const minTraceBoundsMilli =
-            TraceBounds.TraceBounds.BoundsManager.instance().state()?.milli.entireTraceBounds.min ?? 0;
-
-        const timeRangeStartInMs =
-            Math.round(Trace.Helpers.Timing.microToMilli(annotation.bounds.min) - minTraceBoundsMilli);
-        const timeRangeEndInMs =
-            Math.round(Trace.Helpers.Timing.microToMilli(annotation.bounds.max) - minTraceBoundsMilli);
-
-        return html`
-              <span class="annotation-identifier time-range">
-                ${timeRangeStartInMs} - ${timeRangeEndInMs} ms
-              </span>
-        `;
-      }
-      case 'ENTRIES_LINK': {
-        const entryFromName = Utils.EntryName.nameForEntry(annotation.entryFrom);
-        const fromBackgroundColor = this.#annotationEntryToColorMap.get(annotation.entryFrom) ?? '';
-        const fromTextColor = findTextColorForContrast(fromBackgroundColor);
-        const styleForFromAnnotationIdentifier = {
-          backgroundColor: fromBackgroundColor,
-          color: fromTextColor,
-        };
-        // clang-format off
-        return html`
-          <div class="entries-link">
-            <span class="annotation-identifier" style=${Lit.Directives.styleMap(styleForFromAnnotationIdentifier)}>
-              ${entryFromName}
-            </span>
-            <devtools-icon class="inline-icon" .data=${{
-              iconName: 'arrow-forward',
-              color: 'var(--icon-default)',
-              width: '18px',
-              height: '18px',
-            }}>
-            </devtools-icon>
-            ${this.#renderEntryToIdentifier(annotation)}
-          </div>
-      `;
-        // clang-format on
-      }
-      default:
-        Platform.assertNever(annotation, 'Unsupported annotation type');
-    }
-  }
-
-  #revealAnnotation(annotation: Trace.Types.File.Annotation): void {
-    this.dispatchEvent(new RevealAnnotation(annotation));
-  }
-
-  #renderTutorialCard(): Lit.TemplateResult {
-    return html`
-      <div class="annotation-tutorial-container">
-      ${i18nString(UIStrings.annotationGetStarted)}
-        <div class="tutorial-card">
-          <div class="tutorial-image"> <img src=${entryLabelImageUrl}></img></div>
-          <div class="tutorial-title">${i18nString(UIStrings.entryLabelTutorialTitle)}</div>
-          <div class="tutorial-description">${i18nString(UIStrings.entryLabelTutorialDescription)}</div>
-        </div>
-        <div class="tutorial-card">
-          <div class="tutorial-image"> <img src=${diagramImageUrl}></img></div>
-          <div class="tutorial-title">${i18nString(UIStrings.entryLinkTutorialTitle)}</div>
-          <div class="tutorial-description">${i18nString(UIStrings.entryLinkTutorialDescription)}</div>
-        </div>
-        <div class="tutorial-card">
-          <div class="tutorial-image"> <img src=${timeRangeImageUrl}></img></div>
-          <div class="tutorial-title">${i18nString(UIStrings.timeRangeTutorialTitle)}</div>
-          <div class="tutorial-description">${i18nString(UIStrings.timeRangeTutorialDescription)}</div>
-        </div>
-        <div class="tutorial-card">
-          <div class="tutorial-image"> <img src=${deleteAnnotationImageUrl}></img></div>
-          <div class="tutorial-title">${i18nString(UIStrings.deleteAnnotationTutorialTitle)}</div>
-          <div class="tutorial-description">${i18nString(UIStrings.deleteAnnotationTutorialDescription)}</div>
-        </div>
-      </div>
-    `;
-  }
-
-  #jslogForAnnotation(annotation: Trace.Types.File.Annotation): string {
-    switch (annotation.type) {
-      case 'ENTRY_LABEL':
-        return 'entry-label';
-      case 'TIME_RANGE':
-        return 'time-range';
-      case 'ENTRIES_LINK':
-        return 'entries-link';
-      default:
-        Platform.assertNever(annotation, 'unknown annotation type');
-    }
-  }
-  #render(): void {
-    // clang-format off
-    Lit.render(
-      html`
-        <style>${sidebarAnnotationsTabStyles}</style>
-        <span class="annotations">
-          ${this.#annotations.length === 0 ?
-            this.#renderTutorialCard() :
-            html`
-              ${this.#annotations.map(annotation => {
-                const label = detailedAriaDescriptionForAnnotation(annotation);
-                return html`
-                  <div class="annotation-container"
-                    @click=${() => this.#revealAnnotation(annotation)}
-                    aria-label=${label}
-                    tabindex="0"
-                    jslog=${VisualLogging.item(`timeline.annotation-sidebar.annotation-${this.#jslogForAnnotation(annotation)}`).track({click: true})}
-                  >
-                    <div class="annotation">
-                      ${this.#renderAnnotationIdentifier(annotation)}
-                      <span class="label">
-                        ${(annotation.type === 'ENTRY_LABEL' || annotation.type === 'TIME_RANGE') ? annotation.label : ''}
-                      </span>
-                    </div>
-                    <button class="delete-button" aria-label=${i18nString(UIStrings.deleteButton, {PH1: label})} @click=${(event: Event) => {
-                      // Stop propagation to not zoom into the annotation when
-                      // the delete button is clicked
-                      event.stopPropagation();
-                      this.dispatchEvent(new RemoveAnnotation(annotation));
-                    }} jslog=${VisualLogging.action('timeline.annotation-sidebar.delete').track({click: true})}>
-                      <devtools-icon
-                        class="bin-icon"
-                        .data=${{
-                          iconName: 'bin',
-                          color: 'var(--icon-default)',
-                          width: '20px',
-                          height: '20px',
-                        }}
-                      ></devtools-icon>
-                    </button>
-                  </div>`;
-              })}
-              <setting-checkbox class="visibility-setting" .data=${{
-                setting: this.#annotationsHiddenSetting,
-                textOverride: 'Hide annotations',
-              }}>
-              </setting-checkbox>`
-      }
-      </span>`,
-    this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-performance-sidebar-annotations', SidebarAnnotationsTab);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-sidebar-annotations': SidebarAnnotationsTab;
+  override performUpdate(): void {
+    const input: SidebarAnnotationsTabViewInput = {
+      annotations: this.#annotations,
+      annotationsHiddenSetting: this.#annotationsHiddenSetting,
+      annotationEntryToColorMap: this.#annotationEntryToColorMap,
+      onAnnotationClick: (annotation: Trace.Types.File.Annotation) => {
+        this.contentElement.dispatchEvent(new RevealAnnotation(annotation));
+      },
+      onAnnotationHover: (annotation: Trace.Types.File.Annotation) => {
+        this.contentElement.dispatchEvent(new HoverAnnotation(annotation));
+      },
+      onAnnotationHoverOut: () => {
+        this.contentElement.dispatchEvent(new AnnotationHoverOut());
+      },
+      onAnnotationDelete: (annotation: Trace.Types.File.Annotation) => {
+        this.contentElement.dispatchEvent(new RemoveAnnotation(annotation));
+      },
+    };
+    this.#view(input, {}, this.contentElement);
   }
 }
 
@@ -441,3 +272,182 @@ function findTextColorForContrast(bgColorText: string): string {
   const contrastRatio = Common.ColorUtils.contrastRatio(bgColor.rgba(), darkColorText.rgba());
   return contrastRatio >= 4.5 ? `var(${darkColorToken})` : 'var(--app-color-performance-sidebar-label-text-light)';
 }
+
+function renderAnnotationIdentifier(
+    annotation: Trace.Types.File.Annotation,
+    annotationEntryToColorMap: ReadonlyMap<Trace.Types.Events.Event|Trace.Types.Events.LegacyTimelineFrame, string>):
+    Lit.LitTemplate {
+  switch (annotation.type) {
+    case 'ENTRY_LABEL': {
+      const entryName = Utils.EntryName.nameForEntry(annotation.entry);
+      const backgroundColor = annotationEntryToColorMap.get(annotation.entry) ?? '';
+      const color = findTextColorForContrast(backgroundColor);
+      const styleForAnnotationIdentifier = {
+        backgroundColor,
+        color,
+      };
+      return html`
+            <span class="annotation-identifier" style=${Lit.Directives.styleMap(styleForAnnotationIdentifier)}>
+              ${entryName}
+            </span>
+      `;
+    }
+    case 'TIME_RANGE': {
+      const minTraceBoundsMilli =
+          TraceBounds.TraceBounds.BoundsManager.instance().state()?.milli.entireTraceBounds.min ?? 0;
+
+      const timeRangeStartInMs =
+          Math.round(Trace.Helpers.Timing.microToMilli(annotation.bounds.min) - minTraceBoundsMilli);
+      const timeRangeEndInMs =
+          Math.round(Trace.Helpers.Timing.microToMilli(annotation.bounds.max) - minTraceBoundsMilli);
+
+      return html`
+            <span class="annotation-identifier time-range">
+              ${timeRangeStartInMs} - ${timeRangeEndInMs} ms
+            </span>
+      `;
+    }
+    case 'ENTRIES_LINK': {
+      const entryFromName = Utils.EntryName.nameForEntry(annotation.entryFrom);
+      const fromBackgroundColor = annotationEntryToColorMap.get(annotation.entryFrom) ?? '';
+      const fromTextColor = findTextColorForContrast(fromBackgroundColor);
+      const styleForFromAnnotationIdentifier = {
+        backgroundColor: fromBackgroundColor,
+        color: fromTextColor,
+      };
+      // clang-format off
+      return html`
+        <div class="entries-link">
+          <span class="annotation-identifier" style=${Lit.Directives.styleMap(styleForFromAnnotationIdentifier)}>
+            ${entryFromName}
+          </span>
+          <devtools-icon name="arrow-forward" class="inline-icon large">
+          </devtools-icon>
+          ${renderEntryToIdentifier(annotation, annotationEntryToColorMap)}
+        </div>
+    `;
+      // clang-format on
+    }
+    default:
+      Platform.assertNever(annotation, 'Unsupported annotation type');
+  }
+}
+
+/**
+ * Renders the Annotation 'identifier' or 'name' in the annotations list.
+ * This is the text rendered before the annotation label that we use to identify the annotation.
+ *
+ * Annotations identifiers for different annotations:
+ * Entry label -> Entry name
+ * Labelled range -> Start to End Range of the label in ms
+ * Connected entries -> Connected entries names
+ *
+ * All identifiers have a different colour background.
+ */
+function renderEntryToIdentifier(
+    annotation: Trace.Types.File.EntriesLinkAnnotation,
+    annotationEntryToColorMap: ReadonlyMap<Trace.Types.Events.Event|Trace.Types.Events.LegacyTimelineFrame, string>):
+    Lit.LitTemplate {
+  if (annotation.entryTo) {
+    const entryToName = Utils.EntryName.nameForEntry(annotation.entryTo);
+    const toBackgroundColor = annotationEntryToColorMap.get(annotation.entryTo) ?? '';
+    const toTextColor = findTextColorForContrast(toBackgroundColor);
+    const styleForToAnnotationIdentifier = {
+      backgroundColor: toBackgroundColor,
+      color: toTextColor,
+    };
+    // clang-format off
+    return html`
+      <span class="annotation-identifier" style=${Lit.Directives.styleMap(styleForToAnnotationIdentifier)}>
+        ${entryToName}
+      </span>`;
+    // clang-format on
+  }
+  return Lit.nothing;
+}
+
+function jslogForAnnotation(annotation: Trace.Types.File.Annotation): string {
+  switch (annotation.type) {
+    case 'ENTRY_LABEL':
+      return 'entry-label';
+    case 'TIME_RANGE':
+      return 'time-range';
+    case 'ENTRIES_LINK':
+      return 'entries-link';
+    default:
+      Platform.assertNever(annotation, 'unknown annotation type');
+  }
+}
+
+function renderTutorial(): Lit.LitTemplate {
+  // clang-format off
+  return html`<div class="annotation-tutorial-container">
+    ${i18nString(UIStrings.annotationGetStarted)}
+      <div class="tutorial-card">
+        <div class="tutorial-image"><img src=${entryLabelImageUrl}></img></div>
+        <div class="tutorial-title">${i18nString(UIStrings.entryLabelTutorialTitle)}</div>
+        <div class="tutorial-description">${i18nString(UIStrings.entryLabelTutorialDescription)}</div>
+      </div>
+      <div class="tutorial-card">
+        <div class="tutorial-image"><img src=${diagramImageUrl}></img></div>
+        <div class="tutorial-title">${i18nString(UIStrings.entryLinkTutorialTitle)}</div>
+        <div class="tutorial-description">${i18nString(UIStrings.entryLinkTutorialDescription)}</div>
+      </div>
+      <div class="tutorial-card">
+        <div class="tutorial-image"><img src=${timeRangeImageUrl}></img></div>
+        <div class="tutorial-title">${i18nString(UIStrings.timeRangeTutorialTitle)}</div>
+        <div class="tutorial-description">${i18nString(UIStrings.timeRangeTutorialDescription)}</div>
+      </div>
+      <div class="tutorial-card">
+        <div class="tutorial-image"><img src=${deleteAnnotationImageUrl}></img></div>
+        <div class="tutorial-title">${i18nString(UIStrings.deleteAnnotationTutorialTitle)}</div>
+        <div class="tutorial-description">${i18nString(UIStrings.deleteAnnotationTutorialDescription)}</div>
+      </div>
+    </div>` ;
+  // clang-format on
+}
+
+export const DEFAULT_VIEW: (input: SidebarAnnotationsTabViewInput, output: object, target: HTMLElement) => void =
+    (input, _output, target) => {
+      // clang-format off
+      render(html`
+      <style>${sidebarAnnotationsTabStyles}</style>
+      <span class="annotations">
+        ${input.annotations.length === 0 ? renderTutorial():
+          html`
+            ${input.annotations.map(annotation => {
+              const label = detailedAriaDescriptionForAnnotation(annotation);
+              return html`
+                <div class="annotation-container"
+                  @click=${() => input.onAnnotationClick(annotation)}
+                  @mouseover=${() => (annotation.type === 'ENTRY_LABEL') ? input.onAnnotationHover(annotation): null}
+                  @mouseout=${() => (annotation.type === 'ENTRY_LABEL') ? input.onAnnotationHoverOut() : null}
+                  aria-label=${label}
+                  tabindex="0"
+                  jslog=${VisualLogging.item(`timeline.annotation-sidebar.annotation-${jslogForAnnotation(annotation)}`).track({click: true})}
+                >
+                  <div class="annotation">
+                    ${renderAnnotationIdentifier(annotation, input.annotationEntryToColorMap)}
+                    <span class="label">
+                      ${(annotation.type === 'ENTRY_LABEL' || annotation.type === 'TIME_RANGE') ? annotation.label : ''}
+                    </span>
+                  </div>
+                  <button class="delete-button" aria-label=${i18nString(UIStrings.deleteButton, {PH1: label})} @click=${(event: Event) => {
+                    // Stop propagation to not zoom into the annotation when
+                    // the delete button is clicked
+                    event.stopPropagation();
+                    input.onAnnotationDelete(annotation);
+                  }} jslog=${VisualLogging.action('timeline.annotation-sidebar.delete').track({click: true})}>
+                    <devtools-icon class="bin-icon extra-large" name="bin"></devtools-icon>
+                  </button>
+                </div>`;
+            })}
+            <setting-checkbox class="visibility-setting" .data=${{
+              setting: input.annotationsHiddenSetting,
+              textOverride: 'Hide annotations',
+            }}>
+            </setting-checkbox>`
+    }
+    </span>`,
+  target, {host: target});
+};

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

@@ -5,9 +5,6 @@
 
 import './SidebarSingleInsightSet.js';
 
-import * as Host from '../../../core/host/host.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
@@ -21,22 +18,6 @@ import type {SidebarSingleInsightSet, SidebarSingleInsightSetData} from './Sideb
 
 const {html} = Lit;
 
-const FEEDBACK_URL = 'https://crbug.com/371170842' as Platform.DevToolsPath.UrlString;
-
-const UIStrings = {
-  /**
-   *@description text show in feedback button
-   */
-  feedbackButton: 'Feedback',
-  /**
-   *@description text show in feedback tooltip
-   */
-  feedbackTooltip: 'Insights is an experimental feature. Your feedback will help us improve it.',
-} as const;
-
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarInsightsTab.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 export class SidebarInsightsTab extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
@@ -50,7 +31,7 @@ export class SidebarInsightsTab extends HTMLElement {
    * beginning of the trace up to the first navigation.
    * You can only have one of these open at any time, and we track it via this ID.
    */
-  #insightSetKey: string|null = null;
+  #selectedInsightSetKey: string|null = null;
 
   // TODO(paulirish): add back a disconnectedCallback() to avoid memory leaks that doesn't cause b/372943062
 
@@ -59,7 +40,7 @@ export class SidebarInsightsTab extends HTMLElement {
       return;
     }
     this.#parsedTrace = data;
-    this.#insightSetKey = null;
+    this.#selectedInsightSetKey = null;
 
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
@@ -69,7 +50,7 @@ export class SidebarInsightsTab extends HTMLElement {
       return;
     }
     this.#traceMetadata = data;
-    this.#insightSetKey = null;
+    this.#selectedInsightSetKey = null;
 
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
@@ -79,26 +60,21 @@ export class SidebarInsightsTab extends HTMLElement {
       return;
     }
 
-    this.#insights = data;
-    this.#insightSetKey = null;
-    if (!this.#insights || !this.#parsedTrace) {
+    this.#selectedInsightSetKey = null;
+    if (!data || !this.#parsedTrace) {
       return;
     }
 
-    // Select by default the first non-trivial insight set:
-    // - greater than 5s in duration
-    // - or, has a navigation
-    // In practice this means selecting either the first or the second insight set.
-    const trivialThreshold = Trace.Helpers.Timing.milliToMicro(Trace.Types.Timing.Milli(5000));
-    const insightSets = [...this.#insights.values()];
-    this.#insightSetKey =
-        insightSets.find(insightSet => insightSet.navigation || insightSet.bounds.range > trivialThreshold)?.id
-        // If everything is "trivial", just select the first one.
-        ?? insightSets[0]?.id ?? null;
-
+    this.#insights = new Map(data);
+    /** Select the first set. Filtering out trivial sets was done back in {@link Trace.Processor.#computeInsightsForInitialTracePeriod} */
+    this.#selectedInsightSetKey = [...this.#insights.keys()].at(0) ?? null;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
+  get activeInsight(): ActiveInsight|null {
+    return this.#activeInsight;
+  }
+
   set activeInsight(active: ActiveInsight|null) {
     if (active === this.#activeInsight) {
       return;
@@ -111,15 +87,15 @@ export class SidebarInsightsTab extends HTMLElement {
     // be activated by clicking on a insight chip in the Summary panel, which may require opening
     // a different insight set.
     if (this.#activeInsight) {
-      this.#insightSetKey = this.#activeInsight.insightSetKey;
+      this.#selectedInsightSetKey = this.#activeInsight.insightSetKey;
     }
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
   #insightSetToggled(id: string): void {
-    this.#insightSetKey = this.#insightSetKey === id ? null : id;
+    this.#selectedInsightSetKey = this.#selectedInsightSetKey === id ? null : id;
     // Update the active insight set.
-    if (this.#insightSetKey !== this.#activeInsight?.insightSetKey) {
+    if (this.#selectedInsightSetKey !== this.#activeInsight?.insightSetKey) {
       this.dispatchEvent(new Insights.SidebarInsight.InsightDeactivated());
     }
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
@@ -134,10 +110,6 @@ export class SidebarInsightsTab extends HTMLElement {
     this.dispatchEvent(new Insights.SidebarInsight.InsightSetHovered());
   }
 
-  #onFeedbackClick(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(FEEDBACK_URL);
-  }
-
   #onZoomClick(event: Event, id: string): void {
     event.stopPropagation();
     const data = this.#insights?.get(id);
@@ -230,16 +202,16 @@ export class SidebarInsightsTab extends HTMLElement {
 
           if (hasMultipleInsightSets) {
             return html`<details
-              ?open=${id === this.#insightSetKey}
+              ?open=${id === this.#selectedInsightSetKey}
             >
               <summary
                 @click=${() => this.#insightSetToggled(id)}
                 @mouseenter=${() => this.#insightSetHovered(id)}
                 @mouseleave=${() => this.#insightSetUnhovered()}
                 title=${url.href}>
-                ${this.#renderDropdownIcon(id === this.#insightSetKey)}
+                ${this.#renderDropdownIcon(id === this.#selectedInsightSetKey)}
                 <span>${labels[index]}</span>
-                <span class='zoom-button' @click=${(event: Event) => this.#onZoomClick(event, id)}>${this.#renderZoomButton(id === this.#insightSetKey)}</span>
+                <span class='zoom-button' @click=${(event: Event) => this.#onZoomClick(event, id)}>${this.#renderZoomButton(id === this.#selectedInsightSetKey)}</span>
               </summary>
               ${contents}
             </details>`;
@@ -248,14 +220,6 @@ export class SidebarInsightsTab extends HTMLElement {
           return contents;
         })}
       </div>
-
-      <div class="feedback-wrapper">
-        <devtools-button .variant=${Buttons.Button.Variant.OUTLINED} .iconName=${'experiment'} @click=${this.#onFeedbackClick}>
-          ${i18nString(UIStrings.feedbackButton)}
-        </devtools-button>
-
-        <p class="tooltip">${i18nString(UIStrings.feedbackTooltip)}</p>
-      </div>
     `;
     // clang-format on