[webkit-changes] [254243] trunk/Source/WebInspectorUI

Wed, 08 Jan 2020 18:00:54 -0800

Title: [254243] trunk/Source/WebInspectorUI
Revision
254243
Author
nvasil...@apple.com
Date
2020-01-08 18:00:06 -0800 (Wed, 08 Jan 2020)

Log Message

Web Inspector: Show RGBA input fields for p3 color picker
https://bugs.webkit.org/show_bug.cgi?id=203928
<rdar://problem/56963805>

Reviewed by Brian Burg.

Display numeric input fields for colors defined via `color(...)` CSS syntax.

* UserInterface/Controllers/CodeMirrorColorEditingController.js:
(WI.CodeMirrorColorEditingController.prototype.popoverWillPresent):
Remove unnecessary WI.ColorPicker.Event.FormatChanged event.

* UserInterface/Views/ColorPicker.css:
(.color-picker > .color-inputs > div + div):
* UserInterface/Views/ColorPicker.js:
(WI.ColorPicker):
Don't append inputs of all possible color formats to DOM on instantiation.

(WI.ColorPicker.prototype.set color):
(WI.ColorPicker.prototype.set enableColorComponentInputs):
(WI.ColorPicker.prototype._updateColor):
(WI.ColorPicker.prototype._updateColorGamut):
(WI.ColorPicker.prototype._createColorInputsIfNeeded):
(WI.ColorPicker.prototype._showColorComponentInputs):
(WI.ColorPicker.prototype._handleColorInputsContainerInput):
* UserInterface/Views/InlineSwatch.js:
Remove unnecessary WI.ColorPicker.Event.FormatChanged event.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (254242 => 254243)


--- trunk/Source/WebInspectorUI/ChangeLog	2020-01-09 01:42:45 UTC (rev 254242)
+++ trunk/Source/WebInspectorUI/ChangeLog	2020-01-09 02:00:06 UTC (rev 254243)
@@ -1,3 +1,33 @@
+2020-01-08  Nikita Vasilyev  <nvasil...@apple.com>
+
+        Web Inspector: Show RGBA input fields for p3 color picker
+        https://bugs.webkit.org/show_bug.cgi?id=203928
+        <rdar://problem/56963805>
+
+        Reviewed by Brian Burg.
+
+        Display numeric input fields for colors defined via `color(...)` CSS syntax.
+
+        * UserInterface/Controllers/CodeMirrorColorEditingController.js:
+        (WI.CodeMirrorColorEditingController.prototype.popoverWillPresent):
+        Remove unnecessary WI.ColorPicker.Event.FormatChanged event.
+
+        * UserInterface/Views/ColorPicker.css:
+        (.color-picker > .color-inputs > div + div):
+        * UserInterface/Views/ColorPicker.js:
+        (WI.ColorPicker):
+        Don't append inputs of all possible color formats to DOM on instantiation.
+
+        (WI.ColorPicker.prototype.set color):
+        (WI.ColorPicker.prototype.set enableColorComponentInputs):
+        (WI.ColorPicker.prototype._updateColor):
+        (WI.ColorPicker.prototype._updateColorGamut):
+        (WI.ColorPicker.prototype._createColorInputsIfNeeded):
+        (WI.ColorPicker.prototype._showColorComponentInputs):
+        (WI.ColorPicker.prototype._handleColorInputsContainerInput):
+        * UserInterface/Views/InlineSwatch.js:
+        Remove unnecessary WI.ColorPicker.Event.FormatChanged event.
+
 2020-01-08  Devin Rousso  <drou...@apple.com>
 
         REGRESSION: (r254186) [ Mac ] inspector/css/add-rule.html is failing

Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js (254242 => 254243)


--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js	2020-01-09 01:42:45 UTC (rev 254242)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js	2020-01-09 02:00:06 UTC (rev 254243)
@@ -41,7 +41,6 @@
     {
         this._colorPicker = new WI.ColorPicker;
         this._colorPicker.addEventListener(WI.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
-        this._colorPicker.addEventListener(WI.ColorPicker.Event.FormatChanged, (event) => popover.update());
         popover.content = this._colorPicker.element;
     }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css (254242 => 254243)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css	2020-01-09 01:42:45 UTC (rev 254242)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css	2020-01-09 02:00:06 UTC (rev 254243)
@@ -89,11 +89,7 @@
     width: 100%;
 }
 
-.color-picker > .color-inputs > div[hidden] {
-    display: none;
-}
-
-.color-picker > .color-inputs > div:not([hidden]) + div {
+.color-picker > .color-inputs > div + div {
     -webkit-margin-start: 4px;
 }

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js (254242 => 254243)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js	2020-01-09 01:42:45 UTC (rev 254242)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js	2020-01-09 02:00:06 UTC (rev 254243)
@@ -39,38 +39,14 @@
         this._opacitySlider.delegate = this;
         this._opacitySlider.element.classList.add("opacity");
 
-        let colorInputsContainerElement = document.createElement("div");
-        colorInputsContainerElement.classList.add("color-inputs");
+        this._colorInputs = [];
+        this._colorInputsFormat = null;
+        this._colorInputsHasAlpha = null;
 
-        let createColorInput = (label, {min, max, step, units} = {}) => {
-            let containerElement = colorInputsContainerElement.createChild("div");
+        this._colorInputsContainerElement = document.createElement("div");
+        this._colorInputsContainerElement.classList.add("color-inputs");
+        this._colorInputsContainerElement.addEventListener("input", this._handleColorInputsContainerInput.bind(this));
 
-            containerElement.append(label);
-
-            let numberInputElement = containerElement.createChild("input");
-            numberInputElement.type = "number";
-            numberInputElement.min = min || 0;
-            numberInputElement.max = max || 100;
-            numberInputElement.step = step || 1;
-            numberInputElement.addEventListener("input", this._handleColorInputInput.bind(this));
-
-            if (units && units.length)
-                containerElement.append(units);
-
-            return {containerElement, numberInputElement};
-        };
-
-        // FIXME: <https://webkit.org/b/203928> Web Inspector: Show RGBA input fields for p3 color picker
-        this._colorInputs = new Map([
-            ["R", createColorInput("R", {max: 255})],
-            ["G", createColorInput("G", {max: 255})],
-            ["B", createColorInput("B", {max: 255})],
-            ["H", createColorInput("H", {max: 360})],
-            ["S", createColorInput("S", {units: "%"})],
-            ["L", createColorInput("L", {units: "%"})],
-            ["A", createColorInput("A", {max: 1, step: 0.01})]
-        ]);
-
         this._element = document.createElement("div");
         this._element.classList.add("color-picker");
 
@@ -80,7 +56,7 @@
         wrapper.appendChild(this._hueSlider.element);
         wrapper.appendChild(this._opacitySlider.element);
 
-        this._element.appendChild(colorInputsContainerElement);
+        this._element.appendChild(this._colorInputsContainerElement);
 
         this._opacity = 0;
         this._opacityPattern = "url(Images/Checkers.svg)";
@@ -117,8 +93,6 @@
 
         this._dontUpdateColor = true;
 
-        let formatChanged = !this._color || this._color.format !== color.format;
-
         this._color = color;
 
         this._colorSquare.tintedColor = this._color;
@@ -129,10 +103,8 @@
         this._updateOpacitySlider();
 
         this._showColorComponentInputs();
+        this._updateColorGamut();
 
-        if (formatChanged)
-            this._handleFormatChange();
-
         this._dontUpdateColor = false;
     }
 
@@ -139,8 +111,7 @@
     set enableColorComponentInputs(value)
     {
         this._enableColorComponentInputs = value;
-
-        this._showColorComponentInputs();
+        this._element.classList.toggle("hide-inputs", !this._enableColorComponentInputs);
     }
 
     focus()
@@ -189,8 +160,6 @@
                 format = WI.Color.Format.RGBA;
         }
 
-        let formatChanged = this._color.format === format;
-
         this._color = new WI.Color(format, components, gamut);
 
         this._showColorComponentInputs();
@@ -197,8 +166,7 @@
 
         this.dispatchEventToListeners(WI.ColorPicker.Event.ColorChanged, {color: this._color});
 
-        if (formatChanged)
-            this._handleFormatChange();
+        this._updateColorGamut();
     }
 
     _updateOpacitySlider()
@@ -213,37 +181,38 @@
         this._opacitySlider.element.style.setProperty("background-image", "linear-gradient(0deg, " + transparent + ", " + opaque + "), " + this._opacityPattern);
     }
 
-    _handleFormatChange()
+    _updateColorGamut()
     {
-        this._element.classList.toggle("hide-inputs", this._color.format !== WI.Color.Format.Keyword
-            && this._color.format !== WI.Color.Format.RGB
-            && this._color.format !== WI.Color.Format.RGBA
-            && this._color.format !== WI.Color.Format.HEX
-            && this._color.format !== WI.Color.Format.ShortHEX
-            && this._color.format !== WI.Color.Format.HEXAlpha
-            && this._color.format !== WI.Color.Format.ShortHEXAlpha
-            && this._color.format !== WI.Color.Format.HSL
-            && this._color.format !== WI.Color.Format.HSLA);
-
         this._element.classList.toggle("gamut-p3", this._color.gamut === WI.Color.Gamut.DisplayP3);
-
-        this.dispatchEventToListeners(WI.ColorPicker.Event.FormatChanged);
     }
 
-    _showColorComponentInputs()
+    _createColorInputsIfNeeded()
     {
-        for (let {containerElement} of this._colorInputs.values())
-            containerElement.hidden = true;
-
-        if (!this._enableColorComponentInputs)
+        let hasAlpha = this._color.alpha !== 1;
+        if ((this._color.format === this._colorInputsFormat) && (hasAlpha === this._colorInputsHasAlpha))
             return;
 
-        function updateColorInput(key, value) {
-            let {containerElement, numberInputElement} = this._colorInputs.get(key);
-            numberInputElement.value = value;
-            containerElement.hidden = false;
-        }
+        this._colorInputsFormat = this._color.format;
+        this._colorInputsHasAlpha = hasAlpha;
 
+        this._colorInputs = [];
+        this._colorInputsContainerElement.removeChildren();
+
+        let createColorInput = (label, {max, step, units} = {}) => {
+            let containerElement = this._colorInputsContainerElement.createChild("div");
+            containerElement.append(label);
+
+            let numberInputElement = containerElement.createChild("input");
+            numberInputElement.type = "number";
+            numberInputElement.min = 0;
+            numberInputElement.max = max;
+            numberInputElement.step = step || 1;
+            this._colorInputs.push(numberInputElement);
+
+            if (units && units.length)
+                containerElement.append(units);
+        };
+
         switch (this._color.format) {
         case WI.Color.Format.RGB:
         case WI.Color.Format.RGBA:
@@ -252,85 +221,84 @@
         case WI.Color.Format.HEXAlpha:
         case WI.Color.Format.ShortHEXAlpha:
         case WI.Color.Format.Keyword:
-            var [r, g, b] = this._color.rgb;
-            updateColorInput.call(this, "R", Math.round(r));
-            updateColorInput.call(this, "G", Math.round(g));
-            updateColorInput.call(this, "B", Math.round(b));
+            createColorInput("R", {max: 255});
+            createColorInput("G", {max: 255});
+            createColorInput("B", {max: 255});
             break;
 
         case WI.Color.Format.HSL:
         case WI.Color.Format.HSLA:
-            var [h, s, l] = this._color.hsl;
-            updateColorInput.call(this, "H", h.maxDecimals(2));
-            updateColorInput.call(this, "S", s.maxDecimals(2));
-            updateColorInput.call(this, "L", l.maxDecimals(2));
+            createColorInput("H", {max: 360});
+            createColorInput("S", {max: 100, units: "%"});
+            createColorInput("L", {max: 100, units: "%"});
             break;
 
+        case WI.Color.Format.ColorFunction:
+            createColorInput("R", {max: 1, step: 0.01});
+            createColorInput("G", {max: 1, step: 0.01});
+            createColorInput("B", {max: 1, step: 0.01});
+            break;
+
         default:
+            console.error(`Unknown color format: ${this._color.format}`);
             return;
         }
 
-        if ((this._color.format === WI.Color.Format.Keyword && this._color.alpha !== 1)
+        if (this._color.alpha !== 1
             || this._color.format === WI.Color.Format.RGBA
             || this._color.format === WI.Color.Format.HSLA
             || this._color.format === WI.Color.Format.HEXAlpha
             || this._color.format === WI.Color.Format.ShortHEXAlpha) {
-            updateColorInput.call(this, "A", this._color.alpha);
+            createColorInput("A", {max: 1, step: 0.01});
         }
     }
 
-    _handleColorInputInput(event)
+    _showColorComponentInputs()
     {
-        if (!this._enableColorComponentInputs) {
-            WI.reportInternalError("Input event fired for disabled color component input");
+        if (!this._enableColorComponentInputs)
             return;
-        }
 
-        let r = this._colorInputs.get("R").numberInputElement.value;
-        let g = this._colorInputs.get("G").numberInputElement.value;
-        let b = this._colorInputs.get("B").numberInputElement.value;
-        let h = this._colorInputs.get("H").numberInputElement.value;
-        let s = this._colorInputs.get("S").numberInputElement.value;
-        let l = this._colorInputs.get("L").numberInputElement.value;
-        let a = this._colorInputs.get("A").numberInputElement.value;
+        this._createColorInputsIfNeeded();
 
-        let colorString = "";
-        let oldFormat = this._color.format;
-
-        switch (oldFormat) {
+        let components = [];
+        switch (this._color.format) {
         case WI.Color.Format.RGB:
+        case WI.Color.Format.RGBA:
         case WI.Color.Format.HEX:
         case WI.Color.Format.ShortHEX:
-        case WI.Color.Format.Keyword:
-            colorString = `rgb(${r}, ${g}, ${b})`;
-            break;
-
-        case WI.Color.Format.RGBA:
         case WI.Color.Format.HEXAlpha:
         case WI.Color.Format.ShortHEXAlpha:
-            colorString = `rgba(${r}, ${g}, ${b}, ${a})`;
+        case WI.Color.Format.Keyword:
+            components = this._color.rgb.map((value) => Math.round(value));
             break;
 
         case WI.Color.Format.HSL:
-            colorString = `hsl(${h}, ${s}%, ${l}%)`;
+        case WI.Color.Format.HSLA:
+            components = this._color.hsl.map((value) => value.maxDecimals(2));
             break;
 
-        case WI.Color.Format.HSLA:
-            colorString = `hsla(${h}, ${s}%, ${l}%, ${a})`;
+        case WI.Color.Format.ColorFunction:
+            components = this._color.normalizedRGB.map((value) => value.maxDecimals(4));
             break;
 
         default:
-            WI.reportInternalError(`Input event fired for invalid color format "${this._color.format}"`);
-            return;
+            console.error(`Unknown color format: ${this._color.format}`);
         }
 
-        let newColor = WI.Color.fromString(colorString);
-        if (newColor.toString() === this._color.toString())
-            return;
+        if (this._color.alpha !== 1)
+            components.push(this._color.alpha);
 
-        this.color = newColor;
-        this._color.format = oldFormat;
+        console.assert(this._colorInputs.length === components.length);
+        for (let i = 0; i < components.length; ++i)
+            this._colorInputs[i].value = components[i];
+    }
 
+    _handleColorInputsContainerInput(event)
+    {
+        let components = this._colorInputs.map((input) => {
+            return isNaN(input.valueAsNumber) ? 0 : input.valueAsNumber;
+        });
+        this.color = new WI.Color(this._color.format, components, this._color.gamut);
         this.dispatchEventToListeners(WI.ColorPicker.Event.ColorChanged, {color: this._color});
     }
 };
@@ -337,5 +305,4 @@
 
 WI.ColorPicker.Event = {
     ColorChanged: "css-color-picker-color-changed",
-    FormatChanged: "css-color-picker-format-changed",
 };

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (254242 => 254243)


--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js	2020-01-09 01:42:45 UTC (rev 254242)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js	2020-01-09 02:00:06 UTC (rev 254243)
@@ -212,7 +212,6 @@
         case WI.InlineSwatch.Type.Color:
             this._valueEditor = new WI.ColorPicker;
             this._valueEditor.addEventListener(WI.ColorPicker.Event.ColorChanged, this._valueEditorValueDidChange, this);
-            this._valueEditor.addEventListener(WI.ColorPicker.Event.FormatChanged, (event) => popover.update());
             break;
 
         case WI.InlineSwatch.Type.Gradient:

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to