#43645 Out of the box test view container

src/vs/workbench/api/browser/media/test.svg

+<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Canvas" fill="none">
+<g id="beaker">
+<g id="Shape">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M 20.7596 21.885L 15.6896 10.5L 15.6896 4.5L 17.1896 4.5L 17.1896 3L 3.68959 3L 3.68959 4.5L 5.18959 4.5L 5.18959 10.5L 0.134588 21.885C -0.315412 22.875 0.419588 24 1.49959 24L 19.4096 24C 20.4896 24 21.2096 22.875 20.7746 21.885L 20.7596 21.885ZM 4.81458 15L 6.68958 10.5L 6.68958 4.5L 14.1896 4.5L 14.1896 10.5L 16.0646 15L 4.81458 15ZM 11.1896 12L 12.6896 12L 12.6896 13.5L 11.1896 13.5L 11.1896 12ZM 9.68958 10.5L 8.18958 10.5L 8.18958 9L 9.68958 9L 9.68958 10.5ZM 9.68958 6L 11.1896 6L 11.1896 7.5L 9.68958 7.5L 9.68958 6ZM 9.68958 1.5L 8.18958 1.5L 8.18958 0L 9.68958 0L 9.68958 1.5Z" transform="translate(0.810059 0)" fill="white"/>
+</g>
+</g>
+</g>
+</svg>
+

src/vs/workbench/api/browser/viewsContainersExtensionPoint.ts

@@ -50,7 +50,7 @@ const viewsContainerSchema: IJSONSchema = {
 			type: 'string'
 		},
 		icon: {
-			description: localize('vscode.extension.contributes.views.containers.icon', 'Path to the container icon'),
+			description: localize('vscode.extension.contributes.views.containers.icon', "Path to the container icon. Icons are 24x24 centered on a 50x40 square and have a fill color of 'rgb(215, 218, 224)' or '#d7dae0'. It is recommended that icons be in SVG, though any image file type is accepted."),
 			type: 'string'
 		}
 	}
@@ -70,14 +70,24 @@ export const viewsContainersContribution: IJSONSchema = {
 
 export const viewsContainersExtensionPoint: IExtensionPoint<{ [loc: string]: IUserFriendlyViewsContainerDescriptor[] }> = ExtensionsRegistry.registerExtensionPoint<{ [loc: string]: IUserFriendlyViewsContainerDescriptor[] }>('viewsContainers', [], viewsContainersContribution);
 
-const CUSTOM_VIEW_CONTAINER_ORDER = 5;
+const TEST_VIEW_CONTAINER_ORDER = 6;
 
 class ViewsContainersExtensionHandler implements IWorkbenchContribution {
 
 	constructor() {
+		this.registerTestViewContainer();
 		this.handleAndRegisterCustomViewContainers();
 	}
 
+	private registerTestViewContainer(): void {
+		const id = 'test';
+		const title = localize('test', "Test");
+		const cssClass = `extensionViewlet-${id}`;
+		const icon = require.toUrl('./media/test.svg');
+
+		this.registerCustomViewlet({ id, title, icon }, TEST_VIEW_CONTAINER_ORDER, cssClass);
+	}
+
 	private handleAndRegisterCustomViewContainers() {
 		viewsContainersExtensionPoint.setHandler((extensions) => {
 			for (let extension of extensions) {
@@ -132,7 +142,7 @@ class ViewsContainersExtensionHandler implements IWorkbenchContribution {
 		containers.forEach((descriptor, index) => {
 			const cssClass = `extensionViewlet-${descriptor.id}`;
 			const icon = join(extension.extensionFolderPath, descriptor.icon);
-			this.registerCustomViewlet({ id: descriptor.id, title: descriptor.title, icon }, CUSTOM_VIEW_CONTAINER_ORDER + index + 1, cssClass);
+			this.registerCustomViewlet({ id: descriptor.id, title: descriptor.title, icon }, TEST_VIEW_CONTAINER_ORDER + index + 1, cssClass);
 		});
 	}
 
@@ -186,7 +196,7 @@ class ViewsContainersExtensionHandler implements IWorkbenchContribution {
 
 		// Generate CSS to show the icon in the activity bar
 		const iconClass = `.monaco-workbench > .activitybar .monaco-action-bar .action-label.${cssClass}`;
-		createCSSRule(iconClass, `-webkit-mask: url('${descriptor.icon}') no-repeat 50% 50%;`);
+		createCSSRule(iconClass, `-webkit-mask: url('${descriptor.icon}') no-repeat 50% 50%`);
 	}
 }