Changeset 235273 in webkit

Timestamp:

Aug 23, 2018 9:55:28 PM (6 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Color picker: can't enter decimal numbers for opacity
​https://bugs.webkit.org/show_bug.cgi?id=187026
<rdar://problem/41446500>

Reviewed by Brian Burg.

After every "input" event, we update the color value of the WI.ColorPicker based on a
generated string using the values of the various <input>. The issue with this approach is
that adding a decimal point (e.g. "0.") would still be construed as 0, meaning that the
color wouldn't change and would instead be reset back to it's old value. This patch adds an
early return if the newly generated color has the same value as the current color, thereby
meaning that the color wouldn't change when changing from "0" to "0.".

• UserInterface/Views/ColorPicker.js:

(WI.ColorPicker):
(WI.ColorPicker.createColorInput):
(WI.ColorPicker.prototype._handleColorInputInput):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/ColorPicker.js (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-08-23  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Color picker: can't enter decimal numbers for opacity
+        https://bugs.webkit.org/show_bug.cgi?id=187026
+        <rdar://problem/41446500>
+
+        Reviewed by Brian Burg.
+
+        After every "input" event, we update the `color` value of the `WI.ColorPicker` based on a
+        generated string using the values of the various <input>. The issue with this approach is
+        that adding a decimal point (e.g. "0.") would still be construed as 0, meaning that the
+        color wouldn't change and would instead be reset back to it's old value. This patch adds an
+        early return if the newly generated color has the same value as the current color, thereby
+        meaning that the `color` wouldn't change when changing from "0" to "0.".
+
+        * UserInterface/Views/ColorPicker.js:
+        (WI.ColorPicker):
+        (WI.ColorPicker.createColorInput):
+        (WI.ColorPicker.prototype._handleColorInputInput):
+
 2018-08-23  Simon Fraser  <simon.fraser@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js

@@ -45 +45 @@
         colorInputsContainerElement.classList.add("color-inputs");
 
-        function createColorInput(label, {min: min = 0, max: max = 100, step: step = 1, units} = {}) {
+        let createColorInput = (label, {min, max, step, units} = {}) => {
             let containerElement = colorInputsContainerElement.createChild("div");
 
@@ -52 +52 @@
             let numberInputElement = containerElement.createChild("input");
             numberInputElement.type = "number";
-            numberInputElement.min = min;
-            numberInputElement.max = max;
-            numberInputElement.step = step;
+            numberInputElement.min = min || 0;
+            numberInputElement.max = max || 100;
+            numberInputElement.step = step || 1;
             numberInputElement.addEventListener("input", this._handleColorInputInput.bind(this));
 
@@ -61 +61 @@
 
             return {containerElement, numberInputElement};
-        }
+        };
 
         this._colorInputs = new Map([
-            ["R", createColorInput.call(this, "R", {max: 255})],
-            ["G", createColorInput.call(this, "G", {max: 255})],
-            ["B", createColorInput.call(this, "B", {max: 255})],
-            ["H", createColorInput.call(this, "H", {max: 360})],
-            ["S", createColorInput.call(this, "S", {units: "%"})],
-            ["L", createColorInput.call(this, "L", {units: "%"})],
-            ["A", createColorInput.call(this, "A"), {max: 1, step: 0.01}]
+            ["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})]
         ]);
 
@@ -325 +325 @@
         }
 
-        this.color = WI.Color.fromString(colorString);
+        let newColor = WI.Color.fromString(colorString);
+        if (newColor.toString() === this._color.toString())
+            return;
+
+        this.color = newColor;
         this._color.format = oldFormat;