diff --git a/webview-view-sample/README.md b/webview-view-sample/README.md index 921764eb..6af5b47b 100644 --- a/webview-view-sample/README.md +++ b/webview-view-sample/README.md @@ -6,6 +6,7 @@ Demonstrates VS Code's proposed [webview view API](https://github.com/microsoft/ - Posting messages from an extension to a webview view - Posting message from a webview to an extension - Persisting state in the view. +- Contributing commands to the view title. ## VS Code API diff --git a/webview-view-sample/media/main.js b/webview-view-sample/media/main.js index 5c7f4491..e7018fd1 100644 --- a/webview-view-sample/media/main.js +++ b/webview-view-sample/media/main.js @@ -13,7 +13,7 @@ updateColorList(colors); document.querySelector('.add-color-button').addEventListener('click', () => { - addColor(colors, getNewCalicoColor, updateColorList); + addColor(); }); // Handle messages sent from the extension to the webview @@ -21,8 +21,17 @@ const message = event.data; // The json data that the extension sent switch (message.type) { case 'addColor': - addColor(); - break; + { + addColor(); + break; + } + case 'clearColors': + { + colors = []; + updateColorList(colors); + break; + } + } }); @@ -81,10 +90,11 @@ const colors = ['020202', 'f1eeee', 'a85b20', 'daab70', 'efcb99']; return colors[Math.floor(Math.random() * colors.length)]; } + + function addColor() { + colors.push({ value: getNewCalicoColor() }); + updateColorList(colors); + } }()); -function addColor(colors, getNewCalicoColor, updateColorList) { - colors.push({ value: getNewCalicoColor() }); - updateColorList(colors); -} diff --git a/webview-view-sample/package.json b/webview-view-sample/package.json index b1a9b203..e100b4f2 100644 --- a/webview-view-sample/package.json +++ b/webview-view-sample/package.json @@ -12,7 +12,8 @@ ], "activationEvents": [ "onView:calicoColors.colorsView", - "onCommand:calicoColors.addColor" + "onCommand:calicoColors.addColor", + "onCommand:calicoColors.clearColors" ], "repository": { "type": "git", @@ -34,8 +35,23 @@ "command": "calicoColors.addColor", "category": "Calico Colors", "title": "Add Color" + }, + { + "command": "calicoColors.clearColors", + "category": "Calico Colors", + "title": "Clear Colors", + "icon": "$(clear-all)" } - ] + ], + "menus": { + "view/title": [ + { + "command": "calicoColors.clearColors", + "group": "navigation", + "when": "view == calicoColors.colorsView" + } + ] + } }, "scripts": { "vscode:prepublish": "npm run compile", diff --git a/webview-view-sample/src/extension.ts b/webview-view-sample/src/extension.ts index 8e48f793..7cf2c09d 100644 --- a/webview-view-sample/src/extension.ts +++ b/webview-view-sample/src/extension.ts @@ -13,6 +13,11 @@ export function activate(context: vscode.ExtensionContext) { vscode.commands.registerCommand('calicoColors.addColor', () => { provider.addColor(); })); + + context.subscriptions.push( + vscode.commands.registerCommand('calicoColors.clearColors', () => { + provider.clearColors(); + })); } class ColorsViewProvider implements vscode.WebviewViewProvider { @@ -62,6 +67,12 @@ class ColorsViewProvider implements vscode.WebviewViewProvider { } } + public clearColors() { + if (this._view) { + this._view.webview.postMessage({ type: 'clearColors' }); + } + } + private _getHtmlForWebview(webview: vscode.Webview) { // Get the local path to main script run in the webview, then convert it to a uri we can use in the webview. const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js'));