Document localResourceRoot for Webview codicons.css net::ERR_ABORTED 401

[rolandostar]

When following the webview-codicons-sample I found the following error was returned on the extension host console:

GET https://file+.vscode-resource.vscode-cdn.net/ [...] /node_modules/%40vscode/codicons/dist/codicon.css net::ERR_ABORTED 401

This was caused due to Serialization and WebView Options:

if (vscode.window.registerWebviewPanelSerializer) {
    // Make sure we register a serializer in activation event
    vscode.window.registerWebviewPanelSerializer(TTSConsolePanel.viewType, {
      async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: unknown) {
        console.log(`Got state: ${state}`);
        // Reset the webview options so we use latest uri for `localResourceRoots`.
        webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
        TTSConsolePanel.revive(webviewPanel, context.extensionUri);
      },
    });
  }

According to the localResourceRoot docs, this option should by default allow resources within extension's install directory, but I've found this is only true if localResourceRoots is not set. If there's any values passed, then the extension's install directory must also be explicitly allowed like so:

export function getWebviewOptions(extensionUri: vscode.Uri): vscode.WebviewOptions {
  return {
    enableScripts: true,
    localResourceRoots: [
      vscode.Uri.joinPath(extensionUri, 'node_modules', '@vscode/codicons', 'dist'), // <-- This was missing
      vscode.Uri.joinPath(extensionUri, 'assets'),
    ],
  };
}

This behavior was difficult to trace down and I believe it should be either included on the example or mentioned in the README.

[Kuro-P]

Same error in my project, really helpful, thanks.

[unrealisticguy]

saved my night, thank you, you're a true hero. @rolandostar