SWO/RTT grapher cannot display

[nemodeep]

1.Environment description

STM32 MCU Eval Tools：STM32F407G-DISC1
Operation system：Windows 10-21H2
VSCode version：1.73.1
Cortex-Debug version：1.6.7
Launch.json configuration：

"swoConfig": {
	"enabled": true,
	"swoFrequency": 2000000,
	"cpuFrequency": 168000000,
	"source": "probe",
	"decoders": [
		{
			"scale": 1,
			"graphId": "1",
			"port": 1,
			"type": "graph",
			"encoding": "unsigned",
		}
	]
},

"graphConfig": [
	{
		"annotate":false,
		"label": "Counter",
		"maximum": 255,
		"minimum": 0,
		"plots": [
			{
				"color": "#53753c",
				"label": "Counter 1",
				"graphId": "1"
			}
		],
		"timespan": 10,
		"type": "realtime",
	}
]

2.Issue description：

After entering the debug mode, the SWO grapher cannot be displayed. As shown in the picture:

Run Webview Developer Tool , I found the grapher.bundle.js cannot be load:

3.Cause of issue：

I search for warning of net::ERR_UNKNOWN_URL_SCHEME, found some discussions of similar issues.
Refer to issues #89038，I think the problem might be described in the documentation below：Warning if webviews don't use Webview.asWebviewUri for local resources
I found the relevant part in the documentation of WebView API : Loading local content

4.Solution：

Modify getHTML() in ./src/frontend/swo/core.ts
the original code is:

private getHTML() {
        const scriptUri = vscode.Uri.file(path.join(this.extensionPath, 'dist', 'grapher.bundle.js')).with({ scheme: 'vscode-resource' });

        const nonce = getNonce();

        let html = fs.readFileSync(path.join(this.extensionPath, 'resources', 'grapher.html'), { encoding: 'utf8', flag: 'r' });

        html = html.replace(/\$\{nonce\}/g, nonce).replace(/\$\{scriptUri\}/g,  scriptUri.toString());

        return html;

    }

Replace the scheme: 'vscode-resource' method with the webview.asWebviewUri method, and the code is modified to:

private getHTML() {
        const onDiskPath = vscode.Uri.file(path.join(this.extensionPath, 'dist', 'grapher.bundle.js'));
        const scriptUri = this.viewPanel.webview.asWebviewUri(onDiskPath);

        const nonce = getNonce();

        let html = fs.readFileSync(path.join(this.extensionPath, 'resources', 'grapher.html'), { encoding: 'utf8', flag: 'r' });

        html = html.replace(/\$\{nonce\}/g, nonce).replace(/\$\{scriptUri\}/g,  scriptUri.toString());

        return html;
    }

After compiling and runing, the SWO grapher can be displayed normally.

[haneefdm]

Thanks for reporting this. We have not touched that code in years. Also, it ran fine just a few months ago.

I will see if I can the fix out in the next release

[aq1018]

Looks like this is already on the main branch. I compiled it myself, and it works like a charm. I can finally see the graph in action!

Here is how I compile it. Note, node.js is a prerequisite for compiling.

git clone https://github.com/Marus/cortex-debug.git
cd cortex-debug
npm install
npx -y vsce package -o cortex-debug.vsix

This will produce a cortex-debug.vsix file locally. Now you can install this plugin from local vsix file. See instruction here: https://stackoverflow.com/questions/42017617/how-to-install-vs-code-extension-manually

[PhilippHaefele]

@haneefdm As in the meanwhile V1.6.9 was released, i think we can close this one