private getCdnHtmlForWebview()

in src/devtoolsPanel.ts [429:478]


    private getCdnHtmlForWebview() {
        // Default to config provided base uri
        const cdnBaseUri = this.config.devtoolsBaseUri || this.devtoolsBaseUri;
        const hostPath = vscode.Uri.file(path.join(this.extensionPath, 'out', 'host', 'host.bundle.js'));
        const hostUri = this.panel.webview.asWebviewUri(hostPath);

        const stylesPath = vscode.Uri.file(path.join(this.extensionPath, 'out', 'common', 'styles.css'));
        const stylesUri = this.panel.webview.asWebviewUri(stylesPath);

        const theme = SettingsProvider.instance.getThemeFromUserSetting();
        const standaloneScreencast = SettingsProvider.instance.getScreencastSettings();

        // The headless query param is used to show/hide the DevTools screencast on launch
        // If the standalone screencast is enabled, we want to hide the DevTools screencast
        // regardless of the headless setting.
        const enableScreencast = standaloneScreencast ? false : this.isHeadless;

        // the added fields for "Content-Security-Policy" allow resource loading for other file types
        return `
            <!doctype html>
            <html>
            <head>
                <meta http-equiv="content-type" content="text/html; charset=utf-8">
                <meta name="referrer" content="no-referrer">
                <link href="${stylesUri}" rel="stylesheet"/>
                <script src="${hostUri}"></script>
                <meta http-equiv="Content-Security-Policy"
                    content="default-src;
                    img-src 'self' data: ${this.panel.webview.cspSource};
                    style-src 'self' 'unsafe-inline' ${this.panel.webview.cspSource};
                    script-src 'self' 'unsafe-eval' ${this.panel.webview.cspSource};
                    frame-src 'self' ${this.panel.webview.cspSource} ${cdnBaseUri};
                    connect-src 'self' data: ${this.panel.webview.cspSource};
                ">
            </head>
            <body>
                <iframe id="devtools-frame" frameBorder="0" src="${cdnBaseUri}?experiments=true&theme=${theme}&headless=${enableScreencast}&standaloneScreencast=${standaloneScreencast}"></iframe>
                <div id="error-message" class="hidden">
                    <h1>Unable to download DevTools for the current target.</h1>
                    <p>Try these troubleshooting steps:</p>
                    <ol>
                    <li>Check your network connection</li>
                    <li>Close and re-launch the DevTools</li>
                    </ol>
                    <p>If this problem continues, please <a target="_blank" href="https://github.com/microsoft/vscode-edge-devtools/issues/new?template=bug_report.md">file an issue.</a></p>
                </div>
            </body>
            </html>
            `;
    }