update decorator sample

.scripts/samples.js

@@ -10,8 +10,7 @@
  */
 
 /** @type {Sample[]} */
-const samples = [
-	{
+const samples = [{
 		description: 'Multi Root Sample',
 		path: 'basic-multi-root-sample',
 		guide: null,
@@ -39,10 +38,22 @@ const samples = [
 		apis: ['languages.registerCompletionItemProvider', 'CompletionItem', 'SnippetString'],
 		contributions: []
 	},
-	{ description: 'File System Provider Sample', path: 'fsprovider-sample', guide: null, apis: ['workspace.registerFileSystemProvider'], contributions: [] },
+	{
+		description: 'File System Provider Sample',
+		path: 'fsprovider-sample',
+		guide: null,
+		apis: ['workspace.registerFileSystemProvider'],
+		contributions: []
+	},
 	// { description: 'configuration-sample', path: 'configuration-sample', guide: null, apis: [], contributions: [] },
 	// { description: 'contentprovider-sample', path: 'contentprovider-sample', guide: null, apis: [], contributions: [] },
-	// { description: 'decorator-sample', path: 'decorator-sample', guide: null, apis: [], contributions: [] },
+	{
+		description: 'decorator-sample',
+		path: 'decorator-sample',
+		guide: null,
+		apis: ['TextEditor.setDecorations', 'DecorationOptions', 'DecorationInstanceRenderOptions', 'ThemableDecorationInstanceRenderOptions', 'window.createTextEditorDecorationType', 'TextEditorDecorationType'],
+		contributions: []
+	},
 	// { description: 'extension-deps-sample', path: 'extension-deps-sample', guide: null, apis: [], contributions: [] },
 	// { description: 'hellocode-minimal-sample', path: 'hellocode-minimal-sample', guide: null, apis: [], contributions: [] },
 	// { description: 'hellocode-sample', path: 'hellocode-sample', guide: null, apis: [], contributions: [] },
@@ -106,4 +117,4 @@ const samples = [
 	// { description: 'webpack-sample', path: 'webpack-sample', guide: null, apis: [], contributions: [] },
 ];
 
-module.exports = samples;
+module.exports = samples;

decorator-sample/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "eg2.tslint"
+    ]
+}

decorator-sample/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.insertSpaces": false
+}

decorator-sample/README.md

@@ -1,16 +1,32 @@
-# README
-## This is the README for the "decorator-sample" 
+# Decorator Sample
 -------------------
 
-This folder contains a sample VS code extension that demonstrates the decorator API.
+This folder contains a sample VS code extension that demonstrates the editor decorator API.
 
 The sample creates a decoration for each number that appears in the active editor. It
 demonstrates some of the decorator features such as borders, background colors, cursors
-and hovers. 
+and hovers.
+
+The sample also shows the use of a user defined themeable color. This is the recommended way when using cololrs as it allows users (and themes) to configure the color in the user settings.
 
 ![sample](preview.png)
 
-# How to run locally
+## VSCode API
 
-* `npm run compile` to start the compiler in watch mode
+The sample code show the usage of the vscode.`TextEditor.setDecorations` and `vscode.window.createTextEditorDecorationType` APIs as well as the `colors` contribution point.
+
+# Running the Sample
+
+* `npm install` to initialize the project
+* `npm run watch` to start the compiler in watch mode
 * open this folder in VS Code and press `F5`
+* this will open the `[Extension Development Host]` window, running the extension:
+  * Open any document that contains single and multi-digit numbers.
+  * The extension will decorate single and multiple-digit numbers as shown in the screenshot above.
+  * In the user settings, add
+    ```
+    "workbench.colorCustomizations": {
+        "myextension.largeNumberBackground": "#ff00ff"
+    }
+    ```
+    to customize the large number decoration color.

decorator-sample/package.json

@@ -1,28 +1,45 @@
-{
-	"name": "decorator-sample",
-	"description": "Sample for the decorator API",
-	"version": "0.0.1",
-	"publisher": "vscode-samples",
-	"license": "MIT",
-	"engines": {
-		"vscode": "^1.15.0"
-	},
-	"categories": [
-		"Other"
-	],
-	"activationEvents": [
-		"*"
-	],
-	"main": "./out/extension",
-	"scripts": {
-		"vscode:prepublish": "npm run compile",
-		"compile": "tsc -p ./",
-		"watch": "tsc -watch -p ./",
-		"postinstall": "node ./node_modules/vscode/bin/install"
-	},
-	"devDependencies": {
-		"vscode": "^1.1.17",
-		"typescript": "^2.5.3",
-		"@types/node": "7.0.4"
-	}
-}
+{
+	"name": "decorator-sample",
+	"description": "Sample for the decorator API",
+	"version": "0.0.1",
+	"publisher": "vscode-samples",
+	"license": "MIT",
+	"engines": {
+		"vscode": "^1.15.0"
+	},
+	"repository": {
+		"url": "https://github.com/Microsoft/vscode-extension-samples"
+	},
+	"categories": [
+		"Other"
+	],
+	"activationEvents": [
+		"*"
+	],
+	"main": "./out/extension",
+	"contributes": {
+		"colors": [
+			{
+				"id": "myextension.largeNumberBackground",
+				"description": "Background decoration color for large numbers",
+				"defaults": {
+					"dark": "#FF000055",
+					"light": "#FF000055",
+					"highContrast": "#FF000055"
+				}
+			}
+		]
+	},
+	"scripts": {
+		"vscode:prepublish": "npm run compile",
+		"compile": "tsc -p ./",
+		"watch": "tsc -watch -p ./",
+		"postinstall": "node ./node_modules/vscode/bin/install"
+	},
+	"devDependencies": {
+		"vscode": "^1.1.21",
+		"typescript": "^3.1.3",
+		"tslint": "^5.11.0",
+		"@types/node": "^8.9.1"
+	}
+}

decorator-sample/src/extension.ts

@@ -24,7 +24,7 @@ export function activate(context: vscode.ExtensionContext) {
 	// create a decorator type that we use to decorate large numbers
 	const largeNumberDecorationType = vscode.window.createTextEditorDecorationType({
 		cursor: 'crosshair',
-		backgroundColor: 'rgba(255,0,0,0.3)'
+		backgroundColor: { id: 'myextension.largeNumberBackground' }
 	});
 
 	let activeEditor = vscode.window.activeTextEditor;
@@ -45,7 +45,7 @@ export function activate(context: vscode.ExtensionContext) {
 		}
 	}, null, context.subscriptions);
 
-	var timeout = null;
+	let timeout = null;
 	function triggerUpdateDecorations() {
 		if (timeout) {
 			clearTimeout(timeout);

decorator-sample/tsconfig.json

@@ -1,11 +1,11 @@
 {
 	"compilerOptions": {
 		"module": "commonjs",
-		"target": "es5",
+		"target": "es6",
 		"outDir": "out",
 		"lib": ["es6"],
 		"sourceMap": true,
 		"rootDir": "src"
 	},
-	"exclude": ["node_modules"]
-}
+	"exclude": ["node_modules", ".vscode-test"]
+}

decorator-sample/tslint.json

@@ -0,0 +1,6 @@
+{
+	"rules": {
+		"indent": [true, "tabs"],
+		"semicolon": [true, "always"]
+	}
+}