Microsoft/vscode
View on GitHubWebview Panel with `enableFindWidget` does not work after Moving Editor Group into New Window
Open
#233,044 opened on Nov 5, 2024
bughelp wantedwebview
Repository metrics
- Stars
- (74,848 stars)
- PR merge metrics
- (Avg merge 11h 43m) (1,000 merged PRs in 30d)
Description
Does this issue occur when all extensions are disabled?: Yes - only extension is the one being developed
Version: 1.95.1 (Universal) Commit: 65edc4939843c90c34d61f4ce11704f09d3e5cb6 Date: 2024-10-31T05:14:54.222Z Electron: 32.2.1 ElectronBuildId: 10427718 Chromium: 128.0.6613.186 Node.js: 20.18.0 V8: 12.8.374.38-electron.0 OS: Darwin arm64 24.1.0
and
Version: 1.96.0-insider (Universal) Commit: 231d37338a58ff22c223a7ed7d4c1e7142c513d2 Date: 2024-11-04T14:19:41.196Z Electron: 32.2.1 ElectronBuildId: 10427718 Chromium: 128.0.6613.186 Node.js: 20.18.0 V8: 12.8.374.38-electron.0 OS: Darwin arm64 24.1.0
Steps to Reproduce:
- Clone the Microsoft VS Code extensions sample - webview-sample
- Replace
src/extension.tswith:
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.commands.registerCommand('catCoding.start', () => {
WebviewIssuePanel.createOrShow(context.extensionUri);
})
);
}
class WebviewIssuePanel {
public static currentPanel: WebviewIssuePanel | undefined;
public static readonly viewType = 'webviewIssue';
private readonly _panel: vscode.WebviewPanel;
private readonly _extensionUri: vscode.Uri;
private _disposables: vscode.Disposable[] = [];
public static createOrShow(extensionUri: vscode.Uri) {
const column = vscode.window.activeTextEditor
? vscode.window.activeTextEditor.viewColumn
: undefined;
if (WebviewIssuePanel.currentPanel) {
WebviewIssuePanel.currentPanel._panel.reveal(column);
return;
}
const panel = vscode.window.createWebviewPanel(
WebviewIssuePanel.viewType,
'Webview Issue',
column || vscode.ViewColumn.One,
{
enableScripts: true,
enableFindWidget: true,
localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'media')],
}
);
WebviewIssuePanel.currentPanel = new WebviewIssuePanel(panel, extensionUri);
}
public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
WebviewIssuePanel.currentPanel = new WebviewIssuePanel(panel, extensionUri);
}
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
this._panel = panel;
this._extensionUri = extensionUri;
this._panel.title = 'Webview Issue';
this._panel.webview.html = this._getHtmlForWebview(this._panel.webview);
this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
}
public dispose() {
WebviewIssuePanel.currentPanel = undefined;
this._panel.dispose();
while (this._disposables.length) {
const x = this._disposables.pop();
if (x) {
x.dispose();
}
}
}
private _getHtmlForWebview(webview: vscode.Webview) {
// Use a nonce to only allow specific scripts to be run
const nonce = getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
Use a content security policy to only allow loading images from https or from our extension directory,
and only allow scripts that have a specific nonce.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webview Issue</title>
</head>
<body>
Text to search for
</body>
</html>`;
}
}
function getNonce() {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 32; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
- Start the sample and run
Cat Coding: Start cat coding session - Use Ctrl-F to search for
text, you will see it correctly highlighted:
- Run
View: Move Editor Group into New Windowcommand to open the webview in a new window - Use Ctrl-F to search for
text, you will see it does not highlight: