Title: [215902] trunk/Source/WebInspectorUI
- Revision
- 215902
- Author
- [email protected]
- Date
- 2017-04-27 16:09:16 -0700 (Thu, 27 Apr 2017)
Log 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):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (215901 => 215902)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-04-27 22:58:44 UTC (rev 215901)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-04-27 23:09:16 UTC (rev 215902)
@@ -1,5 +1,38 @@
2017-04-27 Brian Burg <[email protected]>
+ 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 <[email protected]>
+
Web Inspector: fix tooltip wording for Reload button
https://bugs.webkit.org/show_bug.cgi?id=171073
<rdar://problem/31378524>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css (215901 => 215902)
--- trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css 2017-04-27 22:58:44 UTC (rev 215901)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css 2017-04-27 23:09:16 UTC (rev 215902)
@@ -1,5 +1,5 @@
/*
- * 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
* modification, are permitted provided that the following conditions
@@ -48,18 +48,41 @@
}
.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);
+}
+
.open-resource-dialog > .field > input {
display: block;
width: 100%;
@@ -67,11 +90,25 @@
background-color: transparent;
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);
+}
+
.open-resource-dialog > .field > input::placeholder {
color: hsl(0, 0%, 0%, 0.25);
}
@@ -79,7 +116,6 @@
.open-resource-dialog > .field > img {
position: absolute;
top: 15px;
- right: 10px;
padding: 2px;
border-radius: 9px;
width: 15px;
@@ -87,8 +123,18 @@
background-color: hsl(0, 0%, 60%);
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);
+}
+
.open-resource-dialog > .field > img:active {
background-color: hsl(0, 0%, 54%);
}
@@ -111,10 +157,20 @@
}
.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);
+}
+
.open-resource-dialog > .tree-outline .item.selected {
color: white;
background-color: hsl(209, 100%, 49%);
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
