introduce modes.IColor

src/vs/editor/common/modes.ts

@@ -653,21 +653,67 @@ export interface LinkProvider {
 }
 
 /**
- * A color inside the editor.
+ * A color in RGBA format.
  */
+export interface IColor {
+
+	/**
+	 * The red component in the range [0-1].
+	 */
+	readonly red: number;
+
+	/**
+	 * The green component in the range [0-1].
+	 */
+	readonly green: number;
+
+	/**
+	 * The blue component in the range [0-1].
+	 */
+	readonly blue: number;
+
+	/**
+	 * The alpha component in the range [0-1].
+	 */
+	readonly alpha: number;
+}
+
+// TODO@joao TODO@michel can we use a formatter here?
 export type IColorFormat = string | { opaque: string, transparent: string };
-export interface IColorInfo {
-	color: Color;
+
+/**
+ * A color range is a range in a text model which represents a color.
+ */
+export interface IColorRange {
+
+	/**
+	 * The range within the model.
+	 */
+	range: IRange;
+
+	/**
+	 * The color represented in this range.
+	 */
+	color: IColor;
+
+	// TODO@joao TODO@michel can we drop this?
 	format: IColorFormat;
+
+	/**
+	 * The available formats for this specific color.
+	 */
 	availableFormats: IColorFormat[];
-	range: IRange;
 }
+
 /**
- * A provider of colors.
+ * A provider of colors for editor models.
  */
-export interface ColorProvider {
+export interface ColorRangeProvider {
 
-	provideColors(model: editorCommon.IReadOnlyModel, token: CancellationToken): IColorInfo[] | Thenable<IColorInfo[]>;
+	/**
+	 * Provides the color ranges for a specific model.
+	 */
+	provideColorRanges(model: editorCommon.IReadOnlyModel, token: CancellationToken): IColorRange[] | Thenable<IColorRange[]>;
 }
 
 export interface IResourceEdit {
@@ -786,7 +832,7 @@ export const LinkProviderRegistry = new LanguageFeatureRegistry<LinkProvider>();
 /**
  * @internal
  */
-export const ColorProviderRegistry = new LanguageFeatureRegistry<ColorProvider>();
+export const ColorProviderRegistry = new LanguageFeatureRegistry<ColorRangeProvider>();
 
 /**
  * @internal

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

@@ -9,7 +9,7 @@ import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { editorWidgetBackground, editorWidgetBorder } from 'vs/platform/theme/common/colorRegistry';
-import { ColorProviderRegistry, IColorInfo } from 'vs/editor/common/modes';
+import { ColorProviderRegistry, IColorRange } from 'vs/editor/common/modes';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { getColors } from 'vs/editor/contrib/colorPicker/common/colorPicker';
 import { IRange } from 'vs/editor/common/core/range';
@@ -100,7 +100,7 @@ export class ColorPicker implements IEditorContribution {
 		}
 	}
 
-	private updateDecorations(colorInfos: IColorInfo[]): void {
+	private updateDecorations(colorInfos: IColorRange[]): void {
 		this.editor.changeDecorations((changeAccessor: IModelDecorationsChangeAccessor) => {
 			let newDecorations: IModelDeltaDecoration[] = [];
 

src/vs/editor/contrib/colorPicker/common/color.ts

@@ -3,11 +3,10 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { IColorFormat } from 'vs/editor/common/modes';
-import { Color } from 'vs/base/common/color';
+import { IColor, IColorFormat } from 'vs/editor/common/modes';
 
 export interface IColorDecorationExtraOptions {
-	readonly color: Color;
+	readonly color: IColor;
 	readonly format: IColorFormat;
 	readonly availableFormats: IColorFormat[];
 }

src/vs/editor/contrib/colorPicker/common/colorPicker.ts

@@ -4,17 +4,17 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { TPromise } from "vs/base/common/winjs.base";
-import { ColorProviderRegistry, IColorInfo } from "vs/editor/common/modes";
+import { ColorProviderRegistry, IColorRange } from "vs/editor/common/modes";
 import { asWinJsPromise } from "vs/base/common/async";
 import { onUnexpectedExternalError } from "vs/base/common/errors";
 import { IReadOnlyModel } from "vs/editor/common/editorCommon";
 
-export function getColors(model: IReadOnlyModel): TPromise<IColorInfo[]> {
-	let colorInfo: IColorInfo[] = [];
+export function getColors(model: IReadOnlyModel): TPromise<IColorRange[]> {
+	let colorInfo: IColorRange[] = [];
 
 	// ask all providers for colors in parallel
 	const promises = ColorProviderRegistry.ordered(model).reverse().map(provider => {
-		return asWinJsPromise(token => provider.provideColors(model, token)).then(result => {
+		return asWinJsPromise(token => provider.provideColorRanges(model, token)).then(result => {
 			if (Array.isArray(result)) {
 				colorInfo = colorInfo.concat(result);
 			}

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

@@ -14,7 +14,7 @@ import { IOpenerService, NullOpenerService } from 'vs/platform/opener/common/ope
 import { IModeService } from 'vs/editor/common/services/modeService';
 import { IRange, Range } from 'vs/editor/common/core/range';
 import { Position } from 'vs/editor/common/core/position';
-import { HoverProviderRegistry, Hover, IColorFormat } from 'vs/editor/common/modes';
+import { HoverProviderRegistry, Hover, IColor, IColorFormat } from 'vs/editor/common/modes';
 import { tokenizeToString } from 'vs/editor/common/modes/textToHtmlTokenizer';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { getHover } from '../common/hover';
@@ -26,13 +26,13 @@ import { ColorPickerModel } from "vs/editor/contrib/colorPicker/browser/colorPic
 import { ColorPickerWidget } from "vs/editor/contrib/colorPicker/browser/colorPickerWidget";
 import { isColorDecorationOptions } from 'vs/editor/contrib/colorPicker/common/color';
 import { ColorFormatter } from 'vs/editor/contrib/colorPicker/common/colorFormatter';
-import { Color } from 'vs/base/common/color';
+import { Color, RGBA } from 'vs/base/common/color';
 
 class ColorHover {
 
 	constructor(
 		public readonly range: IRange,
-		public readonly color: Color,
+		public readonly color: IColor,
 		public readonly format: IColorFormat,
 		public readonly availableFormats: IColorFormat[]
 	) { }
@@ -103,7 +103,6 @@ class ModesContentComputer implements IHoverComputer<HoverPart[]> {
 			const extraOptions = options && options.extraOptions;
 
 			if (isColorDecorationOptions(extraOptions)) {
-				console.log('found color!');
 				const { color, format, availableFormats } = extraOptions;
 				return new ColorHover(range, color, format, availableFormats);
 			} else {
@@ -339,7 +338,11 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 					});
 				}
 
-				const model = new ColorPickerModel(msg.color.toRGBA().toString(), msg.color, opaqueFormatter, transparentFormatter, availableFormatters, this._editor.getModel(), msg.range);
+				const { red, green, blue, alpha } = msg.color;
+				const rgba = new RGBA(red * 255, green * 255, blue * 255, alpha * 255);
+				const color = Color.fromRGBA(rgba);
+
+				const model = new ColorPickerModel(rgba.toString(), color, opaqueFormatter, transparentFormatter, availableFormatters, this._editor.getModel(), msg.range);
 				const widget = this._register(new ColorPickerWidget(model, this._editor));
 				model.widget = widget;
 

src/vs/monaco.d.ts

@@ -4788,25 +4788,59 @@ declare module monaco.languages {
 	}
 
 	/**
-	 * A color inside the editor.
+	 * A color in RGBA format.
 	 */
+	export interface IColor {
+		/**
+		 * The red component in the range [0-1].
+		 */
+		readonly red: number;
+		/**
+		 * The green component in the range [0-1].
+		 */
+		readonly green: number;
+		/**
+		 * The blue component in the range [0-1].
+		 */
+		readonly blue: number;
+		/**
+		 * The alpha component in the range [0-1].
+		 */
+		readonly alpha: number;
+	}
+
 	export type IColorFormat = string | {
 		opaque: string;
 		transparent: string;
 	};
 
-	export interface IColorInfo {
-		color: Color;
+	/**
+	 * A color range is a range in a text model which represents a color.
+	 */
+	export interface IColorRange {
+		/**
+		 * The range within the model.
+		 */
+		range: IRange;
+		/**
+		 * The color represented in this range.
+		 */
+		color: IColor;
 		format: IColorFormat;
+		/**
+		 * The available formats used in the model to stringify the color.
+		 */
 		availableFormats: IColorFormat[];
-		range: IRange;
 	}
 
 	/**
-	 * A provider of colors.
+	 * A provider of colors for editor models.
 	 */
-	export interface ColorProvider {
-		provideColors(model: editor.IReadOnlyModel, token: CancellationToken): IColorInfo[] | Thenable<IColorInfo[]>;
+	export interface ColorRangeProvider {
+		/**
+		 * Provides the color ranges for a specific model.
+		 */
+		provideColorRanges(model: editor.IReadOnlyModel, token: CancellationToken): IColorRange[] | Thenable<IColorRange[]>;
 	}
 
 	export interface IResourceEdit {

src/vs/workbench/api/electron-browser/mainThreadLanguageFeatures.ts

@@ -21,7 +21,6 @@ import { LanguageConfigurationRegistry } from 'vs/editor/common/modes/languageCo
 import { LanguageConfiguration } from 'vs/editor/common/modes/languageConfiguration';
 import { IHeapService } from './mainThreadHeapService';
 import { IModeService } from 'vs/editor/common/services/modeService';
-import { Color, RGBA } from "vs/base/common/color";
 
 export class MainThreadLanguageFeatures extends MainThreadLanguageFeaturesShape {
 
@@ -270,8 +269,8 @@ export class MainThreadLanguageFeatures extends MainThreadLanguageFeaturesShape
 
 	$registerDocumentColorProvider(handle: number, selector: vscode.DocumentSelector): TPromise<any> {
 		const proxy = this._proxy;
-		this._registrations[handle] = modes.ColorProviderRegistry.register(selector, <modes.ColorProvider>{
-			provideColors: function (model, token) {
+		this._registrations[handle] = modes.ColorProviderRegistry.register(selector, <modes.ColorRangeProvider>{
+			provideColorRanges: function (model, token) {
 				const provider = this;
 				return wireCancellationToken(token, proxy.$provideDocumentColors(handle, model.uri))
 					.then((colorInfos) => {
@@ -294,8 +293,16 @@ export class MainThreadLanguageFeatures extends MainThreadLanguageFeaturesShape
 								}
 							});
 
+							const [red, green, blue, alpha] = c.color;
+							const color = {
+								red: red / 255.0,
+								green: green / 255.0,
+								blue: blue / 255.0,
+								alpha
+							};
+
 							return {
-								color: Color.fromRGBA(new RGBA(c.color[0], c.color[1], c.color[2], c.color[3] * 255)),
+								color,
 								format: format,
 								availableFormats: availableFormats,
 								range: c.range,