[html] adopt languageserver colorProvider.proposed protocol. Fixes #3…

…2611.

extensions/html/client/src/htmlMain.ts

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

extensions/html/client/src/typings/ref.d.ts

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

extensions/html/package.json

@@ -11,6 +11,7 @@
     "onLanguage:handlebars",
     "onLanguage:razor"
   ],
+  "enableProposedApi": true,
   "main": "./client/out/htmlMain",
   "scripts": {
     "compile": "gulp compile-extension:html-client && gulp compile-extension:html-server",
@@ -216,6 +217,7 @@
   "dependencies": {
     "vscode-extension-telemetry": "0.0.8",
     "vscode-languageclient": "3.4.0-next.17",
+    "vscode-languageserver-protocol": "^3.1.1",
     "vscode-languageserver-types": "^3.3.0",
     "vscode-nls": "2.0.2"
   },

extensions/html/server/package.json

@@ -8,9 +8,10 @@
     "node": "*"
   },
   "dependencies": {
-    "vscode-css-languageservice": "^2.1.3",
+    "vscode-css-languageservice": "^2.1.4",
     "vscode-html-languageservice": "^2.0.7",
     "vscode-languageserver": "3.4.0-next.6",
+    "vscode-languageserver-protocol": "^3.1.1",
     "vscode-languageserver-types": "^3.3.0",
     "vscode-nls": "^2.0.2",
     "vscode-uri": "^1.0.1"

extensions/html/server/src/htmlServerMain.ts

@@ -4,12 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import { createConnection, IConnection, TextDocuments, InitializeParams, InitializeResult, RequestType, DocumentRangeFormattingRequest, Disposable, DocumentSelector, GetConfigurationParams, TextDocumentPositionParams } from 'vscode-languageserver';
+import { createConnection, IConnection, TextDocuments, InitializeParams, InitializeResult, RequestType, DocumentRangeFormattingRequest, Disposable, DocumentSelector, GetConfigurationParams, TextDocumentPositionParams, ServerCapabilities } from 'vscode-languageserver';
 import { DocumentContext } from 'vscode-html-languageservice';
-import { TextDocument, Diagnostic, DocumentLink, Range, SymbolInformation } from 'vscode-languageserver-types';
+import { TextDocument, Diagnostic, DocumentLink, SymbolInformation } from 'vscode-languageserver-types';
 import { getLanguageModes, LanguageModes, Settings } from './modes/languageModes';
 
 import { GetConfigurationRequest } from 'vscode-languageserver-protocol/lib/protocol.configuration.proposed';
+import { DocumentColorRequest, ServerCapabilities as CPServerCapabilities, ColorInformation } from 'vscode-languageserver-protocol/lib/protocol.colorProvider.proposed';
 
 import { format } from './modes/formatting';
 import { pushAll } from './utils/arrays';
@@ -21,15 +22,10 @@ import uri from 'vscode-uri';
 import * as nls from 'vscode-nls';
 nls.config(process.env['VSCODE_NLS_CONFIG']);
 
-namespace ColorSymbolRequest {
-	export const type: RequestType<string, Range[], any, any> = new RequestType('html/colorSymbols');
-}
-
 namespace TagCloseRequest {
 	export const type: RequestType<TextDocumentPositionParams, string, any, any> = new RequestType('html/tag');
 }
 
-
 // Create a connection for the server
 let connection: IConnection = createConnection();
 
@@ -97,21 +93,22 @@ connection.onInitialize((params: InitializeParams): InitializeResult => {
 	clientSnippetSupport = hasClientCapability('textDocument', 'completion', 'completionItem', 'snippetSupport');
 	clientDynamicRegisterSupport = hasClientCapability('workspace', 'symbol', 'dynamicRegistration');
 	scopedSettingsSupport = hasClientCapability('workspace', 'configuration');
-	return {
-		capabilities: {
-			// Tell the client that the server works in FULL text document sync mode
-			textDocumentSync: documents.syncKind,
-			completionProvider: clientSnippetSupport ? { resolveProvider: true, triggerCharacters: ['.', ':', '<', '"', '=', '/', '>'] } : null,
-			hoverProvider: true,
-			documentHighlightProvider: true,
-			documentRangeFormattingProvider: false,
-			documentLinkProvider: { resolveProvider: false },
-			documentSymbolProvider: true,
-			definitionProvider: true,
-			signatureHelpProvider: { triggerCharacters: ['('] },
-			referencesProvider: true,
-		}
+	let capabilities: ServerCapabilities & CPServerCapabilities = {
+		// Tell the client that the server works in FULL text document sync mode
+		textDocumentSync: documents.syncKind,
+		completionProvider: clientSnippetSupport ? { resolveProvider: true, triggerCharacters: ['.', ':', '<', '"', '=', '/', '>'] } : null,
+		hoverProvider: true,
+		documentHighlightProvider: true,
+		documentRangeFormattingProvider: false,
+		documentLinkProvider: { resolveProvider: false },
+		documentSymbolProvider: true,
+		definitionProvider: true,
+		signatureHelpProvider: { triggerCharacters: ['('] },
+		referencesProvider: true,
+		colorProvider: true
 	};
+
+	return { capabilities };
 });
 
 let formatterRegistration: Thenable<Disposable> = null;
@@ -313,17 +310,17 @@ connection.onDocumentSymbol(documentSymbolParms => {
 	return symbols;
 });
 
-connection.onRequest(ColorSymbolRequest.type, uri => {
-	let ranges: Range[] = [];
-	let document = documents.get(uri);
+connection.onRequest(DocumentColorRequest.type, params => {
+	let infos: ColorInformation[] = [];
+	let document = documents.get(params.textDocument.uri);
 	if (document) {
 		languageModes.getAllModesInDocument(document).forEach(m => {
-			if (m.findColorSymbols) {
-				pushAll(ranges, m.findColorSymbols(document));
+			if (m.findDocumentColors) {
+				pushAll(infos, m.findDocumentColors(document));
 			}
 		});
 	}
-	return ranges;
+	return infos;
 });
 
 connection.onRequest(TagCloseRequest.type, params => {

extensions/html/server/src/modes/cssMode.ts

@@ -50,9 +50,9 @@ export function getCSSMode(documentRegions: LanguageModelCache<HTMLDocumentRegio
 			let embedded = embeddedCSSDocuments.get(document);
 			return cssLanguageService.findReferences(embedded, position, cssStylesheets.get(embedded));
 		},
-		findColorSymbols(document: TextDocument) {
+		findDocumentColors(document: TextDocument) {
 			let embedded = embeddedCSSDocuments.get(document);
-			return cssLanguageService.findColorSymbols(embedded, cssStylesheets.get(embedded));
+			return cssLanguageService.findDocumentColors(embedded, cssStylesheets.get(embedded));
 		},
 		onDocumentRemoved(document: TextDocument) {
 			embeddedCSSDocuments.onDocumentRemoved(document);

extensions/html/server/src/modes/languageModes.ts

@@ -10,6 +10,8 @@ import {
 	Hover, DocumentHighlight, CompletionList, Position, FormattingOptions, SymbolInformation
 } from 'vscode-languageserver-types';
 
+import { ColorInformation } from 'vscode-languageserver-protocol/lib/protocol.colorProvider.proposed';
+
 import { getLanguageModelCache, LanguageModelCache } from '../languageModelCache';
 import { getDocumentRegions, HTMLDocumentRegions } from './embeddedSupport';
 import { getCSSMode } from './cssMode';
@@ -40,7 +42,7 @@ export interface LanguageMode {
 	findDefinition?: (document: TextDocument, position: Position) => Definition;
 	findReferences?: (document: TextDocument, position: Position) => Location[];
 	format?: (document: TextDocument, range: Range, options: FormattingOptions, settings: Settings) => TextEdit[];
-	findColorSymbols?: (document: TextDocument) => Range[];
+	findDocumentColors?: (document: TextDocument) => ColorInformation[];
 	doAutoClose?: (document: TextDocument, position: Position) => string;
 	onDocumentRemoved(document: TextDocument): void;
 	dispose(): void;