Attachment 349338 Details for Bug 189485 – Patch

[patch] Patch

189485.diff (text/plain), 13.15 KB, created by Devin Rousso on 2018-09-10 15:41:40 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2018-09-10 15:41:40 PDT

Size: 13.15 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 122f754db61..2dbde95fcb5 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,34 @@
>+2018-09-10  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: change WI.ColorWheel to use conic-gradient()
>+        https://bugs.webkit.org/show_bug.cgi?id=189485
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * UserInterface/Views/ColorWheel.js:
>+        (WI.ColorWheel):
>+        (WI.ColorWheel.prototype.set dimension):
>+        (WI.ColorWheel.prototype.set brightness):
>+        (WI.ColorWheel.prototype.get tintedColor):
>+        (WI.ColorWheel.prototype.set tintedColor):
>+        (WI.ColorWheel.prototype.get rawColor):
>+        (WI.ColorWheel.prototype.get _hue): Added.
>+        (WI.ColorWheel.prototype.get _saturation): Added.
>+        (WI.ColorWheel.prototype._pointInCircleForEvent):
>+        (WI.ColorWheel.prototype._updateGradient): Added.
>+        (WI.ColorWheel.prototype._tintedColorToPointAndBrightness): Deleted.
>+        (WI.ColorWheel.prototype._drawRawCanvas): Deleted.
>+        (WI.ColorWheel.prototype._colorAtPointWithBrightness): Deleted.
>+        (WI.ColorWheel.prototype._drawTintedCanvas): Deleted.
>+        (WI.ColorWheel.prototype._draw): Deleted.
>+        * UserInterface/Views/ColorWheel.css:
>+        (.color-wheel > .gradient): Added.
>+
>+        * UserInterface/Views/ColorPicker.js:
>+        (WI.ColorPicker.prototype.set brightness):
>+        (WI.ColorPicker.prototype.set color):
>+        (WI.ColorPicker.prototype._updateSliders):
>+
> 2018-09-06  Andy Estes  <aestes@apple.com>
> 
>         [Apple Pay] Rename the -apple-pay-button-type value "checkout" to "check-out"
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
>index 69fcc4cbc46..c06ee6b8464 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
>@@ -102,7 +102,7 @@ WI.ColorPicker = class ColorPicker extends WI.Object
>         if (brightness === this._brightness)
>             return;
> 
>-        this._colorWheel.brightness = brightness;
>+        this._colorWheel.brightness = brightness * 100;
> 
>         this._updateColor();
>         this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
>@@ -138,8 +138,7 @@ WI.ColorPicker = class ColorPicker extends WI.Object
>         this._color = color;
> 
>         this._colorWheel.tintedColor = this._color;
>-        this._brightnessSlider.value = this._colorWheel.brightness;
>-
>+        this._brightnessSlider.value = this._colorWheel.brightness / 100;
>         this._opacitySlider.value = this._color.alpha;
>         this._updateSliders(this._colorWheel.rawColor, this._color);
> 
>@@ -211,8 +210,8 @@ WI.ColorPicker = class ColorPicker extends WI.Object
>         var opaque = new WI.Color(WI.Color.Format.RGBA, rgb.concat(1)).toString();
>         var transparent = new WI.Color(WI.Color.Format.RGBA, rgb.concat(0)).toString();
> 
>+        this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ", white)";
>         this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + opaque + "), " + this._opacityPattern;
>-        this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
>     }
> 
>     _handleFormatChange()
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css
>index 541663d0bdc..4abfb71ed48 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css
>@@ -27,6 +27,12 @@
>     position: relative;
> }
> 
>+.color-wheel > .gradient {
>+    width: 100%;
>+    height: 100%;
>+    border-radius: 50%;
>+}
>+
> .color-wheel > .crosshair {
>     position: absolute;
>     top: -4px;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js
>index 71abd4875f2..3cfc8aa4eec 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js
>@@ -29,20 +29,17 @@ WI.ColorWheel = class ColorWheel extends WI.Object
>     {
>         super();
> 
>-        this._rawCanvas = document.createElement("canvas");
>-        this._tintedCanvas = document.createElement("canvas");
>-        this._finalCanvas = document.createElement("canvas");
>-
>-        this._crosshair = document.createElement("div");
>-        this._crosshair.className = "crosshair";
>+        this._brightness = 0.5;
> 
>         this._element = document.createElement("div");
>         this._element.className = "color-wheel";
> 
>-        this._element.appendChild(this._finalCanvas);
>-        this._element.appendChild(this._crosshair);
>+        this._gradientElement = this._element.appendChild(document.createElement("div"));
>+        this._gradientElement.classList.add("gradient");
>+        this._gradientElement.addEventListener("mousedown", this);
> 
>-        this._finalCanvas.addEventListener("mousedown", this);
>+        this._crosshair = this._element.appendChild(document.createElement("div"));
>+        this._crosshair.className = "crosshair";
>     }
> 
>     // Public
>@@ -51,19 +48,11 @@ WI.ColorWheel = class ColorWheel extends WI.Object
>     {
>         this._element.style.width = this.element.style.height = `${dimension}px`;
> 
>-        this._finalCanvas.width = this._tintedCanvas.width = this._rawCanvas.width = dimension * window.devicePixelRatio;
>-        this._finalCanvas.height = this._tintedCanvas.height = this._rawCanvas.height = dimension * window.devicePixelRatio;
>-
>-        this._finalCanvas.style.width = this._finalCanvas.style.height = dimension + "px";
>-
>         this._dimension = dimension;
>-        // We shrink the radius a bit for better anti-aliasing.
>-        this._radius = dimension / 2 - 2;
> 
>         this._setCrosshairPosition(new WI.Point(dimension / 2, dimension / 2));
> 
>-        this._drawRawCanvas();
>-        this._draw();
>+        this._updateGradient();
>     }
> 
>     get element()
>@@ -79,30 +68,35 @@ WI.ColorWheel = class ColorWheel extends WI.Object
>     set brightness(brightness)
>     {
>         this._brightness = brightness;
>-        this._draw();
>+        this._updateGradient();
>     }
> 
>     get tintedColor()
>     {
>         if (this._crosshairPosition)
>-            return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, this._brightness);
>-
>-        return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);
>+            return new WI.Color(WI.Color.Format.HSL, [this._hue, this._saturation, this._brightness]);
>+        return new WI.Color(WI.Color.Format.HSLA, [0, 0, 0, 0]);
>     }
> 
>     set tintedColor(tintedColor)
>     {
>-        var data = this._tintedColorToPointAndBrightness(tintedColor);
>-        this._setCrosshairPosition(data.point);
>-        this.brightness = data.brightness;
>+        let hsl = tintedColor.hsl;
>+
>+        let cosHue = Math.cos(hsl[0] * Math.PI / 180);
>+        let sinHue = Math.sin(hsl[0] * Math.PI / 180);
>+        let center = this._dimension / 2;
>+        let x = center + (sinHue * hsl[1]);
>+        let y = center - (cosHue * hsl[1]);
>+        this._setCrosshairPosition(new WI.Point(x, y));
>+
>+        this.brightness = hsl[2];
>     }
> 
>     get rawColor()
>     {
>         if (this._crosshairPosition)
>-            return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, 1);
>-
>-        return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);
>+            return new WI.Color(WI.Color.Format.HSL, [this._hue, this._saturation, 50]);
>+        return new WI.Color(WI.Color.Format.HSLA, [0, 0, 0, 0]);
>     }
> 
>     // Protected
>@@ -124,6 +118,23 @@ WI.ColorWheel = class ColorWheel extends WI.Object
> 
>     // Private
> 
>+    get _hue()
>+    {
>+        let center = this._dimension / 2;
>+        let hue = Math.atan2(this._crosshairPosition.x - center, center - this._crosshairPosition.y) * 180 / Math.PI;
>+        if (hue < 0)
>+            hue += 360;
>+        return hue;
>+    }
>+
>+    get _saturation()
>+    {
>+        let center = this._dimension / 2;
>+        let xDis = (this._crosshairPosition.x - center) / center;
>+        let yDis = (this._crosshairPosition.y - center) / center;
>+        return Math.sqrt(Math.pow(xDis, 2) + Math.pow(yDis, 2)) * 100;
>+    }
>+
>     _handleMousedown(event)
>     {
>         window.addEventListener("mousemove", this, true);
>@@ -160,12 +171,12 @@ WI.ColorWheel = class ColorWheel extends WI.Object
>             return new WI.Point(c.x + r * Math.cos(a), c.y + r * Math.sin(a));
>         }
> 
>-        var dimension = this._dimension;
>-        var point = window.webkitConvertPointFromPageToNode(this._finalCanvas, new WebKitPoint(event.pageX, event.pageY));
>-        var center = new WI.Point(dimension / 2, dimension / 2);
>-        if (distance(point, center) > this._radius) {
>-            var angle = angleFromCenterToPoint(center, point);
>-            point = pointOnCircumference(center, this._radius, angle);
>+        let radius = this._dimension / 2;
>+        let point = window.webkitConvertPointFromPageToNode(this._gradientElement, new WebKitPoint(event.pageX, event.pageY));
>+        let center = new WI.Point(radius, radius);
>+        if (distance(point, center) > radius) {
>+            let angle = angleFromCenterToPoint(center, point);
>+            point = pointOnCircumference(center, radius, angle);
>         }
>         return point;
>     }
>@@ -186,99 +197,12 @@ WI.ColorWheel = class ColorWheel extends WI.Object
>         this._crosshair.style.webkitTransform = "translate(" + Math.round(point.x) + "px, " + Math.round(point.y) + "px)";
>     }
> 
>-    _tintedColorToPointAndBrightness(color)
>+    _updateGradient()
>     {
>-        var rgb = color.rgb;
>-        var hsv = WI.Color.rgb2hsv(rgb[0], rgb[1], rgb[2]);
>-        var cosHue = Math.cos(hsv[0] * Math.PI / 180);
>-        var sinHue = Math.sin(hsv[0] * Math.PI / 180);
>-        var center = this._dimension / 2;
>-        var x = center + (center * cosHue * hsv[1]);
>-        var y = center - (center * sinHue * hsv[1]);
>-        return {
>-            point: new WI.Point(x, y),
>-            brightness: hsv[2]
>-        };
>-    }
>+        let stops = [];
>+        for (let i = 0; i <= 360; i += 60)
>+            stops.push(`hsl(${i}, 100%, ${this._brightness}%)`);
> 
>-    _drawRawCanvas() {
>-        var ctx = this._rawCanvas.getContext("2d");
>-
>-        var dimension = this._dimension * window.devicePixelRatio;
>-
>-        ctx.fillStyle = "white";
>-        ctx.fillRect(0, 0, dimension, dimension);
>-
>-        var imageData = ctx.getImageData(0, 0, dimension, dimension);
>-        var data = imageData.data;
>-        for (var j = 0; j < dimension; ++j) {
>-            for (var i = 0; i < dimension; ++i) {
>-                var color = this._colorAtPointWithBrightness(i, j, 1);
>-                if (!color)
>-                    continue;
>-                var pos = (j * dimension + i) * 4;
>-                data[pos] = color.rgb[0];
>-                data[pos + 1] = color.rgb[1];
>-                data[pos + 2] = color.rgb[2];
>-            }
>-        }
>-        ctx.putImageData(imageData, 0, 0);
>-    }
>-
>-    _colorAtPointWithBrightness(x, y, brightness)
>-    {
>-        var center = this._dimension / 2 * window.devicePixelRatio;
>-        var xDis = x - center;
>-        var yDis = y - center;
>-        var distance = Math.sqrt(xDis * xDis + yDis * yDis);
>-
>-        if (distance - center > 0.001)
>-            return new WI.Color(WI.Color.Format.RGBA, [0, 0, 0, 0]);
>-
>-        var h = Math.atan2(y - center, center - x) * 180 / Math.PI;
>-        h = (h + 180) % 360;
>-        var v = brightness;
>-        var s = Math.max(0, distance) / center;
>-
>-        var rgb = WI.Color.hsv2rgb(h, s, v);
>-        return new WI.Color(WI.Color.Format.RGBA, [
>-            Math.round(rgb[0] * 255),
>-            Math.round(rgb[1] * 255),
>-            Math.round(rgb[2] * 255),
>-            1
>-        ]);
>-    }
>-
>-    _drawTintedCanvas()
>-    {
>-        var ctx = this._tintedCanvas.getContext("2d");
>-        var dimension = this._dimension * window.devicePixelRatio;
>-
>-        ctx.save();
>-        ctx.drawImage(this._rawCanvas, 0, 0, dimension, dimension);
>-        if (this._brightness !== 1) {
>-            ctx.globalAlpha = 1 - this._brightness;
>-            ctx.fillStyle = "black";
>-            ctx.fillRect(0, 0, dimension, dimension);
>-        }
>-        ctx.restore();
>-    }
>-
>-    _draw()
>-    {
>-        this._drawTintedCanvas();
>-
>-        var ctx = this._finalCanvas.getContext("2d");
>-        var dimension = this._dimension * window.devicePixelRatio;
>-        var radius = this._radius * window.devicePixelRatio;
>-
>-        ctx.save();
>-        ctx.clearRect(0, 0, dimension, dimension);
>-        ctx.beginPath();
>-        ctx.arc(dimension / 2, dimension / 2, radius + 1, 0, Math.PI * 2, true);
>-        ctx.closePath();
>-        ctx.clip();
>-        ctx.drawImage(this._tintedCanvas, 0, 0, dimension, dimension);
>-        ctx.restore();
>+        this._gradientElement.style.setProperty("background-image", `conic-gradient(${stops.join(",")})`);
>     }
> };

Actions: View | Formatted Diff | Diff

Attachments on bug 189485: 349338 | 349339 | 349364 | 349365 | 353115 | 353410