[RPP] Add Node specific title for the history manager

Bug: 381886477
Change-Id: I58f06e901e9d0eab9c49891579546b0e72ad0f2c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6112197
Auto-Submit: Adam Raine <[email protected]>
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Adriana Ixba <[email protected]>
Commit-Queue: Adriana Ixba <[email protected]>

Author: Adam Raine

front_end/panels/timeline/TimelineHistoryManager.test.ts

@@ -23,6 +23,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
   });
 
   it('shows the dropdown including a landing page link', async function() {
+    assert.strictEqual(historyManager.button().element.innerText!, 'Live metrics');
+
     const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     historyManager.addRecording(
         {
@@ -36,6 +38,8 @@ describeWithEnvironment('TimelineHistoryManager', function() {
         },
     );
 
+    assert.strictEqual(historyManager.button().element.innerText!, 'web.dev #1');
+
     const showPromise = historyManager.showHistoryDropDown();
     const glassPane = document.querySelector('div[data-devtools-glass-pane]');
     const dropdown =
@@ -53,6 +57,40 @@ describeWithEnvironment('TimelineHistoryManager', function() {
     await showPromise;
   });
 
+  it('uses Node specific landing page title', async function() {
+    historyManager = new Timeline.TimelineHistoryManager.TimelineHistoryManager(undefined, true);
+    assert.strictEqual(historyManager.button().element.innerText!, 'New recording');
+
+    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    historyManager.addRecording(
+        {
+          data: {
+            parsedTraceIndex: 1,
+            type: 'TRACE_INDEX',
+          },
+          filmStripForPreview: null,
+          parsedTrace,
+          metadata,
+        },
+    );
+
+    const showPromise = historyManager.showHistoryDropDown();
+    const glassPane = document.querySelector('div[data-devtools-glass-pane]');
+    const dropdown =
+        glassPane?.shadowRoot?.querySelector('.widget')?.shadowRoot?.querySelector<HTMLElement>('.drop-down');
+    assert.isOk(dropdown);
+
+    const menuItemText = Array.from(dropdown.querySelectorAll<HTMLDivElement>('[role="menuitem"]'), elem => {
+      return elem.innerText.replaceAll('\n', '');
+    });
+    assert.deepEqual(menuItemText, ['New recording', 'web.dev1× slowdown, No throttling']);
+
+    // Cancel the dropdown, which also resolves the show() promise, meaning we
+    // don't leak it into other tests.
+    historyManager.cancelIfShowing();
+    await showPromise;
+  });
+
   it('can select from multiple parsed data objects', async function() {
     // Add two parsed data objects to the history manager.
     const {parsedTrace: trace1Data, metadata: metadata1} =

front_end/panels/timeline/TimelineHistoryManager.ts

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -39,6 +38,10 @@ const UIStrings = {
    *@description the title shown when the user is viewing the landing page which is showing live performance metrics that are updated automatically.
    */
   landingPageTitle: 'Live metrics',
+  /**
+   * @description the title shown when the user is viewing the landing page which can be used to make a new performance recording.
+   */
+  nodeLandingPageTitle: 'New recording',
   /**
    *@description Text in Timeline History Manager of the Performance panel
    *@example {example.com} PH1
@@ -112,13 +115,18 @@ export class TimelineHistoryManager {
   private enabled: boolean;
   private lastActiveTrace: RecordingData|null = null;
   #minimapComponent?: TimelineMiniMap;
-  constructor(minimapComponent?: TimelineMiniMap) {
+  #landingPageTitle: Common.UIString.LocalizedString;
+
+  constructor(minimapComponent?: TimelineMiniMap, isNode?: boolean) {
     this.recordings = [];
     this.#minimapComponent = minimapComponent;
     this.action = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.show-history');
     this.nextNumberByDomain = new Map();
     this.buttonInternal = new ToolbarButton(this.action);
 
+    this.#landingPageTitle =
+        isNode ? i18nString(UIStrings.nodeLandingPageTitle) : i18nString(UIStrings.landingPageTitle);
+
     UI.ARIAUtils.markAsMenuButton(this.buttonInternal.element);
     this.clear();
 
@@ -160,25 +168,6 @@ export class TimelineHistoryManager {
     ];
     this.totalHeight = this.allOverviews.reduce((acc, entry) => acc + entry.height, 0);
     this.enabled = true;
-
-    CrUXManager.CrUXManager.instance().addEventListener(CrUXManager.Events.FIELD_DATA_CHANGED, () => {
-      this.#updateLandingPageTitleIfActive();
-    });
-  }
-
-  /**
-   * If the user changes the CrUX consent status, the title shown in the
-   * dropdown could be outdated, as we show "Local" or "Local and field"
-   * depending on if the user has consented.
-   * This method will be called whenever the CrUXManager detects a change, and
-   * we use it as a chance to re-evaluate if the title needs changing or not.
-   */
-  #updateLandingPageTitleIfActive(): void {
-    if (this.lastActiveTrace?.type === 'LANDING_PAGE') {
-      const title = this.title(this.lastActiveTrace);
-      this.buttonInternal.setTitle(title);
-      this.buttonInternal.setText(title);
-    }
   }
 
   addRecording(newInput: NewHistoryRecordingData): void {
@@ -225,7 +214,7 @@ export class TimelineHistoryManager {
     this.recordings = [];
     this.lastActiveTrace = null;
     this.updateState();
-    this.buttonInternal.setText(i18nString(UIStrings.landingPageTitle));
+    this.buttonInternal.setText(this.#landingPageTitle);
     this.nextNumberByDomain.clear();
   }
 
@@ -247,7 +236,7 @@ export class TimelineHistoryManager {
     // DropDown.show() function finishes when the dropdown menu is closed via selection or losing focus
     const activeTraceIndex = await DropDown.show(
         this.recordings.map(recording => recording.parsedTraceIndex), this.#getActiveTraceIndexForListControl(),
-        this.buttonInternal.element);
+        this.buttonInternal.element, this.#landingPageTitle);
 
     if (activeTraceIndex === null) {
       return null;
@@ -336,7 +325,7 @@ export class TimelineHistoryManager {
 
   private title(item: RecordingData): string {
     if (item.type === 'LANDING_PAGE') {
-      return i18nString(UIStrings.landingPageTitle);
+      return this.#landingPageTitle;
     }
 
     const data = TimelineHistoryManager.dataForTraceIndex(item.parsedTraceIndex);
@@ -463,8 +452,11 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
   private readonly listControl: UI.ListControl.ListControl<number>;
   private readonly focusRestorer: UI.UIUtils.ElementFocusRestorer;
   private selectionDone: ((arg0: number|null) => void)|null;
+  #landingPageTitle: Common.UIString.LocalizedString;
+
+  constructor(availableparsedTraceIndexes: number[], landingPageTitle: Common.UIString.LocalizedString) {
+    this.#landingPageTitle = landingPageTitle;
 
-  constructor(availableparsedTraceIndexes: number[]) {
     this.glassPane = new UI.GlassPane.GlassPane();
     this.glassPane.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
     this.glassPane.setOutsideClickCallback(() => this.close(null));
@@ -493,14 +485,16 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
     this.selectionDone = null;
   }
 
-  static show(availableparsedTraceIndexes: number[], activeparsedTraceIndex: number, anchor: Element):
+  static show(
+      availableparsedTraceIndexes: number[], activeparsedTraceIndex: number, anchor: Element,
+      landingPageTitle: Common.UIString.LocalizedString = i18nString(UIStrings.landingPageTitle)):
       Promise<number|null> {
     if (DropDown.instance) {
       return Promise.resolve(null);
     }
     const availableDropdownChoices = [...availableparsedTraceIndexes];
     availableDropdownChoices.unshift(LANDING_PAGE_INDEX_DROPDOWN_CHOICE);
-    const instance = new DropDown(availableDropdownChoices);
+    const instance = new DropDown(availableDropdownChoices, landingPageTitle);
     return instance.show(anchor, activeparsedTraceIndex);
   }
 
@@ -588,7 +582,7 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
     div.appendChild(icon);
 
     const text = document.createElement('span');
-    text.innerText = i18nString(UIStrings.landingPageTitle);
+    text.innerText = this.#landingPageTitle;
     div.appendChild(text);
     return div;
   }

front_end/panels/timeline/TimelinePanel.ts

@@ -516,7 +516,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.toggle-recording');
     this.recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
 
-    this.#historyManager = new TimelineHistoryManager(this.#minimapComponent);
+    this.#historyManager = new TimelineHistoryManager(this.#minimapComponent, isNode);
 
     this.traceLoadStart = null;
 
@@ -1085,14 +1085,16 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     // History
     this.panelToolbar.appendSeparator();
 
-    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();
+    if (!isNode) {
+      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]);