Changeset 215902 in webkit

Timestamp:

Apr 27, 2017 4:09:16 PM (7 years ago)

Author:

BJ Burg

Message:

Web Inspector: RTL: layout issues in Open Resource Dialog
​https://bugs.webkit.org/show_bug.cgi?id=170551

Reviewed by Matt Baker.

We need to flip the cancel and search icons, and flip padding
in the tree outline that contains search results.

I am still not happy with the title/subtitle ordering
(i.e., the domain vs the resource name), but this issue will
be solved primarily in the navigation sidebar first and then
adjusted for Open Resource Dialog if those changes are not
sufficient.

• UserInterface/Views/OpenResourceDialog.css:

(.open-resource-dialog > .field):
(body[dir=ltr] .open-resource-dialog > .field):
(body[dir=rtl] .open-resource-dialog > .field):
(.open-resource-dialog > .field::before):
(body[dir=ltr] .open-resource-dialog > .field::before):
(body[dir=rtl] .open-resource-dialog > .field::before):
(.open-resource-dialog > .field > input):
(body[dir=ltr] .open-resource-dialog > .field > input):
(body[dir=rtl] .open-resource-dialog > .field > input):
(.open-resource-dialog > .field > img):
(body[dir=ltr] .open-resource-dialog > .field > img):
(body[dir=rtl] .open-resource-dialog > .field > img):
(.open-resource-dialog > .tree-outline .item):
(body[dir=ltr] .open-resource-dialog > .tree-outline .item):
(body[dir=rtl] .open-resource-dialog > .tree-outline .item):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/OpenResourceDialog.css (modified) (6 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-04-27  Brian Burg  <bburg@apple.com>
+
+        Web Inspector: RTL: layout issues in Open Resource Dialog
+        https://bugs.webkit.org/show_bug.cgi?id=170551
+
+        Reviewed by Matt Baker.
+
+        We need to flip the cancel and search icons, and flip padding
+        in the tree outline that contains search results.
+
+        I am still not happy with the title/subtitle ordering
+        (i.e., the domain vs the resource name), but this issue will
+        be solved primarily in the navigation sidebar first and then
+        adjusted for Open Resource Dialog if those changes are not
+        sufficient.
+
+        * UserInterface/Views/OpenResourceDialog.css:
+        (.open-resource-dialog > .field):
+        (body[dir=ltr] .open-resource-dialog > .field):
+        (body[dir=rtl] .open-resource-dialog > .field):
+        (.open-resource-dialog > .field::before):
+        (body[dir=ltr] .open-resource-dialog > .field::before):
+        (body[dir=rtl] .open-resource-dialog > .field::before):
+        (.open-resource-dialog > .field > input):
+        (body[dir=ltr] .open-resource-dialog > .field > input):
+        (body[dir=rtl] .open-resource-dialog > .field > input):
+        (.open-resource-dialog > .field > img):
+        (body[dir=ltr] .open-resource-dialog > .field > img):
+        (body[dir=rtl] .open-resource-dialog > .field > img):
+        (.open-resource-dialog > .tree-outline .item):
+        (body[dir=ltr] .open-resource-dialog > .tree-outline .item):
+        (body[dir=rtl] .open-resource-dialog > .tree-outline .item):
+
 2017-04-27  Brian Burg  <bburg@apple.com>
 

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

@@ -1 +1 @@
 /*
- * Copyright (C) 2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2016-2017 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -49 +49 @@
 
 .open-resource-dialog > .field {
-    margin: 8px 3px 8px 32px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+
+    --open-resource-dialog-field-margin-start: 32px;
+    --open-resource-dialog-field-margin-end: 3px;
+}
+
+body[dir=ltr] .open-resource-dialog > .field {
+    margin-left: var(--open-resource-dialog-field-margin-start);
+    margin-right: var(--open-resource-dialog-field-margin-end);
+}
+
+body[dir=rtl] .open-resource-dialog > .field {
+    margin-left: var(--open-resource-dialog-field-margin-end);
+    margin-right: var(--open-resource-dialog-field-margin-start);
 }
 
 .open-resource-dialog > .field::before {
     position: absolute;
-    left: 6px;
     top: 6px;
     width: 30px;
     opacity: 0.5;
     content: url(../Images/Search.svg);
+
+    --open-resource-dialog-search-icon-offset-start: 6px;
+}
+
+body[dir=ltr] .open-resource-dialog > .field::before {
+    left: var(--open-resource-dialog-search-icon-offset-start);
+}
+
+body[dir=rtl] .open-resource-dialog > .field::before {
+    right: var(--open-resource-dialog-search-icon-offset-start);
 }
 
@@ -68 +91 @@
     font-size: 20px;
     color: hsl(0, 0%, 4%);
-    padding: 0 30px 1px 7px;
+    padding-top: 0px;
+    padding-bottom: 1px;
     outline: none;
     -webkit-appearance: none;
+
+    --open-resource-dialog-input-padding-start: 7px;
+    --open-resource-dialog-input-padding-end: 30px;
+}
+
+body[dir=ltr] .open-resource-dialog > .field > input {
+    padding-left: var(--open-resource-dialog-input-padding-start);
+    padding-right: var(--open-resource-dialog-input-padding-end);
+}
+
+body[dir=rtl] .open-resource-dialog > .field > input {
+    padding-left: var(--open-resource-dialog-input-padding-end);
+    padding-right: var(--open-resource-dialog-input-padding-start);
 }
 
@@ -80 +117 @@
     position: absolute;
     top: 15px;
-    right: 10px;
     padding: 2px;
     border-radius: 9px;
@@ -88 +124 @@
     display: none;
     content: url(../Images/CloseWhite.svg);
+
+    --open-resource-dialog-close-icon-offset-end: 10px;
+}
+
+body[dir=ltr] .open-resource-dialog > .field > img {
+    right: var(--open-resource-dialog-close-icon-offset-end);
+}
+
+body[dir=rtl] .open-resource-dialog > .field > img {
+    left: var(--open-resource-dialog-close-icon-offset-end);
 }
 
@@ -112 +158 @@
 
 .open-resource-dialog > .tree-outline .item {
-    padding-left: 10px;
     border: none;
+    flex: none;
+
+    --open-resource-dialog-tree-outline-item-padding-start: 10px;
+}
+
+body[dir=ltr] .open-resource-dialog > .tree-outline .item {
+    padding-left: var(--open-resource-dialog-tree-outline-item-padding-start);
+}
+
+body[dir=rtl] .open-resource-dialog > .tree-outline .item {
+    padding-right: var(--open-resource-dialog-tree-outline-item-padding-start);
 }