Add a new option to control whether to render inline color box or not.

extensions/css/client/src/colorDecorators.ts

@@ -5,132 +5,7 @@
 'use strict';
 
 import * as parse from 'parse-color';
-import { window, workspace, DecorationOptions, DecorationRenderOptions, Disposable, Range, TextDocument, DocumentColorProvider, Color, ColorRange } from 'vscode';
-
-const MAX_DECORATORS = 500;
-
-let decorationType: DecorationRenderOptions = {
-	before: {
-		contentText: ' ',
-		border: 'solid 0.1em #000',
-		margin: '0.1em 0.2em 0 0.2em',
-		width: '0.8em',
-		height: '0.8em'
-	},
-	dark: {
-		before: {
-			border: 'solid 0.1em #eee'
-		}
-	}
-};
-
-export function activateColorDecorations(decoratorProvider: (uri: string) => Thenable<Range[]>, supportedLanguages: { [id: string]: boolean }, isDecoratorEnabled: (languageId: string) => boolean): Disposable {
-
-	let disposables: Disposable[] = [];
-
-	let colorsDecorationType = window.createTextEditorDecorationType(decorationType);
-	disposables.push(colorsDecorationType);
-
-	let decoratorEnablement = {};
-	for (let languageId in supportedLanguages) {
-		decoratorEnablement[languageId] = isDecoratorEnabled(languageId);
-	}
-
-	let pendingUpdateRequests: { [key: string]: NodeJS.Timer; } = {};
-
-	window.onDidChangeVisibleTextEditors(editors => {
-		for (let editor of editors) {
-			triggerUpdateDecorations(editor.document);
-		}
-	}, null, disposables);
-
-	workspace.onDidChangeTextDocument(event => triggerUpdateDecorations(event.document), null, disposables);
-
-	// track open and close for document languageId changes
-	workspace.onDidCloseTextDocument(event => triggerUpdateDecorations(event, true));
-	workspace.onDidOpenTextDocument(event => triggerUpdateDecorations(event));
-
-	workspace.onDidChangeConfiguration(_ => {
-		let hasChanges = false;
-		for (let languageId in supportedLanguages) {
-			let prev = decoratorEnablement[languageId];
-			let curr = isDecoratorEnabled(languageId);
-			if (prev !== curr) {
-				decoratorEnablement[languageId] = curr;
-				hasChanges = true;
-			}
-		}
-		if (hasChanges) {
-			updateAllVisibleEditors(true);
-		}
-	}, null, disposables);
-
-	updateAllVisibleEditors(false);
-
-	function updateAllVisibleEditors(settingsChanges: boolean) {
-		window.visibleTextEditors.forEach(editor => {
-			if (editor.document) {
-				triggerUpdateDecorations(editor.document, settingsChanges);
-			}
-		});
-	}
-
-	function triggerUpdateDecorations(document: TextDocument, settingsChanges = false) {
-		let triggerUpdate = supportedLanguages[document.languageId] && (decoratorEnablement[document.languageId] || settingsChanges);
-		if (triggerUpdate) {
-			let documentUriStr = document.uri.toString();
-			let timeout = pendingUpdateRequests[documentUriStr];
-			if (typeof timeout !== 'undefined') {
-				clearTimeout(timeout);
-			}
-			pendingUpdateRequests[documentUriStr] = setTimeout(() => {
-				// check if the document is in use by an active editor
-				for (let editor of window.visibleTextEditors) {
-					if (editor.document && documentUriStr === editor.document.uri.toString()) {
-						if (decoratorEnablement[editor.document.languageId]) {
-							updateDecorationForEditor(documentUriStr, editor.document.version);
-							break;
-						} else {
-							editor.setDecorations(colorsDecorationType, []);
-						}
-					}
-				}
-				delete pendingUpdateRequests[documentUriStr];
-			}, 500);
-		}
-	}
-
-	function updateDecorationForEditor(contentUri: string, documentVersion: number) {
-		decoratorProvider(contentUri).then(ranges => {
-			for (let editor of window.visibleTextEditors) {
-				let document = editor.document;
-
-				if (document && document.version === documentVersion && contentUri === document.uri.toString()) {
-					let decorations = ranges.slice(0, MAX_DECORATORS).map(range => {
-						let color = document.getText(range);
-						if (color[0] === '#' && (color.length === 5 || color.length === 9)) {
-							let c = Color.fromHex(color);
-							if (c) {
-								color = `rgba(${c.red}, ${c.green}, ${c.blue}, ${c.alpha})`;
-							}
-						}
-						return <DecorationOptions>{
-							range: range,
-							renderOptions: {
-								before: {
-									backgroundColor: color
-								}
-							}
-						};
-					});
-					editor.setDecorations(colorsDecorationType, decorations);
-				}
-			}
-		});
-	}
-
-	return Disposable.from(...disposables);
-}
+import { Range, TextDocument, DocumentColorProvider, Color, ColorRange } from 'vscode';
 
 const CSSColorFormats = {
 	Hex: '#{red:X}{green:X}{blue:X}',
@@ -145,10 +20,14 @@ const CSSColorFormats = {
 };
 
 export class ColorProvider implements DocumentColorProvider {
-
-	constructor(private decoratorProvider: (uri: string) => Thenable<Range[]>) { }
+	constructor(private decoratorProvider: (uri: string) => Thenable<Range[]>, private supportedLanguages: { [id: string]: boolean }, private isDecoratorEnabled: (languageId: string) => boolean) { }
 
 	async provideDocumentColors(document: TextDocument): Promise<ColorRange[]> {
+		let renderDecorator = false;
+		if (document && this.isDecoratorEnabled(document.languageId)) {
+			renderDecorator = true;
+		}
+
 		const ranges = await this.decoratorProvider(document.uri.toString());
 		const result = [];
 		for (let range of ranges) {
@@ -164,7 +43,7 @@ export class ColorProvider implements DocumentColorProvider {
 				}
 			}
 			if (color) {
-				result.push(new ColorRange(range, color, [CSSColorFormats.Hex, CSSColorFormats.RGB, CSSColorFormats.HSL]));
+				result.push(new ColorRange(range, color, [CSSColorFormats.Hex, CSSColorFormats.RGB, CSSColorFormats.HSL], renderDecorator));
 			}
 		}
 		return result;

extensions/css/client/src/cssMain.ts

@@ -8,8 +8,8 @@ import * as path from 'path';
 
 import { languages, window, commands, workspace, ExtensionContext } from 'vscode';
 import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, RequestType, Range, TextEdit } from 'vscode-languageclient';
-import { activateColorDecorations, ColorProvider } from './colorDecorators';
 import { ConfigurationFeature } from 'vscode-languageclient/lib/proposed';
+import { ColorProvider } from './colorDecorators';
 
 import * as nls from 'vscode-nls';
 let localize = nls.loadMessageBundle();
@@ -60,8 +60,7 @@ export function activate(context: ExtensionContext) {
 			return workspace.getConfiguration().get<boolean>(languageId + '.colorDecorators.enable');
 		};
 
-		context.subscriptions.push(languages.registerColorProvider(['css', 'scss', 'less'], new ColorProvider(colorRequestor)));
-		context.subscriptions.push(activateColorDecorations(colorRequestor, { css: true, scss: true, less: true }, isDecoratorEnabled));
+		context.subscriptions.push(languages.registerColorProvider(['css', 'scss', 'less'], new ColorProvider(colorRequestor, { css: true, scss: true, less: true }, isDecoratorEnabled)));
 	});
 
 	let indentationRules = {

extensions/json/client/src/colorDecorators.ts

@@ -4,130 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import { window, workspace, DecorationOptions, DecorationRenderOptions, Disposable, Range, TextDocument, DocumentColorProvider, Color, ColorRange } from 'vscode';
-
-const MAX_DECORATORS = 500;
-
-let decorationType: DecorationRenderOptions = {
-	before: {
-		contentText: ' ',
-		border: 'solid 0.1em #000',
-		margin: '0.1em 0.2em 0 0.2em',
-		width: '0.8em',
-		height: '0.8em'
-	},
-	dark: {
-		before: {
-			border: 'solid 0.1em #eee'
-		}
-	}
-};
-
-export function activateColorDecorations(decoratorProvider: (uri: string) => Thenable<Range[]>, supportedLanguages: { [id: string]: boolean }, isDecoratorEnabled: (languageId: string) => boolean): Disposable {
-
-	let disposables: Disposable[] = [];
-
-	let colorsDecorationType = window.createTextEditorDecorationType(decorationType);
-	disposables.push(colorsDecorationType);
-
-	let decoratorEnablement = {};
-	for (let languageId in supportedLanguages) {
-		decoratorEnablement[languageId] = isDecoratorEnabled(languageId);
-	}
-
-	let pendingUpdateRequests: { [key: string]: NodeJS.Timer; } = {};
-
-	window.onDidChangeVisibleTextEditors(editors => {
-		for (let editor of editors) {
-			triggerUpdateDecorations(editor.document);
-		}
-	}, null, disposables);
-
-	workspace.onDidChangeTextDocument(event => triggerUpdateDecorations(event.document), null, disposables);
-
-	// track open and close for document languageId changes
-	workspace.onDidCloseTextDocument(event => triggerUpdateDecorations(event, true));
-	workspace.onDidOpenTextDocument(event => triggerUpdateDecorations(event));
-
-	workspace.onDidChangeConfiguration(_ => {
-		let hasChanges = false;
-		for (let languageId in supportedLanguages) {
-			let prev = decoratorEnablement[languageId];
-			let curr = isDecoratorEnabled(languageId);
-			if (prev !== curr) {
-				decoratorEnablement[languageId] = curr;
-				hasChanges = true;
-			}
-		}
-		if (hasChanges) {
-			updateAllVisibleEditors(true);
-		}
-	}, null, disposables);
-
-	updateAllVisibleEditors(false);
-
-	function updateAllVisibleEditors(settingsChanges: boolean) {
-		window.visibleTextEditors.forEach(editor => {
-			if (editor.document) {
-				triggerUpdateDecorations(editor.document, settingsChanges);
-			}
-		});
-	}
-
-	function triggerUpdateDecorations(document: TextDocument, settingsChanges = false) {
-		let triggerUpdate = supportedLanguages[document.languageId] && (decoratorEnablement[document.languageId] || settingsChanges);
-		if (triggerUpdate) {
-			let documentUriStr = document.uri.toString();
-			let timeout = pendingUpdateRequests[documentUriStr];
-			if (typeof timeout !== 'undefined') {
-				clearTimeout(timeout);
-			}
-			pendingUpdateRequests[documentUriStr] = setTimeout(() => {
-				// check if the document is in use by an active editor
-				for (let editor of window.visibleTextEditors) {
-					if (editor.document && documentUriStr === editor.document.uri.toString()) {
-						if (decoratorEnablement[editor.document.languageId]) {
-							updateDecorationForEditor(documentUriStr, editor.document.version);
-							break;
-						} else {
-							editor.setDecorations(colorsDecorationType, []);
-						}
-					}
-				}
-				delete pendingUpdateRequests[documentUriStr];
-			}, 500);
-		}
-	}
-
-	function updateDecorationForEditor(contentUri: string, documentVersion: number) {
-		decoratorProvider(contentUri).then(ranges => {
-			for (let editor of window.visibleTextEditors) {
-				let document = editor.document;
-
-				if (document && document.version === documentVersion && contentUri === document.uri.toString()) {
-					let decorations = [];
-					for (let i = 0; i < ranges.length && decorations.length < MAX_DECORATORS; i++) {
-						let range = ranges[i];
-						let c = parseColorFromRange(document, range);
-						if (c) {
-							decorations.push(<DecorationOptions>{
-								range: range,
-								renderOptions: {
-									before: {
-										backgroundColor: `rgba(${c.red}, ${c.green}, ${c.blue}, ${c.alpha})`
-									}
-								}
-							});
-						}
-					}
-					editor.setDecorations(colorsDecorationType, decorations);
-				}
-			}
-		});
-	}
-
-	return Disposable.from(...disposables);
-}
+import { Range, TextDocument, DocumentColorProvider, Color, ColorRange } from 'vscode';
 
 const ColorFormat_HEX = {
 	opaque: '"#{red:X}{green:X}{blue:X}"',
@@ -135,17 +12,21 @@ const ColorFormat_HEX = {
 };
 
 export class ColorProvider implements DocumentColorProvider {
-
-	constructor(private decoratorProvider: (uri: string) => Thenable<Range[]>) { }
+	constructor(private decoratorProvider: (uri: string) => Thenable<Range[]>, private supportedLanguages: { [id: string]: boolean }, private isDecoratorEnabled: (languageId: string) => boolean) { }
 
 	async provideDocumentColors(document: TextDocument): Promise<ColorRange[]> {
+		let renderDecorator = false;
+		if (document && this.isDecoratorEnabled(document.languageId)) {
+			renderDecorator = true;
+		}
+
 		const ranges = await this.decoratorProvider(document.uri.toString());
 		const result = [];
 		for (let range of ranges) {
 			let color = parseColorFromRange(document, range);
 			if (color) {
 				let r = new Range(range.start.line, range.start.character, range.end.line, range.end.character);
-				result.push(new ColorRange(r, color, [ColorFormat_HEX]));
+				result.push(new ColorRange(r, color, [ColorFormat_HEX], renderDecorator));
 			}
 		}
 		return result;

extensions/json/client/src/jsonMain.ts

@@ -9,8 +9,8 @@ import * as path from 'path';
 import { workspace, languages, ExtensionContext, extensions, Uri, Range } from 'vscode';
 import { LanguageClient, LanguageClientOptions, RequestType, ServerOptions, TransportKind, NotificationType, DidChangeConfigurationNotification } from 'vscode-languageclient';
 import TelemetryReporter from 'vscode-extension-telemetry';
-import { activateColorDecorations, ColorProvider } from './colorDecorators';
 import { ConfigurationFeature } from 'vscode-languageclient/lib/proposed';
+import { ColorProvider } from "./colorDecorators";
 
 import * as nls from 'vscode-nls';
 let localize = nls.loadMessageBundle();
@@ -122,10 +122,8 @@ export function activate(context: ExtensionContext) {
 		let isDecoratorEnabled = (languageId: string) => {
 			return workspace.getConfiguration().get<boolean>(languageId + '.colorDecorators.enable');
 		};
-		disposable = activateColorDecorations(colorRequestor, { json: true }, isDecoratorEnabled);
-		context.subscriptions.push(disposable);
 
-		context.subscriptions.push(languages.registerColorProvider('json', new ColorProvider(colorRequestor)));
+		context.subscriptions.push(languages.registerColorProvider('json', new ColorProvider(colorRequestor, { json: true }, isDecoratorEnabled)));
 	});
 
 	// Push the disposable to the context's subscriptions so that the

src/vs/editor/common/modes.ts

@@ -709,6 +709,11 @@ export interface IColorRange {
 	 * The available formats for this specific color.
 	 */
 	formatters: IColorFormatter[];
+
+	/**
+	 * Controls whether the color decorator is rendered.
+	 */
+	renderDecorator: boolean;
 }
 
 /**

src/vs/editor/contrib/colorPicker/browser/colorController.ts

@@ -41,6 +41,9 @@ export class ColorController extends Disposable implements IEditorContribution {
 			let decorations = [];
 
 			for (let i = 0; i < colorInfos.length; i++) {
+				if (!colorInfos[i].renderDecorator) {
+					continue;
+				}
 				const { red, green, blue, alpha } = colorInfos[i].color;
 				const rgba = new RGBA(red * 255, green * 255, blue * 255, alpha * 255);
 				let subKey = hash(rgba).toString(16);

src/vs/editor/contrib/colorPicker/browser/colorDetector.ts

@@ -111,7 +111,8 @@ export class ColorDetector implements IEditorContribution {
 		const colorRanges = colorInfos.map(c => ({
 			range: c.range,
 			color: c.color,
-			formatters: c.formatters
+			formatters: c.formatters,
+			renderDecorator: c.renderDecorator
 		}));
 
 		this.decorationsIds = this.editor.deltaDecorations(this.decorationsIds, decorations);

src/vs/vscode.proposed.d.ts

@@ -179,15 +179,20 @@ declare module 'vscode' {
 		 */
 		availableFormats: ColorFormat[];
 
+		/**
+		 * Controls whether the color decorator is rendered.
+		 */
+		renderDecorator: boolean;
+
 		/**
 		 * Creates a new color range.
 		 *
 		 * @param range The range the color appears in. Must not be empty.
 		 * @param color The value of the color.
 		 * @param format The format in which this color is currently formatted.
-		 * @param availableFormats The other formats this color range supports the color to be formatted in.
+		 * @param renderDecorator Controls whether the color decorator is rendered.
 		 */
-		constructor(range: Range, color: Color, availableFormats: ColorFormat[]);
+		constructor(range: Range, color: Color, availableFormats: ColorFormat[], renderDecorator: boolean);
 	}
 
 	/**

src/vs/workbench/api/electron-browser/mainThreadLanguageFeatures.ts

@@ -303,7 +303,8 @@ export class MainThreadLanguageFeatures implements MainThreadLanguageFeaturesSha
 							return {
 								color,
 								formatters,
-								range: documentColor.range
+								range: documentColor.range,
+								renderDecorator: documentColor.renderDecorator
 							};
 						});
 					});

src/vs/workbench/api/node/extHost.protocol.ts

@@ -474,6 +474,7 @@ export interface IRawColorInfo {
 	color: [number, number, number, number];
 	availableFormats: (number | [number, number])[];
 	range: IRange;
+	renderDecorator: boolean;
 }
 
 export type IRawColorFormatMap = [number, string][];

src/vs/workbench/api/node/extHostLanguageFeatures.ts

@@ -734,7 +734,8 @@ class ColorProviderAdapter {
 				return {
 					color: [ci.color.red, ci.color.green, ci.color.blue, ci.color.alpha] as [number, number, number, number],
 					availableFormats: availableFormats,
-					range: TypeConverters.fromRange(ci.range)
+					range: TypeConverters.fromRange(ci.range),
+					renderDecorator: ci.renderDecorator
 				};
 			});
 

src/vs/workbench/api/node/extHostTypes.ts

@@ -1056,7 +1056,9 @@ export class ColorRange {
 
 	availableFormats: IColorFormat[];
 
-	constructor(range: Range, color: Color, availableFormats: IColorFormat[]) {
+	renderDecorator: boolean;
+
+	constructor(range: Range, color: Color, availableFormats: IColorFormat[], renderDecorator: boolean) {
 		if (color && !(color instanceof Color)) {
 			throw illegalArgument('color');
 		}
@@ -1069,6 +1071,7 @@ export class ColorRange {
 		this.range = range;
 		this.color = color;
 		this.availableFormats = availableFormats;
+		this.renderDecorator = renderDecorator;
 	}
 }