Web Inspector: RTL: disclosure triangles should be flipped and aligned right
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 30 Nov 2018 00:39:02 +0000 (00:39 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 30 Nov 2018 00:39:02 +0000 (00:39 +0000)
https://bugs.webkit.org/show_bug.cgi?id=192089
<rdar://problem/46316753>

Reviewed by Devin Rousso.

* UserInterface/Views/ComputedStyleSection.css:
(.computed-style-section .computed-property-item .disclosure-button):
(body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button):

* UserInterface/Views/ConsoleMessageView.css:
(.console-message.expandable .console-top-level-message::before):
(body[dir=rtl] .console-message.expandable .console-top-level-message::before):

* UserInterface/Views/ErrorObjectView.css:
(.error-object > .formatted-error::before):
(body[dir=rtl] .error-object > .formatted-error::before):
(.error-object .content):

* UserInterface/Views/LogContentView.css:
(.console-group-title::before):
(body[dir=ltr] .console-group-title::before):
(body[dir=rtl] .console-group-title::before):

* UserInterface/Views/ObjectTreeView.css:
(body[dir=rtl] .object-tree > :matches(.title, .object-preview)::before):

* UserInterface/Views/TypeTreeElement.css:
(body[dir=rtl] .item.type-tree-element.parent > .disclosure-button):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css
Source/WebInspectorUI/UserInterface/Views/LogContentView.css
Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.css

index d7e6e9c..a8e1de9 100644 (file)
@@ -1,3 +1,35 @@
+2018-11-29  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: RTL: disclosure triangles should be flipped and aligned right
+        https://bugs.webkit.org/show_bug.cgi?id=192089
+        <rdar://problem/46316753>
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/ComputedStyleSection.css:
+        (.computed-style-section .computed-property-item .disclosure-button):
+        (body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button):
+
+        * UserInterface/Views/ConsoleMessageView.css:
+        (.console-message.expandable .console-top-level-message::before):
+        (body[dir=rtl] .console-message.expandable .console-top-level-message::before):
+
+        * UserInterface/Views/ErrorObjectView.css:
+        (.error-object > .formatted-error::before):
+        (body[dir=rtl] .error-object > .formatted-error::before):
+        (.error-object .content):
+
+        * UserInterface/Views/LogContentView.css:
+        (.console-group-title::before):
+        (body[dir=ltr] .console-group-title::before):
+        (body[dir=rtl] .console-group-title::before):
+
+        * UserInterface/Views/ObjectTreeView.css:
+        (body[dir=rtl] .object-tree > :matches(.title, .object-preview)::before):
+
+        * UserInterface/Views/TypeTreeElement.css:
+        (body[dir=rtl] .item.type-tree-element.parent > .disclosure-button):
+
 2018-11-28  Dean Jackson  <dino@apple.com>
 
         [ES Modules] Allow .mjs content when loaded from file://
index a895766..bc7729c 100644 (file)
@@ -54,7 +54,7 @@
     display: inline-block;
     width: var(--disclosure-button-size);
     height: var(--disclosure-button-size);
-    margin-left: calc(-1 * var(--disclosure-button-size));
+    -webkit-margin-start: calc(-1 * var(--disclosure-button-size));
     border: 0;
     background-color: transparent;
     background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
     -webkit-appearance: none;
 }
 
+body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button {
+    transform: scaleX(-1);
+}
+
 .computed-style-section .computed-property-item .property-traces {
     display: none;
     width: 100%;
index 62eade6..27282ea 100644 (file)
@@ -76,7 +76,7 @@
 
     vertical-align: baseline;
     margin-bottom: -2px;
-    margin-right: 2px;
+    -webkit-margin-end: 2px;
 
     width: 13px;
     height: 13px;
     content: "";
 }
 
+body[dir=rtl] .console-message.expandable .console-top-level-message::before {
+    transform: scaleX(-1);
+}
+
 .console-message.expandable.expanded .console-top-level-message::before {
     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
 }
index bec920f..717513f 100644 (file)
@@ -31,7 +31,7 @@
     display: inline-block;
     vertical-align: baseline;
     margin-bottom: -2px;
-    margin-right: 2px;
+    -webkit-margin-end: 2px;
     width: 13px;
     height: 13px;
     background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
     content: "";
 }
 
+body[dir=rtl] .error-object > .formatted-error::before {
+    transform: scaleX(-1);
+}
+
 .error-object.expanded > .formatted-error::before {
     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
 }
@@ -58,5 +62,5 @@
 }
 
 .error-object .content {
-    padding-left: 16px
+    -webkit-padding-start: 16px
 }
index 174b353..d3d5368 100644 (file)
@@ -160,11 +160,19 @@ body[dir=rtl] .log-scope-bar > li.unread::before {
     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
     background-size: 13px 13px;
     top: 4px;
-    left: 4px;
     width: 13px;
     height: 13px;
 }
 
+body[dir=ltr] .console-group-title::before {
+    left: 4px;
+}
+
+body[dir=rtl] .console-group-title::before {
+    transform: scaleX(-1);
+    right: 4px;
+}
+
 .console-group.collapsed .console-group-title::before {
     background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
 }
index b59d624..7c3fb35 100644 (file)
     content: "";
 }
 
+body[dir=rtl] .object-tree > :matches(.title, .object-preview)::before {
+    transform: scaleX(-1);
+}
+
 .object-tree:not(.lossless-preview) > :matches(.title, .object-preview) {
     margin-left: 0;
 }
index 42a4b3c..d1f48d1 100644 (file)
     background-size: 13px 13px;
 }
 
+body[dir=rtl] .item.type-tree-element.parent > .disclosure-button {
+    transform: scaleX(-1);
+}
+
 .item.type-tree-element.parent.expanded > .disclosure-button {
     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
 }