[Editor] Add a color picker with predefined colors for highlighting text (bug 1866434)

The doorhanger for highlighting has a basic color picker composed of 5 predefined colors
to set the default color to use.
These colors can be changed thanks to a preference for now but it's something which could
be changed in the Firefox settings in the future.
Each highlight has in its own toolbar a color picker to just change its color.
The different color pickers are so similar (modulo few differences in their styles) that
this patch introduces a new class ColorPicker which provides a color picker component
which could be reused in future editors.
All in all, a large part of this patch is dedicated to color picker itself and its style
and the rest is almost a matter of wiring the component.
This commit is contained in:
Calixte Denizet 2023-11-30 16:21:13 +01:00
parent c0436013a0
commit ff23d37fa2
22 changed files with 573 additions and 87 deletions

View file

@ -28,8 +28,6 @@ class AnnotationEditorParams {
#bindListeners({
editorFreeTextFontSize,
editorFreeTextColor,
editorHighlightColor,
editorHighlightOpacity,
editorInkColor,
editorInkThickness,
editorInkOpacity,
@ -48,12 +46,6 @@ class AnnotationEditorParams {
editorFreeTextColor.addEventListener("input", function () {
dispatchEvent("FREETEXT_COLOR", this.value);
});
editorHighlightColor.addEventListener("input", function () {
dispatchEvent("HIGHLIGHT_COLOR", this.value);
});
editorHighlightOpacity.addEventListener("input", function () {
dispatchEvent("HIGHLIGHT_OPACITY", this.valueAsNumber);
});
editorInkColor.addEventListener("input", function () {
dispatchEvent("INK_COLOR", this.value);
});
@ -76,12 +68,6 @@ class AnnotationEditorParams {
case AnnotationEditorParamsType.FREETEXT_COLOR:
editorFreeTextColor.value = value;
break;
case AnnotationEditorParamsType.HIGHLIGHT_COLOR:
editorHighlightColor.value = value;
break;
case AnnotationEditorParamsType.HIGHLIGHT_OPACITY:
editorHighlightOpacity.value = value;
break;
case AnnotationEditorParamsType.INK_COLOR:
editorInkColor.value = value;
break;