[RPP] Add minimal Node specific landing page

https://screenshot.googleplex.com/5tCR9VaQoZ2KDje

Bug: 381886477
Change-Id: I3f728c1e524a3ccf3a45b8e46be5f3ffec2df997
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6094763
Reviewed-by: Connor Clark <[email protected]>
Commit-Queue: Adam Raine <[email protected]>

Author: Adam Raine

front_end/panels/timeline/TimelinePanel.ts

@@ -2180,8 +2180,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
 
-    this.landingPage = LegacyWrapper.LegacyWrapper.legacyWrapper(
-        UI.Widget.Widget, new TimelineComponents.LiveMetricsView.LiveMetricsView());
+    const liveMetrics = new TimelineComponents.LiveMetricsView.LiveMetricsView();
+    liveMetrics.isNode = isNode;
+    this.landingPage = LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget, liveMetrics);
     this.landingPage.element.classList.add('timeline-landing-page', 'fill');
     this.landingPage.contentElement.classList.add('fill');
     this.landingPage.show(this.statusPaneContainer);

front_end/panels/timeline/components/LiveMetricsView.test.ts

@@ -690,6 +690,15 @@ describeWithMockConnection('LiveMetricsView', () => {
     assert.strictEqual(mockHandleAction.firstCall.args[1], 'timeline.record-reload');
   });
 
+  it('should show minimal view for Node connections', async () => {
+    const view = renderLiveMetrics();
+    view.isNode = true;
+    await coordinator.done();
+
+    const title = view.shadowRoot?.querySelector('.section-title');
+    assert.strictEqual(title!.textContent!, 'Node performance');
+  });
+
   describe('field data', () => {
     let target: SDK.Target.Target;
     let mockFieldData: CrUXManager.PageResult;

front_end/panels/timeline/components/LiveMetricsView.ts

@@ -278,6 +278,14 @@ const UIStrings = {
    * @description Tooltip text for a button that will open the Chrome DevTools console to and log additional details about a user interaction.
    */
   logToConsole: 'Log additional interaction data to the console',
+  /**
+   * @description Title of a view that can be used to analyze the performance of a Node process as a timeline. "Node" is a product name and should not be translated.
+   */
+  nodePerformanceTimeline: 'Node performance',
+  /**
+   * @description Description of a view that can be used to analyze the performance of a Node process as a timeline. "Node" is a product name and should not be translated.
+   */
+  nodeClickToRecord: 'Record a performance timeline of the connected Node process.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/LiveMetricsView.ts', UIStrings);
@@ -286,6 +294,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
+  #isNode: boolean = false;
+
   #lcpValue?: LiveMetrics.LCPValue;
   #clsValue?: LiveMetrics.CLSValue;
   #inpValue?: LiveMetrics.INPValue;
@@ -311,6 +321,11 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     this.#recordReloadAction = UI.ActionRegistry.ActionRegistry.instance().getAction('timeline.record-reload');
   }
 
+  set isNode(isNode: boolean) {
+    this.#isNode = isNode;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  }
+
   #onMetricStatus(event: {data: LiveMetrics.StatusEvent}): void {
     this.#lcpValue = event.data.lcp;
     this.#clsValue = event.data.cls;
@@ -1021,7 +1036,24 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format on
   }
 
+  #renderNodeView(): LitHtml.LitTemplate {
+    return html`
+      <div class="node-view">
+        <main>
+          <h2 class="section-title">${i18nString(UIStrings.nodePerformanceTimeline)}</h2>
+          <div class="node-description">${i18nString(UIStrings.nodeClickToRecord)}</div>
+          <div class="record-action-card">${this.#renderRecordAction(this.#toggleRecordAction)}</div>
+        </main>
+      </div>
+    `;
+  }
+
   #render = (): void => {
+    if (this.#isNode) {
+      LitHtml.render(this.#renderNodeView(), this.#shadow, {host: this});
+      return;
+    }
+
     const fieldEnabled = this.#cruxManager.getConfigSetting().get().enabled;
     const liveMetricsTitle =
         fieldEnabled ? i18nString(UIStrings.localAndFieldMetrics) : i18nString(UIStrings.localMetrics);

front_end/panels/timeline/components/liveMetricsView.css

@@ -365,3 +365,28 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   text-decoration: underline;
   cursor: pointer;
 }
+
+.node-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
+  font-weight: var(--ref-typeface-weight-regular);
+  user-select: text;
+
+  main {
+    width: 300px;
+    max-width: 100%;
+    text-align: center;
+
+    .section-title {
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.node-description {
+  margin-bottom: 12px;
+}