Web Inspector: Editing transparent color shows incorrect opacity slider
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 18 Feb 2014 21:41:11 +0000 (21:41 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 18 Feb 2014 21:41:11 +0000 (21:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=128975

Reviewed by Joseph Pecoraro.

The opacity slider should show a range of colors from transparent to the full opacity of the tinted color.

* UserInterface/ColorPicker.js:
(WebInspector.ColorPicker.prototype._updateSliders):

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

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

index 27b1492..33df80a 100644 (file)
@@ -1,3 +1,15 @@
+2014-02-18  Antoine Quint  <graouts@webkit.org>
+
+        Web Inspector: Editing transparent color shows incorrect opacity slider
+        https://bugs.webkit.org/show_bug.cgi?id=128975
+
+        Reviewed by Joseph Pecoraro.
+
+        The opacity slider should show a range of colors from transparent to the full opacity of the tinted color.
+
+        * UserInterface/ColorPicker.js:
+        (WebInspector.ColorPicker.prototype._updateSliders):
+
 2014-02-18  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: shift-clicking #fff swatch results in bad rgb value
index fc8059c..fa50e05 100644 (file)
@@ -135,10 +135,11 @@ WebInspector.ColorPicker.prototype = {
 
     _updateSliders: function(rawColor, tintedColor)
     {
-        var rgba = this._colorWheel.tintedColor.rgb.concat(0);
-        var transparent = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgba).toString();
+        var rgb = this._colorWheel.tintedColor.rgb;
+        var opaque = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgb.concat(1)).toString();
+        var transparent = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgb.concat(0)).toString();
 
-        this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + tintedColor + "), " + this._opacityPattern;
+        this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + opaque + "), " + this._opacityPattern;
         this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
     }
 };