From f3bb16afe7450483f54b354938b4e02fcba6c4e9 Mon Sep 17 00:00:00 2001
From: Aiday Marlen Kyzy <amarlenkyzy@microsoft.com>
Date: Thu, 1 Jun 2023 18:24:51 +0200
Subject: [PATCH] adding the third option which is click and hover and need to
 finish the code with this option as well as figure out why the color hover
 appears to disappear when one clicks on the color decorator

---
 src/vs/editor/common/config/editorOptions.ts                 | 5 +++--
 .../editor/contrib/colorPicker/browser/colorContributions.ts | 2 +-
 src/vs/editor/contrib/hover/browser/hover.ts                 | 5 +++++
 src/vs/monaco.d.ts                                           | 4 ++--
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/vs/editor/common/config/editorOptions.ts b/src/vs/editor/common/config/editorOptions.ts
index 6c5556f7dd0..b296c6deeef 100644
--- a/src/vs/editor/common/config/editorOptions.ts
+++ b/src/vs/editor/common/config/editorOptions.ts
@@ -352,7 +352,7 @@ export interface IEditorOptions {
 	/**
 	 * Controls what is the condition to spawn a color picker from a color dectorator
 	 */
-	colorDecoratorsActivatedOn?: 'click' | 'hover';
+	colorDecoratorsActivatedOn?: 'click and hover' | 'click' | 'hover';
 	/**
 	 * Controls the max number of color decorators that can be rendered in an editor at once.
 	 */
@@ -5216,8 +5216,9 @@ export const EditorOptions = {
 		EditorOption.colorDecorators, 'colorDecorators', true,
 		{ description: nls.localize('colorDecorators', "Controls whether the editor should render the inline color decorators and color picker.") }
 	)),
-	colorDecoratorActivatedOn: register(new EditorStringEnumOption(EditorOption.colorDecoratorsActivatedOn, 'colorDecoratorsActivatedOn', 'hover' as 'hover' | 'click', ['hover', 'click'] as const, {
+	colorDecoratorActivatedOn: register(new EditorStringEnumOption(EditorOption.colorDecoratorsActivatedOn, 'colorDecoratorsActivatedOn', 'click and hover' as 'click and hover' | 'hover' | 'click', ['click and hover', 'hover', 'click'] as const, {
 		enumDescriptions: [
+			nls.localize('editor.colorDecoratorActivatedOn.clickAndHover', "Make the color picker appear both on click and hover of the color decorator"),
 			nls.localize('editor.colorDecoratorActivatedOn.hover', "Make the color picker appear on hover of the color decorator"),
 			nls.localize('editor.colorDecoratorActivatedOn.click', "Make the color picker appear on click of the color decorator")
 		],
diff --git a/src/vs/editor/contrib/colorPicker/browser/colorContributions.ts b/src/vs/editor/contrib/colorPicker/browser/colorContributions.ts
index ac64164888d..189aa0cead1 100644
--- a/src/vs/editor/contrib/colorPicker/browser/colorContributions.ts
+++ b/src/vs/editor/contrib/colorPicker/browser/colorContributions.ts
@@ -34,7 +34,7 @@ export class ColorContribution extends Disposable implements IEditorContribution
 	private onMouseDown(mouseEvent: IEditorMouseEvent) {
 
 		const colorDecoratorsActivatedOn = this._editor.getOption(EditorOption.colorDecoratorsActivatedOn);
-		if (colorDecoratorsActivatedOn !== 'click') {
+		if (colorDecoratorsActivatedOn !== 'click' && colorDecoratorsActivatedOn !== 'click and hover') {
 			return;
 		}
 
diff --git a/src/vs/editor/contrib/hover/browser/hover.ts b/src/vs/editor/contrib/hover/browser/hover.ts
index 50785ea5ae9..90c541b86cf 100644
--- a/src/vs/editor/contrib/hover/browser/hover.ts
+++ b/src/vs/editor/contrib/hover/browser/hover.ts
@@ -179,6 +179,11 @@ export class ModesHoverController implements IEditorContribution {
 		const onDecorator = target.element?.classList.contains('colorpicker-color-decoration');
 		const decoratorActivatedOn = this._editor.getOption(EditorOption.colorDecoratorsActivatedOn);
 
+		console.log('onDecorator : ', onDecorator);
+		console.log('decoratorActivatedOn : ', decoratorActivatedOn);
+
+		// TODO: finish the following code whith the option 'click and hover''
+		// TODO: find out why the color hover seems to disappear when clicking on th box
 		if (onDecorator) {
 			if (decoratorActivatedOn === 'click') {
 				if (!this._activatedByColorDecoratorClick) {
diff --git a/src/vs/monaco.d.ts b/src/vs/monaco.d.ts
index 59da84b16f6..a2258a1852e 100644
--- a/src/vs/monaco.d.ts
+++ b/src/vs/monaco.d.ts
@@ -3437,7 +3437,7 @@ declare namespace monaco.editor {
 		/**
 		 * Controls what is the condition to spawn a color picker from a color dectorator
 		 */
-		colorDecoratorsActivatedOn?: 'click' | 'hover';
+		colorDecoratorsActivatedOn?: 'click and hover' | 'click' | 'hover';
 		/**
 		 * Controls the max number of color decorators that can be rendered in an editor at once.
 		 */
@@ -4934,7 +4934,7 @@ declare namespace monaco.editor {
 		codeLensFontFamily: IEditorOption<EditorOption.codeLensFontFamily, string>;
 		codeLensFontSize: IEditorOption<EditorOption.codeLensFontSize, number>;
 		colorDecorators: IEditorOption<EditorOption.colorDecorators, boolean>;
-		colorDecoratorActivatedOn: IEditorOption<EditorOption.colorDecoratorsActivatedOn, 'click' | 'hover'>;
+		colorDecoratorActivatedOn: IEditorOption<EditorOption.colorDecoratorsActivatedOn, 'click and hover' | 'click' | 'hover'>;
 		colorDecoratorsLimit: IEditorOption<EditorOption.colorDecoratorsLimit, number>;
 		columnSelection: IEditorOption<EditorOption.columnSelection, boolean>;
 		comments: IEditorOption<EditorOption.comments, Readonly<Required<IEditorCommentsOptions>>>;