Merge pull request #1497 from github/koesie10/storybook

Setup Storybook for testing UI components
2022-09-08 10:38:22 +02:00
parent 7c4eac8520 2ee46cfd81
commit 24652a84e4
28 changed files with 48599 additions and 553 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -18,4 +18,8 @@ yarn.lock                    merge=binary
 # https://mirrors.edge.kernel.org/pub/software/scm/git/docs/gitattributes.html
 # suggests that this might interleave lines arbitrarily, but empirically
 # it keeps added chunks contiguous
-CHANGELOG.md                merge=union
+CHANGELOG.md                merge=union
+
+# Mark some JSON files containing test data as generated so they are not included
+# as part of diffs or language statistics.
+extensions/ql-vscode/src/stories/remote-queries/data/*.json     linguist-generated
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -124,6 +124,14 @@
      "outFiles": [
        "${workspaceRoot}/extensions/ql-vscode/out/**/*.js",
      ],
+    },
+    {
+      "name": "Launch Storybook",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}/extensions/ql-vscode",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run-script", "storybook"]
    }
  ]
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -77,6 +77,20 @@ $ vscode/scripts/code-cli.sh --install-extension dist/vscode-codeql-*.vsix # if

 You can use VS Code to debug the extension without explicitly installing it. Just open this directory as a workspace in VS Code, and hit `F5` to start a debugging session.

+### Storybook
+
+You can use [Storybook](https://storybook.js.org/) to preview React components outside VSCode. Inside the `extensions/ql-vscode` directory, run:
+
+```shell
+npm run storybook
+```
+
+Your browser should automatically open to the Storybook UI. Stories live in the `src/stories` directory.
+
+Alternatively, you can start Storybook inside of VSCode. There is a VSCode launch configuration for starting Storybook. It can be found in the debug view.
+
+More information about Storybook can be found inside the **Overview** page once you have launched Storybook.
+
 ### Running the unit tests and integration tests that do not require a CLI instance

 Unit tests and many integration tests do not require a copy of the CodeQL CLI.
--- a/extensions/ql-vscode/.npmrc
+++ b/extensions/ql-vscode/.npmrc
@@ -0,0 +1,2 @@
+# Storybook requires this option to be set. See https://github.com/storybookjs/storybook/issues/18298
+legacy-peer-deps=true
--- a/extensions/ql-vscode/.storybook/main.ts
+++ b/extensions/ql-vscode/.storybook/main.ts
@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5'
+  }
+};
+
+module.exports = config;
--- a/extensions/ql-vscode/.storybook/manager.ts
+++ b/extensions/ql-vscode/.storybook/manager.ts
@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark,
+  enableShortcuts: false,
+});
--- a/extensions/ql-vscode/.storybook/preview.ts
+++ b/extensions/ql-vscode/.storybook/preview.ts
@@ -0,0 +1,37 @@
+import { themes } from '@storybook/theming';
+import { action } from '@storybook/addon-actions';
+
+// Allow all stories/components to use Codicons
+import '@vscode/codicons/dist/codicon.css';
+
+import '../src/stories/vscode-theme.css';
+
+// https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
+export const parameters = {
+  // All props starting with `on` will automatically receive an action as a prop
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  // All props matching these names will automatically get the correct control
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  // Use a dark theme to be aligned with VSCode
+  docs: {
+    theme: themes.dark,
+  },
+  backgrounds: {
+    default: 'dark',
+    values: [
+      {
+        name: 'dark',
+        value: '#1e1e1e',
+      },
+    ],
+  }
+};
+
+(window as any).acquireVsCodeApi = () => ({
+  postMessage: action('post-vscode-message')
+});
--- a/extensions/ql-vscode/package-lock.json
+++ b/extensions/ql-vscode/package-lock.json
--- a/extensions/ql-vscode/package.json
+++ b/extensions/ql-vscode/package.json
@@ -1191,7 +1191,9 @@
    "update-vscode": "node ./node_modules/vscode/bin/install",
    "format": "tsfmt -r && eslint src test --ext .ts,.tsx --fix",
    "lint": "eslint src test --ext .ts,.tsx --max-warnings=0",
-    "format-staged": "lint-staged"
+    "format-staged": "lint-staged",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@octokit/plugin-retry": "^3.0.9",
@@ -1233,6 +1235,15 @@
    "zip-a-folder": "~1.1.3"
  },
  "devDependencies": {
+    "@babel/core": "^7.18.13",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
    "@types/chai": "^4.1.7",
    "@types/chai-as-promised": "~7.1.2",
    "@types/child-process-promise": "^2.2.1",
@@ -1272,12 +1283,14 @@
    "@typescript-eslint/parser": "^4.26.0",
    "ansi-colors": "^4.1.1",
    "applicationinsights": "^1.8.7",
+    "babel-loader": "^8.2.5",
    "chai": "^4.2.0",
    "chai-as-promised": "~7.1.1",
    "css-loader": "~3.1.0",
    "del": "^6.0.0",
    "eslint": "~6.8.0",
    "eslint-plugin-react": "~7.19.0",
+    "eslint-plugin-storybook": "^0.6.4",
    "file-loader": "^6.2.0",
    "glob": "^7.1.4",
    "gulp": "^4.0.2",
--- a/extensions/ql-vscode/src/stories/.eslintrc.js
+++ b/extensions/ql-vscode/src/stories/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+  env: {
+    browser: true
+  },
+  extends: [
+    "plugin:react/recommended",
+    "plugin:storybook/recommended",
+  ],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+}
--- a/extensions/ql-vscode/src/stories/Overview.stories.mdx
+++ b/extensions/ql-vscode/src/stories/Overview.stories.mdx
@@ -0,0 +1,55 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+
+import iframeImage from './images/update-css-variables-iframe.png';
+import stylesImage from './images/update-css-variables-styles.png';
+import bodyImage from './images/update-css-variables-body.png';
+
+<Meta title="Overview" />
+
+Welcome to the Storybook for **CodeQL for Visual Studio Code**! This Storybook contains stories for components and pages in the extension.
+
+### Writing stories
+
+To create new stories, copy an existing story in the `src/stories` directory and modify it to use your component or page. Please note that
+you are not able to access any VSCode specific APIs or receive messages from VSCode so an ideal component would use generic props. The
+`vscode.postMessage` API is mocked but no message will be sent.
+
+You are able to use all VSCode CSS variables; these are injected into the Storybook preview. However, only the Dark+ theme is supported. It
+is currently not possible to preview your component in another theme.
+
+For more information about how to write stories and how to add controls, please see the
+[Storybook documentation](https://storybook.js.org/docs/react/writing-stories/introduction).
+
+### WebView UI Toolkit
+
+As much as possible, we try to make use of the [WebView UI Toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit). The Storybook
+for the WebView UI Toolkit can be found [here](https://microsoft.github.io/vscode-webview-ui-toolkit/).
+
+### Updating VSCode CSS variables
+
+The VSCode CSS variables that are injected into the Storybook preview are defined in the `src/stories/vscode-theme.css` file. They need to be
+updated manually if new variables are added to VSCode. It can also be updated if you would like to manually preview a different theme. To update
+these variables, follow these steps:
+
+1. Make sure you have selected the correct theme. If you want to use a variable which is currently not available and will be committed, please
+select the **Dark+** theme. You can use **Preferences: Color Theme** in the *Command Palette* to select the theme.
+2. Open a WebView in VSCode (for example the results of a query)
+3. Open the *Command Palette* (Ctrl/Cmd+Shift+P)
+4. Select **Developer: Open WebView Developer Tools**
+5. Now, you will need to find the `<html>` element in the lowest-level `<iframe>`. See the image below:
+
+<img src={iframeImage} />
+
+6. Once you have selected the `<html>` element as in the image above, click on **Show All Properties (... more)** (see image below). This will
+expand all CSS variables.
+
+<img src={stylesImage} />
+
+7. Copy all variables to the `src/stories/vscode-theme.css` file.
+8. Now, select the `<body>` element which is a direct child of the `<html>` element.
+9. This time, you do not need to copy the variables. Instead, copy the styles on the `<body>` element to the `src/stories/vscode-theme.css` file.
+See the image below for which styles need to be copied.
+
+<img src={bodyImage} />
--- a/extensions/ql-vscode/src/stories/images/update-css-variables-body.png
+++ b/extensions/ql-vscode/src/stories/images/update-css-variables-body.png
--- a/extensions/ql-vscode/src/stories/images/update-css-variables-iframe.png
+++ b/extensions/ql-vscode/src/stories/images/update-css-variables-iframe.png
--- a/extensions/ql-vscode/src/stories/images/update-css-variables-styles.png
+++ b/extensions/ql-vscode/src/stories/images/update-css-variables-styles.png
--- a/extensions/ql-vscode/src/stories/remote-queries/AnalysisAlertResult.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/AnalysisAlertResult.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AnalysisAlertResult from '../../view/remote-queries/AnalysisAlertResult';
+import type { AnalysisAlert } from '../../remote-queries/shared/analysis-result';
+
+export default {
+  title: 'Analysis Alert Result',
+  component: AnalysisAlertResult,
+} as ComponentMeta<typeof AnalysisAlertResult>;
+
+const Template: ComponentStory<typeof AnalysisAlertResult> = (args) => (
+  <AnalysisAlertResult {...args} />
+);
+
+export const Warning = Template.bind({});
+
+const warningAlert: AnalysisAlert = {
+  message: {
+    tokens: [
+      {
+        t: 'text',
+        text: 'This is an empty block.'
+      }
+    ]
+  },
+  shortDescription: 'This is an empty block.',
+  fileLink: {
+    fileLinkPrefix: 'https://github.com/expressjs/express/blob/33e8dc303af9277f8a7e4f46abfdcb5e72f6797b',
+    filePath: 'test/app.options.js'
+  },
+  severity: 'Warning',
+  codeSnippet: {
+    startLine: 10,
+    endLine: 14,
+    text: '    app.del(\'/\', function(){});\n    app.get(\'/users\', function(req, res){});\n    app.put(\'/users\', function(req, res){});\n\n    request(app)\n'
+  },
+  highlightedRegion: {
+    startLine: 12,
+    startColumn: 41,
+    endLine: 12,
+    endColumn: 43
+  },
+  codeFlows: []
+};
+
+Warning.args = {
+  alert: warningAlert,
+};
--- a/extensions/ql-vscode/src/stories/remote-queries/CodePaths.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/CodePaths.stories.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ThemeProvider } from '@primer/react';
+
+import CodePaths from '../../view/remote-queries/CodePaths';
+import type { CodeFlow } from '../../remote-queries/shared/analysis-result';
+
+export default {
+  title: 'Code Paths',
+  component: CodePaths,
+  decorators: [
+    (Story) => (
+      <ThemeProvider colorMode="auto">
+        <Story />
+      </ThemeProvider>
+    )
+  ]
+} as ComponentMeta<typeof CodePaths>;
+
+const Template: ComponentStory<typeof CodePaths> = (args) => (
+  <CodePaths {...args} />
+);
+
+export const PowerShell = Template.bind({});
+
+const codeFlows: CodeFlow[] = [
+  {
+    'threadFlows': [
+      {
+        fileLink: {
+          fileLinkPrefix: 'https://github.com/PowerShell/PowerShell/blob/450d884668ca477c6581ce597958f021fac30bff',
+          filePath: 'src/System.Management.Automation/help/UpdatableHelpSystem.cs'
+        },
+        codeSnippet: {
+          startLine: 1260,
+          endLine: 1260,
+          text: '                        string extractPath = Path.Combine(destination, entry.FullName);'
+        },
+        highlightedRegion: {
+          startLine: 1260,
+          startColumn: 72,
+          endLine: 1260,
+          endColumn: 86,
+        },
+        message: {
+          tokens: [
+            {
+              t: 'text',
+              text: 'access to property FullName : String'
+            }
+          ]
+        }
+      },
+      {
+        fileLink: {
+          fileLinkPrefix: 'https://github.com/PowerShell/PowerShell/blob/450d884668ca477c6581ce597958f021fac30bff',
+          filePath: 'src/System.Management.Automation/help/UpdatableHelpSystem.cs'
+        },
+        codeSnippet: {
+          startLine: 1260,
+          endLine: 1260,
+          text: '                        string extractPath = Path.Combine(destination, entry.FullName);'
+        },
+        highlightedRegion: {
+          startLine: 1260,
+          startColumn: 46,
+          endLine: 1260,
+          endColumn: 87,
+        },
+        message: {
+          tokens: [
+            {
+              t: 'text',
+              text: 'call to method Combine : String'
+            }
+          ]
+        }
+      },
+      {
+        fileLink: {
+          fileLinkPrefix: 'https://github.com/PowerShell/PowerShell/blob/450d884668ca477c6581ce597958f021fac30bff',
+          filePath: 'src/System.Management.Automation/help/UpdatableHelpSystem.cs'
+        },
+        codeSnippet: {
+          startLine: 1261,
+          endLine: 1261,
+          text: '                        entry.ExtractToFile(extractPath);'
+        },
+        highlightedRegion: {
+          startLine: 1261,
+          startColumn: 45,
+          endLine: 1261,
+          endColumn: 56,
+        },
+        message: {
+          tokens: [
+            {
+              t: 'text',
+              text: 'access to local variable extractPath'
+            }
+          ]
+        }
+      }
+    ]
+  }
+];
+
+PowerShell.args = {
+  codeFlows: codeFlows,
+  ruleDescription: 'ZipSlip vulnerability',
+  message: {
+    tokens: [
+      {
+        type: 'text',
+        t: 'This zip file may have a dangerous path'
+      }
+    ]
+  },
+  severity: 'Warning',
+};
--- a/extensions/ql-vscode/src/stories/remote-queries/DownloadButton.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/DownloadButton.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import DownloadButtonComponent from '../../view/remote-queries/DownloadButton';
+
+export default {
+  title: 'Download Button',
+  component: DownloadButtonComponent,
+  argTypes: {
+    onClick: {
+      action: 'clicked',
+      table: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof DownloadButtonComponent>;
+
+const Template: ComponentStory<typeof DownloadButtonComponent> = (args) => (
+  <DownloadButtonComponent {...args} />
+);
+
+export const DownloadButton = Template.bind({});
+DownloadButton.args = {
+  text: 'Download',
+};
--- a/extensions/ql-vscode/src/stories/remote-queries/DownloadSpinner.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/DownloadSpinner.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { ComponentMeta } from '@storybook/react';
+
+import DownloadSpinnerComponent from '../../view/remote-queries/DownloadSpinner';
+
+export default {
+  title: 'Download Spinner',
+  component: DownloadSpinnerComponent,
+} as ComponentMeta<typeof DownloadSpinnerComponent>;
+
+export const DownloadSpinner = <DownloadSpinnerComponent />;
+
--- a/extensions/ql-vscode/src/stories/remote-queries/FileCodeSnippet.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/FileCodeSnippet.stories.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import FileCodeSnippet from '../../view/remote-queries/FileCodeSnippet';
+
+export default {
+  title: 'File Code Snippet',
+  component: FileCodeSnippet
+} as ComponentMeta<typeof FileCodeSnippet>;
+
+const Template: ComponentStory<typeof FileCodeSnippet> = (args) => (
+  <FileCodeSnippet {...args} />
+);
+
+export const WithCodeSnippet = Template.bind({});
+WithCodeSnippet.args = {
+  fileLink: {
+    fileLinkPrefix: 'https://github.com/PowerShell/PowerShell/blob/450d884668ca477c6581ce597958f021fac30bff',
+    filePath: 'src/System.Management.Automation/help/UpdatableHelpSystem.cs'
+  },
+  codeSnippet: {
+    startLine: 1261,
+    endLine: 1261,
+    text: '                        entry.ExtractToFile(extractPath);'
+  },
+  highlightedRegion: {
+    startLine: 1261,
+    startColumn: 45,
+    endLine: 1261,
+    endColumn: 56,
+  },
+  message: {
+    tokens: [
+      {
+        t: 'text',
+        text: 'access to local variable extractPath'
+      }
+    ]
+  },
+  severity: 'Warning',
+};
+
+export const WithoutCodeSnippet = Template.bind({});
+WithoutCodeSnippet.args = {
+  ...WithCodeSnippet.args,
+  codeSnippet: undefined,
+};
--- a/extensions/ql-vscode/src/stories/remote-queries/LastUpdated.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/LastUpdated.stories.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import LastUpdatedComponent from '../../view/remote-queries/LastUpdated';
+
+export default {
+  title: 'Last Updated',
+  component: LastUpdatedComponent,
+} as ComponentMeta<typeof LastUpdatedComponent>;
+
+const Template: ComponentStory<typeof LastUpdatedComponent> = (args) => (
+  <LastUpdatedComponent {...args} />
+);
+
+export const LastUpdated = Template.bind({});
+
+LastUpdated.args = {
+  lastUpdated: -3_600_000, // 1 hour ago
+};
--- a/extensions/ql-vscode/src/stories/remote-queries/RemoteQueries.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/RemoteQueries.stories.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { RemoteQueries } from '../../view/remote-queries/RemoteQueries';
+
+import remoteQueryResult from './data/remoteQueryResultMessage.json';
+import analysesResults from './data/analysesResultsMessage.json';
+
+export default {
+  title: 'MRVA/Remote Queries',
+  component: RemoteQueries
+} as ComponentMeta<typeof RemoteQueries>;
+
+const Template: ComponentStory<typeof RemoteQueries> = () => {
+  useEffect(() => {
+    window.postMessage(remoteQueryResult);
+    window.postMessage(analysesResults);
+  });
+
+  return <RemoteQueries />;
+};
+
+export const Top10JavaScript = Template.bind({});
--- a/extensions/ql-vscode/src/stories/remote-queries/RepositoriesSearch.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/RepositoriesSearch.stories.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+import { ComponentMeta } from '@storybook/react';
+
+import RepositoriesSearchComponent from '../../view/remote-queries/RepositoriesSearch';
+
+export default {
+  title: 'Repositories Search',
+  component: RepositoriesSearchComponent,
+  argTypes: {
+    filterValue: {
+      control: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof RepositoriesSearchComponent>;
+
+export const RepositoriesSearch = () => {
+  const [filterValue, setFilterValue] = useState('');
+
+  return (
+    <RepositoriesSearchComponent filterValue={filterValue} setFilterValue={setFilterValue} />
+  );
+};
--- a/extensions/ql-vscode/src/stories/remote-queries/StarCount.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/StarCount.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import StarCountComponent from '../../view/remote-queries/StarCount';
+
+export default {
+  title: 'Star Count',
+  component: StarCountComponent,
+} as ComponentMeta<typeof StarCountComponent>;
+
+const Template: ComponentStory<typeof StarCountComponent> = (args) => (
+  <StarCountComponent {...args} />
+);
+
+export const LessThan1000 = Template.bind({});
+LessThan1000.args = {
+  starCount: 100,
+};
+
+export const MoreThan1000 = Template.bind({});
+MoreThan1000.args = {
+  starCount: 7532,
+};
+
+export const MoreThan10000 = Template.bind({});
+MoreThan10000.args = {
+  starCount: 65287,
+};
+
+export const MoreThan100000 = Template.bind({});
+MoreThan100000.args = {
+  starCount: 1234234,
+};
--- a/extensions/ql-vscode/src/stories/remote-queries/TextButton.stories.tsx
+++ b/extensions/ql-vscode/src/stories/remote-queries/TextButton.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import TextButtonComponent from '../../view/remote-queries/TextButton';
+
+export default {
+  title: 'Text Button',
+  component: TextButtonComponent,
+  argTypes: {
+    onClick: {
+      action: 'clicked',
+      table: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof TextButtonComponent>;
+
+const Template: ComponentStory<typeof TextButtonComponent> = (args) => (
+  <TextButtonComponent {...args} />
+);
+
+export const TextButton = Template.bind({});
+
+TextButton.args = {
+  children: 'Show more',
+  size: 'x-small',
+};
--- a/extensions/ql-vscode/src/stories/remote-queries/data/analysesResultsMessage.json
+++ b/extensions/ql-vscode/src/stories/remote-queries/data/analysesResultsMessage.json
--- a/extensions/ql-vscode/src/stories/remote-queries/data/remoteQueryResultMessage.json
+++ b/extensions/ql-vscode/src/stories/remote-queries/data/remoteQueryResultMessage.json
@@ -0,0 +1,170 @@
+{
+  "t": "setRemoteQueryResult",
+  "queryResult": {
+    "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j",
+    "queryTitle": "Empty block",
+    "queryFileName": "example.ql",
+    "queryFilePath": "/home/octocat/vscode-codeql-starter/codeql-custom-queries-javascript/example.ql",
+    "queryText": "/**\n * @name Empty block\n * @kind problem\n * @problem.severity warning\n * @id javascript/example/empty-block\n */\n\nimport javascript\n\nfrom BlockStmt b\nwhere b.getNumStmt() = 0\nselect b, \"This is an empty block.\"\n",
+    "language": "javascript",
+    "workflowRunUrl": "https://github.com/octocat/octo-repo/actions/runs/2955404400",
+    "totalRepositoryCount": 10,
+    "affectedRepositoryCount": 10,
+    "totalResultCount": 16338,
+    "executionTimestamp": "30 Aug at 0:14 pm",
+    "executionDuration": "1 minute",
+    "analysisSummaries": [
+      {
+        "nwo": "angular/angular",
+        "databaseSha": "a360309f31afa97c4268a94fbd6a5108362a7182",
+        "resultCount": 8436,
+        "downloadLink": {
+          "id": "346232925",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232925",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "5.67 MB",
+        "starCount": 83537,
+        "lastUpdated": -1066284
+      },
+      {
+        "nwo": "babel/babel",
+        "databaseSha": "0f62c58c79830cfe0afb26161e96e0e1b0482c01",
+        "resultCount": 5502,
+        "downloadLink": {
+          "id": "346232926",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232926",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "3.80 MB",
+        "starCount": 41292,
+        "lastUpdated": -1600284
+      },
+      {
+        "nwo": "facebook/react",
+        "databaseSha": "e25648b0a89eab6f82bea2c2a1ef90866ac82b33",
+        "resultCount": 1205,
+        "downloadLink": {
+          "id": "346232919",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232919",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "905.24 KB",
+        "starCount": 194007,
+        "lastUpdated": -379284
+      },
+      {
+        "nwo": "facebook/jest",
+        "databaseSha": "187566a70aa4b6aa5f74952b504bbeddb5854aef",
+        "resultCount": 643,
+        "downloadLink": {
+          "id": "346232921",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232921",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "441.60 KB",
+        "starCount": 39987,
+        "lastUpdated": -113284
+      },
+      {
+        "nwo": "facebook/create-react-app",
+        "databaseSha": "f34d88e30c7d8be7181f728d1abc4fd8d5cd07d3",
+        "resultCount": 198,
+        "downloadLink": {
+          "id": "346232928",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232928",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "132.28 KB",
+        "starCount": 96698,
+        "lastUpdated": -126284
+      },
+      {
+        "nwo": "vuejs/vue",
+        "databaseSha": "810f6d12edea47cde7f39eaf7ec3ae1b7300d40c",
+        "resultCount": 140,
+        "downloadLink": {
+          "id": "346232920",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232920",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "89.99 KB",
+        "starCount": 198970,
+        "lastUpdated": -167284
+      },
+      {
+        "nwo": "lodash/lodash",
+        "databaseSha": "2da024c3b4f9947a48517639de7560457cd4ec6c",
+        "resultCount": 108,
+        "downloadLink": {
+          "id": "346232927",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232927",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "70.43 KB",
+        "starCount": 54215,
+        "lastUpdated": -9080284
+      },
+      {
+        "nwo": "jquery/jquery",
+        "databaseSha": "d2436df36a4b2ef556907e734a90771f0dbdbcaf",
+        "resultCount": 67,
+        "downloadLink": {
+          "id": "346232922",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232922",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/jquery/jquery",
+        "fileSize": "45.07 KB",
+        "starCount": 56629,
+        "lastUpdated": -23284
+      },
+      {
+        "nwo": "expressjs/express",
+        "databaseSha": "33e8dc303af9277f8a7e4f46abfdcb5e72f6797b",
+        "resultCount": 26,
+        "downloadLink": {
+          "id": "346232924",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232924",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bulk-builder/bulk-builder",
+        "fileSize": "16.96 KB",
+        "starCount": 58125,
+        "lastUpdated": -236284
+      },
+      {
+        "nwo": "twbs/bootstrap",
+        "databaseSha": "af1bd974bba7f6e7f90c5ed3f42738bd101926cb",
+        "resultCount": 13,
+        "downloadLink": {
+          "id": "346232923",
+          "urlPath": "/repos/octocat/octo-repo/actions/artifacts/346232923",
+          "innerFilePath": "results.sarif",
+          "queryId": "Empty block-LUzMYbSaBM4Lv6YP8GQ8j"
+        },
+        "sourceLocationPrefix": "/home/runner/work/bootstrap/bootstrap",
+        "fileSize": "8.50 KB",
+        "starCount": 159230,
+        "lastUpdated": -1754284
+      }
+    ],
+    "analysisFailures": []
+  }
+}
--- a/extensions/ql-vscode/src/stories/tsconfig.json
+++ b/extensions/ql-vscode/src/stories/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "node",
+    "target": "es6",
+    "outDir": "out",
+    "lib": ["ES2021", "dom"],
+    "jsx": "react",
+    "sourceMap": true,
+    "rootDir": "..",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["node_modules"]
+}
--- a/extensions/ql-vscode/src/stories/vscode-theme.css
+++ b/extensions/ql-vscode/src/stories/vscode-theme.css
@@ -0,0 +1,630 @@
+/*
+ * These were copied from VSCode Dark+ theme.
+ *
+ * To update these, open a webview in VSCode, open the webview developer tools and find the
+ * iframe hosting the webview. The <html> element will have a style attribute that contains
+ * the CSS variables. Copy these to this file.
+ */
+:root {
+  --vscode-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  --vscode-font-weight: normal;
+  --vscode-font-size: 13px;
+  --vscode-editor-font-family: Menlo, Monaco, "Courier New", monospace;
+  --vscode-editor-font-weight: normal;
+  --vscode-editor-font-size: 12px;
+  --vscode-foreground: #cccccc;
+  --vscode-disabledForeground: rgba(204, 204, 204, 0.5);
+  --vscode-errorForeground: #f48771;
+  --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
+  --vscode-icon-foreground: #c5c5c5;
+  --vscode-focusBorder: #007fd4;
+  --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+  --vscode-textLink-foreground: #3794ff;
+  --vscode-textLink-activeForeground: #3794ff;
+  --vscode-textPreformat-foreground: #d7ba7d;
+  --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+  --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+  --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+  --vscode-widget-shadow: rgba(0, 0, 0, 0.36);
+  --vscode-input-background: #3c3c3c;
+  --vscode-input-foreground: #cccccc;
+  --vscode-inputOption-activeBorder: rgba(0, 122, 204, 0);
+  --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
+  --vscode-inputOption-activeBackground: rgba(0, 127, 212, 0.4);
+  --vscode-inputOption-activeForeground: #ffffff;
+  --vscode-input-placeholderForeground: #a6a6a6;
+  --vscode-inputValidation-infoBackground: #063b49;
+  --vscode-inputValidation-infoBorder: #007acc;
+  --vscode-inputValidation-warningBackground: #352a05;
+  --vscode-inputValidation-warningBorder: #b89500;
+  --vscode-inputValidation-errorBackground: #5a1d1d;
+  --vscode-inputValidation-errorBorder: #be1100;
+  --vscode-dropdown-background: #3c3c3c;
+  --vscode-dropdown-foreground: #f0f0f0;
+  --vscode-dropdown-border: #3c3c3c;
+  --vscode-checkbox-background: #3c3c3c;
+  --vscode-checkbox-foreground: #f0f0f0;
+  --vscode-checkbox-border: #3c3c3c;
+  --vscode-button-foreground: #ffffff;
+  --vscode-button-separator: rgba(255, 255, 255, 0.4);
+  --vscode-button-background: #0e639c;
+  --vscode-button-hoverBackground: #1177bb;
+  --vscode-button-secondaryForeground: #ffffff;
+  --vscode-button-secondaryBackground: #3a3d41;
+  --vscode-button-secondaryHoverBackground: #45494e;
+  --vscode-badge-background: #4d4d4d;
+  --vscode-badge-foreground: #ffffff;
+  --vscode-scrollbar-shadow: #000000;
+  --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
+  --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+  --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+  --vscode-progressBar-background: #0e70c0;
+  --vscode-editorError-foreground: #f14c4c;
+  --vscode-editorWarning-foreground: #cca700;
+  --vscode-editorInfo-foreground: #3794ff;
+  --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+  --vscode-sash-hoverBorder: #007fd4;
+  --vscode-editor-background: #1e1e1e;
+  --vscode-editor-foreground: #d4d4d4;
+  --vscode-editorStickyScroll-background: #1e1e1e;
+  --vscode-editorStickyScrollHover-background: #2a2d2e;
+  --vscode-editorWidget-background: #252526;
+  --vscode-editorWidget-foreground: #cccccc;
+  --vscode-editorWidget-border: #454545;
+  --vscode-quickInput-background: #252526;
+  --vscode-quickInput-foreground: #cccccc;
+  --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
+  --vscode-pickerGroup-foreground: #3794ff;
+  --vscode-pickerGroup-border: #3f3f46;
+  --vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);
+  --vscode-keybindingLabel-foreground: #cccccc;
+  --vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);
+  --vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
+  --vscode-editor-selectionBackground: #264f78;
+  --vscode-editor-inactiveSelectionBackground: #3a3d41;
+  --vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);
+  --vscode-editor-findMatchBackground: #515c6a;
+  --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+  --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+  --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
+  --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+  --vscode-editorHoverWidget-background: #252526;
+  --vscode-editorHoverWidget-foreground: #cccccc;
+  --vscode-editorHoverWidget-border: #454545;
+  --vscode-editorHoverWidget-statusBarBackground: #2c2c2d;
+  --vscode-editorLink-activeForeground: #4e94ce;
+  --vscode-editorInlayHint-foreground: rgba(255, 255, 255, 0.8);
+  --vscode-editorInlayHint-background: rgba(77, 77, 77, 0.6);
+  --vscode-editorInlayHint-typeForeground: rgba(255, 255, 255, 0.8);
+  --vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, 0.6);
+  --vscode-editorInlayHint-parameterForeground: rgba(255, 255, 255, 0.8);
+  --vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, 0.6);
+  --vscode-editorLightBulb-foreground: #ffcc00;
+  --vscode-editorLightBulbAutoFix-foreground: #75beff;
+  --vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.2);
+  --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.4);
+  --vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
+  --vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
+  --vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
+  --vscode-list-focusOutline: #007fd4;
+  --vscode-list-activeSelectionBackground: #04395e;
+  --vscode-list-activeSelectionForeground: #ffffff;
+  --vscode-list-activeSelectionIconForeground: #ffffff;
+  --vscode-list-inactiveSelectionBackground: #37373d;
+  --vscode-list-hoverBackground: #2a2d2e;
+  --vscode-list-dropBackground: #383b3d;
+  --vscode-list-highlightForeground: #2aaaff;
+  --vscode-list-focusHighlightForeground: #2aaaff;
+  --vscode-list-invalidItemForeground: #b89500;
+  --vscode-list-errorForeground: #f88070;
+  --vscode-list-warningForeground: #cca700;
+  --vscode-listFilterWidget-background: #252526;
+  --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
+  --vscode-listFilterWidget-noMatchesOutline: #be1100;
+  --vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.36);
+  --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
+  --vscode-tree-indentGuidesStroke: #585858;
+  --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
+  --vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, 0.04);
+  --vscode-list-deemphasizedForeground: #8c8c8c;
+  --vscode-quickInputList-focusForeground: #ffffff;
+  --vscode-quickInputList-focusIconForeground: #ffffff;
+  --vscode-quickInputList-focusBackground: #04395e;
+  --vscode-menu-foreground: #cccccc;
+  --vscode-menu-background: #303031;
+  --vscode-menu-selectionForeground: #ffffff;
+  --vscode-menu-selectionBackground: #04395e;
+  --vscode-menu-separatorBackground: #606060;
+  --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
+  --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
+  --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+  --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
+  --vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8);
+  --vscode-breadcrumb-background: #1e1e1e;
+  --vscode-breadcrumb-focusForeground: #e0e0e0;
+  --vscode-breadcrumb-activeSelectionForeground: #e0e0e0;
+  --vscode-breadcrumbPicker-background: #252526;
+  --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+  --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+  --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+  --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+  --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+  --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+  --vscode-editorOverviewRuler-currentContentForeground: rgba(
+    64,
+    200,
+    174,
+    0.5
+  );
+  --vscode-editorOverviewRuler-incomingContentForeground: rgba(
+    64,
+    166,
+    255,
+    0.5
+  );
+  --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+  --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(
+    160,
+    160,
+    160,
+    0.8
+  );
+  --vscode-minimap-findMatchHighlight: #d18616;
+  --vscode-minimap-selectionOccurrenceHighlight: #676767;
+  --vscode-minimap-selectionHighlight: #264f78;
+  --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
+  --vscode-minimap-warningHighlight: #cca700;
+  --vscode-minimap-foregroundOpacity: #000000;
+  --vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);
+  --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
+  --vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);
+  --vscode-problemsErrorIcon-foreground: #f14c4c;
+  --vscode-problemsWarningIcon-foreground: #cca700;
+  --vscode-problemsInfoIcon-foreground: #3794ff;
+  --vscode-charts-foreground: #cccccc;
+  --vscode-charts-lines: rgba(204, 204, 204, 0.5);
+  --vscode-charts-red: #f14c4c;
+  --vscode-charts-blue: #3794ff;
+  --vscode-charts-yellow: #cca700;
+  --vscode-charts-orange: #d18616;
+  --vscode-charts-green: #89d185;
+  --vscode-charts-purple: #b180d7;
+  --vscode-editor-lineHighlightBorder: #282828;
+  --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+  --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
+  --vscode-editorCursor-foreground: #aeafad;
+  --vscode-editorWhitespace-foreground: rgba(227, 228, 226, 0.16);
+  --vscode-editorIndentGuide-background: #404040;
+  --vscode-editorIndentGuide-activeBackground: #707070;
+  --vscode-editorLineNumber-foreground: #858585;
+  --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+  --vscode-editorLineNumber-activeForeground: #c6c6c6;
+  --vscode-editorRuler-foreground: #5a5a5a;
+  --vscode-editorCodeLens-foreground: #999999;
+  --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
+  --vscode-editorBracketMatch-border: #888888;
+  --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
+  --vscode-editorGutter-background: #1e1e1e;
+  --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+  --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
+  --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+  --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+  --vscode-editorOverviewRuler-warningForeground: #cca700;
+  --vscode-editorOverviewRuler-infoForeground: #3794ff;
+  --vscode-editorBracketHighlight-foreground1: #ffd700;
+  --vscode-editorBracketHighlight-foreground2: #da70d6;
+  --vscode-editorBracketHighlight-foreground3: #179fff;
+  --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
+  --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
+  --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
+  --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(
+    255,
+    18,
+    18,
+    0.8
+  );
+  --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
+  --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
+  --vscode-editorUnicodeHighlight-border: #bd9b03;
+  --vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15);
+  --vscode-symbolIcon-arrayForeground: #cccccc;
+  --vscode-symbolIcon-booleanForeground: #cccccc;
+  --vscode-symbolIcon-classForeground: #ee9d28;
+  --vscode-symbolIcon-colorForeground: #cccccc;
+  --vscode-symbolIcon-constantForeground: #cccccc;
+  --vscode-symbolIcon-constructorForeground: #b180d7;
+  --vscode-symbolIcon-enumeratorForeground: #ee9d28;
+  --vscode-symbolIcon-enumeratorMemberForeground: #75beff;
+  --vscode-symbolIcon-eventForeground: #ee9d28;
+  --vscode-symbolIcon-fieldForeground: #75beff;
+  --vscode-symbolIcon-fileForeground: #cccccc;
+  --vscode-symbolIcon-folderForeground: #cccccc;
+  --vscode-symbolIcon-functionForeground: #b180d7;
+  --vscode-symbolIcon-interfaceForeground: #75beff;
+  --vscode-symbolIcon-keyForeground: #cccccc;
+  --vscode-symbolIcon-keywordForeground: #cccccc;
+  --vscode-symbolIcon-methodForeground: #b180d7;
+  --vscode-symbolIcon-moduleForeground: #cccccc;
+  --vscode-symbolIcon-namespaceForeground: #cccccc;
+  --vscode-symbolIcon-nullForeground: #cccccc;
+  --vscode-symbolIcon-numberForeground: #cccccc;
+  --vscode-symbolIcon-objectForeground: #cccccc;
+  --vscode-symbolIcon-operatorForeground: #cccccc;
+  --vscode-symbolIcon-packageForeground: #cccccc;
+  --vscode-symbolIcon-propertyForeground: #cccccc;
+  --vscode-symbolIcon-referenceForeground: #cccccc;
+  --vscode-symbolIcon-snippetForeground: #cccccc;
+  --vscode-symbolIcon-stringForeground: #cccccc;
+  --vscode-symbolIcon-structForeground: #cccccc;
+  --vscode-symbolIcon-textForeground: #cccccc;
+  --vscode-symbolIcon-typeParameterForeground: #cccccc;
+  --vscode-symbolIcon-unitForeground: #cccccc;
+  --vscode-symbolIcon-variableForeground: #75beff;
+  --vscode-editorHoverWidget-highlightForeground: #2aaaff;
+  --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+  --vscode-editor-foldBackground: rgba(38, 79, 120, 0.3);
+  --vscode-editorGutter-foldingControlForeground: #c5c5c5;
+  --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
+  --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
+  --vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
+  --vscode-editorOverviewRuler-wordHighlightForeground: rgba(
+    160,
+    160,
+    160,
+    0.8
+  );
+  --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(
+    192,
+    160,
+    192,
+    0.8
+  );
+  --vscode-peekViewTitle-background: rgba(55, 148, 255, 0.1);
+  --vscode-peekViewTitleLabel-foreground: #ffffff;
+  --vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
+  --vscode-peekView-border: #3794ff;
+  --vscode-peekViewResult-background: #252526;
+  --vscode-peekViewResult-lineForeground: #bbbbbb;
+  --vscode-peekViewResult-fileForeground: #ffffff;
+  --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
+  --vscode-peekViewResult-selectionForeground: #ffffff;
+  --vscode-peekViewEditor-background: #001f33;
+  --vscode-peekViewEditorGutter-background: #001f33;
+  --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
+  --vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6);
+  --vscode-editorMarkerNavigationError-background: #f14c4c;
+  --vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1);
+  --vscode-editorMarkerNavigationWarning-background: #cca700;
+  --vscode-editorMarkerNavigationWarning-headerBackground: rgba(
+    204,
+    167,
+    0,
+    0.1
+  );
+  --vscode-editorMarkerNavigationInfo-background: #3794ff;
+  --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
+  --vscode-editorMarkerNavigation-background: #1e1e1e;
+  --vscode-editorSuggestWidget-background: #252526;
+  --vscode-editorSuggestWidget-border: #454545;
+  --vscode-editorSuggestWidget-foreground: #d4d4d4;
+  --vscode-editorSuggestWidget-selectedForeground: #ffffff;
+  --vscode-editorSuggestWidget-selectedIconForeground: #ffffff;
+  --vscode-editorSuggestWidget-selectedBackground: #04395e;
+  --vscode-editorSuggestWidget-highlightForeground: #2aaaff;
+  --vscode-editorSuggestWidget-focusHighlightForeground: #2aaaff;
+  --vscode-editorSuggestWidgetStatus-foreground: rgba(212, 212, 212, 0.5);
+  --vscode-tab-activeBackground: #1e1e1e;
+  --vscode-tab-unfocusedActiveBackground: #1e1e1e;
+  --vscode-tab-inactiveBackground: #2d2d2d;
+  --vscode-tab-unfocusedInactiveBackground: #2d2d2d;
+  --vscode-tab-activeForeground: #ffffff;
+  --vscode-tab-inactiveForeground: rgba(255, 255, 255, 0.5);
+  --vscode-tab-unfocusedActiveForeground: rgba(255, 255, 255, 0.5);
+  --vscode-tab-unfocusedInactiveForeground: rgba(255, 255, 255, 0.25);
+  --vscode-tab-border: #252526;
+  --vscode-tab-lastPinnedBorder: rgba(204, 204, 204, 0.2);
+  --vscode-tab-activeModifiedBorder: #3399cc;
+  --vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
+  --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
+  --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
+  --vscode-editorPane-background: #1e1e1e;
+  --vscode-editorGroupHeader-tabsBackground: #252526;
+  --vscode-editorGroupHeader-noTabsBackground: #1e1e1e;
+  --vscode-editorGroup-border: #444444;
+  --vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
+  --vscode-editorGroup-dropIntoPromptForeground: #cccccc;
+  --vscode-editorGroup-dropIntoPromptBackground: #252526;
+  --vscode-sideBySideEditor-horizontalBorder: #444444;
+  --vscode-sideBySideEditor-verticalBorder: #444444;
+  --vscode-panel-background: #1e1e1e;
+  --vscode-panel-border: rgba(128, 128, 128, 0.35);
+  --vscode-panelTitle-activeForeground: #e7e7e7;
+  --vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
+  --vscode-panelTitle-activeBorder: #e7e7e7;
+  --vscode-panel-dropBorder: #e7e7e7;
+  --vscode-panelSection-dropBackground: rgba(83, 89, 93, 0.5);
+  --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
+  --vscode-panelSection-border: rgba(128, 128, 128, 0.35);
+  --vscode-banner-background: #04395e;
+  --vscode-banner-foreground: #ffffff;
+  --vscode-banner-iconForeground: #3794ff;
+  --vscode-statusBar-foreground: #ffffff;
+  --vscode-statusBar-noFolderForeground: #ffffff;
+  --vscode-statusBar-background: #007acc;
+  --vscode-statusBar-noFolderBackground: #68217a;
+  --vscode-statusBar-focusBorder: #ffffff;
+  --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+  --vscode-statusBarItem-focusBorder: #ffffff;
+  --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
+  --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
+  --vscode-statusBarItem-prominentForeground: #ffffff;
+  --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);
+  --vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3);
+  --vscode-statusBarItem-errorBackground: #c72e0f;
+  --vscode-statusBarItem-errorForeground: #ffffff;
+  --vscode-statusBarItem-warningBackground: #7a6400;
+  --vscode-statusBarItem-warningForeground: #ffffff;
+  --vscode-activityBar-background: #333333;
+  --vscode-activityBar-foreground: #ffffff;
+  --vscode-activityBar-inactiveForeground: rgba(255, 255, 255, 0.4);
+  --vscode-activityBar-activeBorder: #ffffff;
+  --vscode-activityBar-dropBorder: #ffffff;
+  --vscode-activityBarBadge-background: #007acc;
+  --vscode-activityBarBadge-foreground: #ffffff;
+  --vscode-statusBarItem-remoteBackground: #16825d;
+  --vscode-statusBarItem-remoteForeground: #ffffff;
+  --vscode-extensionBadge-remoteBackground: #007acc;
+  --vscode-extensionBadge-remoteForeground: #ffffff;
+  --vscode-sideBar-background: #252526;
+  --vscode-sideBarTitle-foreground: #bbbbbb;
+  --vscode-sideBar-dropBackground: rgba(83, 89, 93, 0.5);
+  --vscode-sideBarSectionHeader-background: rgba(0, 0, 0, 0);
+  --vscode-sideBarSectionHeader-border: rgba(204, 204, 204, 0.2);
+  --vscode-titleBar-activeForeground: #cccccc;
+  --vscode-titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
+  --vscode-titleBar-activeBackground: #3c3c3c;
+  --vscode-titleBar-inactiveBackground: rgba(60, 60, 60, 0.6);
+  --vscode-menubar-selectionForeground: #cccccc;
+  --vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31);
+  --vscode-notifications-foreground: #cccccc;
+  --vscode-notifications-background: #252526;
+  --vscode-notificationLink-foreground: #3794ff;
+  --vscode-notificationCenterHeader-background: #303031;
+  --vscode-notifications-border: #303031;
+  --vscode-notificationsErrorIcon-foreground: #f14c4c;
+  --vscode-notificationsWarningIcon-foreground: #cca700;
+  --vscode-notificationsInfoIcon-foreground: #3794ff;
+  --vscode-commandCenter-foreground: #cccccc;
+  --vscode-commandCenter-activeForeground: #cccccc;
+  --vscode-commandCenter-activeBackground: rgba(90, 93, 94, 0.31);
+  --vscode-commandCenter-border: rgba(128, 128, 128, 0.35);
+  --vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5);
+  --vscode-editorCommentsWidget-unresolvedBorder: #3794ff;
+  --vscode-editorCommentsWidget-rangeBackground: rgba(55, 148, 255, 0.1);
+  --vscode-editorCommentsWidget-rangeBorder: rgba(55, 148, 255, 0.4);
+  --vscode-editorCommentsWidget-rangeActiveBackground: rgba(55, 148, 255, 0.1);
+  --vscode-editorCommentsWidget-rangeActiveBorder: rgba(55, 148, 255, 0.4);
+  --vscode-editorGutter-commentRangeForeground: #37373d;
+  --vscode-debugToolBar-background: #333333;
+  --vscode-debugIcon-startForeground: #89d185;
+  --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+  --vscode-editor-focusedStackFrameHighlightBackground: rgba(
+    122,
+    189,
+    122,
+    0.3
+  );
+  --vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
+  --vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.2);
+  --vscode-mergeEditor-conflict\.unhandledUnfocused\.border: rgba(
+    255,
+    166,
+    0,
+    0.48
+  );
+  --vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
+  --vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(
+    134,
+    134,
+    134,
+    0.29
+  );
+  --vscode-mergeEditor-conflict\.handledFocused\.border: rgba(
+    193,
+    193,
+    193,
+    0.8
+  );
+  --vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(
+    173,
+    172,
+    168,
+    0.93
+  );
+  --vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
+  --vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
+  --vscode-settings-headerForeground: #e7e7e7;
+  --vscode-settings-modifiedItemIndicator: #0c7d9d;
+  --vscode-settings-headerBorder: rgba(128, 128, 128, 0.35);
+  --vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);
+  --vscode-settings-dropdownBackground: #3c3c3c;
+  --vscode-settings-dropdownForeground: #f0f0f0;
+  --vscode-settings-dropdownBorder: #3c3c3c;
+  --vscode-settings-dropdownListBorder: #454545;
+  --vscode-settings-checkboxBackground: #3c3c3c;
+  --vscode-settings-checkboxForeground: #f0f0f0;
+  --vscode-settings-checkboxBorder: #3c3c3c;
+  --vscode-settings-textInputBackground: #3c3c3c;
+  --vscode-settings-textInputForeground: #cccccc;
+  --vscode-settings-numberInputBackground: #3c3c3c;
+  --vscode-settings-numberInputForeground: #cccccc;
+  --vscode-settings-focusedRowBackground: rgba(42, 45, 46, 0.6);
+  --vscode-settings-rowHoverBackground: rgba(42, 45, 46, 0.3);
+  --vscode-settings-focusedRowBorder: rgba(255, 255, 255, 0.12);
+  --vscode-terminal-foreground: #cccccc;
+  --vscode-terminal-selectionBackground: #264f78;
+  --vscode-terminal-inactiveSelectionBackground: #3a3d41;
+  --vscode-terminalCommandDecoration-defaultBackground: rgba(
+    255,
+    255,
+    255,
+    0.25
+  );
+  --vscode-terminalCommandDecoration-successBackground: #1b81a8;
+  --vscode-terminalCommandDecoration-errorBackground: #f14c4c;
+  --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
+  --vscode-terminal-border: rgba(128, 128, 128, 0.35);
+  --vscode-terminal-findMatchBackground: #515c6a;
+  --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+  --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
+  --vscode-terminal-dropBackground: rgba(83, 89, 93, 0.5);
+  --vscode-testing-iconFailed: #f14c4c;
+  --vscode-testing-iconErrored: #f14c4c;
+  --vscode-testing-iconPassed: #73c991;
+  --vscode-testing-runAction: #73c991;
+  --vscode-testing-iconQueued: #cca700;
+  --vscode-testing-iconUnset: #848484;
+  --vscode-testing-iconSkipped: #848484;
+  --vscode-testing-peekBorder: #f14c4c;
+  --vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);
+  --vscode-testing-message\.error\.decorationForeground: #f14c4c;
+  --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
+  --vscode-testing-message\.info\.decorationForeground: rgba(
+    212,
+    212,
+    212,
+    0.5
+  );
+  --vscode-welcomePage-tileBackground: #252526;
+  --vscode-welcomePage-tileHoverBackground: #2c2c2d;
+  --vscode-welcomePage-tileShadow: rgba(0, 0, 0, 0.36);
+  --vscode-welcomePage-progress\.background: #3c3c3c;
+  --vscode-welcomePage-progress\.foreground: #3794ff;
+  --vscode-debugExceptionWidget-border: #a31515;
+  --vscode-debugExceptionWidget-background: #420b0d;
+  --vscode-ports-iconRunningProcessForeground: #369432;
+  --vscode-statusBar-debuggingBackground: #cc6633;
+  --vscode-statusBar-debuggingForeground: #ffffff;
+  --vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);
+  --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
+  --vscode-editorGutter-modifiedBackground: #1b81a8;
+  --vscode-editorGutter-addedBackground: #487e02;
+  --vscode-editorGutter-deletedBackground: #f14c4c;
+  --vscode-minimapGutter-modifiedBackground: #1b81a8;
+  --vscode-minimapGutter-addedBackground: #487e02;
+  --vscode-minimapGutter-deletedBackground: #f14c4c;
+  --vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6);
+  --vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6);
+  --vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6);
+  --vscode-debugIcon-breakpointForeground: #e51400;
+  --vscode-debugIcon-breakpointDisabledForeground: #848484;
+  --vscode-debugIcon-breakpointUnverifiedForeground: #848484;
+  --vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;
+  --vscode-debugIcon-breakpointStackframeForeground: #89d185;
+  --vscode-notebook-cellBorderColor: #37373d;
+  --vscode-notebook-focusedEditorBorder: #007fd4;
+  --vscode-notebookStatusSuccessIcon-foreground: #89d185;
+  --vscode-notebookStatusErrorIcon-foreground: #f48771;
+  --vscode-notebookStatusRunningIcon-foreground: #cccccc;
+  --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
+  --vscode-notebook-selectedCellBackground: #37373d;
+  --vscode-notebook-selectedCellBorder: #37373d;
+  --vscode-notebook-focusedCellBorder: #007fd4;
+  --vscode-notebook-inactiveFocusedCellBorder: #37373d;
+  --vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);
+  --vscode-notebook-cellInsertionIndicator: #007fd4;
+  --vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4);
+  --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+  --vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
+  --vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);
+  --vscode-notebook-cellEditorBackground: #252526;
+  --vscode-notebook-editorBackground: #1e1e1e;
+  --vscode-keybindingTable-headerBackground: rgba(204, 204, 204, 0.04);
+  --vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, 0.04);
+  --vscode-scm-providerBorder: #454545;
+  --vscode-debugTokenExpression-name: #c586c0;
+  --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);
+  --vscode-debugTokenExpression-string: #ce9178;
+  --vscode-debugTokenExpression-boolean: #4e94ce;
+  --vscode-debugTokenExpression-number: #b5cea8;
+  --vscode-debugTokenExpression-error: #f48771;
+  --vscode-debugView-exceptionLabelForeground: #cccccc;
+  --vscode-debugView-exceptionLabelBackground: #6c2022;
+  --vscode-debugView-stateLabelForeground: #cccccc;
+  --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
+  --vscode-debugView-valueChangedHighlight: #569cd6;
+  --vscode-debugConsole-infoForeground: #3794ff;
+  --vscode-debugConsole-warningForeground: #cca700;
+  --vscode-debugConsole-errorForeground: #f48771;
+  --vscode-debugConsole-sourceForeground: #cccccc;
+  --vscode-debugConsoleInputIcon-foreground: #cccccc;
+  --vscode-debugIcon-pauseForeground: #75beff;
+  --vscode-debugIcon-stopForeground: #f48771;
+  --vscode-debugIcon-disconnectForeground: #f48771;
+  --vscode-debugIcon-restartForeground: #89d185;
+  --vscode-debugIcon-stepOverForeground: #75beff;
+  --vscode-debugIcon-stepIntoForeground: #75beff;
+  --vscode-debugIcon-stepOutForeground: #75beff;
+  --vscode-debugIcon-continueForeground: #75beff;
+  --vscode-debugIcon-stepBackForeground: #75beff;
+  --vscode-extensionButton-prominentBackground: #0e639c;
+  --vscode-extensionButton-prominentForeground: #ffffff;
+  --vscode-extensionButton-prominentHoverBackground: #1177bb;
+  --vscode-extensionIcon-starForeground: #ff8e00;
+  --vscode-extensionIcon-verifiedForeground: #3794ff;
+  --vscode-extensionIcon-preReleaseForeground: #1d9271;
+  --vscode-extensionIcon-sponsorForeground: #d758b3;
+  --vscode-terminal-ansiBlack: #000000;
+  --vscode-terminal-ansiRed: #cd3131;
+  --vscode-terminal-ansiGreen: #0dbc79;
+  --vscode-terminal-ansiYellow: #e5e510;
+  --vscode-terminal-ansiBlue: #2472c8;
+  --vscode-terminal-ansiMagenta: #bc3fbc;
+  --vscode-terminal-ansiCyan: #11a8cd;
+  --vscode-terminal-ansiWhite: #e5e5e5;
+  --vscode-terminal-ansiBrightBlack: #666666;
+  --vscode-terminal-ansiBrightRed: #f14c4c;
+  --vscode-terminal-ansiBrightGreen: #23d18b;
+  --vscode-terminal-ansiBrightYellow: #f5f543;
+  --vscode-terminal-ansiBrightBlue: #3b8eea;
+  --vscode-terminal-ansiBrightMagenta: #d670d6;
+  --vscode-terminal-ansiBrightCyan: #29b8db;
+  --vscode-terminal-ansiBrightWhite: #e5e5e5;
+  --vscode-interactive-activeCodeBorder: #3794ff;
+  --vscode-interactive-inactiveCodeBorder: #37373d;
+  --vscode-gitDecoration-addedResourceForeground: #81b88b;
+  --vscode-gitDecoration-modifiedResourceForeground: #e2c08d;
+  --vscode-gitDecoration-deletedResourceForeground: #c74e39;
+  --vscode-gitDecoration-renamedResourceForeground: #73c991;
+  --vscode-gitDecoration-untrackedResourceForeground: #73c991;
+  --vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;
+  --vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;
+  --vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;
+  --vscode-gitDecoration-conflictingResourceForeground: #e4676b;
+  --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
+  --vscode-testExplorer-errorDecorationBackground: #5a1d1d;
+}
+
+/**
+ * This is copied in the same way, but from the <body> element
+ */
+body {
+  background-color: transparent;
+  color: var(--vscode-editor-foreground);
+  font-family: var(--vscode-font-family);
+  font-weight: var(--vscode-font-weight);
+  font-size: var(--vscode-font-size);
+  margin: 0;
+  padding: 0 20px;
+}