docs: improve flame chart readme, add logo

Author: connor4312

packages/vscode-js-profile-flame/README.md

@@ -1,9 +1,35 @@
 # `vscode-js-profile-flame`
 
-This is a custom editor that provides flame graphs for V8-style `.cpuprofile` files. Usage:
+This package contains two pieces of functionality: a flame chart viewer for V8-style `.cpuprofile` files, and a realtime performance view for VS Code:
 
-1. Install this extension,
-2. Open a `.cpuprofile` file in VS Code,
-3. If you already have another editor, such as the default table view, hit `F1` and then `Reopen With` this extension.
+### Realtime Performance View
 
-![Screenshot of the flame graph](https://raw.githubusercontent.com/microsoft/vscode-js-profile-visualizer/master/flame.png)
+While running or debugging a JavaScript debug target (a launch type of `node`, `chrome`, `msedge`, `extensionHost`, or their `pwa-` prefixed versions), the realtime performance view is show in the Debug view:
+
+![](/packages/vscode-js-profile-flame/resources/realtime-view.png)
+
+For Node.js, CPU and heap usage is shown. For browsers, we additionally show DOM node count, restyles per second, and relayouts per second. Clocking on the labels on the bottom will expand a view that lets you show or hide different series.
+
+You can click the "split" button in the view title to show each series on its own chart, and there's also a button to quickly take a profile of the running program.
+
+You can further configure the realtime performance view with the following user settings:
+
+- `debug.flameGraph.realtimePollInterval`: How often (in seconds) to refresh statistics from the runtime.
+- `debug.flameGraph.realtimeViewDuration`: How much time (in seconds) should be kept in the graph.
+- `debug.flameGraph.realtimeEasing`: Whether easing is enable on the realtime graph.
+
+### Flame Chart View
+
+You can open a `.cpuprofile` file (such as one taken by clicking the "profile" button in the realtime performance view), then click the 🔥 button in the upper right to open a flame chart view.
+
+By default, this view shows chronological "snapshots" of your program's stack taken roughly each millisecond. You can zoom and explore the flamechart, and ctrl or cmd+click on stacks to jump to the stack location.
+
+![](/packages/vscode-js-profile-flame/resources/flame-chrono.png)
+
+The flame chart also supports a "left heavy" view, toggled by clicking the button in the upper-right corner of the chart.
+
+This view groups call stacks and orders them by time, creating a visual representation of the "top down" table you might have used in other tools. This is especially useful if your profile has lots of thin call stacks (common with things like web servers) which are hard to get a sense of in the chronological view. Here's the left-heavy view of the same profile:
+
+![](/packages/vscode-js-profile-flame/resources/flame-leftheavy.png)
+
+The flame chart color is tweakable via the `charts-red` color token in your VS Code theme.

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

@@ -11,14 +11,15 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/microsoft/vscode-js-profile-visualizer.git"
+    "url": "https://github.com/microsoft/vscode-js-profile-visualizer.git"
   },
   "publisher": "ms-vscode",
   "enableProposedApi": true,
   "sideEffects": false,
   "engines": {
     "vscode": "^1.50.0-insider"
   },
+  "icon": "packages/vscode-js-profile-flame/resources/logo.png",
   "activationEvents": [
     "onView:vscode-js-profile-flame.realtime",
     "onCustomEditor:jsProfileVisualizer.cpuprofile.flame"
@@ -88,13 +89,13 @@
             "minimum": 0.5,
             "maximum": 3600,
             "default": 1,
-            "description": "How often (in seconds) to refresh statistics from the runtime"
+            "description": "How often (in seconds) to refresh statistics from the runtime."
           },
           "debug.flameGraph.realtimeViewDuration": {
             "type": "integer",
             "minimum": 1,
             "default": 30,
-            "description": "How much time (in seconds) should be kept in the graph"
+            "description": "How much time (in seconds) should be kept in the graph."
           },
           "debug.flameGraph.realtimeEasing": {
             "type": "boolean",