Changeset 214906 in webkit

Timestamp:

Apr 4, 2017 3:23:46 PM (7 years ago)

Author:

BJ Burg

Message:

Web Inspector: RTL: layout issues in Type Profiler popovers
​https://bugs.webkit.org/show_bug.cgi?id=170467

Reviewed by Timothy Hatcher.

Flip some margins and padding. Remove the -1px leading margin for
the prototype disclosure button, as it is unnecessary and looks
(more) wrong when in RTL.

• UserInterface/Views/TypeTreeElement.css:

(.item.type-tree-element > .disclosure-button):
(.item.type-tree-element.prototype):
(body[dir=ltr] .item.type-tree-element.prototype):
(body[dir=rtl] .item.type-tree-element.prototype):

• UserInterface/Views/TypeTreeView.css:

(.tree-outline.type):
(body[dir=ltr] .tree-outline.type):
(body[dir=rtl] .tree-outline.type):
(.tree-outline.type li .empty-message):
(body[dir=ltr] .tree-outline.type li .empty-message):
(body[dir=rtl] .tree-outline.type li .empty-message):

Location:

trunk/Source/WebInspectorUI

Files:

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

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-04-04  Brian Burg  <bburg@apple.com>
+
+        Web Inspector: RTL: layout issues in Type Profiler popovers
+        https://bugs.webkit.org/show_bug.cgi?id=170467
+
+        Reviewed by Timothy Hatcher.
+
+        Flip some margins and padding. Remove the -1px leading margin for
+        the prototype disclosure button, as it is unnecessary and looks
+        (more) wrong when in RTL.
+
+        * UserInterface/Views/TypeTreeElement.css:
+        (.item.type-tree-element > .disclosure-button):
+        (.item.type-tree-element.prototype):
+        (body[dir=ltr] .item.type-tree-element.prototype):
+        (body[dir=rtl] .item.type-tree-element.prototype):
+        * UserInterface/Views/TypeTreeView.css:
+        (.tree-outline.type):
+        (body[dir=ltr] .tree-outline.type):
+        (body[dir=rtl] .tree-outline.type):
+        (.tree-outline.type li .empty-message):
+        (body[dir=ltr] .tree-outline.type li .empty-message):
+        (body[dir=rtl] .tree-outline.type li .empty-message):
+
 2017-04-04  Joseph Pecoraro  <pecoraro@apple.com>
 

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

@@ -1 +1 @@
 /*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2017 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -47 +47 @@
     width: 15px;
 
-    margin-left: -1px;
     border: 0;
     background: none;
@@ -76 +75 @@
     border-radius: 3px;
 
-    padding: 0 10px 1px 0;
-    margin: 3px 0 2px -1px;
+    padding-bottom: 1px;
+    margin-top: 3px;
+    margin-bottom: 2px;
+
+    --type-tree-element-prototype-padding-end: 10px;
+    --type-tree-element-prototype-margin-start: -1px;
+}
+
+body[dir=ltr] .item.type-tree-element.prototype {
+    padding-right: var(--type-tree-element-prototype-padding-end);
+    margin-left: var(--type-tree-element-prototype-margin-start);
+}
+
+body[dir=rtl] .item.type-tree-element.prototype {
+    padding-left: var(--type-tree-element-prototype-padding-end);
+    margin-right: var(--type-tree-element-prototype-margin-start);
 }
 

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

@@ -1 +1 @@
 /*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2017 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -35 +35 @@
 .tree-outline.type {
     margin: 0;
-    padding: 0 6px 2px;
+    padding-bottom: 2px;
+    min-height: 18px;
+
     list-style: none;
-    min-height: 18px;
     outline: none;
+
+    --type-tree-outline-padding-end: 6px;
+}
+
+body[dir=ltr] .tree-outline.type {
+    padding-right: var(--type-tree-outline-padding-end);
+}
+
+body[dir=rtl] .tree-outline.type {
+    padding-left: var(--type-tree-outline-padding-end);
 }
 
@@ -63 +74 @@
 .tree-outline.type li .empty-message {
     color: hsl(0, 0%, 60%);
-    margin-left: 13px;
+
+    --type-tree-outline-empty-message-margin-start: 13px;
 }
+
+body[dir=ltr] .tree-outline.type li .empty-message {
+    margin-left: var(--type-tree-outline-empty-message-margin-start);
+}
+
+body[dir=rtl] .tree-outline.type li .empty-message {
+    margin-right: var(--type-tree-outline-empty-message-margin-start);
+}