[webkit-changes] [164117] trunk/Source/WebInspectorUI

Fri, 14 Feb 2014 12:29:25 -0800

Title: [164117] trunk/Source/WebInspectorUI
Revision
164117
Author
grao...@webkit.org
Date
2014-02-14 12:34:06 -0800 (Fri, 14 Feb 2014)

Log Message

Web Inspector: color wheel should support Retina displays
https://bugs.webkit.org/show_bug.cgi?id=124355

Reviewed by Timothy Hatcher.

Take into account the devicePixelRatio in order to draw the color wheel
with as many colors as we can draw with the current DPI and to correctly
convert from page coordinates to canvas coordinates when dealing with
mouse events.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (164116 => 164117)


--- trunk/Source/WebInspectorUI/ChangeLog	2014-02-14 20:28:44 UTC (rev 164116)
+++ trunk/Source/WebInspectorUI/ChangeLog	2014-02-14 20:34:06 UTC (rev 164117)
@@ -1,3 +1,24 @@
+2014-02-14  Antoine Quint  <grao...@webkit.org>
+
+        Web Inspector: color wheel should support Retina displays
+        https://bugs.webkit.org/show_bug.cgi?id=124355
+
+        Reviewed by Timothy Hatcher.
+
+        Take into account the devicePixelRatio in order to draw the color wheel
+        with as many colors as we can draw with the current DPI and to correctly
+        convert from page coordinates to canvas coordinates when dealing with
+        mouse events.
+
+        * UserInterface/ColorWheel.js:
+        (WebInspector.ColorWheel.prototype.set dimension):
+        (WebInspector.ColorWheel.prototype.get tintedColor):
+        (WebInspector.ColorWheel.prototype.get rawColor):
+        (WebInspector.ColorWheel.prototype._drawRawCanvas):
+        (WebInspector.ColorWheel.prototype._colorAtPointWithBrightness):
+        (WebInspector.ColorWheel.prototype._drawTintedCanvas):
+        (WebInspector.ColorWheel.prototype._draw):
+
 2014-02-13  Brian Burg  <bb...@apple.com>
 
         Web Inspector: DataGrid should support editing tables with arbitrary columns

Modified: trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js (164116 => 164117)


--- trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js	2014-02-14 20:28:44 UTC (rev 164116)
+++ trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js	2014-02-14 20:34:06 UTC (rev 164117)
@@ -51,9 +51,11 @@
 
     set dimension(dimension)
     {
-        this._finalCanvas.width = this._tintedCanvas.width = this._rawCanvas.width = dimension;
-        this._finalCanvas.height = this._tintedCanvas.height = this._rawCanvas.height = dimension;
+        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;
@@ -83,7 +85,7 @@
     get tintedColor()
     {
         if (this._crosshairPosition)
-            return this._colorAtPointWithBrightness(this._crosshairPosition.x, this._crosshairPosition.y, this._brightness);
+            return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, this._brightness);
 
         return new WebInspector.Color(WebInspector.Color.Format.RGBA, [0, 0, 0, 0]);
     },
@@ -98,7 +100,7 @@
     get rawColor()
     {
         if (this._crosshairPosition)
-            return this._colorAtPointWithBrightness(this._crosshairPosition.x, this._crosshairPosition.y, 1);
+            return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, 1);
 
         return new WebInspector.Color(WebInspector.Color.Format.RGBA, [0, 0, 0, 0]);
     },
@@ -202,7 +204,7 @@
     _drawRawCanvas: function() {
         var ctx = this._rawCanvas.getContext("2d");
 
-        var dimension = this._dimension;
+        var dimension = this._dimension * window.devicePixelRatio;
         var center = dimension / 2;
 
         ctx.fillStyle = "white";
@@ -226,7 +228,7 @@
 
     _colorAtPointWithBrightness: function(x, y, brightness)
     {
-        var center = this._dimension / 2;
+        var center = this._dimension / 2 * window.devicePixelRatio;
         var xDis = x - center;
         var yDis = y - center;
         var distance = Math.sqrt(xDis * xDis + yDis * yDis);
@@ -251,7 +253,7 @@
     _drawTintedCanvas: function()
     {
         var ctx = this._tintedCanvas.getContext("2d");
-        var dimension = this._dimension;
+        var dimension = this._dimension * window.devicePixelRatio;
 
         ctx.save();
         ctx.drawImage(this._rawCanvas, 0, 0, dimension, dimension);
@@ -268,12 +270,13 @@
         this._drawTintedCanvas();
 
         var ctx = this._finalCanvas.getContext("2d");
-        var dimension = this._dimension;
+        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, this._radius + 1, 0, Math.PI * 2, true); 
+        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);

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to