[RPP] Add home button for landing page

https://screenshot.googleplex.com/76b6LUofz9bjZsq

Bug: 373526311
Change-Id: Iea6d904b5a8023c2f67bd7bc35ab64cdf4fd48ef
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5941205
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Adam Raine <[email protected]>

Author: Adam Raine

config/gni/devtools_grd_files.gni

@@ -150,6 +150,7 @@ grd_files_release_sources = [
   "front_end/Images/heap-snapshot.svg",
   "front_end/Images/heap-snapshots.svg",
   "front_end/Images/help.svg",
+  "front_end/Images/home.svg",
   "front_end/Images/hover.svg",
   "front_end/Images/iframe-crossed.svg",
   "front_end/Images/iframe.svg",

config/gni/devtools_image_files.gni

@@ -153,6 +153,7 @@ devtools_svg_sources = [
   "heap-snapshot.svg",
   "heap-snapshots.svg",
   "help.svg",
+  "home.svg",
   "hover.svg",
   "iframe-crossed.svg",
   "iframe.svg",

front_end/Images/src/home.svg

@@ -322,6 +322,10 @@ export class TimelineHistoryManager {
     return this.recordings[newIndex];
   }
 
+  navigateToLandingPage(): void {
+    this.#setActiveTrace({type: 'LANDING_PAGE'});
+  }
+
   #setActiveTrace(item: RecordingData): void {
     if (item.type === 'TRACE_INDEX') {
       const data = TimelineHistoryManager.dataForTraceIndex(item.parsedTraceIndex);

front_end/panels/timeline/TimelineHistoryManager.ts

@@ -307,6 +307,10 @@ const UIStrings = {
    *@description Text of a hyperlink to documentation.
    */
   learnMore: 'Learn more',
+  /**
+   * @description Tooltip text for a button that takes the user back to the default view which shows performance metrics that are live.
+   */
+  backToLiveMetrics: 'Go back to the live metrics page',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -383,6 +387,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private brickBreakerToolbarButtonAdded = false;
   private loadButton!: UI.Toolbar.ToolbarButton;
   private saveButton!: UI.Toolbar.ToolbarButton|UI.Toolbar.ToolbarMenuButton;
+  private homeButton?: UI.Toolbar.ToolbarButton;
   private statusPane!: StatusPane|null;
   private landingPage!: UI.Widget.Widget;
   private loader?: TimelineLoader;
@@ -1012,6 +1017,18 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     // History
     this.panelToolbar.appendSeparator();
+
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS)) {
+      this.homeButton = new UI.Toolbar.ToolbarButton(
+          i18nString(UIStrings.backToLiveMetrics), 'home', undefined, 'timeline.back-to-live-metrics');
+      this.homeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
+        this.#changeView({mode: 'LANDING_PAGE'});
+        this.#historyManager.navigateToLandingPage();
+      });
+      this.panelToolbar.appendToolbarItem(this.homeButton);
+      this.panelToolbar.appendSeparator();
+    }
+
     this.panelToolbar.appendToolbarItem(this.#historyManager.button());
     this.panelToolbar.registerCSSFiles([historyToolbarButtonStyles]);
     this.panelToolbar.appendSeparator();
@@ -1595,6 +1612,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.dropTarget.setEnabled(this.state === State.IDLE);
     this.loadButton.setEnabled(this.state === State.IDLE);
     this.saveButton.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
+    this.homeButton?.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
     if (this.#viewMode.mode === 'VIEWING_TRACE') {
       this.#addSidebarIconToToolbar();
     }

front_end/panels/timeline/TimelinePanel.ts

@@ -3068,6 +3068,7 @@ export const knownContextValues = new Set([
   'timeline.annotations.entry-annotation-create',
   'timeline.annotations.entry-label-input',
   'timeline.annotations.time-range-label-input',
+  'timeline.back-to-live-metrics',
   'timeline.breadcrumb-select',
   'timeline.clear',
   'timeline.configure',