Web Inspector: RTL: add support for Color Picker
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 25 Feb 2017 09:23:27 +0000 (09:23 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 25 Feb 2017 09:23:27 +0000 (09:23 +0000)
https://bugs.webkit.org/show_bug.cgi?id=168853

Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2017-02-25
Reviewed by Brian Burg.

* UserInterface/Views/ColorPicker.css:
(.color-picker):
(body[dir=ltr] .color-picker > .brightness):
(body[dir=rtl] .color-picker > .brightness):
(body[dir=ltr] .color-picker > .opacity):
(body[dir=rtl] .color-picker > .opacity):
(.color-picker > .brightness): Deleted.
(.color-picker > .opacity): Deleted.

* UserInterface/Views/ColorWheel.js:
(WebInspector.ColorWheel.prototype.set dimension):
Set the CSS width and height style of the container element to ensure that the element only
takes up the space it needs.

* UserInterface/Views/Slider.css:
(.slider):
* UserInterface/Views/Variables.css:
(:root):
Add `--slider-height` CSS variable for convenience.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
Source/WebInspectorUI/UserInterface/Views/ColorWheel.js
Source/WebInspectorUI/UserInterface/Views/Slider.css
Source/WebInspectorUI/UserInterface/Views/Variables.css

index 9c17e16..74424b5 100644 (file)
@@ -1,5 +1,32 @@
 2017-02-25  Devin Rousso  <dcrousso+webkit@gmail.com>
 
+        Web Inspector: RTL: add support for Color Picker
+        https://bugs.webkit.org/show_bug.cgi?id=168853
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/ColorPicker.css:
+        (.color-picker):
+        (body[dir=ltr] .color-picker > .brightness):
+        (body[dir=rtl] .color-picker > .brightness):
+        (body[dir=ltr] .color-picker > .opacity):
+        (body[dir=rtl] .color-picker > .opacity):
+        (.color-picker > .brightness): Deleted.
+        (.color-picker > .opacity): Deleted.
+
+        * UserInterface/Views/ColorWheel.js:
+        (WebInspector.ColorWheel.prototype.set dimension):
+        Set the CSS width and height style of the container element to ensure that the element only
+        takes up the space it needs.
+
+        * UserInterface/Views/Slider.css:
+        (.slider):
+        * UserInterface/Views/Variables.css:
+        (:root):
+        Add `--slider-height` CSS variable for convenience.
+
+2017-02-25  Devin Rousso  <dcrousso+webkit@gmail.com>
+
         Web Inspector: RTL: add support for Bezier/Spring editor
         https://bugs.webkit.org/show_bug.cgi?id=168854
 
index bf30026..9dd0641 100644 (file)
 
 .color-picker {
     position: relative;
-    width: 256px;
+    width: var(--color-picker-width);
     height: 236px;
     padding: 5px;
+
+    --color-picker-width: 256px;
+    --color-picker-brightness-offset-start: 41px;
+    --color-picker-opacity-offset-start: 18px;
 }
 
 .color-picker.hide-inputs {
     top: 0;
 }
 
-.color-picker > .brightness {
-    left: 215px;
+body[dir=ltr] .color-picker > .brightness {
+    left: calc(var(--color-picker-width) - var(--color-picker-brightness-offset-start));
+}
+
+body[dir=rtl] .color-picker > .brightness {
+    left: calc(var(--color-picker-brightness-offset-start) - var(--slider-height));
+}
+
+body[dir=ltr] .color-picker > .opacity {
+    left: calc(var(--color-picker-width) - var(--color-picker-opacity-offset-start));
 }
 
-.color-picker > .opacity {
-    left: 238px;
+body[dir=rtl] .color-picker > .opacity {
+    left: calc(var(--color-picker-opacity-offset-start) - var(--slider-height));
 }
 
 .color-picker > .color-inputs {
index d53d9f5..ed73fd3 100644 (file)
@@ -49,6 +49,8 @@ WebInspector.ColorWheel = class ColorWheel extends WebInspector.Object
 
     set dimension(dimension)
     {
+        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;
 
index ca3b6ef..7eaa046 100644 (file)
@@ -25,7 +25,7 @@
 
 .slider {
     position: absolute;
-    height: 11px;
+    height: var(--slider-height);
     border: 1px solid hsl(0, 0%, 75%);
 }
 
index 6ddaf5e..2ea5d8e 100644 (file)
@@ -84,6 +84,8 @@
     --toolbar-height: 36px;
     --tab-bar-height: 24px;
     --navigation-bar-height: 29px;
+
+    --slider-height: 11px;
 }
 
 body.window-inactive {