Changeset 251487 in webkit


Ignore:
Timestamp:
Oct 23, 2019, 12:25:01 PM (6 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Replace color wheel with square HSB color picker
​https://bugs.webkit.org/show_bug.cgi?id=203169
<rdar://problem/56449832>

Reviewed by Devin Rousso.

Replace the color wheel with a square HSB color picker.

The square HSB color picker provides more precision for choosing saturation,
and it's more familiar to most web developers.

  • UserInterface/Main.html:
  • UserInterface/Views/ColorPicker.css:

(.color-picker):
(.color-picker > .hue):
(body[dir=ltr] .color-picker > .hue):
(body[dir=rtl] .color-picker > .hue):

  • UserInterface/Views/ColorPicker.js:

(WI.ColorPicker):
(WI.ColorPicker.prototype.get colorSquare):
(WI.ColorPicker.prototype.set color):
(WI.ColorPicker.prototype.colorSquareColorDidChange):
(WI.ColorPicker.prototype.sliderValueDidChange):
(WI.ColorPicker.prototype._updateColor):
(WI.ColorPicker.prototype._updateSliders):
Add a hue slider. The new color picker has the hue slider instead of the brightness slider.

  • UserInterface/Views/ColorSquare.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorWheel.css.

(.color-square):
(.color-square > .saturation-gradient):
(.color-square > .lightness-gradient):
(.color-square > .fill):
(.color-square > .crosshair):

  • UserInterface/Views/ColorSquare.js: Added.

(WI.ColorSquare):
(WI.ColorSquare.prototype.get element):
(WI.ColorSquare.prototype.set dimension):
(WI.ColorSquare.prototype.get hue):
(WI.ColorSquare.prototype.set hue):
(WI.ColorSquare.prototype.get tintedColor):
(WI.ColorSquare.prototype.set tintedColor):
(WI.ColorSquare.prototype.get rawColor):
(WI.ColorSquare.prototype.handleEvent):
(WI.ColorSquare.prototype.get _saturation):
(WI.ColorSquare.prototype.get _brightness):
(WI.ColorSquare.prototype.get _lightness):
(WI.ColorSquare.prototype._handleMousedown):
(WI.ColorSquare.prototype._handleMousemove):
(WI.ColorSquare.prototype._handleMouseup):
(WI.ColorSquare.prototype._updateColorForMouseEvent):
(WI.ColorSquare.prototype._setCrosshairPosition):
(WI.ColorSquare.prototype._updateBaseColor):

  • UserInterface/Views/ColorWheel.js: Removed.
  • UserInterface/Views/GradientEditor.js:

(WI.GradientEditor):

Location:
trunk/Source/WebInspectorUI
Files:
1 added
1 deleted
5 edited
1 moved

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r251485 r251487  
     12019-10-23  Nikita Vasilyev  <[email protected]>
     2
     3        Web Inspector: Replace color wheel with square HSB color picker
     4        https://bugs.webkit.org/show_bug.cgi?id=203169
     5        <rdar://problem/56449832>
     6
     7        Reviewed by Devin Rousso.
     8
     9        Replace the color wheel with a square HSB color picker.
     10
     11        The square HSB color picker provides more precision for choosing saturation,
     12        and it's more familiar to most web developers.
     13
     14        * UserInterface/Main.html:
     15        * UserInterface/Views/ColorPicker.css:
     16        (.color-picker):
     17        (.color-picker > .hue):
     18        (body[dir=ltr] .color-picker > .hue):
     19        (body[dir=rtl] .color-picker > .hue):
     20        * UserInterface/Views/ColorPicker.js:
     21        (WI.ColorPicker):
     22        (WI.ColorPicker.prototype.get colorSquare):
     23        (WI.ColorPicker.prototype.set color):
     24        (WI.ColorPicker.prototype.colorSquareColorDidChange):
     25        (WI.ColorPicker.prototype.sliderValueDidChange):
     26        (WI.ColorPicker.prototype._updateColor):
     27        (WI.ColorPicker.prototype._updateSliders):
     28        Add a hue slider. The new color picker has the hue slider instead of the brightness slider.
     29
     30        * UserInterface/Views/ColorSquare.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorWheel.css.
     31        (.color-square):
     32        (.color-square > .saturation-gradient):
     33        (.color-square > .lightness-gradient):
     34        (.color-square > .fill):
     35        (.color-square > .crosshair):
     36        * UserInterface/Views/ColorSquare.js: Added.
     37        (WI.ColorSquare):
     38        (WI.ColorSquare.prototype.get element):
     39        (WI.ColorSquare.prototype.set dimension):
     40        (WI.ColorSquare.prototype.get hue):
     41        (WI.ColorSquare.prototype.set hue):
     42        (WI.ColorSquare.prototype.get tintedColor):
     43        (WI.ColorSquare.prototype.set tintedColor):
     44        (WI.ColorSquare.prototype.get rawColor):
     45        (WI.ColorSquare.prototype.handleEvent):
     46        (WI.ColorSquare.prototype.get _saturation):
     47        (WI.ColorSquare.prototype.get _brightness):
     48        (WI.ColorSquare.prototype.get _lightness):
     49        (WI.ColorSquare.prototype._handleMousedown):
     50        (WI.ColorSquare.prototype._handleMousemove):
     51        (WI.ColorSquare.prototype._handleMouseup):
     52        (WI.ColorSquare.prototype._updateColorForMouseEvent):
     53        (WI.ColorSquare.prototype._setCrosshairPosition):
     54        (WI.ColorSquare.prototype._updateBaseColor):
     55        * UserInterface/Views/ColorWheel.js: Removed.
     56        * UserInterface/Views/GradientEditor.js:
     57        (WI.GradientEditor):
     58
    1592019-10-23  Yury Semikhatsky  <[email protected]>
    260

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r251227 r251487  
    6767    <link rel="stylesheet" href="Views/CollectionContentView.css">
    6868    <link rel="stylesheet" href="Views/ColorPicker.css">
    69     <link rel="stylesheet" href="Views/ColorWheel.css">
     69    <link rel="stylesheet" href="Views/ColorSquare.css">
    7070    <link rel="stylesheet" href="Views/CompletionSuggestionsView.css">
    7171    <link rel="stylesheet" href="Views/ComputedStyleDetailsPanel.css">
    … …  
    629629    <script src="Views/CodeMirrorTextMarkers.js"></script>
    630630    <script src="Views/ColorPicker.js"></script>
    631     <script src="Views/ColorWheel.js"></script>
     631    <script src="Views/ColorSquare.js"></script>
    632632    <script src="Views/ColumnChart.js"></script>
    633633    <script src="Views/CompletionSuggestionsView.js"></script>

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

    r213004 r251487  
    3131
    3232    --color-picker-width: 256px;
    33     --color-picker-brightness-offset-start: 41px;
     33    --color-picker-hue-offset-start: 41px;
    3434    --color-picker-opacity-offset-start: 18px;
    3535}
    … …  
    5555}
    5656
    57 body[dir=ltr] .color-picker > .brightness {
    58     left: calc(var(--color-picker-width) - var(--color-picker-brightness-offset-start));
     57.color-picker > .hue {
     58    background-image: linear-gradient(to right, red 0%, yellow 16.6%, lime 33.2%, aqua 50%, blue 66.6%, fuchsia 83.2%, red 100%);
    5959}
    6060
    61 body[dir=rtl] .color-picker > .brightness {
    62     left: calc(var(--color-picker-brightness-offset-start) - var(--slider-height));
     61body[dir=ltr] .color-picker > .hue {
     62    left: calc(var(--color-picker-width) - var(--color-picker-hue-offset-start));
     63}
     64
     65body[dir=rtl] .color-picker > .hue {
     66    left: calc(var(--color-picker-hue-offset-start) - var(--slider-height));
    6367}
    6468

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

    r239597 r251487  
    3030        super();
    3131
    32         this._colorWheel = new WI.ColorWheel(this, 200);
    33 
    34         this._brightnessSlider = new WI.Slider;
    35         this._brightnessSlider.delegate = this;
    36         this._brightnessSlider.element.classList.add("brightness");
     32        this._colorSquare = new WI.ColorSquare(this, 200);
     33
     34        this._hueSlider = new WI.Slider;
     35        this._hueSlider.delegate = this;
     36        this._hueSlider.element.classList.add("hue");
    3737
    3838        this._opacitySlider = new WI.Slider;
    … …  
    7474        this._element.classList.add("color-picker");
    7575
    76         this._element.appendChild(this._colorWheel.element);
    77         this._element.appendChild(this._brightnessSlider.element);
     76        this._element.append(this._colorSquare.element);
     77        this._element.append(this._hueSlider.element);
     78
    7879        this._element.appendChild(this._opacitySlider.element);
    7980        this._element.appendChild(colorInputsContainerElement);
    … …  
    9192    // Public
    9293
    93     get element()
    94     {
    95         return this._element;
    96     }
    97 
    98     set brightness(brightness)
    99     {
    100         if (brightness === this._brightness)
    101             return;
    102 
    103         this._colorWheel.brightness = brightness;
    104 
    105         this._updateColor();
    106         this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
    107     }
     94    get element() { return this._element; }
     95    get colorSquare() { return this._colorSquare; }
    10896
    10997    set opacity(opacity)
    … …  
    116104    }
    117105
    118     get colorWheel()
    119     {
    120         return this._colorWheel;
    121     }
    122 
    123106    get color()
    124107    {
    … …  
    136119        this._color = color;
    137120
    138         this._colorWheel.tintedColor = this._color;
    139         this._brightnessSlider.value = this._colorWheel.brightness / 100;
     121        this._colorSquare.tintedColor = this._color;
     122
     123        this._hueSlider.value = this._color.hsl[0] / 360;
    140124
    141125        this._opacitySlider.value = this._color.alpha;
    142         this._updateSliders(this._colorWheel.rawColor, this._color);
     126        this._updateSliders(this._colorSquare.rawColor, this._color);
    143127
    144128        this._showColorComponentInputs();
    … …  
    157141    }
    158142
    159     colorWheelColorDidChange(colorWheel)
     143    colorSquareColorDidChange(colorSquare)
    160144    {
    161145        this._updateColor();
    162         this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
     146        this._updateSliders(this._colorSquare.rawColor, this._colorSquare.tintedColor);
    163147    }
    164148
    … …  
    167151        if (slider === this._opacitySlider)
    168152            this.opacity = value;
    169         else if (slider === this._brightnessSlider)
    170             this.brightness = value * 100;
     153        else if (slider === this._hueSlider) {
     154            this._colorSquare.hue = value * 360;
     155            this._updateColor();
     156        }
    171157    }
    172158
    … …  
    183169        let components = null;
    184170        if (format === WI.Color.Format.HSL || format === WI.Color.Format.HSLA) {
    185             components = this._colorWheel.tintedColor.hsl.concat(opacity);
     171            components = this._colorSquare.tintedColor.hsl.concat(opacity);
    186172            if (opacity !== 1)
    187173                format = WI.Color.Format.HSLA;
    188174        } else {
    189             components = this._colorWheel.tintedColor.rgb.concat(opacity);
     175            components = this._colorSquare.tintedColor.rgb.concat(opacity);
    190176            if (opacity !== 1 && format === WI.Color.Format.RGB)
    191177                format = WI.Color.Format.RGBA;
    … …  
    206192    _updateSliders(rawColor, tintedColor)
    207193    {
    208         var rgb = this._colorWheel.tintedColor.rgb;
     194        var rgb = this._colorSquare.tintedColor.rgb;
    209195        var opaque = new WI.Color(WI.Color.Format.RGBA, rgb.concat(1)).toString();
    210196        var transparent = new WI.Color(WI.Color.Format.RGBA, rgb.concat(0)).toString();
    211 
    212         this._brightnessSlider.element.style.setProperty("background-image", `linear-gradient(90deg, black, ${rawColor}, white)`);
    213 
    214197        this._opacitySlider.element.style.setProperty("background-image", "linear-gradient(90deg, " + transparent + ", " + opaque + "), " + this._opacityPattern);
    215198    }

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

    r251486 r251487  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2019 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .color-wheel {
     26.color-square {
    2727    position: relative;
    2828}
    2929
    30 .color-wheel > canvas {
    31     width: 100%;
    32     height: 100%;
     30.color-square > .saturation-gradient {
     31    background-image: linear-gradient(to right, white, hsla(0, 0%, 100%, 0));
    3332}
    3433
    35 .color-wheel > .crosshair {
     34.color-square > .lightness-gradient {
     35    background-image: linear-gradient(to top, black, hsla(0, 0%, 0%, 0));
     36}
     37
     38.color-square > .fill {
     39    position: absolute;
     40    top: 0;
     41    left: 0;
     42    right: 0;
     43    bottom: 0;
     44}
     45
     46.color-square > .crosshair {
    3647    position: absolute;
    3748    top: calc(-1 * var(--crosshair-size) / 2);
    … …  
    4051    height: var(--crosshair-size);
    4152    background-color: white;
    42     border: 1px solid black;
     53    border: 0.5px solid black;
    4354    border-radius: 3px;
    4455    pointer-events: none;
    4556
    46     --crosshair-size: 5px;
     57    --crosshair-size: 7px;
    4758}

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

    r221748 r251487  
    7272
    7373        this._colorPicker = new WI.ColorPicker;
    74         this._colorPicker.colorWheel.dimension = 190;
     74        this._colorPicker.colorSquare.dimension = 190;
    7575        this._colorPicker.enableColorComponentInputs = false;
    7676        this._colorPicker.addEventListener(WI.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
Note: See TracChangeset for help on using the changeset viewer.