Changeset 213763 in webkit

Timestamp:

Mar 11, 2017 5:07:32 PM (7 years ago)

Author:

Matt Baker

Message:

Web Inspector: RTL: fix broken font content view
​https://bugs.webkit.org/show_bug.cgi?id=169513

Reviewed by Brian Burg.

Add RTL support to the Font content view.

• UserInterface/Views/FontResourceContentView.css:

(.content-view.resource.font .preview > .line > .metric):
(body[dir=ltr] .content-view.resource.font .preview > .line > .metric):
(body[dir=rtl] .content-view.resource.font .preview > .line > .metric):
Compensate for the flipped z-order of the content and metric elements in
RTL by pushing metrics below the content.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/FontResourceContentView.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-03-11  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: RTL: fix broken font content view
+        https://bugs.webkit.org/show_bug.cgi?id=169513
+
+        Reviewed by Brian Burg.
+
+        Add RTL support to the Font content view.
+
+        * UserInterface/Views/FontResourceContentView.css:
+        (.content-view.resource.font .preview > .line > .metric):
+        (body[dir=ltr] .content-view.resource.font .preview > .line > .metric):
+        (body[dir=rtl] .content-view.resource.font .preview > .line > .metric):
+        Compensate for the flipped z-order of the content and metric elements in
+        RTL by pushing metrics below the content.
+
 2017-03-10  Matt Baker  <mattbaker@apple.com>
 

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

@@ -72 +72 @@
     height: 1px;
 
-    margin-right: -100%; /* Causes this element to be zero width and draw behind the text. */
+    --margin-end: -100%; /* Causes this element to be zero width and draw behind the text. */
+}
+
+body[dir=ltr] .content-view.resource.font .preview > .line > .metric {
+    margin-right: var(--margin-end);
+}
+
+body[dir=rtl] .content-view.resource.font .preview > .line > .metric {
+    margin-left: var(--margin-end);
+    position: relative;
+    z-index: -1;
 }