feat: ui improvements in realtime profile

- make toggling happen via quickpick
- kept configurator, allow opening and closing by click on the graph or labels
- improved graph scale

https://memes.peet.io/img/20-09-2c2e3815-0120-4b26-9663-5439dfcc1fdb.png

Author: connor4312

packages/vscode-js-profile-flame/package.json

@@ -20,7 +20,7 @@
     "vscode": "^1.43.0"
   },
   "activationEvents": [
-		"onView:vscode-js-profile-flame.realtime",
+    "onView:vscode-js-profile-flame.realtime",
     "onCustomEditor:jsProfileVisualizer.cpuprofile.flame"
   ],
   "contributes": {
@@ -42,11 +42,28 @@
           "type": "webview",
           "id": "vscode-js-profile-flame.realtime",
           "name": "Realtime Performance",
-          "when": "debugConfigurationType =~ /^pwa-/"
+          "when": "debugConfigurationType =~ /^pwa-/ || debugConfigurationType == node || debugConfigurationType == chrome"
         }
       ]
     },
-    "configuration":[
+    "menus": {
+      "view/title": [
+        {
+          "command": "vscode-js-profile-flame.setRealtimeCharts",
+          "when": "view == vscode-js-profile-flame.realtime",
+          "group": "navigation@1"
+        }
+      ]
+    },
+    "commands": [
+      {
+        "command": "vscode-js-profile-flame.setRealtimeCharts",
+        "category": "Debug",
+        "title": "Toggle Realtime Performance Charts",
+        "icon": "$(gear)"
+      }
+    ],
+    "configuration": [
       {
         "title": "Flamegraph Visaulizer",
         "properties": {

packages/vscode-js-profile-flame/src/extension.ts

@@ -14,12 +14,13 @@ import { join } from 'path';
 import * as vscode from 'vscode';
 import { CpuProfileEditorProvider } from 'vscode-js-profile-core/out/cpu/editorProvider';
 import { ProfileCodeLensProvider } from 'vscode-js-profile-core/out/profileCodeLensProvider';
-import { RealtimeSessionTracker } from './realtimeSessionTracker';
+import { createMetrics } from './realtime/metrics';
+import { readRealtimeSettings, RealtimeSessionTracker } from './realtimeSessionTracker';
 import { RealtimeWebviewProvider } from './realtimeWebviewProvider';
 
 export function activate(context: vscode.ExtensionContext) {
-  const realtimeTracker = new RealtimeSessionTracker();
-  const realtime = new RealtimeWebviewProvider(context.extensionUri, context, realtimeTracker);
+  const realtimeTracker = new RealtimeSessionTracker(context);
+  const realtime = new RealtimeWebviewProvider(context.extensionUri, realtimeTracker);
 
   context.subscriptions.push(
     vscode.window.registerCustomEditorProvider(
@@ -43,6 +44,36 @@ export function activate(context: vscode.ExtensionContext) {
     ),
 
     vscode.debug.onDidTerminateDebugSession(session => realtimeTracker.onSessionDidEnd(session)),
+
+    vscode.commands.registerCommand('vscode-js-profile-flame.setRealtimeCharts', async () => {
+      const metrics = createMetrics();
+      const settings = readRealtimeSettings(context);
+      const quickpick = vscode.window.createQuickPick<{ label: string; index: number }>();
+
+      quickpick.canSelectMany = true;
+      quickpick.items = metrics.map((metric, i) => ({
+        label: metric.name(),
+        index: i,
+      }));
+      quickpick.selectedItems = settings.enabledMetrics.length
+        ? settings.enabledMetrics.map(index => quickpick.items[index])
+        : quickpick.items.slice();
+
+      quickpick.show();
+
+      const chosen = await new Promise<number[] | undefined>(resolve => {
+        quickpick.onDidAccept(() => resolve(quickpick.selectedItems.map(i => i.index)));
+        quickpick.onDidHide(() => resolve(undefined));
+      });
+
+      quickpick.dispose();
+
+      if (!chosen || !chosen.length) {
+        return;
+      }
+
+      realtimeTracker.setEnabledMetrics(chosen);
+    }),
   );
 }
 

packages/vscode-js-profile-flame/src/realtime/baseMetric.ts

@@ -10,10 +10,20 @@ export abstract class Metric {
   private maxMetric = 1;
 
   /**
-   * Gets the max value of all the metrics.
+   * Gets the max y value that the chart should be scaled to. Defaults to
+   * get the max-higher power of 2.
    */
-  public get max() {
-    return this.maxMetric;
+  public get maxY() {
+    let maxY = 10 ** Math.ceil(Math.log10(this.maxMetric));
+    if (maxY > this.maxMetric * 2) {
+      maxY /= 2;
+    }
+
+    if (maxY > this.maxMetric * 2) {
+      maxY /= 2;
+    }
+
+    return maxY;
   }
 
   /**

packages/vscode-js-profile-flame/src/realtime/chart.css

@@ -9,25 +9,55 @@
   flex-direction: column;
 }
 
+.container.noData > * {
+  display: none;
+}
+
+.noDataText {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.8;
+}
+
+.container.noData .noDataText {
+  display: flex;
+}
+
 @media (min-width: 600px) {
   .configOpen.container {
     flex-direction: row;
     align-items: stretch;
   }
 }
 
+.configOpen canvas {
+  cursor: pointer;
+}
+
 .labelList {
   font-size: 11px;
+  cursor: pointer;
   font-family: var(--font-family);
   display: flex;
   align-items: center;
   white-space: nowrap;
 }
 
+.labelList > span > span {
+  padding-left: 0.25em;
+}
+
 .labelList > span {
   display: inline-flex;
   align-items: center;
-  margin-left: 4px;
+  margin: 0 4px;
   color: var(--sideBar-foreground, var(--vscode-foreground));
 }
 
@@ -44,14 +74,17 @@
 .maxContainer {
   position: absolute;
   top: 0;
-  right: 0;
+  left: 0;
   background: linear-gradient(to bottom, var(--vscode-sideBar-background), transparent);
+  font-size: 0.8em;
 }
 
 .max {
-  color: var(--metric-color);
   display: inline;
-  padding: 0 3px;
+}
+
+.max + .max::before {
+  content: ' / ';
 }
 
 .timeLeft,
@@ -68,29 +101,3 @@
 .timeRight {
   right: 0;
 }
-
-.toggle {
-  position: absolute;
-  left: 4px;
-  top: 4px;
-  background: 0;
-  border: 0;
-  padding: 3px;
-  cursor: pointer;
-  color: inherit;
-  line-height: 0;
-}
-
-.toggle:focus {
-  outline: 1px solid var(--vscode-focusBorder);
-  background: none;
-}
-
-.configOpen .toggle {
-  background: var(--vscode-inputOption-activeBackground);
-  line-height: 0;
-}
-
-.toggle svg {
-  width: 15px;
-}

packages/vscode-js-profile-flame/src/realtime/chart.ts

@@ -2,7 +2,6 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import * as Gear from 'vscode-codicons/src/icons/gear.svg';
 import { Metric } from './baseMetric';
 import styles from './chart.css';
 import { Configurator } from './configurator';
@@ -17,9 +16,10 @@ const openToSideWidth = 250;
 const openToSideMinSpace = 600;
 
 export class Chart {
-  private valElements: [Metric, HTMLElement][] = [];
+  private valElements: [Metric, { max: HTMLElement; val: HTMLElement }][] = [];
   private configOpen = false;
   private configHadManualToggle = false;
+  private hasAnyData = false;
 
   private readonly frameCanvas = new FrameCanvas(this.width, this.height, this.settings);
   private readonly elements = this.createElements();
@@ -62,7 +62,8 @@ export class Chart {
       graphHeight = height - Sizing.LabelHeight;
       graphWidth = width;
     } else if (width < openToSideMinSpace) {
-      graphHeight = Math.min(height - Sizing.LabelHeight, Math.round(width / naturalAspectRatio));
+      const cfgrect = this.configurator.elem.getBoundingClientRect();
+      graphHeight = height - cfgrect.height;
       graphWidth = width;
     } else {
       graphHeight = height;
@@ -82,9 +83,20 @@ export class Chart {
       this.configurator.updateMetrics();
     }
 
-    for (const [metric, el] of this.valElements) {
-      el.innerText = metric.format(metric.current);
+    for (const [metric, { val, max }] of this.valElements) {
+      max.innerText = metric.format(metric.maxY);
+      val.innerText = metric.format(metric.current);
     }
+
+    this.setHasData(this.settings.allMetrics.some(m => m.hasData()));
+  }
+
+  private setHasData(hasData: boolean) {
+    if (hasData === this.hasAnyData) {
+      return;
+    }
+
+    this.elements.container.classList[hasData ? 'remove' : 'add'](styles.noData);
   }
 
   private setConfiguratorOpen(isOpen: boolean) {
@@ -109,18 +121,25 @@ export class Chart {
 
   private createElements() {
     const container = document.createElement('div');
-    container.classList.add(styles.container);
+    container.classList.add(styles.container, styles.noData);
     container.style.setProperty('--primary-series-color', this.settings.colors.primaryGraph);
     container.style.setProperty('--secondary-series-color', this.settings.colors.secondaryGraph);
 
     const graph = document.createElement('div');
     graph.style.position = 'relative';
     graph.appendChild(this.frameCanvas.elem);
+    graph.addEventListener('click', () => this.toggleConfiguration(false));
     container.appendChild(graph);
 
+    const noData = document.createElement('div');
+    noData.classList.add(styles.noDataText);
+    noData.innerText = 'No data yet -- start a debug session to collect some!';
+    container.appendChild(noData);
+
     const labelList = document.createElement('div');
     labelList.classList.add(styles.labelList);
     labelList.style.height = `${Sizing.LabelHeight}px`;
+    labelList.addEventListener('click', () => this.toggleConfiguration(true));
     container.appendChild(labelList);
 
     const leftTime = document.createElement('div');
@@ -136,20 +155,18 @@ export class Chart {
     valueContainer.classList.add(styles.maxContainer);
     graph.appendChild(valueContainer);
 
-    const toggleButton = document.createElement('button');
-    toggleButton.classList.add(styles.toggle);
-    toggleButton.innerHTML = Gear;
-    toggleButton.addEventListener('click', () => this.toggleConfiguration());
-    graph.appendChild(toggleButton);
-
     this.setSeries(labelList, valueContainer);
 
-    return { toggleButton, container, labelList, leftTime, valueContainer };
+    return { container, labelList, leftTime, valueContainer };
   }
 
-  private toggleConfiguration() {
+  private toggleConfiguration(toState = !this.configOpen) {
+    if (toState === this.configOpen) {
+      return;
+    }
+
     this.configHadManualToggle = true;
-    this.setConfiguratorOpen(!this.configOpen);
+    this.setConfiguratorOpen(toState);
     this.updateSize(this.width, this.height);
   }
 
@@ -160,8 +177,9 @@ export class Chart {
   }
 
   private setSeries(labelList: HTMLElement, maxContainer: HTMLElement) {
-    for (const [, el] of this.valElements) {
-      maxContainer.removeChild(el);
+    for (const [, { max, val }] of this.valElements) {
+      max.parentElement?.removeChild(max);
+      val.parentElement?.removeChild(val);
     }
 
     labelList.innerHTML = '';
@@ -171,16 +189,19 @@ export class Chart {
       const label = document.createElement('span');
       label.style.setProperty('--metric-color', this.settings.metricColor(metric));
       label.classList.add(styles.primary);
-      label.innerText = metric.name();
+      label.innerText = `${metric.name()}: `;
       labelList.appendChild(label);
 
-      const val = document.createElement('div');
-      val.classList.add(styles.max, styles.primary);
-      val.style.setProperty('--metric-color', this.settings.metricColor(metric));
+      const val = document.createElement('span');
       val.innerText = metric.format(metric.current);
+      label.appendChild(val);
+
+      const max = document.createElement('div');
+      max.classList.add(styles.max, styles.primary);
+      max.innerText = metric.format(metric.maxY);
+      maxContainer.appendChild(max);
 
-      maxContainer.appendChild(val);
-      this.valElements.push([metric, val]);
+      this.valElements.push([metric, { max, val }]);
     }
   }
 }

packages/vscode-js-profile-flame/src/realtime/configurator.css

@@ -1,15 +1,10 @@
 .configurator {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  margin-top: 4px;
+  padding-top: 4px;
 }
 
 .metric {
   display: none;
-  min-height: 1.2em;
-  max-height: 2.2em;
-  flex-grow: 1;
+  height: 2em;
   align-items: center;
   padding: 0 7px;
   position: relative;