microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-16 22:14:20 -05:00
Code Issues Packages Projects Releases 177 Wiki Activity

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

Browse Source
This commit is contained in:
rebornix
2017-08-16 17:05:12 -07:00
committed by Peng Lyu
parent deb0bd5858
commit f52299aee0
12 changed files with 46 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
extensions/css/client/src/colorDecorators.ts
View File

@@ -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;

5
extensions/css/client/src/cssMain.ts
View File

@@ -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 = {

135
extensions/json/client/src/colorDecorators.ts
View File

@@ -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;

6
extensions/json/client/src/jsonMain.ts
View File

@@ -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

5
src/vs/editor/common/modes.ts
View File

@@ -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;
}
/**

3
src/vs/editor/contrib/colorPicker/browser/colorController.ts
View File

@@ -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);

3
src/vs/editor/contrib/colorPicker/browser/colorDetector.ts
View File

@@ -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);

9
src/vs/vscode.proposed.d.ts vendored
View File

@@ -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);
}
/**

3
src/vs/workbench/api/electron-browser/mainThreadLanguageFeatures.ts
View File

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

1
src/vs/workbench/api/node/extHost.protocol.ts
View File

@@ -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][];

3
src/vs/workbench/api/node/extHostLanguageFeatures.ts
View File

@@ -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
};
});

5
src/vs/workbench/api/node/extHostTypes.ts
View File

@@ -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;
}
}