Title: [212445] trunk/Source/WebInspectorUI
Revision
212445
Author
bb...@apple.com
Date
2017-02-16 10:33:45 -0800 (Thu, 16 Feb 2017)

Log Message

Web Inspector: add DebugUI setting to manually override UI layout direction
https://bugs.webkit.org/show_bug.cgi?id=168222

Reviewed by Joseph Pecoraro.

Expose three layout direction settings:
 - System (inherit system UI layout direction)
 - LTR (the default regardless of system language)
 - RTL (under development, only accessible via this menu)

* UserInterface/Base/Main.js:
The UI layout direction is normally only set once per frontend load.
There is no expectation on macOS that applications can switch dynamically.
But, for DebugUI purposes we need to switch the layout direction quickly.
Store the new setting and trigger a hard reload of the frontend page.
If the 'system' setting is specified, fall back to the system layout
direction as provided by InspectorFrontendHost.

* UserInterface/Base/Setting.js:
Add an application-level setting for (user interface) layout direction.

* UserInterface/Views/SettingsTabContentView.js:
(WebInspector.SettingsTabContentView):
(WebInspector.SettingsTabContentView.prototype.layout):
(WebInspector.SettingsTabContentView.prototype.initialLayout): Deleted.
Make this a normal layout() method so that we can dirty the view
when DebugUI is turned on or off.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (212444 => 212445)


--- trunk/Source/WebInspectorUI/ChangeLog	2017-02-16 18:20:25 UTC (rev 212444)
+++ trunk/Source/WebInspectorUI/ChangeLog	2017-02-16 18:33:45 UTC (rev 212445)
@@ -1,3 +1,33 @@
+2017-02-16  Brian Burg  <bb...@apple.com>
+
+        Web Inspector: add DebugUI setting to manually override UI layout direction
+        https://bugs.webkit.org/show_bug.cgi?id=168222
+
+        Reviewed by Joseph Pecoraro.
+
+        Expose three layout direction settings:
+         - System (inherit system UI layout direction)
+         - LTR (the default regardless of system language)
+         - RTL (under development, only accessible via this menu)
+
+        * UserInterface/Base/Main.js:
+        The UI layout direction is normally only set once per frontend load.
+        There is no expectation on macOS that applications can switch dynamically.
+        But, for DebugUI purposes we need to switch the layout direction quickly.
+        Store the new setting and trigger a hard reload of the frontend page.
+        If the 'system' setting is specified, fall back to the system layout
+        direction as provided by InspectorFrontendHost.
+
+        * UserInterface/Base/Setting.js:
+        Add an application-level setting for (user interface) layout direction.
+
+        * UserInterface/Views/SettingsTabContentView.js:
+        (WebInspector.SettingsTabContentView):
+        (WebInspector.SettingsTabContentView.prototype.layout):
+        (WebInspector.SettingsTabContentView.prototype.initialLayout): Deleted.
+        Make this a normal layout() method so that we can dirty the view
+        when DebugUI is turned on or off.
+
 2017-02-16  Devin Rousso  <dcrousso+web...@gmail.com>
 
         Web Inspector: popovers shouldn't be dismissed when Web Inspector window is dragged

Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (212444 => 212445)


--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js	2017-02-16 18:20:25 UTC (rev 212444)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js	2017-02-16 18:33:45 UTC (rev 212445)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013-2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-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
@@ -47,6 +47,12 @@
     Delayed: "state-restoration-delayed",
 };
 
+WebInspector.LayoutDirection = {
+    System: "system",
+    LTR: "ltr",
+    RTL: "rtl",
+};
+
 WebInspector.loaded = function()
 {
     // Initialize WebSocket to communication.
@@ -238,6 +244,12 @@
 
     document.body.classList.add(this.debuggableType);
 
+    let layoutDirection = WebInspector.settings.layoutDirection.value;
+    if (layoutDirection === WebInspector.LayoutDirection.System)
+        layoutDirection = InspectorFrontendHost.userInterfaceLayoutDirection();
+
+    document.body.setAttribute("dir", layoutDirection);
+
     function setTabSize() {
         document.body.style.tabSize = WebInspector.settings.tabSize.value;
     }
@@ -2132,6 +2144,23 @@
     WebInspector.settings.zoomFactor.value = InspectorFrontendHost.zoomFactor();
 };
 
+WebInspector.getLayoutDirection = function()
+{
+    return WebInspector.settings.layoutDirection.value;
+};
+
+WebInspector.setLayoutDirection = function(value)
+{
+    if (!Object.values(WebInspector.LayoutDirection).includes(value))
+        WebInspector.reportInternalError("Unknown layout direction requested: " + value);
+
+    if (value === WebInspector.settings.layoutDirection.value)
+        return;
+
+    WebInspector.settings.layoutDirection.value = value;
+    window.location.reload();
+};
+
 WebInspector._showTabAtIndex = function(i, event)
 {
     if (i <= WebInspector.tabBar.tabBarItems.length)

Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js (212444 => 212445)


--- trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js	2017-02-16 18:20:25 UTC (rev 212444)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js	2017-02-16 18:33:45 UTC (rev 212445)
@@ -112,4 +112,7 @@
     clearLogOnNavigate: new WebInspector.Setting("clear-log-on-navigate", true),
     clearNetworkOnNavigate: new WebInspector.Setting("clear-network-on-navigate", true),
     zoomFactor: new WebInspector.Setting("zoom-factor", 1),
+    // FIXME: change initial value to 'system' once we are happy with RTL support.
+    // This will cause Web Inspector to use the system user interface layout direction.
+    layoutDirection: new WebInspector.Setting("layout-direction", "ltr"),
 };

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js (212444 => 212445)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js	2017-02-16 18:20:25 UTC (rev 212444)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js	2017-02-16 18:33:45 UTC (rev 212445)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015-2017 Apple Inc. All rights reserved.
  * Copyright (C) 2016 Devin Rousso <dcrousso+web...@gmail.com>. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -34,6 +34,8 @@
 
         // Ensures that the Settings tab is displayable from a pinned tab bar item.
         tabBarItem.representedObject = this;
+
+        WebInspector.notifications.addEventListener(WebInspector.Notification.DebugUIEnabledDidChange, this.needsLayout.bind(this, WebInspector.View.LayoutReason.Dirty));
     }
 
     static tabInfo()
@@ -61,8 +63,10 @@
         return WebInspector.SettingsTabContentView.Type;
     }
 
-    initialLayout()
+    layout()
     {
+        this.element.removeChildren();
+
         let header = this.element.createChild("div", "header");
         header.textContent = WebInspector.UIString("Settings");
 
@@ -184,6 +188,31 @@
                 option.selected = currentZoom === level;
             });
         });
+
+        if (WebInspector.isDebugUIEnabled()) {
+            this.element.appendChild(document.createElement("br"));
+
+            createContainer(WebInspector.unlocalizedString("Layout Direction:"), (valueControllerContainer) => {
+                let selectElement = valueControllerContainer.appendChild(document.createElement("select"));
+                selectElement.addEventListener("change", (event) => {
+                    WebInspector.setLayoutDirection(selectElement.value);
+                });
+
+                let currentLayoutDirection = WebInspector.settings.layoutDirection.value;
+                let options = new Map([
+                    [WebInspector.LayoutDirection.System, WebInspector.unlocalizedString("System Default")],
+                    [WebInspector.LayoutDirection.LTR, WebInspector.unlocalizedString("Left to Right (LTR)")],
+                    [WebInspector.LayoutDirection.RTL, WebInspector.unlocalizedString("Right to Left (RTL)")],
+                ]);
+
+                for (let [key, value] of options) {
+                    let optionElement = selectElement.appendChild(document.createElement("option"));
+                    optionElement.value = key;
+                    optionElement.textContent = value;
+                    optionElement.selected = currentLayoutDirection === key;
+                }
+            });
+        }
     }
 };
 
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to