Title: [248991] trunk/Source/WebInspectorUI
- Revision
- 248991
- Author
- nvasil...@apple.com
- Date
- 2019-08-21 19:33:40 -0700 (Wed, 21 Aug 2019)
Log Message
Web Inspector: RTL: DOM outline in Elements tab should be LTR
https://bugs.webkit.org/show_bug.cgi?id=200601
Reviewed by Timothy Hatcher.
Make DOM outlines in Console and Elements tab always LTR,
and unsure that Left and Right arrow keys continue working correctly.
* UserInterface/Base/Main.js:
(WI.resolveLayoutDirectionForElement): Added.
The existing WI.resolvedLayoutDirection function returns the value of the root DOM element.
The newly added resolveLayoutDirectionForElement function returns the correct value for any element,
including elements with `dir=ltr` inside of `<body dir=rtl>`.
* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded):
(.tree-outline.dom li:not(.editing)):
(.tree-outline.dom li.editing):
(.tree-outline.dom li .pseudo-class-indicator):
(.tree-outline.dom.single-node li):
(.tree-outline.dom li.parent):
(.tree-outline.dom li .html-tag.close):
(.tree-outline.dom li.parent::before):
(.tree-outline.dom li.parent.shadow::after):
Remove RTL logic.
* UserInterface/Views/DOMTreeOutline.js:
* UserInterface/Views/TreeOutline.js:
(WI.TreeOutline.prototype._treeKeyDown):
Make Left and Right arrow keys work correctly for LTR DOM outlines inside of the global RTL.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (248990 => 248991)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-08-22 01:49:48 UTC (rev 248990)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-08-22 02:33:40 UTC (rev 248991)
@@ -1,3 +1,36 @@
+2019-08-21 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: RTL: DOM outline in Elements tab should be LTR
+ https://bugs.webkit.org/show_bug.cgi?id=200601
+
+ Reviewed by Timothy Hatcher.
+
+ Make DOM outlines in Console and Elements tab always LTR,
+ and unsure that Left and Right arrow keys continue working correctly.
+
+ * UserInterface/Base/Main.js:
+ (WI.resolveLayoutDirectionForElement): Added.
+ The existing WI.resolvedLayoutDirection function returns the value of the root DOM element.
+ The newly added resolveLayoutDirectionForElement function returns the correct value for any element,
+ including elements with `dir=ltr` inside of `<body dir=rtl>`.
+
+ * UserInterface/Views/DOMTreeOutline.css:
+ (.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded):
+ (.tree-outline.dom li:not(.editing)):
+ (.tree-outline.dom li.editing):
+ (.tree-outline.dom li .pseudo-class-indicator):
+ (.tree-outline.dom.single-node li):
+ (.tree-outline.dom li.parent):
+ (.tree-outline.dom li .html-tag.close):
+ (.tree-outline.dom li.parent::before):
+ (.tree-outline.dom li.parent.shadow::after):
+ Remove RTL logic.
+
+ * UserInterface/Views/DOMTreeOutline.js:
+ * UserInterface/Views/TreeOutline.js:
+ (WI.TreeOutline.prototype._treeKeyDown):
+ Make Left and Right arrow keys work correctly for LTR DOM outlines inside of the global RTL.
+
2019-08-21 Devin Rousso <drou...@apple.com>
Web Inspector: Page: re-add enable/disable after r248454
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (248990 => 248991)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2019-08-22 01:49:48 UTC (rev 248990)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2019-08-22 02:33:40 UTC (rev 248991)
@@ -2709,6 +2709,18 @@
return layoutDirection;
};
+WI.resolveLayoutDirectionForElement = function(element)
+{
+ let layoutDirection = WI.resolvedLayoutDirection();
+
+ // Global LTR never includes RTL containers. Return early.
+ if (layoutDirection === WI.LayoutDirection.LTR)
+ return layoutDirection;
+
+ let style = getComputedStyle(element);
+ return style.direction;
+};
+
WI.setLayoutDirection = function(value)
{
console.assert(WI.isDebugUIEnabled());
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (248990 => 248991)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2019-08-22 01:49:48 UTC (rev 248990)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2019-08-22 02:33:40 UTC (rev 248991)
@@ -101,14 +101,10 @@
border: 0 solid hsla(0, 0%, 83%, 0.5);
}
-body[dir=ltr] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
+.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
border-left-width: var(--sublist-border-width-start);
}
-body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
- border-right-width: var(--sublist-border-width-start);
-}
-
.tree-outline.dom li.selected + ol.children.expanded {
border-color: hsl(0, 0%, 65%, 0.5);
}
@@ -122,13 +118,13 @@
}
.tree-outline.dom li:not(.editing) {
- -webkit-padding-start: var(--item-padding-start);
- -webkit-padding-end: var(--item-padding-end);
+ padding-left: var(--item-padding-start);
+ padding-right: var(--item-padding-end);
}
.tree-outline.dom li.editing {
- -webkit-margin-start: var(--item-padding-start);
- -webkit-margin-end: var(--item-padding-end);
+ margin-left: var(--item-padding-start);
+ margin-right: var(--item-padding-end);
}
.tree-outline.dom li .pseudo-class-indicator {
@@ -142,20 +138,16 @@
border-radius: 50%;
}
-body[dir=ltr] .tree-outline.dom li .pseudo-class-indicator {
+.tree-outline.dom li .pseudo-class-indicator {
left: var(--item-pseudo-class-indicator-start);
}
-body[dir=rtl] .tree-outline.dom li .pseudo-class-indicator {
- right: var(--item-pseudo-class-indicator-start);
-}
-
.tree-outline.dom:focus li.selected .pseudo-class-indicator {
background-color: var(--selected-foreground-color);
}
.tree-outline.dom.single-node li {
- -webkit-padding-start: 2px;
+ padding-left: 2px;
}
.tree-outline.dom:focus li.selected {
@@ -167,12 +159,12 @@
}
.tree-outline.dom li.parent {
- -webkit-margin-start: -15px;
+ margin-left: -15px;
line-height: 13px;
}
.tree-outline.dom li .html-tag.close {
- -webkit-margin-start: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
+ margin-left: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
}
.tree-outline.dom li .html-tag ~ .go-to-arrow {
@@ -189,7 +181,7 @@
z-index: 20;
width: 13px;
height: 13px;
- -webkit-padding-end: 2px;
+ padding-right: 2px;
content: "";
background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
background-size: 13px 13px;
@@ -196,15 +188,10 @@
background-repeat: no-repeat;
}
-body[dir=ltr] .tree-outline.dom li.parent::before {
+.tree-outline.dom li.parent::before {
float: left;
}
-body[dir=rtl] .tree-outline.dom li.parent::before {
- float: right;
- transform: scaleX(-1);
-}
-
.tree-outline.dom:focus li.parent.selected::before {
background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
}
@@ -238,7 +225,7 @@
width: calc(100% + 8px);
height: 1.2em;
margin-top: -13px;
- -webkit-margin-start: -2px;
+ margin-left: -2px;
content: "";
background-color: hsla(0, 0%, 90%, 0.5);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (248990 => 248991)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2019-08-22 01:49:48 UTC (rev 248990)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2019-08-22 02:33:40 UTC (rev 248991)
@@ -44,6 +44,7 @@
this.element.addEventListener("dragend", this._ondragend.bind(this), false);
this.element.classList.add("dom", WI.SyntaxHighlightedStyleClassName);
+ this.element.dir = "ltr";
if (showLastSelected)
this.element.classList.add("show-last-selected");
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (248990 => 248991)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2019-08-22 01:49:48 UTC (rev 248990)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js 2019-08-22 02:33:40 UTC (rev 248991)
@@ -598,7 +598,7 @@
if (event.target !== this._childrenListNode)
return;
- let isRTL = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL;
+ let isRTL = WI.resolveLayoutDirectionForElement(this.element) === WI.LayoutDirection.RTL;
let expandKeyIdentifier = isRTL ? "Left" : "Right";
let collapseKeyIdentifier = isRTL ? "Right" : "Left";
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
