Working with webviews

Webview API documentation

UI components

Webviews like the cache properties view and the data viewer views are built with React. Fluent UI React is used for the styled UI components.

Fluent UI Styles
Fluent UI Controls

Fluent UI icons

Fluent UI icons are bundled locally with the extension so that even in restricted network environments (e.g. inside a VNET), all icons can be rendered correctly (by default Fluent UI will retrieve the icon font from a CDN). This is done using the Fabric Icon subset tool to generate a subset of the Fluent UI font glyphs.

The generated bundle contains the font along with CSS and TypeScript integration code. The extension uses a modified version of the bundled TypeScript integration code. These files are located in src-webview\fabric-icons.

Adding a new icon

1. Keep a note of the existing icons in the project. E.g. see src-webview\fabric-icons\config\fabric-icons.json.

2. Use the icon subset tool to select all the icons to add, including the icons from Step 1.

3. Click Get subset and a ZIP file will be downloaded.

4. Extract and copy the fabric-icons.woff and fabric-icons.json, overwriting the current ones.

5. Modify src-webview\fabric-icons\src\fabric-icons.ts and overwrite the icons property of subset with what's in the fabric-icons.ts from the ZIP file.

   E.g. Old fabric-icons.ts

   ...
   icons: {
     'ChevronDownMed': '\uE972',
     'ChevronRightMed': '\uE974'
   }
   ...

   E.g. New fabric-icons.ts

   ...
   icons: {
     'ChevronDownMed': '\uE972',
     'ChevronRightMed': '\uE974',
     'SocialListeningLogo': '\uED7C'
   }
   ...

Using the icon

If using the icon in a button, refer to this.
If using the icon just by itself, refer to this.

Inspecting and debugging webviews

1. Make sure the webview is visible.
2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and select the command Developer: Open Webview Developer Tools.
3. Use the Developer Tools window to inspect elements, use console, etc.

More info here.