Move renderColorDecorator options to core settings.

extensions/css/client/src/colorDecorators.ts

@@ -49,10 +49,6 @@ export class ColorProvider implements DocumentColorProvider {
 	}
 
 	async provideDocumentColors(document: TextDocument): Promise<ColorRange[]> {
-		if (!this.supportedLanguages[document.languageId] || !this.decoratorEnablement[document.languageId]) {
-			return [];
-		}
-
 		const ranges = await this.decoratorProvider(document.uri.toString());
 		const result = [];
 		for (let range of ranges) {

extensions/json/client/src/colorDecorators.ts

@@ -42,10 +42,6 @@ export class ColorProvider implements DocumentColorProvider {
 	}
 
 	async provideDocumentColors(document: TextDocument): Promise<ColorRange[]> {
-		if (!this.supportedLanguages[document.languageId] || !this.decoratorEnablement[document.languageId]) {
-			return [];
-		}
-
 		const ranges = await this.decoratorProvider(document.uri.toString());
 		const result = [];
 		for (let range of ranges) {

src/vs/editor/common/config/commonEditorConfig.ts

@@ -593,6 +593,11 @@ const editorConfiguration: IConfigurationNode = {
 			'default': EDITOR_DEFAULTS.contribInfo.links,
 			'description': nls.localize('links', "Controls whether the editor should detect links and make them clickable")
 		},
+		'editor.colorDecorator': {
+			'type': 'boolean',
+			'default': EDITOR_DEFAULTS.contribInfo.colorDecorator,
+			'description': nls.localize('colorDecorator', "Controls whether the editor should render the inline color decorators.")
+		},
 		'diffEditor.renderSideBySide': {
 			'type': 'boolean',
 			'default': true,

src/vs/editor/common/config/editorOptions.ts

@@ -337,6 +337,10 @@ export interface IEditorOptions {
 	 * Defaults to true.
 	 */
 	links?: boolean;
+	/**
+	 * Enable inline color decorators rendering.
+	 */
+	colorDecorator?: boolean;
 	/**
 	 * Enable custom contextmenu.
 	 * Defaults to true.
@@ -790,6 +794,7 @@ export interface EditorContribOptions {
 	readonly showFoldingControls: 'always' | 'mouseover';
 	readonly matchBrackets: boolean;
 	readonly find: InternalEditorFindOptions;
+	readonly colorDecorator: boolean;
 }
 
 /**
@@ -1134,6 +1139,7 @@ export class InternalEditorOptions {
 			&& a.showFoldingControls === b.showFoldingControls
 			&& a.matchBrackets === b.matchBrackets
 			&& this._equalFindOptions(a.find, b.find)
+			&& a.colorDecorator === b.colorDecorator
 		);
 	}
 
@@ -1661,7 +1667,8 @@ export class EditorOptionsValidator {
 			folding: _boolean(opts.folding, defaults.folding),
 			showFoldingControls: _stringSet<'always' | 'mouseover'>(opts.showFoldingControls, defaults.showFoldingControls, ['always', 'mouseover']),
 			matchBrackets: _boolean(opts.matchBrackets, defaults.matchBrackets),
-			find: find
+			find: find,
+			colorDecorator: _boolean(opts.colorDecorator, defaults.colorDecorator),
 		};
 	}
 }
@@ -1758,7 +1765,8 @@ export class InternalEditorOptionsFactory {
 				folding: (accessibilityIsOn ? false : opts.contribInfo.folding), // DISABLED WHEN SCREEN READER IS ATTACHED
 				showFoldingControls: opts.contribInfo.showFoldingControls,
 				matchBrackets: (accessibilityIsOn ? false : opts.contribInfo.matchBrackets), // DISABLED WHEN SCREEN READER IS ATTACHED
-				find: opts.contribInfo.find
+				find: opts.contribInfo.find,
+				colorDecorator: opts.contribInfo.colorDecorator
 			}
 		};
 	}
@@ -2196,6 +2204,7 @@ export const EDITOR_DEFAULTS: IValidatedEditorOptions = {
 		find: {
 			seedSearchStringFromSelection: true,
 			autoFindInSelection: false
-		}
+		},
+		colorDecorator: true
 	},
 };

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

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { Disposable } from 'vs/base/common/lifecycle';
+import { ICommonCodeEditor, IEditorContribution } from 'vs/editor/common/editorCommon';
+import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
+import { editorContribution } from 'vs/editor/browser/editorBrowserExtensions';
+import { getColors } from '../common/color';
+import { ICodeEditorService } from 'vs/editor/common/services/codeEditorService';
+import { hash } from 'vs/base/common/hash';
+import { ColorProviderRegistry } from 'vs/editor/common/modes';
+import { RGBA } from 'vs/base/common/color';
+
+const MAX_DECORATORS = 500;
+
+@editorContribution
+export class ColorController extends Disposable implements IEditorContribution {
+
+	private static ID: string = 'editor.contrib.colorController';
+
+	public static get(editor: ICommonCodeEditor): ColorController {
+		return editor.getContribution<ColorController>(ColorController.ID);
+	}
+
+	private _isEnabled: boolean;
+	private _decorations: string[];
+	private _decorationsTypes: { [key: string]: boolean };
+
+	constructor(
+		private _editor: ICodeEditor,
+		@ICodeEditorService private _codeEditorService: ICodeEditorService
+	) {
+		super();
+		this._isEnabled = this._editor.getConfiguration().contribInfo.colorDecorator;
+		this._decorations = [];
+		this._decorationsTypes = {};
+		this._register(_editor.onDidChangeModel((e) => this.triggerUpdateDecorations()));
+		this._register(_editor.onDidChangeModelContent((e) => {
+			setTimeout(() => this.triggerUpdateDecorations(), 0);
+		}));
+		this._register(_editor.onDidChangeModelLanguage((e) => this.triggerUpdateDecorations()));
+		this._register(_editor.onDidChangeConfiguration((e) => {
+			let prevIsEnabled = this._isEnabled;
+			this._isEnabled = this._editor.getConfiguration().contribInfo.colorDecorator;
+			if (prevIsEnabled !== this._isEnabled) {
+				this.triggerUpdateDecorations(true);
+			}
+		}));
+
+		this._register(ColorProviderRegistry.onDidChange((e) => this.triggerUpdateDecorations()));
+		this.triggerUpdateDecorations();
+	}
+
+	triggerUpdateDecorations(settingsChanges = false) {
+		if (!this._isEnabled) {
+			if (settingsChanges) {
+				// Users turn it off.
+				this._editor.changeDecorations((changeAccessor) => {
+					this._decorations = changeAccessor.deltaDecorations(this._decorations, []);
+				});
+				for (let subType in this._decorationsTypes) {
+					this._codeEditorService.removeDecorationType(subType);
+				}
+			}
+			return;
+		}
+
+		getColors(this._editor.getModel()).then((colorInfos) => {
+			let decorations = [];
+			let newDecorationsTypes: { [key: string]: boolean } = {};
+
+			for (let i = 0; i < colorInfos.length && decorations.length < MAX_DECORATORS; i++) {
+				const { red, green, blue, alpha } = colorInfos[i].color;
+				const rgba = new RGBA(Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255), alpha);
+				let subKey = hash(rgba).toString(16);
+				let color = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+				let key = 'colorBox-' + subKey;
+
+				if (!this._decorationsTypes[key] && !newDecorationsTypes[key]) {
+					this._codeEditorService.registerDecorationType(key, {
+						before: {
+							contentText: ' ',
+							border: 'solid 0.1em #000',
+							margin: '0.1em 0.2em 0 0.2em',
+							width: '0.8em',
+							height: '0.8em',
+							backgroundColor: color
+						},
+						dark: {
+							before: {
+								border: 'solid 0.1em #eee'
+							}
+						}
+					});
+				}
+
+				newDecorationsTypes[key] = true;
+				decorations.push({
+					range: {
+						startLineNumber: colorInfos[i].range.startLineNumber,
+						startColumn: colorInfos[i].range.startColumn,
+						endLineNumber: colorInfos[i].range.endLineNumber,
+						endColumn: colorInfos[i].range.endColumn
+					},
+					options: this._codeEditorService.resolveDecorationOptions(key, true)
+				});
+			}
+
+			for (let subType in this._decorationsTypes) {
+				if (!newDecorationsTypes[subType]) {
+					this._codeEditorService.removeDecorationType(subType);
+				}
+			}
+
+			this._editor.changeDecorations((changeAccessor) => {
+				this._decorations = changeAccessor.deltaDecorations(this._decorations, decorations);
+			});
+		});
+	}
+
+	getId(): string {
+		return ColorController.ID;
+	}
+
+	public dispose(): void {
+		for (let subType in this._decorationsTypes) {
+			this._codeEditorService.removeDecorationType(subType);
+		}
+		super.dispose();
+	}
+}
\ No newline at end of file

src/vs/monaco.d.ts

@@ -2889,6 +2889,10 @@ declare module monaco.editor {
 		 * Defaults to true.
 		 */
 		links?: boolean;
+		/**
+		 * Enable inline color decorators rendering.
+		 */
+		colorDecorator?: boolean;
 		/**
 		 * Enable custom contextmenu.
 		 * Defaults to true.
@@ -3286,6 +3290,7 @@ declare module monaco.editor {
 		readonly showFoldingControls: 'always' | 'mouseover';
 		readonly matchBrackets: boolean;
 		readonly find: InternalEditorFindOptions;
+		readonly colorDecorator: boolean;
 	}
 
 	/**

src/vs/platform/telemetry/common/telemetryUtils.ts

@@ -143,6 +143,7 @@ const configurationValueWhitelist = [
 	'editor.stablePeek',
 	'editor.dragAndDrop',
 	'editor.formatOnSave',
+	'editor.colorDecorator',
 
 	'window.zoomLevel',
 	'files.autoSave',