Changeset 210520 in webkit


Ignore:
Timestamp:
Jan 9, 2017 1:31:50 PM (7 years ago)
Author:
commit-queue@webkit.org
Message:

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

Location:
trunk/Source/WebInspectorUI
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r210460 r210520  
     12017-01-09  Commit Queue  <commit-queue@webkit.org>
     2
     3        Unreviewed, rolling out r210260.
     4        https://bugs.webkit.org/show_bug.cgi?id=166860
     5
     6        new colorpicker UI doesn't seem to work in trunk,
     7        investigating offline (Requested by brrian on #webkit).
     8
     9        Reverted changeset:
     10
     11        "Web Inspector: color picker should feature an editable CSS
     12        value"
     13        https://bugs.webkit.org/show_bug.cgi?id=124356
     14        http://trac.webkit.org/changeset/210260
     15
    1162017-01-06  Commit Queue  <commit-queue@webkit.org>
    217

  • trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css

    r210260 r210520  
    2727    position: relative;
    2828    width: 256px;
    29     height: 236px;
     29    height: 210px;
    3030    padding: 5px;
    3131}
    … …  
    5454    left: 238px;
    5555}
    56 
    57 .color-picker > .color-inputs {
    58     display: flex;
    59     justify-content: space-between;
    60     top: 212px;
    61     right: 0;
    62     left: 0;
    63 }
    64 
    65 .color-picker > .color-inputs > div {
    66     display: flex;
    67     align-items: center;
    68     width: 100%;
    69     margin: 0 4px;
    70 }
    71 
    72 .color-picker > .color-inputs > div[hidden] {
    73     display: none;
    74 }
    75 
    76 .color-picker > .color-inputs input {
    77     width: 100%;
    78     margin: 0 2px;
    79 }

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

    r210260 r210520  
    4242        this._opacitySlider.element.classList.add("opacity");
    4343
    44         let colorInputsContainerElement = document.createElement("div");
    45         colorInputsContainerElement.classList.add("color-inputs");
    46 
    47         function createColorInput(label, {min, max, step, units} = {min: 0, max: 1, step: 0.01}) {
    48             let containerElement = colorInputsContainerElement.createChild("div");
    49 
    50             containerElement.append(label);
    51 
    52             let numberInputElement = containerElement.createChild("input");
    53             numberInputElement.type = "number";
    54             numberInputElement.min = min;
    55             numberInputElement.max = max;
    56             numberInputElement.step = step;
    57             numberInputElement.addEventListener("input", this._handleColorInputInput.bind(this));
    58 
    59             if (units && units.length)
    60                 containerElement.append(units);
    61 
    62             return {containerElement, numberInputElement};
    63         }
    64 
    65         this._colorInputs = new Map([
    66             ["R", createColorInput.call(this, "R", {max: 255, step: 1})],
    67             ["G", createColorInput.call(this, "G", {max: 255, step: 1})],
    68             ["B", createColorInput.call(this, "B", {max: 255, step: 1})],
    69             ["H", createColorInput.call(this, "H", {max: 360, step: 1})],
    70             ["S", createColorInput.call(this, "S", {units: "%"})],
    71             ["L", createColorInput.call(this, "L", {units: "%"})],
    72             ["A", createColorInput.call(this, "A")]
    73         ]);
    74 
    7544        this._element = document.createElement("div");
    76         this._element.classList.add("color-picker");
     45        this._element.className = "color-picker";
    7746
    7847        this._element.appendChild(this._colorWheel.element);
    7948        this._element.appendChild(this._brightnessSlider.element);
    8049        this._element.appendChild(this._opacitySlider.element);
    81         this._element.appendChild(colorInputsContainerElement);
    8250
    8351        this._opacity = 0;
    8452        this._opacityPattern = "url(Images/Checkers.svg)";
    8553
    86         this._color = WebInspector.Color.fromString("white");
     54        this._color = "white";
    8755
    8856        this._dontUpdateColor = false;
    … …  
    12896    set color(color)
    12997    {
    130         if (!color)
    131             return;
    132 
    13398        this._dontUpdateColor = true;
    13499
    135         this._color = color;
     100        this._colorFormat = color.format;
    136101
    137         this._colorWheel.tintedColor = this._color;
     102        this._colorWheel.tintedColor = color;
    138103        this._brightnessSlider.value = this._colorWheel.brightness;
    139104
    140         this._opacitySlider.value = this._color.alpha;
    141         this._updateSliders(this._colorWheel.rawColor, this._color);
    142 
    143         this._showColorComponentInputs();
     105        this._opacitySlider.value = color.alpha;
     106        this._updateSliders(this._colorWheel.rawColor, color);
    144107
    145108        this._dontUpdateColor = false;
    … …  
    158121        else if (slider === this._brightnessSlider)
    159122            this.brightness = value;
    160 
    161         this._updateColor();
    162123    }
    163124
    … …  
    169130            return;
    170131
    171         let opacity = Math.round(this._opacity * 100) / 100;
     132        var opacity = Math.round(this._opacity * 100) / 100;
    172133
    173         let format = this._color.format;
    174         let components = null;
    175         if (format === WebInspector.Color.Format.HSL || format === WebInspector.Color.Format.HSLA) {
     134        var components;
     135        if (this._colorFormat === WebInspector.Color.Format.HSL || this._colorFormat === WebInspector.Color.Format.HSLA)
    176136            components = this._colorWheel.tintedColor.hsl.concat(opacity);
    177             if (opacity !== 1)
    178                 format = WebInspector.Color.Format.HSLA;
    179         } else {
     137        else
    180138            components = this._colorWheel.tintedColor.rgb.concat(opacity);
    181             if (opacity !== 1 && format === WebInspector.Color.Format.RGB)
    182                 format = WebInspector.Color.Format.RGBA;
    183         }
    184139
    185         this._color = new WebInspector.Color(format, components);
    186 
    187         this._showColorComponentInputs();
    188 
     140        this._color = new WebInspector.Color(this._colorFormat, components);
    189141        this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
    190142    }
    … …  
    199151        this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
    200152    }
    201 
    202     _showColorComponentInputs()
    203     {
    204         function updateColorInput(key, value) {
    205             let {containerElement, numberInputElement} = this._colorInputs.get(key);
    206             numberInputElement.value = value;
    207             containerElement.hidden = false;
    208         }
    209 
    210         for (let {containerElement} of this._colorInputs.values())
    211             containerElement.hidden = true;
    212 
    213         switch (this._color.format) {
    214         case WebInspector.Color.Format.RGB:
    215         case WebInspector.Color.Format.RGBA:
    216             var [r, g, b] = this._color.rgb;
    217             updateColorInput.call(this, "R", r);
    218             updateColorInput.call(this, "G", g);
    219             updateColorInput.call(this, "B", b);
    220             break;
    221 
    222         case WebInspector.Color.Format.HSL:
    223         case WebInspector.Color.Format.HSLA:
    224             var [h, s, l] = this._color.hsl;
    225             updateColorInput.call(this, "H", h);
    226             updateColorInput.call(this, "S", s);
    227             updateColorInput.call(this, "L", l);
    228             break;
    229 
    230         default:
    231             return;
    232         }
    233 
    234         if (this._color.format === WebInspector.Color.Format.RGBA || this._color.format === WebInspector.Color.Format.HSLA)
    235             updateColorInput.call(this, "A", this._color.alpha);
    236     }
    237 
    238     _handleColorInputInput(event)
    239     {
    240         let r = this._colorInputs.get("R").numberInputElement.value;
    241         let g = this._colorInputs.get("G").numberInputElement.value;
    242         let b = this._colorInputs.get("B").numberInputElement.value;
    243         let h = this._colorInputs.get("H").numberInputElement.value;
    244         let s = this._colorInputs.get("S").numberInputElement.value;
    245         let l = this._colorInputs.get("L").numberInputElement.value;
    246         let a = this._colorInputs.get("A").numberInputElement.value;
    247 
    248         let colorString = "";
    249 
    250         switch (this._color.format) {
    251         case WebInspector.Color.Format.RGB:
    252             colorString = `rgb(${r}, ${g}, ${b})`;
    253             break;
    254 
    255         case WebInspector.Color.Format.RGBA:
    256             colorString = `rgba(${r}, ${g}, ${b}, ${a})`;
    257             break;
    258 
    259         case WebInspector.Color.Format.HSL:
    260             colorString = `hsl(${h}, ${s}%, ${l}%)`;
    261             break;
    262 
    263         case WebInspector.Color.Format.HSLA:
    264             colorString = `hsla(${h}, ${s}%, ${l}%, ${a})`;
    265             break;
    266 
    267         default:
    268             WebInspector.reportInternalError(`Input event fired for invalid color format "${this._color.format}"`);
    269             return;
    270         }
    271 
    272         this.color = WebInspector.Color.fromString(colorString);
    273 
    274         this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
    275     }
    276153};
    277154
Note: See TracChangeset for help on using the changeset viewer.