Changeset 212838 in webkit

Timestamp:

Feb 22, 2017, 9:56:52 AM (10 years ago)

Author:

BJ Burg

Message:

Web Inspector: RTL: Settings tab labels need adjustment
​https://bugs.webkit.org/show_bug.cgi?id=168497

Reviewed by Matt Baker.

Flip margins. Use 'text-align: end' instead of manually choosing
right and left based on body[dir].

• UserInterface/Views/SettingsTabContentView.css:

(.content-view.settings > .setting-container > .setting-name):
(body[dir=ltr] .content-view.settings > .setting-container > .setting-name):
(body[dir=rtl] .content-view.settings > .setting-container > .setting-name):
(.content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"]):
(body[dir=ltr] .content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"]):
(body[dir=rtl] .content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"]):
(.content-view.settings > .setting-container > .setting-value-controller input[type="number"]):
(body[dir=ltr] .content-view.settings > .setting-container > .setting-value-controller input[type="number"]):
(body[dir=rtl] .content-view.settings > .setting-container > .setting-value-controller input[type="number"]):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/SettingsTabContentView.css (modified) (3 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-02-22  Brian Burg  <bburg@apple.com>
+
+        Web Inspector: RTL: Settings tab labels need adjustment
+        https://bugs.webkit.org/show_bug.cgi?id=168497
+
+        Reviewed by Matt Baker.
+
+        Flip margins. Use 'text-align: end' instead of manually choosing
+        right and left based on body[dir].
+
+        * UserInterface/Views/SettingsTabContentView.css:
+        (.content-view.settings > .setting-container > .setting-name):
+        (body[dir=ltr] .content-view.settings > .setting-container > .setting-name):
+        (body[dir=rtl] .content-view.settings > .setting-container > .setting-name):
+        (.content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"]):
+        (body[dir=ltr] .content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"]):
+        (body[dir=rtl] .content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"]):
+        (.content-view.settings > .setting-container > .setting-value-controller input[type="number"]):
+        (body[dir=ltr] .content-view.settings > .setting-container > .setting-value-controller input[type="number"]):
+        (body[dir=rtl] .content-view.settings > .setting-container > .setting-value-controller input[type="number"]):
+
 2017-02-21  Devin Rousso  <dcrousso+webkit@gmail.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css

@@ -46 +46 @@
 .content-view.settings > .setting-container > .setting-name {
     width: 50%;
-    margin-right: 6px;
-    text-align: right;
+    text-align: end;
+
+    --setting-name-margin-end: 6px;
+}
+
+body[dir=ltr] .content-view.settings > .setting-container > .setting-name {
+    margin-right: var(--setting-name-margin-end);
+}
+
+body[dir=rtl] .content-view.settings > .setting-container > .setting-name {
+    margin-left: var(--setting-name-margin-end);
 }
 
@@ -62 +71 @@
 .content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"] {
     font-size: 16px;
-    margin-right: 4px;
+
+    --settings-input-checkbox-margin-end: 4px;
+}
+
+body[dir=ltr] .content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"] {
+    margin-right: var(--settings-input-checkbox-margin-end);
+}
+
+body[dir=rtl] .content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"] {
+    margin-left: var(--settings-input-checkbox-margin-end);
 }
 
@@ -79 +97 @@
 .content-view.settings > .setting-container > .setting-value-controller input[type="number"] {
     max-width: 48px;
-    margin: 0 5px 0 2px;
-    text-align: right;
+    margin: 0;
+    text-align: end;
+
+    --settings-input-number-margin-start: 2px;
+    --settings-input-number-margin-end: 5px;
 }
+
+body[dir=ltr] .content-view.settings > .setting-container > .setting-value-controller input[type="number"] {
+    margin-left: var(--settings-input-number-margin-start);
+    margin-right: var(--settings-input-number-margin-end);
+}
+
+body[dir=rtl] .content-view.settings > .setting-container > .setting-value-controller input[type="number"] {
+    margin-left: var(--settings-input-number-margin-end);
+    margin-right: var(--settings-input-number-margin-start);
+}