Refs: #178242

• anyOS @joaomoreno
• anyOS @hediet

Complexity: 2

Create Issue

The PR introduces the standalone color picker - a color picker that can be spawned for all document types to insert colors. It also introduces a default DocumentColorProvider, which is used when there is no valid DocumentColorProvider provided by extensions. This default provider generates colors using the CSS format. It can be used to show default inline color decorators.

To test the standalone color picker:

1. Choose a file where there is an associated DocumentColorProvider provided by an extension - this could be a CSS file. Add text representing colors into the file.
2. Place the cursor in the editor and spawn the standalone color picker with Show or Focus Standalone Color Picker.
3. Choose a color and verify that you can insert a color of your choice using either the Insert button or the Enter key, when the color picker is focused.
4. Place the cursor on text that has been identified as a color. Typically this text would have a colored inline box decoration in front of it. To see these decorations, you may have to enable Editor: Color Decorators - this setting is turned on by default.
5. Spawn the color picker on the text, and verify that the whole text is selected. Verify that the color picker's previous Insert button, reads Replace. Check that you are able to replace the color as expected. Verify that the color presentations available (hex/rgba/ rgb for example) are the same as the color presentations in the hover widget appearing on hovering on the associated inline color decorator.

Repeat the steps above for a file with no associated DocumentColorProvider. This could be for example a TypeScript file. Note that since there is no extension color provider, the color picker will insert CSS formatted colors.

To test the default inline decorators:

1. There is a setting called Editor: Default Color Decorators which controls the appearance of default inline color decorators based on the previously introduced default DocumentColorProvider. Use this setting, with the setting Editor: Color Decorators to verify the following 4 cases. Have two files open, one with colors that should be detected with an extension color provider and one with colors that should be detected with the default color provider.