Add fromHSLA and fromHex methods to API

src/vs/editor/contrib/colorPicker/browser/elements/colorPickerBody.ts

@@ -219,8 +219,9 @@ export class ColorPickerBody extends Disposable {
 
 export class SaturationBox {
 	public domNode: HTMLElement;
-
 	public saturationSelection: HTMLElement;
+
+	private saturationCanvas: HTMLCanvasElement;
 	private saturationCtx: CanvasRenderingContext2D;
 
 	private whiteGradient: CanvasGradient;
@@ -230,24 +231,24 @@ export class SaturationBox {
 		this.domNode = $('.saturation-wrap');
 		dom.append(widgetNode, this.domNode);
 
+		// Create canvas, draw selected color
+		this.saturationCanvas = document.createElement('canvas');
+		this.saturationCanvas.className = 'saturation-box';
+		dom.append(this.domNode, this.saturationCanvas);
+
 		// Add selection circle
 		this.saturationSelection = $('.saturation-selection');
 		dom.append(this.domNode, this.saturationSelection);
 	}
 
 	public layout(): void {
-		// Create canvas, draw selected color
-		const canvas = document.createElement('canvas');
-		canvas.className = 'saturation-box';
-		dom.append(this.domNode, canvas);
-
 		const actualW = this.domNode.offsetWidth * this.pixelRatio,
 			actualH = this.domNode.offsetHeight * this.pixelRatio;
 
-		canvas.width = actualW;
-		canvas.height = actualH;
+		this.saturationCanvas.width = actualW;
+		this.saturationCanvas.height = actualH;
 
-		this.saturationCtx = canvas.getContext('2d');
+		this.saturationCtx = this.saturationCanvas.getContext('2d');
 		this.saturationCtx.rect(0, 0, actualW, actualH);
 
 		// Create black and white gradients on top

src/vs/editor/contrib/hover/browser/modesContentHover.ts

@@ -225,6 +225,9 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 		this._highlightDecorations = this._editor.deltaDecorations(this._highlightDecorations, []);
 		this._isChangingDecorations = false;
 		this._colorPicker = null;
+		if (this._colorPicker) {
+			this._colorPicker.dispose();
+		}
 	}
 
 	_withResult(result: Hover[], complete: boolean): void {
@@ -237,6 +240,7 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 		}
 	}
 
+	private l = true;
 	private _renderMessages(renderRange: Range, messages: Hover[]): void {
 
 		// update column from which to show
@@ -309,6 +313,22 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 			options: ModesContentHoverWidget._DECORATION_OPTIONS
 		}]);
 		this._isChangingDecorations = false;
+
+		if (this.l) {
+			this.l = false;
+			this._renderMessages(new Range(4, 5, 4, 5), [{
+				contents: [{
+					language: 'css',
+					value: 'asdasdasdasdadasdsdasdasdasdadasdsdasdasdasdadasdsdasdasdasdadasdsdasdasdasdadasdsdasdasdasdadasd'
+				}],
+				range: {
+					endColumn: 10,
+					endLineNumber: 5,
+					startColumn: 1,
+					startLineNumber: 5
+				}
+			}]);
+		}
 	}
 
 	private static _DECORATION_OPTIONS = ModelDecorationOptions.register({

src/vs/vscode.proposed.d.ts

@@ -261,8 +261,8 @@ declare module 'vscode' {
 
 		constructor(red: number, green: number, blue: number, alpha?: number);
 
-		// static fromHSL(h, s, l): Color;
-		// static fromHex(hex): Color;
+		static fromHSLA(hue: number, saturation: number, luminosity: number, alpha?: number): Color;
+		static fromHex(hex: string): Color;
 	}
 
 	// TODO@Michel

src/vs/workbench/api/node/extHostTypes.ts

@@ -7,6 +7,7 @@
 import * as crypto from 'crypto';
 
 import URI from 'vs/base/common/uri';
+import { Color as CommonColor, HSLA } from 'vs/base/common/color';
 import { illegalArgument } from 'vs/base/common/errors';
 import * as vscode from 'vscode';
 
@@ -1016,10 +1017,10 @@ export class DocumentLink {
 }
 
 export class Color {
-	red: number;
-	green: number;
-	blue: number;
-	alpha: number;
+	readonly red: number;
+	readonly green: number;
+	readonly blue: number;
+	readonly alpha: number;
 
 	constructor(red: number, green: number, blue: number, alpha?: number) {
 		this.red = red;
@@ -1027,6 +1028,19 @@ export class Color {
 		this.blue = blue;
 		this.alpha = alpha;
 	}
+
+	static fromHSLA(hue: number, saturation: number, luminosity: number, alpha?: number): Color {
+		if (!alpha) {
+			alpha = 1;
+		}
+		const color = CommonColor.fromHSLA(new HSLA(hue, saturation, luminosity, alpha)).toRGBA();
+		return new Color(color.r, color.g, color.b, color.a / 255);
+	}
+
+	static fromHex(hex: string): Color {
+		const color = CommonColor.fromHex(hex).toRGBA();
+		return new Color(color.r, color.g, color.b, color.a / 255);
+	}
 }
 
 export class ColorInfo {