Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-24 18:49:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

[html] adopt languageserver colorProvider.proposed protocol. Fixes #32611.

Browse Source
This commit is contained in:
Martin Aeschlimann
2017-08-28 19:14:39 +02:00
parent aae74ede39
commit 07e2faac5e
10 changed files with 70 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
extensions/html/client/src/colorDecorators.ts
View File

@@ -1,126 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import { window, workspace, DecorationOptions, DecorationRenderOptions, Disposable, Range, TextDocument } 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);
return <DecorationOptions>{
range: range,
renderOptions: {
before: {
backgroundColor: color
}
}
};
});
editor.setDecorations(colorsDecorationType, decorations);
}
}
});
}
return Disposable.from(...disposables);
}

41
extensions/html/client/src/htmlMain.ts
View File

@@ -6,22 +6,18 @@
import * as path from 'path';
import { languages, workspace, ExtensionContext, IndentAction, Position, TextDocument } from 'vscode';
import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, Range as LSRange, RequestType, TextDocumentPositionParams } from 'vscode-languageclient';
import { languages, ExtensionContext, IndentAction, Position, TextDocument, Color, ColorRange } from 'vscode';
import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, RequestType, TextDocumentPositionParams } from 'vscode-languageclient';
import { EMPTY_ELEMENTS } from './htmlEmptyTagsShared';
import { activateColorDecorations } from './colorDecorators';
import { activateTagClosing } from './tagClosing';
import TelemetryReporter from 'vscode-extension-telemetry';
import { ConfigurationFeature } from 'vscode-languageclient/lib/proposed';
import { DocumentColorRequest } from 'vscode-languageserver-protocol/lib/protocol.colorProvider.proposed';
import * as nls from 'vscode-nls';
let localize = nls.loadMessageBundle();
namespace ColorSymbolRequest {
export const type: RequestType<string, LSRange[], any, any> = new RequestType('html/colorSymbols');
}
namespace TagCloseRequest {
export const type: RequestType<TextDocumentPositionParams, string, any, any> = new RequestType('html/tag');
}
@@ -32,6 +28,18 @@ interface IPackageInfo {
aiKey: string;
}
const CSSColorFormats = {
Hex: '#{red:X}{green:X}{blue:X}',
RGB: {
opaque: 'rgb({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]})',
transparent: 'rgba({red:d[0-255]}, {green:d[0-255]}, {blue:d[0-255]}, {alpha})'
},
HSL: {
opaque: 'hsl({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%)',
transparent: 'hsla({hue:d[0-360]}, {saturation:d[0-100]}%, {luminance:d[0-100]}%, {alpha})'
}
};
export function activate(context: ExtensionContext) {
let toDispose = context.subscriptions;
@@ -74,13 +82,18 @@ export function activate(context: ExtensionContext) {
let disposable = client.start();
toDispose.push(disposable);
client.onReady().then(() => {
let colorRequestor = (uri: string) => {
return client.sendRequest(ColorSymbolRequest.type, uri).then(ranges => ranges.map(client.protocol2CodeConverter.asRange));
};
let isDecoratorEnabled = (languageId: string) => {
return workspace.getConfiguration().get<boolean>('css.colorDecorators.enable');
};
let disposable = activateColorDecorations(colorRequestor, { html: true, handlebars: true, razor: true }, isDecoratorEnabled);
disposable = languages.registerColorProvider(documentSelector, {
provideDocumentColors(document: TextDocument): Thenable<ColorRange[]> {
let params = client.code2ProtocolConverter.asDocumentSymbolParams(document);
return client.sendRequest(DocumentColorRequest.type, params).then(symbols => {
return symbols.map(symbol => {
let range = client.protocol2CodeConverter.asRange(symbol.range);
let color = new Color(symbol.color.red * 255, symbol.color.green * 255, symbol.color.blue * 255, symbol.color.alpha);
return new ColorRange(range, color, [CSSColorFormats.Hex, CSSColorFormats.RGB, CSSColorFormats.HSL]);
});
});
}
});
toDispose.push(disposable);
let tagRequestor = (document: TextDocument, position: Position) => {

3
extensions/html/client/src/typings/ref.d.ts vendored
View File

@@ -3,4 +3,5 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
/// <reference path='../../../../../src/vs/vscode.d.ts'/>
/// <reference path='../../../../../src/vs/vscode.d.ts'/>
/// <reference path='../../../../../src/vs/vscode.proposed.d.ts'/>