Unreviewed, rolling out r210260.
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 9 Jan 2017 21:31:50 +0000 (21:31 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 9 Jan 2017 21:31:50 +0000 (21:31 +0000)
https://bugs.webkit.org/show_bug.cgi?id=166860

new colorpicker UI doesn't seem to work in trunk,
investigating offline (Requested by brrian on #webkit).

Reverted changeset:

"Web Inspector: color picker should feature an editable CSS
value"
https://bugs.webkit.org/show_bug.cgi?id=124356
http://trac.webkit.org/changeset/210260

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@210520 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
Source/WebInspectorUI/UserInterface/Views/ColorPicker.js

index 4fb0361..e66bc81 100644 (file)
@@ -1,3 +1,18 @@
+2017-01-09  Commit Queue  <commit-queue@webkit.org>
+
+        Unreviewed, rolling out r210260.
+        https://bugs.webkit.org/show_bug.cgi?id=166860
+
+        new colorpicker UI doesn't seem to work in trunk,
+        investigating offline (Requested by brrian on #webkit).
+
+        Reverted changeset:
+
+        "Web Inspector: color picker should feature an editable CSS
+        value"
+        https://bugs.webkit.org/show_bug.cgi?id=124356
+        http://trac.webkit.org/changeset/210260
+
 2017-01-06  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r210110.
index 2698dd4..2eb19e4 100644 (file)
@@ -26,7 +26,7 @@
 .color-picker {
     position: relative;
     width: 256px;
-    height: 236px;
+    height: 210px;
     padding: 5px;
 }
 
 .color-picker > .opacity {
     left: 238px;
 }
-
-.color-picker > .color-inputs {
-    display: flex;
-    justify-content: space-between;
-    top: 212px;
-    right: 0;
-    left: 0;
-}
-
-.color-picker > .color-inputs > div {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin: 0 4px;
-}
-
-.color-picker > .color-inputs > div[hidden] {
-    display: none;
-}
-
-.color-picker > .color-inputs input {
-    width: 100%;
-    margin: 0 2px;
-}
index 53adace..7f31836 100644 (file)
@@ -41,49 +41,17 @@ WebInspector.ColorPicker = class ColorPicker extends WebInspector.Object
         this._opacitySlider.delegate = this;
         this._opacitySlider.element.classList.add("opacity");
 
-        let colorInputsContainerElement = document.createElement("div");
-        colorInputsContainerElement.classList.add("color-inputs");
-
-        function createColorInput(label, {min, max, step, units} = {min: 0, max: 1, step: 0.01}) {
-            let containerElement = colorInputsContainerElement.createChild("div");
-
-            containerElement.append(label);
-
-            let numberInputElement = containerElement.createChild("input");
-            numberInputElement.type = "number";
-            numberInputElement.min = min;
-            numberInputElement.max = max;
-            numberInputElement.step = step;
-            numberInputElement.addEventListener("input", this._handleColorInputInput.bind(this));
-
-            if (units && units.length)
-                containerElement.append(units);
-
-            return {containerElement, numberInputElement};
-        }
-
-        this._colorInputs = new Map([
-            ["R", createColorInput.call(this, "R", {max: 255, step: 1})],
-            ["G", createColorInput.call(this, "G", {max: 255, step: 1})],
-            ["B", createColorInput.call(this, "B", {max: 255, step: 1})],
-            ["H", createColorInput.call(this, "H", {max: 360, step: 1})],
-            ["S", createColorInput.call(this, "S", {units: "%"})],
-            ["L", createColorInput.call(this, "L", {units: "%"})],
-            ["A", createColorInput.call(this, "A")]
-        ]);
-
         this._element = document.createElement("div");
-        this._element.classList.add("color-picker");
+        this._element.className = "color-picker";
 
         this._element.appendChild(this._colorWheel.element);
         this._element.appendChild(this._brightnessSlider.element);
         this._element.appendChild(this._opacitySlider.element);
-        this._element.appendChild(colorInputsContainerElement);
 
         this._opacity = 0;
         this._opacityPattern = "url(Images/Checkers.svg)";
 
-        this._color = WebInspector.Color.fromString("white");
+        this._color = "white";
 
         this._dontUpdateColor = false;
     }
@@ -127,20 +95,15 @@ WebInspector.ColorPicker = class ColorPicker extends WebInspector.Object
 
     set color(color)
     {
-        if (!color)
-            return;
-
         this._dontUpdateColor = true;
 
-        this._color = color;
+        this._colorFormat = color.format;
 
-        this._colorWheel.tintedColor = this._color;
+        this._colorWheel.tintedColor = color;
         this._brightnessSlider.value = this._colorWheel.brightness;
 
-        this._opacitySlider.value = this._color.alpha;
-        this._updateSliders(this._colorWheel.rawColor, this._color);
-
-        this._showColorComponentInputs();
+        this._opacitySlider.value = color.alpha;
+        this._updateSliders(this._colorWheel.rawColor, color);
 
         this._dontUpdateColor = false;
     }
@@ -157,8 +120,6 @@ WebInspector.ColorPicker = class ColorPicker extends WebInspector.Object
             this.opacity = value;
         else if (slider === this._brightnessSlider)
             this.brightness = value;
-
-        this._updateColor();
     }
 
     // Private
@@ -168,24 +129,15 @@ WebInspector.ColorPicker = class ColorPicker extends WebInspector.Object
         if (this._dontUpdateColor)
             return;
 
-        let opacity = Math.round(this._opacity * 100) / 100;
+        var opacity = Math.round(this._opacity * 100) / 100;
 
-        let format = this._color.format;
-        let components = null;
-        if (format === WebInspector.Color.Format.HSL || format === WebInspector.Color.Format.HSLA) {
+        var components;
+        if (this._colorFormat === WebInspector.Color.Format.HSL || this._colorFormat === WebInspector.Color.Format.HSLA)
             components = this._colorWheel.tintedColor.hsl.concat(opacity);
-            if (opacity !== 1)
-                format = WebInspector.Color.Format.HSLA;
-        } else {
+        else
             components = this._colorWheel.tintedColor.rgb.concat(opacity);
-            if (opacity !== 1 && format === WebInspector.Color.Format.RGB)
-                format = WebInspector.Color.Format.RGBA;
-        }
-
-        this._color = new WebInspector.Color(format, components);
-
-        this._showColorComponentInputs();
 
+        this._color = new WebInspector.Color(this._colorFormat, components);
         this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
     }
 
@@ -198,81 +150,6 @@ WebInspector.ColorPicker = class ColorPicker extends WebInspector.Object
         this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + opaque + "), " + this._opacityPattern;
         this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
     }
-
-    _showColorComponentInputs()
-    {
-        function updateColorInput(key, value) {
-            let {containerElement, numberInputElement} = this._colorInputs.get(key);
-            numberInputElement.value = value;
-            containerElement.hidden = false;
-        }
-
-        for (let {containerElement} of this._colorInputs.values())
-            containerElement.hidden = true;
-
-        switch (this._color.format) {
-        case WebInspector.Color.Format.RGB:
-        case WebInspector.Color.Format.RGBA:
-            var [r, g, b] = this._color.rgb;
-            updateColorInput.call(this, "R", r);
-            updateColorInput.call(this, "G", g);
-            updateColorInput.call(this, "B", b);
-            break;
-
-        case WebInspector.Color.Format.HSL:
-        case WebInspector.Color.Format.HSLA:
-            var [h, s, l] = this._color.hsl;
-            updateColorInput.call(this, "H", h);
-            updateColorInput.call(this, "S", s);
-            updateColorInput.call(this, "L", l);
-            break;
-
-        default:
-            return;
-        }
-
-        if (this._color.format === WebInspector.Color.Format.RGBA || this._color.format === WebInspector.Color.Format.HSLA)
-            updateColorInput.call(this, "A", this._color.alpha);
-    }
-
-    _handleColorInputInput(event)
-    {
-        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;
-
-        let colorString = "";
-
-        switch (this._color.format) {
-        case WebInspector.Color.Format.RGB:
-            colorString = `rgb(${r}, ${g}, ${b})`;
-            break;
-
-        case WebInspector.Color.Format.RGBA:
-            colorString = `rgba(${r}, ${g}, ${b}, ${a})`;
-            break;
-
-        case WebInspector.Color.Format.HSL:
-            colorString = `hsl(${h}, ${s}%, ${l}%)`;
-            break;
-
-        case WebInspector.Color.Format.HSLA:
-            colorString = `hsla(${h}, ${s}%, ${l}%, ${a})`;
-            break;
-
-        default:
-            WebInspector.reportInternalError(`Input event fired for invalid color format "${this._color.format}"`);
-            return;
-        }
-
-        this.color = WebInspector.Color.fromString(colorString);
-
-        this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
-    }
 };
 
 WebInspector.ColorPicker.Event = {