polish: use a better icon for split/collapse charts

Fixes microsoft/vscode#107837

Author: connor4312

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

@@ -55,15 +55,30 @@
           "group": "navigation@1"
         },
         {
-          "command": "vscode-js-profile-flame.toggleSplitCharts",
-          "when": "view == vscode-js-profile-flame.realtime",
+          "command": "vscode-js-profile-flame.collapseCharts",
+          "when": "view == vscode-js-profile-flame.realtime && vscodeJsProfileFlameSplitCharts",
+          "group": "navigation@1"
+        },
+        {
+          "command": "vscode-js-profile-flame.splitCharts",
+          "when": "view == vscode-js-profile-flame.realtime && !vscodeJsProfileFlameSplitCharts",
           "group": "navigation@1"
         },
         {
           "command": "extension.pwa-node-debug.startProfile",
           "when": "view == vscode-js-profile-flame.realtime",
           "group": "navigation@1"
         }
+      ],
+      "commandPalette": [
+        {
+          "command": "vscode-js-profile-flame.collapseCharts",
+          "when": "debugType =~ /^pwa-/ && vscodeJsProfileFlameSplitCharts"
+        },
+        {
+          "command": "vscode-js-profile-flame.splitCharts",
+          "when": "debugType =~ /^pwa-/ && !vscodeJsProfileFlameSplitCharts"
+        }
       ]
     },
     "commands": [
@@ -74,10 +89,16 @@
         "icon": "$(gear)"
       },
       {
-        "command": "vscode-js-profile-flame.toggleSplitCharts",
+        "command": "vscode-js-profile-flame.collapseCharts",
+        "category": "Debug",
+        "title": "Collapse to Realtime Metrics Single Chart",
+        "icon": "$(collapse-all)"
+      },
+      {
+        "command": "vscode-js-profile-flame.splitCharts",
         "category": "Debug",
-        "title": "Toggle Realtime Split Charts",
-        "icon": "$(split-vertical)"
+        "title": "Split Realtime Metrics to Separate Charts",
+        "icon": "$(expand-all)"
       }
     ],
     "configuration": [

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

@@ -76,9 +76,12 @@ export function activate(context: vscode.ExtensionContext) {
       }
     }),
 
-    vscode.commands.registerCommand('vscode-js-profile-flame.toggleSplitCharts', () => {
-      const settings = readRealtimeSettings(context);
-      realtimeTracker.setSplitCharts(!settings.splitCharts);
+    vscode.commands.registerCommand('vscode-js-profile-flame.splitCharts', () => {
+      realtimeTracker.setSplitCharts(true);
+    }),
+
+    vscode.commands.registerCommand('vscode-js-profile-flame.collapseCharts', () => {
+      realtimeTracker.setSplitCharts(false);
     }),
   );
 }

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

@@ -56,7 +56,13 @@ export class RealtimeSessionTracker {
     return this.displayedSession && this.sessionData.get(this.displayedSession)?.metrics;
   }
 
-  constructor(private readonly context: vscode.ExtensionContext) {}
+  constructor(private readonly context: vscode.ExtensionContext) {
+    vscode.commands.executeCommand(
+      'setContext',
+      'vscodeJsProfileFlameSplitCharts',
+      readRealtimeSettings(context).splitCharts,
+    );
+  }
 
   /**
    * Updates the metrics enabled in the displayed chart.
@@ -71,6 +77,7 @@ export class RealtimeSessionTracker {
    * different charts.
    */
   public setSplitCharts(split: boolean) {
+    vscode.commands.executeCommand('setContext', 'vscodeJsProfileFlameSplitCharts', split);
     this.context.workspaceState.update(splitChartsKey, split);
     this.updateSettings();
   }