Web Inspector: RTL: Console should be always LTR
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Aug 2019 09:14:00 +0000 (09:14 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Aug 2019 09:14:00 +0000 (09:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=200482

Reviewed by Joseph Pecoraro.

* UserInterface/Views/ConsoleCommandView.js:
(WI.ConsoleCommandView.prototype.render):
* UserInterface/Views/ConsoleMessageView.css:
* UserInterface/Views/ConsoleMessageView.js:
(WI.ConsoleMessageView.prototype.render):
Make console messages always LTR.

* UserInterface/Views/LogContentView.js:
(WI.LogContentView.prototype._keyDown):
Since the console is always LTR now, we can remove code that flips left and right
arrow keys.

* UserInterface/Views/ObjectTreeView.css:
JS objects should always be LTR.

* UserInterface/Views/TreeElement.js:
Look at "direction" CSS property because Element's text direction can be LTR even
when `WI.resolvedLayoutDirection()` is RTL.

(WI.TreeElement.prototype.isEventWithinDisclosureTriangle):
* UserInterface/Views/TreeOutline.css:
(body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon),):
(body[dir=rtl] [dir=ltr] .tree-outline .item .disclosure-button):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ConsoleCommandView.js
Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
Source/WebInspectorUI/UserInterface/Views/LogContentView.js
Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
Source/WebInspectorUI/UserInterface/Views/TreeElement.js
Source/WebInspectorUI/UserInterface/Views/TreeOutline.css

index e1e8592..95dd73d 100644 (file)
@@ -1,3 +1,34 @@
+2019-08-16  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: RTL: Console should be always LTR
+        https://bugs.webkit.org/show_bug.cgi?id=200482
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/ConsoleCommandView.js:
+        (WI.ConsoleCommandView.prototype.render):
+        * UserInterface/Views/ConsoleMessageView.css:
+        * UserInterface/Views/ConsoleMessageView.js:
+        (WI.ConsoleMessageView.prototype.render):
+        Make console messages always LTR.
+
+        * UserInterface/Views/LogContentView.js:
+        (WI.LogContentView.prototype._keyDown):
+        Since the console is always LTR now, we can remove code that flips left and right
+        arrow keys.
+
+        * UserInterface/Views/ObjectTreeView.css:
+        JS objects should always be LTR.
+
+        * UserInterface/Views/TreeElement.js:
+        Look at "direction" CSS property because Element's text direction can be LTR even
+        when `WI.resolvedLayoutDirection()` is RTL.
+
+        (WI.TreeElement.prototype.isEventWithinDisclosureTriangle):
+        * UserInterface/Views/TreeOutline.css:
+        (body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon),):
+        (body[dir=rtl] [dir=ltr] .tree-outline .item .disclosure-button):
+
 2019-08-16  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Elements: setting a breakpoint on a specific listener should enable the event listener
index e2ae5aa..8379ed7 100644 (file)
@@ -41,6 +41,7 @@ WI.ConsoleCommandView = class ConsoleCommandView
     {
         this._element = document.createElement("div");
         this._element.classList.add("console-user-command");
+        this._element.dir = "ltr";
         this._element.setAttribute("data-labelprefix", WI.UIString("Input: "));
 
         if (this._className)
index 683b219..f1d5455 100644 (file)
     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 0f09a3b..f5b0746 100644 (file)
@@ -51,6 +51,7 @@ WI.ConsoleMessageView = class ConsoleMessageView extends WI.Object
     {
         this._element = document.createElement("div");
         this._element.classList.add("console-message");
+        this._element.dir = "ltr";
 
         // FIXME: <https://webkit.org/b/143545> Web Inspector: LogContentView should use higher level objects
         this._element.__message = this._message;
index 243e4cb..3903445 100644 (file)
@@ -932,8 +932,6 @@ WI.LogContentView = class LogContentView extends WI.ContentView
 
     _keyDown(event)
     {
-        let isRTL = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL;
-
         if (this._keyboardShortcutCommandA.matchesEvent(event))
             this._commandAWasPressed(event);
         else if (this._keyboardShortcutEsc.matchesEvent(event))
@@ -942,9 +940,9 @@ WI.LogContentView = class LogContentView extends WI.ContentView
             this._upArrowWasPressed(event);
         else if (event.keyIdentifier === "Down")
             this._downArrowWasPressed(event);
-        else if ((!isRTL && event.keyIdentifier === "Left") || (isRTL && event.keyIdentifier === "Right"))
+        else if (event.keyIdentifier === "Left")
             this._leftArrowWasPressed(event);
-        else if ((!isRTL && event.keyIdentifier === "Right") || (isRTL && event.keyIdentifier === "Left"))
+        else if (event.keyIdentifier === "Right")
             this._rightArrowWasPressed(event);
         else if (event.keyIdentifier === "Enter" && event.metaKey)
             this._commandEnterWasPressed(event);
index d9b8538..d247487 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 8724bd4..0b97a1d 100644 (file)
@@ -615,7 +615,7 @@ WI.TreeElement = class TreeElement extends WI.Object
         // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
         let computedStyle = window.getComputedStyle(this._listItemNode);
         let start = 0;
-        if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL)
+        if (computedStyle.direction === WI.LayoutDirection.RTL)
             start += this._listItemNode.totalOffsetRight - computedStyle.getPropertyCSSValue("padding-right").getFloatValue(CSSPrimitiveValue.CSS_PX) - this.arrowToggleWidth;
         else
             start += this._listItemNode.totalOffsetLeft + computedStyle.getPropertyCSSValue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX);
index dc38864..86d3bf6 100644 (file)
@@ -69,7 +69,8 @@
     background-color: var(--selected-background-color-unfocused);
 }
 
-body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon) {
+body[dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon),
+body[dir=rtl] [dir=ltr] .tree-outline .item :matches(.disclosure-button, .icon) {
     float: left;
 }
 
@@ -106,6 +107,10 @@ body[dir=rtl] .tree-outline .item .disclosure-button {
     transform: scaleX(-1);
 }
 
+body[dir=rtl] [dir=ltr] .tree-outline .item .disclosure-button {
+    transform: unset;
+}
+
 .tree-outline.hide-disclosure-buttons .item .disclosure-button {
     display: none;
 }