From 9355b436d124217e8dee4476b12bb3276ea6979c Mon Sep 17 00:00:00 2001 From: rebornix Date: Tue, 22 Aug 2017 11:47:35 -0700 Subject: [PATCH] Move renderColorDecorator options to core settings. --- extensions/css/client/src/colorDecorators.ts | 4 - extensions/json/client/src/colorDecorators.ts | 4 - .../common/config/commonEditorConfig.ts | 5 + src/vs/editor/common/config/editorOptions.ts | 15 +- .../colorPicker/browser/colorController.ts | 132 ++++++++++++++++++ src/vs/monaco.d.ts | 5 + .../telemetry/common/telemetryUtils.ts | 1 + 7 files changed, 155 insertions(+), 11 deletions(-) create mode 100644 src/vs/editor/contrib/colorPicker/browser/colorController.ts diff --git a/extensions/css/client/src/colorDecorators.ts b/extensions/css/client/src/colorDecorators.ts index 90385dd1363..1dbbeff0b09 100644 --- a/extensions/css/client/src/colorDecorators.ts +++ b/extensions/css/client/src/colorDecorators.ts @@ -49,10 +49,6 @@ export class ColorProvider implements DocumentColorProvider { } async provideDocumentColors(document: TextDocument): Promise { - 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) { diff --git a/extensions/json/client/src/colorDecorators.ts b/extensions/json/client/src/colorDecorators.ts index ddf591add67..e3d8b6bc856 100644 --- a/extensions/json/client/src/colorDecorators.ts +++ b/extensions/json/client/src/colorDecorators.ts @@ -42,10 +42,6 @@ export class ColorProvider implements DocumentColorProvider { } async provideDocumentColors(document: TextDocument): Promise { - 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) { diff --git a/src/vs/editor/common/config/commonEditorConfig.ts b/src/vs/editor/common/config/commonEditorConfig.ts index 11ef7a11373..b11f83290c4 100644 --- a/src/vs/editor/common/config/commonEditorConfig.ts +++ b/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, diff --git a/src/vs/editor/common/config/editorOptions.ts b/src/vs/editor/common/config/editorOptions.ts index 37be56bdebd..1bb3a55518e 100644 --- a/src/vs/editor/common/config/editorOptions.ts +++ b/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 }, }; diff --git a/src/vs/editor/contrib/colorPicker/browser/colorController.ts b/src/vs/editor/contrib/colorPicker/browser/colorController.ts new file mode 100644 index 00000000000..f3fbc6c58ab --- /dev/null +++ b/src/vs/editor/contrib/colorPicker/browser/colorController.ts @@ -0,0 +1,132 @@ +/*--------------------------------------------------------------------------------------------- + * 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.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 diff --git a/src/vs/monaco.d.ts b/src/vs/monaco.d.ts index bd03024e6f3..8ec845078ac 100644 --- a/src/vs/monaco.d.ts +++ b/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; } /** diff --git a/src/vs/platform/telemetry/common/telemetryUtils.ts b/src/vs/platform/telemetry/common/telemetryUtils.ts index f0f7aa5bce9..af3d18219c0 100644 --- a/src/vs/platform/telemetry/common/telemetryUtils.ts +++ b/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', -- GitLab