[RPP]: Add focus button for multi navigation traces

This adds a button to the navigations that when clicked, adjusts the
tracebounds of the given navigation.

http://screencast/cast/NTUzMTI0OTkyMDcwNDUxMnw4MDdjZjAyYy0xMQ

Bug:372858594
Change-Id: I7562a95342a558151b772c697a125ccb96d63f40
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5936136
Commit-Queue: Adriana Ixba <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>

Author: Adriana Ixba

config/gni/devtools_grd_files.gni

@@ -60,6 +60,7 @@ grd_files_release_sources = [
   "front_end/Images/bundle.svg",
   "front_end/Images/button-magic.svg",
   "front_end/Images/calendar-today.svg",
+  "front_end/Images/center-focus-weak.svg",
   "front_end/Images/check-circle.svg",
   "front_end/Images/check-double.svg",
   "front_end/Images/checker.svg",

config/gni/devtools_image_files.gni

@@ -67,6 +67,7 @@ devtools_svg_sources = [
   "bundle.svg",
   "button-magic.svg",
   "calendar-today.svg",
+  "center-focus-weak.svg",
   "check-circle.svg",
   "check-double.svg",
   "checker.svg",

front_end/Images/src/center-focus-weak.svg

@@ -605,6 +605,11 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       }
     });
 
+    this.#sideBar.element.addEventListener(TimelineInsights.SidebarInsight.InsightSetZoom.eventName, event => {
+      TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
+          event.bounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+    });
+
     this.onModeChanged();
     this.populateToolbar();
     // The viewMode is set by default to the landing page, so we don't call

front_end/panels/timeline/TimelinePanel.ts

@@ -132,6 +132,52 @@ export class SidebarInsightsTab extends HTMLElement {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(FEEDBACK_URL);
   }
 
+  #onZoomClick(event: Event, id: string): void {
+    event.stopPropagation();
+    const data = this.#insights?.get(id);
+    if (!data) {
+      return;
+    }
+    this.dispatchEvent(new Insights.SidebarInsight.InsightSetZoom(data.bounds));
+  }
+
+  #renderZoomButton(insightSetToggled: boolean): LitHtml.TemplateResult {
+    const classes = LitHtml.Directives.classMap({
+      'zoom-icon': true,
+      active: insightSetToggled,
+    });
+
+    // clang-format off
+    return html`
+    <div class=${classes}>
+        <devtools-button .data=${{
+          variant: Buttons.Button.Variant.ICON,
+          iconName: 'center-focus-weak',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button></div>`;
+    // clang-format on
+  }
+
+  #renderDropdownIcon(insightSetToggled: boolean): LitHtml.TemplateResult {
+    const containerClasses = LitHtml.Directives.classMap({
+      'dropdown-icon': true,
+      active: insightSetToggled,
+    });
+
+    // clang-format off
+    return html`
+      <div class=${containerClasses}>
+        <devtools-button .data=${{
+          variant: Buttons.Button.Variant.ICON,
+          iconName: 'chevron-right',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button></div>
+    `;
+    // clang-format on
+  }
+
   #render(): void {
     if (!this.#parsedTrace || !this.#insights) {
       LitHtml.render(LitHtml.nothing, this.#shadow, {host: this});
@@ -168,8 +214,11 @@ export class SidebarInsightsTab extends HTMLElement {
                 @click=${() => this.#insightSetToggled(id)}
                 @mouseenter=${() => this.#insightSetHovered(id)}
                 @mouseleave=${() => this.#insightSetUnhovered()}
-                title=${url.href}
-                >${labels[index]}</summary>
+                title=${url.href}>
+                ${this.#renderDropdownIcon(id === this.#insightSetKey)}
+                <span>${labels[index]}</span>
+                <span class='zoom-button' @click=${(event: Event) => this.#onZoomClick(event, id)}>${this.#renderZoomButton(id === this.#insightSetKey)}</span>
+              </summary>
               ${contents}
             </details>`;
           }

front_end/panels/timeline/components/SidebarInsightsTab.ts

@@ -70,6 +70,13 @@ export class InsightSetHovered extends Event {
   }
 }
 
+export class InsightSetZoom extends Event {
+  static readonly eventName = 'insightsetzoom';
+  constructor(public bounds: Trace.Types.Timing.TraceWindowMicroSeconds) {
+    super(InsightSetZoom.eventName, {bubbles: true, composed: true});
+  }
+}
+
 export class InsightProvideOverlays extends Event {
   static readonly eventName = 'insightprovideoverlays';
 
@@ -94,6 +101,7 @@ declare global {
     [InsightActivated.eventName]: InsightActivated;
     [InsightDeactivated.eventName]: InsightDeactivated;
     [InsightSetHovered.eventName]: InsightSetHovered;
+    [InsightSetZoom.eventName]: InsightSetZoom;
     [InsightProvideOverlays.eventName]: InsightProvideOverlays;
     [InsightProvideRelatedEvents.eventName]: InsightProvideRelatedEvents;
   }

front_end/panels/timeline/components/insights/SidebarInsight.ts

@@ -32,6 +32,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     font: var(--sys-typescale-body4-medium);
+    display: flex;
+    align-items: center;
 
     &:focus {
       background-color: var(--sys-color-tonal-container);
@@ -47,6 +49,24 @@
     details:first-child & {
       border-top: 1px solid var(--sys-color-divider);
     }
+    }
+  }
+
+.zoom-button {
+  margin-left: auto;
+}
+
+.zoom-icon {
+  visibility: hidden;
+
+  &.active devtools-button {
+    visibility: visible;
+  }
+}
+
+.dropdown-icon {
+  &.active devtools-button {
+    transform: rotate(90deg);
   }
 }