Add example of how to contribute commands to view title

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
 

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);
-}
 

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",

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'));