@codingame/monaco-vscode-api 9.0.2 → 10.0.0

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorPickerParts/colorPickerCloseButton.js

@@ -0,0 +1,28 @@
+import '../colorPicker.css.js';
+import { append, addDisposableListener, EventType, $ as $$1 } from '../../../../../base/browser/dom.js';
+import { Disposable } from '../../../../../base/common/lifecycle.js';
+import { localize } from '../../../../../nls.js';
+import { Emitter } from '../../../../../base/common/event.js';
+import { registerIcon } from '../../../../../platform/theme/common/iconRegistry.js';
+import { ThemeIcon } from '../../../../../base/common/themables.js';
+import { Codicon } from '../../../../../base/common/codicons.js';
+const $ = $$1;
+class CloseButton extends Disposable {
+    constructor(container) {
+        super();
+        this._onClicked = this._register(( (new Emitter())));
+        this.onClicked = this._onClicked.event;
+        this._button = document.createElement('div');
+        this._button.classList.add('close-button');
+        append(container, this._button);
+        const innerDiv = document.createElement('div');
+        innerDiv.classList.add('close-button-inner-div');
+        append(this._button, innerDiv);
+        const closeButton = append(innerDiv, $('.button' + ThemeIcon.asCSSSelector(registerIcon('color-picker-close', Codicon.close, ( localize(11706, 'Icon to close the color picker'))))));
+        closeButton.classList.add('close-icon');
+        this._register(addDisposableListener(this._button, EventType.CLICK, () => {
+            this._onClicked.fire();
+        }));
+    }
+}
+export { CloseButton };

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorPickerParts/colorPickerHeader.js

@@ -0,0 +1,75 @@
+import '../colorPicker.css.js';
+import { append, addDisposableListener, EventType, $ as $$1 } from '../../../../../base/browser/dom.js';
+import { Color } from '../../../../../base/common/color.js';
+import { Disposable } from '../../../../../base/common/lifecycle.js';
+import { localize } from '../../../../../nls.js';
+import '../../../../../platform/theme/common/colorUtils.js';
+import '../../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../../platform/theme/common/colors/chartsColors.js';
+import { editorHoverBackground } from '../../../../../platform/theme/common/colors/editorColors.js';
+import '../../../../../platform/theme/common/colors/inputColors.js';
+import '../../../../../platform/theme/common/colors/listColors.js';
+import '../../../../../platform/theme/common/colors/menuColors.js';
+import '../../../../../platform/theme/common/colors/minimapColors.js';
+import '../../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../../platform/theme/common/colors/searchColors.js';
+import { CloseButton } from './colorPickerCloseButton.js';
+const $ = $$1;
+class ColorPickerHeader extends Disposable {
+    constructor(container, model, themeService, showingStandaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this.showingStandaloneColorPicker = showingStandaloneColorPicker;
+        this._closeButton = null;
+        this._domNode = $('.colorpicker-header');
+        append(container, this._domNode);
+        this._pickedColorNode = append(this._domNode, $('.picked-color'));
+        append(this._pickedColorNode, $('span.codicon.codicon-color-mode'));
+        this._pickedColorPresentation = append(this._pickedColorNode, document.createElement('span'));
+        this._pickedColorPresentation.classList.add('picked-color-presentation');
+        const tooltip = ( localize(11410, "Click to toggle color options (rgb/hsl/hex)"));
+        this._pickedColorNode.setAttribute('title', tooltip);
+        this._originalColorNode = append(this._domNode, $('.original-color'));
+        this._originalColorNode.style.backgroundColor = Color.Format.CSS.format(this.model.originalColor) || '';
+        this.backgroundColor = themeService.getColorTheme().getColor(editorHoverBackground) || Color.white;
+        this._register(themeService.onDidColorThemeChange(theme => {
+            this.backgroundColor = theme.getColor(editorHoverBackground) || Color.white;
+        }));
+        this._register(addDisposableListener(this._pickedColorNode, EventType.CLICK, () => this.model.selectNextColorPresentation()));
+        this._register(addDisposableListener(this._originalColorNode, EventType.CLICK, () => {
+            this.model.color = this.model.originalColor;
+            this.model.flushColor();
+        }));
+        this._register(model.onDidChangeColor(this.onDidChangeColor, this));
+        this._register(model.onDidChangePresentation(this.onDidChangePresentation, this));
+        this._pickedColorNode.style.backgroundColor = Color.Format.CSS.format(model.color) || '';
+        this._pickedColorNode.classList.toggle('light', model.color.rgba.a < 0.5 ? this.backgroundColor.isLighter() : model.color.isLighter());
+        this.onDidChangeColor(this.model.color);
+        if (this.showingStandaloneColorPicker) {
+            this._domNode.classList.add('standalone-colorpicker');
+            this._closeButton = this._register(( (new CloseButton(this._domNode))));
+        }
+    }
+    get domNode() {
+        return this._domNode;
+    }
+    get closeButton() {
+        return this._closeButton;
+    }
+    get pickedColorNode() {
+        return this._pickedColorNode;
+    }
+    get originalColorNode() {
+        return this._originalColorNode;
+    }
+    onDidChangeColor(color) {
+        this._pickedColorNode.style.backgroundColor = Color.Format.CSS.format(color) || '';
+        this._pickedColorNode.classList.toggle('light', color.rgba.a < 0.5 ? this.backgroundColor.isLighter() : color.isLighter());
+        this.onDidChangePresentation();
+    }
+    onDidChangePresentation() {
+        this._pickedColorPresentation.textContent = this.model.presentation ? this.model.presentation.label : '';
+    }
+}
+export { ColorPickerHeader };

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorPickerParts/colorPickerInsertButton.js

@@ -0,0 +1,21 @@
+import '../colorPicker.css.js';
+import { append, addDisposableListener, EventType } from '../../../../../base/browser/dom.js';
+import { Emitter } from '../../../../../base/common/event.js';
+import { Disposable } from '../../../../../base/common/lifecycle.js';
+class InsertButton extends Disposable {
+    constructor(container) {
+        super();
+        this._onClicked = this._register(( new Emitter()));
+        this.onClicked = this._onClicked.event;
+        this._button = append(container, document.createElement('button'));
+        this._button.classList.add('insert-button');
+        this._button.textContent = 'Insert';
+        this._register(addDisposableListener(this._button, EventType.CLICK, () => {
+            this._onClicked.fire();
+        }));
+    }
+    get button() {
+        return this._button;
+    }
+}
+export { InsertButton };

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorPickerParts/colorPickerSaturationBox.js

@@ -0,0 +1,101 @@
+import '../colorPicker.css.js';
+import { append, addDisposableListener, EventType, getDomNodePagePosition, $ as $$1 } from '../../../../../base/browser/dom.js';
+import { GlobalPointerMoveMonitor } from '../../../../../base/browser/globalPointerMoveMonitor.js';
+import { Color, HSVA } from '../../../../../base/common/color.js';
+import { Emitter } from '../../../../../base/common/event.js';
+import { Disposable } from '../../../../../base/common/lifecycle.js';
+const $ = $$1;
+class SaturationBox extends Disposable {
+    constructor(container, model, pixelRatio) {
+        super();
+        this.model = model;
+        this.pixelRatio = pixelRatio;
+        this._onDidChange = ( new Emitter());
+        this.onDidChange = this._onDidChange.event;
+        this._onColorFlushed = ( new Emitter());
+        this.onColorFlushed = this._onColorFlushed.event;
+        this._domNode = $('.saturation-wrap');
+        append(container, this._domNode);
+        this._canvas = document.createElement('canvas');
+        this._canvas.className = 'saturation-box';
+        append(this._domNode, this._canvas);
+        this.selection = $('.saturation-selection');
+        append(this._domNode, this.selection);
+        this.layout();
+        this._register(addDisposableListener(this._domNode, EventType.POINTER_DOWN, e => this.onPointerDown(e)));
+        this._register(this.model.onDidChangeColor(this.onDidChangeColor, this));
+        this.monitor = null;
+    }
+    get domNode() {
+        return this._domNode;
+    }
+    get canvas() {
+        return this._canvas;
+    }
+    onPointerDown(e) {
+        if (!e.target || !(e.target instanceof Element)) {
+            return;
+        }
+        this.monitor = this._register(( new GlobalPointerMoveMonitor()));
+        const origin = getDomNodePagePosition(this._domNode);
+        if (e.target !== this.selection) {
+            this.onDidChangePosition(e.offsetX, e.offsetY);
+        }
+        this.monitor.startMonitoring(e.target, e.pointerId, e.buttons, event => this.onDidChangePosition(event.pageX - origin.left, event.pageY - origin.top), () => null);
+        const pointerUpListener = addDisposableListener(e.target.ownerDocument, EventType.POINTER_UP, () => {
+            this._onColorFlushed.fire();
+            pointerUpListener.dispose();
+            if (this.monitor) {
+                this.monitor.stopMonitoring(true);
+                this.monitor = null;
+            }
+        }, true);
+    }
+    onDidChangePosition(left, top) {
+        const s = Math.max(0, Math.min(1, left / this.width));
+        const v = Math.max(0, Math.min(1, 1 - (top / this.height)));
+        this.paintSelection(s, v);
+        this._onDidChange.fire({ s, v });
+    }
+    layout() {
+        this.width = this._domNode.offsetWidth;
+        this.height = this._domNode.offsetHeight;
+        this._canvas.width = this.width * this.pixelRatio;
+        this._canvas.height = this.height * this.pixelRatio;
+        this.paint();
+        const hsva = this.model.color.hsva;
+        this.paintSelection(hsva.s, hsva.v);
+    }
+    paint() {
+        const hsva = this.model.color.hsva;
+        const saturatedColor = ( new Color(( new HSVA(hsva.h, 1, 1, 1))));
+        const ctx = this._canvas.getContext('2d');
+        const whiteGradient = ctx.createLinearGradient(0, 0, this._canvas.width, 0);
+        whiteGradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
+        whiteGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
+        whiteGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+        const blackGradient = ctx.createLinearGradient(0, 0, 0, this._canvas.height);
+        blackGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+        blackGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
+        ctx.rect(0, 0, this._canvas.width, this._canvas.height);
+        ctx.fillStyle = Color.Format.CSS.format(saturatedColor);
+        ctx.fill();
+        ctx.fillStyle = whiteGradient;
+        ctx.fill();
+        ctx.fillStyle = blackGradient;
+        ctx.fill();
+    }
+    paintSelection(s, v) {
+        this.selection.style.left = `${s * this.width}px`;
+        this.selection.style.top = `${this.height - v * this.height}px`;
+    }
+    onDidChangeColor(color) {
+        if (this.monitor && this.monitor.isMonitoring()) {
+            return;
+        }
+        this.paint();
+        const hsva = color.hsva;
+        this.paintSelection(hsva.s, hsva.v);
+    }
+}
+export { SaturationBox };

package/vscode/src/vs/editor/contrib/colorPicker/browser/colorPickerParts/colorPickerStrip.js

@@ -0,0 +1,92 @@
+import '../colorPicker.css.js';
+import { append, addDisposableListener, EventType, getDomNodePagePosition, $ as $$1 } from '../../../../../base/browser/dom.js';
+import { GlobalPointerMoveMonitor } from '../../../../../base/browser/globalPointerMoveMonitor.js';
+import { Color, RGBA } from '../../../../../base/common/color.js';
+import { Emitter } from '../../../../../base/common/event.js';
+import { Disposable } from '../../../../../base/common/lifecycle.js';
+const $ = $$1;
+class Strip extends Disposable {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this._onDidChange = ( new Emitter());
+        this.onDidChange = this._onDidChange.event;
+        this._onColorFlushed = ( new Emitter());
+        this.onColorFlushed = this._onColorFlushed.event;
+        if (showingStandaloneColorPicker) {
+            this.domNode = append(container, $('.standalone-strip'));
+            this.overlay = append(this.domNode, $('.standalone-overlay'));
+        }
+        else {
+            this.domNode = append(container, $('.strip'));
+            this.overlay = append(this.domNode, $('.overlay'));
+        }
+        this.slider = append(this.domNode, $('.slider'));
+        this.slider.style.top = `0px`;
+        this._register(addDisposableListener(this.domNode, EventType.POINTER_DOWN, e => this.onPointerDown(e)));
+        this._register(model.onDidChangeColor(this.onDidChangeColor, this));
+        this.layout();
+    }
+    layout() {
+        this.height = this.domNode.offsetHeight - this.slider.offsetHeight;
+        const value = this.getValue(this.model.color);
+        this.updateSliderPosition(value);
+    }
+    onDidChangeColor(color) {
+        const value = this.getValue(color);
+        this.updateSliderPosition(value);
+    }
+    onPointerDown(e) {
+        if (!e.target || !(e.target instanceof Element)) {
+            return;
+        }
+        const monitor = this._register(( new GlobalPointerMoveMonitor()));
+        const origin = getDomNodePagePosition(this.domNode);
+        this.domNode.classList.add('grabbing');
+        if (e.target !== this.slider) {
+            this.onDidChangeTop(e.offsetY);
+        }
+        monitor.startMonitoring(e.target, e.pointerId, e.buttons, event => this.onDidChangeTop(event.pageY - origin.top), () => null);
+        const pointerUpListener = addDisposableListener(e.target.ownerDocument, EventType.POINTER_UP, () => {
+            this._onColorFlushed.fire();
+            pointerUpListener.dispose();
+            monitor.stopMonitoring(true);
+            this.domNode.classList.remove('grabbing');
+        }, true);
+    }
+    onDidChangeTop(top) {
+        const value = Math.max(0, Math.min(1, 1 - (top / this.height)));
+        this.updateSliderPosition(value);
+        this._onDidChange.fire(value);
+    }
+    updateSliderPosition(value) {
+        this.slider.style.top = `${(1 - value) * this.height}px`;
+    }
+}
+class OpacityStrip extends Strip {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super(container, model, showingStandaloneColorPicker);
+        this.domNode.classList.add('opacity-strip');
+        this.onDidChangeColor(this.model.color);
+    }
+    onDidChangeColor(color) {
+        super.onDidChangeColor(color);
+        const { r, g, b } = color.rgba;
+        const opaque = ( new Color(( new RGBA(r, g, b, 1))));
+        const transparent = ( new Color(( new RGBA(r, g, b, 0))));
+        this.overlay.style.background = `linear-gradient(to bottom, ${opaque} 0%, ${transparent} 100%)`;
+    }
+    getValue(color) {
+        return color.hsva.a;
+    }
+}
+class HueStrip extends Strip {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super(container, model, showingStandaloneColorPicker);
+        this.domNode.classList.add('hue-strip');
+    }
+    getValue(color) {
+        return 1 - (color.hsva.h / 360);
+    }
+}
+export { HueStrip, OpacityStrip, Strip };

package/vscode/src/vs/editor/contrib/colorPicker/browser/defaultDocumentColorProvider.js

@@ -2,7 +2,6 @@ import { __decorate, __param } from '../../../../../../../external/tslib/tslib.e
 import { Color, RGBA } from '../../../../base/common/color.js';
 import { Disposable } from '../../../../base/common/lifecycle.js';
 import { ILanguageFeaturesService } from '../../../common/services/languageFeatures.js';
-import { registerEditorFeature } from '../../../common/editorFeatures.js';
 import { IEditorWorkerService } from '../../../common/services/editorWorker.js';
 let DefaultDocumentColorProvider = class DefaultDocumentColorProvider {
     constructor(_editorWorkerService) {
@@ -44,5 +43,4 @@ DefaultDocumentColorProviderFeature = ( __decorate([
     ( __param(0, ILanguageFeaturesService)),
     ( __param(1, IEditorWorkerService))
 ], DefaultDocumentColorProviderFeature));
-registerEditorFeature(DefaultDocumentColorProviderFeature);
-export { DefaultDocumentColorProvider };
+export { DefaultDocumentColorProvider, DefaultDocumentColorProviderFeature };

package/vscode/src/vs/editor/contrib/colorPicker/browser/{colorContributions.js → hoverColorPicker/hoverColorPickerContribution.js}

@@ -1,14 +1,8 @@
-import { Disposable } from '../../../../base/common/lifecycle.js';
-import { MouseTargetType } from '../../../browser/editorBrowser.js';
-import { registerEditorContribution, EditorContributionInstantiation } from '../../../browser/editorExtensions.js';
-import { EditorOption } from '../../../common/config/editorOptions.js';
-import { Range } from '../../../common/core/range.js';
-import { ColorDecorationInjectedTextMarker } from './colorDetector.js';
-import { ColorHoverParticipant } from './colorHoverParticipant.js';
-import { ContentHoverController } from '../../hover/browser/contentHoverController2.js';
-import { HoverStartMode, HoverStartSource } from '../../hover/browser/hoverOperation.js';
-import { HoverParticipantRegistry } from '../../hover/browser/hoverTypes.js';
-class ColorContribution extends Disposable {
+import { Disposable } from '../../../../../base/common/lifecycle.js';
+import { Range } from '../../../../common/core/range.js';
+import { ColorDecorationInjectedTextMarker } from '../colorDetector.js';
+import { ContentHoverController } from '../../../hover/browser/contentHoverController.js';
+class HoverColorPickerContribution extends Disposable {
     static { this.ID = 'editor.contrib.colorContribution'; }
     static { this.RECOMPUTE_TIME = 1000; }
     constructor(_editor) {
@@ -20,12 +14,12 @@ class ColorContribution extends Disposable {
         super.dispose();
     }
     onMouseDown(mouseEvent) {
-        const colorDecoratorsActivatedOn = this._editor.getOption(EditorOption.colorDecoratorsActivatedOn);
+        const colorDecoratorsActivatedOn = this._editor.getOption(151 );
         if (colorDecoratorsActivatedOn !== 'click' && colorDecoratorsActivatedOn !== 'clickAndHover') {
             return;
         }
         const target = mouseEvent.target;
-        if (target.type !== MouseTargetType.CONTENT_TEXT) {
+        if (target.type !== 6 ) {
             return;
         }
         if (!target.detail.injectedText) {
@@ -48,10 +42,8 @@ class ColorContribution extends Disposable {
                 target.range.endLineNumber,
                 target.range.endColumn + 1
             ));
-            hoverController.showContentHover(range, HoverStartMode.Immediate, HoverStartSource.Mouse, false, true);
+            hoverController.showContentHover(range, 1 , 0 , false, true);
         }
     }
 }
-registerEditorContribution(ColorContribution.ID, ColorContribution, EditorContributionInstantiation.BeforeFirstInteraction);
-HoverParticipantRegistry.register(ColorHoverParticipant);
-export { ColorContribution };
+export { HoverColorPickerContribution };

package/vscode/src/vs/editor/contrib/colorPicker/browser/hoverColorPicker/hoverColorPickerParticipant.js

@@ -0,0 +1,131 @@
+import { __decorate, __param } from '../../../../../../../../external/tslib/tslib.es6.js';
+import { AsyncIterableObject } from '../../../../../base/common/async.js';
+import { Range } from '../../../../common/core/range.js';
+import { ColorDetector } from '../colorDetector.js';
+import { ColorPickerWidget } from './hoverColorPickerWidget.js';
+import { RenderedHoverParts } from '../../../hover/browser/hoverTypes.js';
+import { IThemeService } from '../../../../../platform/theme/common/themeService.service.js';
+import { localize } from '../../../../../nls.js';
+import { createColorHover, updateColorPresentations, updateEditorModel } from '../colorPickerParticipantUtils.js';
+import { Dimension } from '../../../../../base/browser/dom.js';
+import { DisposableStore } from '../../../../../base/common/lifecycle.js';
+class ColorHover {
+    constructor(owner, range, model, provider) {
+        this.owner = owner;
+        this.range = range;
+        this.model = model;
+        this.provider = provider;
+        this.forceShowAtRange = true;
+    }
+    isValidForHoverAnchor(anchor) {
+        return (anchor.type === 1
+            && this.range.startColumn <= anchor.range.startColumn
+            && this.range.endColumn >= anchor.range.endColumn);
+    }
+    static fromBaseColor(owner, color) {
+        return (
+             (new ColorHover(owner, color.range, color.model, color.provider))
+        );
+    }
+}
+let HoverColorPickerParticipant = class HoverColorPickerParticipant {
+    constructor(_editor, _themeService) {
+        this._editor = _editor;
+        this._themeService = _themeService;
+        this.hoverOrdinal = 2;
+    }
+    computeSync(_anchor, _lineDecorations) {
+        return [];
+    }
+    computeAsync(anchor, lineDecorations, token) {
+        return AsyncIterableObject.fromPromise(this._computeAsync(anchor, lineDecorations, token));
+    }
+    async _computeAsync(_anchor, lineDecorations, _token) {
+        if (!this._editor.hasModel()) {
+            return [];
+        }
+        const colorDetector = ColorDetector.get(this._editor);
+        if (!colorDetector) {
+            return [];
+        }
+        for (const d of lineDecorations) {
+            if (!colorDetector.isColorDecoration(d)) {
+                continue;
+            }
+            const colorData = colorDetector.getColorData(d.range.getStartPosition());
+            if (colorData) {
+                const colorHover = ColorHover.fromBaseColor(this, await createColorHover(this._editor.getModel(), colorData.colorInfo, colorData.provider));
+                return [colorHover];
+            }
+        }
+        return [];
+    }
+    renderHoverParts(context, hoverParts) {
+        const editor = this._editor;
+        if (hoverParts.length === 0 || !editor.hasModel()) {
+            return (
+                 (new RenderedHoverParts([]))
+            );
+        }
+        if (context.setMinimumDimensions) {
+            const minimumHeight = editor.getOption(69 ) + 8;
+            context.setMinimumDimensions(( (new Dimension(302, minimumHeight))));
+        }
+        const disposables = ( (new DisposableStore()));
+        const colorHover = hoverParts[0];
+        const editorModel = editor.getModel();
+        const model = colorHover.model;
+        this._colorPicker = disposables.add(( (new ColorPickerWidget(
+            context.fragment,
+            model,
+            editor.getOption(146 ),
+            this._themeService,
+            false
+        ))));
+        let editorUpdatedByColorPicker = false;
+        let range = ( (new Range(
+            colorHover.range.startLineNumber,
+            colorHover.range.startColumn,
+            colorHover.range.endLineNumber,
+            colorHover.range.endColumn
+        )));
+        disposables.add(model.onColorFlushed(async (color) => {
+            await updateColorPresentations(editorModel, model, color, range, colorHover);
+            editorUpdatedByColorPicker = true;
+            range = updateEditorModel(editor, range, model);
+        }));
+        disposables.add(model.onDidChangeColor((color) => {
+            updateColorPresentations(editorModel, model, color, range, colorHover);
+        }));
+        disposables.add(editor.onDidChangeModelContent((e) => {
+            if (editorUpdatedByColorPicker) {
+                editorUpdatedByColorPicker = false;
+            }
+            else {
+                context.hide();
+                editor.focus();
+            }
+        }));
+        const renderedHoverPart = {
+            hoverPart: ColorHover.fromBaseColor(this, colorHover),
+            hoverElement: this._colorPicker.domNode,
+            dispose() { disposables.dispose(); }
+        };
+        return (
+             (new RenderedHoverParts([renderedHoverPart]))
+        );
+    }
+    getAccessibleContent(hoverPart) {
+        return ( localize(5051, 'There is a color picker here.'));
+    }
+    handleResize() {
+        this._colorPicker?.layout();
+    }
+    isColorPickerVisible() {
+        return !!this._colorPicker;
+    }
+};
+HoverColorPickerParticipant = ( (__decorate([
+    ( (__param(1, IThemeService)))
+], HoverColorPickerParticipant)));
+export { ColorHover, HoverColorPickerParticipant };

package/vscode/src/vs/editor/contrib/colorPicker/browser/hoverColorPicker/hoverColorPickerWidget.js

@@ -0,0 +1,30 @@
+import '../colorPicker.css.js';
+import { PixelRatio } from '../../../../../base/browser/pixelRatio.js';
+import { getWindow, $ as $$1 } from '../../../../../base/browser/dom.js';
+import { Widget } from '../../../../../base/browser/ui/widget.js';
+import { ColorPickerBody } from '../colorPickerParts/colorPickerBody.js';
+import { ColorPickerHeader } from '../colorPickerParts/colorPickerHeader.js';
+const $ = $$1;
+class ColorPickerWidget extends Widget {
+    static { this.ID = 'editor.contrib.colorPickerWidget'; }
+    constructor(container, model, pixelRatio, themeService, standaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this.pixelRatio = pixelRatio;
+        this._register(PixelRatio.getInstance(getWindow(container)).onDidChange(() => this.layout()));
+        this._domNode = $('.colorpicker-widget');
+        container.appendChild(this._domNode);
+        this.header = this._register(( new ColorPickerHeader(this._domNode, this.model, themeService, standaloneColorPicker)));
+        this.body = this._register(( new ColorPickerBody(this._domNode, this.model, this.pixelRatio, standaloneColorPicker)));
+    }
+    getId() {
+        return ColorPickerWidget.ID;
+    }
+    layout() {
+        this.body.layout();
+    }
+    get domNode() {
+        return this._domNode;
+    }
+}
+export { ColorPickerWidget };

package/vscode/src/vs/editor/contrib/colorPicker/browser/{standaloneColorPickerActions.js → standaloneColorPicker/standaloneColorPickerActions.js}

@@ -1,18 +1,15 @@
-import { registerEditorAction, EditorAction2, EditorAction } from '../../../browser/editorExtensions.js';
-import { KeyCode } from '../../../../base/common/keyCodes.js';
-import { localize2, localize } from '../../../../nls.js';
-import { KeybindingWeight } from '../../../../platform/keybinding/common/keybindingsRegistry.js';
-import { StandaloneColorPickerController } from './standaloneColorPickerWidget.js';
-import { EditorContextKeys } from '../../../common/editorContextKeys.js';
-import { registerAction2, MenuId } from '../../../../platform/actions/common/actions.js';
-import './colorPicker.css.js';
+import { EditorAction2, EditorAction } from '../../../../browser/editorExtensions.js';
+import { localize2, localize } from '../../../../../nls.js';
+import { EditorContextKeys } from '../../../../common/editorContextKeys.js';
+import { MenuId } from '../../../../../platform/actions/common/actions.js';
+import { StandaloneColorPickerController } from './standaloneColorPickerController.js';
 class ShowOrFocusStandaloneColorPicker extends EditorAction2 {
     constructor() {
         super({
             id: 'editor.action.showOrFocusStandaloneColorPicker',
             title: {
-                ...( localize2(1232, "Show or Focus Standalone Color Picker")),
-                mnemonicTitle: ( localize(1233, "&&Show or Focus Standalone Color Picker")),
+                ...( localize2(5052, "Show or Focus Standalone Color Picker")),
+                mnemonicTitle: ( localize(5053, "&&Show or Focus Standalone Color Picker")),
             },
             precondition: undefined,
             menu: [
@@ -20,7 +17,7 @@ class ShowOrFocusStandaloneColorPicker extends EditorAction2 {
             ],
             metadata: {
                 description: ( localize2(
-                    1234,
+                    5054,
                     "Show or focus a standalone color picker which uses the default color provider. It displays hex/rgb/hsl colors."
                 )),
             }
@@ -34,15 +31,15 @@ class HideStandaloneColorPicker extends EditorAction {
     constructor() {
         super({
             id: 'editor.action.hideColorPicker',
-            label: ( localize(1235, "Hide the Color Picker")),
+            label: ( localize(5055, "Hide the Color Picker")),
             alias: 'Hide the Color Picker',
             precondition: ( (EditorContextKeys.standaloneColorPickerVisible.isEqualTo(true))),
             kbOpts: {
-                primary: KeyCode.Escape,
-                weight: KeybindingWeight.EditorContrib
+                primary: 9 ,
+                weight: 100
             },
             metadata: {
-                description: ( localize2(1236, "Hide the standalone color picker.")),
+                description: ( localize2(5056, "Hide the standalone color picker.")),
             }
         });
     }
@@ -54,16 +51,16 @@ class InsertColorWithStandaloneColorPicker extends EditorAction {
     constructor() {
         super({
             id: 'editor.action.insertColorWithStandaloneColorPicker',
-            label: ( localize(1237, "Insert Color with Standalone Color Picker")),
+            label: ( localize(5057, "Insert Color with Standalone Color Picker")),
             alias: 'Insert Color with Standalone Color Picker',
             precondition: ( (EditorContextKeys.standaloneColorPickerFocused.isEqualTo(true))),
             kbOpts: {
-                primary: KeyCode.Enter,
-                weight: KeybindingWeight.EditorContrib
+                primary: 3 ,
+                weight: 100
             },
             metadata: {
                 description: ( localize2(
-                    1238,
+                    5058,
                     "Insert hex/rgb/hsl colors with the focused standalone color picker."
                 )),
             }
@@ -73,7 +70,4 @@ class InsertColorWithStandaloneColorPicker extends EditorAction {
         StandaloneColorPickerController.get(editor)?.insertColor();
     }
 }
-registerEditorAction(HideStandaloneColorPicker);
-registerEditorAction(InsertColorWithStandaloneColorPicker);
-registerAction2(ShowOrFocusStandaloneColorPicker);
-export { ShowOrFocusStandaloneColorPicker };
+export { HideStandaloneColorPicker, InsertColorWithStandaloneColorPicker, ShowOrFocusStandaloneColorPicker };