Web Inspector: Elements: always show all navigation bar items, but disable those...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 12 Jul 2019 23:09:52 +0000 (23:09 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 12 Jul 2019 23:09:52 +0000 (23:09 +0000)
https://bugs.webkit.org/show_bug.cgi?id=199594

Reviewed by Ross Kirsling.

Reorder the navigation items of the Elements tab (left to right):
 - Show rulers
 - Force print media styles
 - Force Dark Appearance / Force Light Appearance
 - Show compositing borders
 - Enable paint flashing
 - Show shadow DOM nodes
This way, "related" (e.g. print styles and dark/light appearance both relate to CSS media)
toggles are grouped closer together.

* UserInterface/Views/DOMTreeContentView.js:
(WI.DOMTreeContentView):
(WI.DOMTreeContentView.prototype.get navigationItems):
(WI.DOMTreeContentView.prototype._defaultAppearanceDidChange):
(WI.DOMTreeContentView.prototype._toggleAppearance):

* Localizations/en.lproj/localizedStrings.js:

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js

index 6a692dc..45f8b2f 100644 (file)
@@ -1,3 +1,28 @@
+2019-07-12  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Elements: always show all navigation bar items, but disable those that wouldn't work
+        https://bugs.webkit.org/show_bug.cgi?id=199594
+
+        Reviewed by Ross Kirsling.
+
+        Reorder the navigation items of the Elements tab (left to right):
+         - Show rulers
+         - Force print media styles
+         - Force Dark Appearance / Force Light Appearance
+         - Show compositing borders
+         - Enable paint flashing
+         - Show shadow DOM nodes
+        This way, "related" (e.g. print styles and dark/light appearance both relate to CSS media)
+        toggles are grouped closer together.
+
+        * UserInterface/Views/DOMTreeContentView.js:
+        (WI.DOMTreeContentView):
+        (WI.DOMTreeContentView.prototype.get navigationItems):
+        (WI.DOMTreeContentView.prototype._defaultAppearanceDidChange):
+        (WI.DOMTreeContentView.prototype._toggleAppearance):
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2019-07-11  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Layers: Uncaught Exception: Request with id = 2 failed. {"code":-32601,"message":"'Page' domain was not found","data":[{"code":-32601,"message":"'Page' domain was not found"}]}
index 20fb76a..2e350d9 100644 (file)
@@ -494,7 +494,7 @@ localizedStrings["Font"] = "Font";
 localizedStrings["Fonts"] = "Fonts";
 localizedStrings["Force Dark Appearance"] = "Force Dark Appearance";
 localizedStrings["Force Light Appearance"] = "Force Light Appearance";
-localizedStrings["Force Print Media Styles"] = "Force Print Media Styles";
+localizedStrings["Force print media styles"] = "Force print media styles";
 /* Layout phase records that were imperative (forced) */
 localizedStrings["Forced Layout"] = "Forced Layout";
 /* A context menu item to force (override) a DOM node's pseudo-classes */
@@ -554,8 +554,8 @@ localizedStrings["Hide Console (%s)"] = "Hide Console (%s)";
 localizedStrings["Hide Elements"] = "Hide Elements";
 localizedStrings["Hide Grid"] = "Hide Grid";
 localizedStrings["Hide Path"] = "Hide Path";
-localizedStrings["Hide Rulers"] = "Hide Rulers";
 localizedStrings["Hide compositing borders"] = "Hide compositing borders";
+localizedStrings["Hide rulers"] = "Hide rulers";
 localizedStrings["Hide shadow DOM nodes"] = "Hide shadow DOM nodes";
 localizedStrings["Hide the details sidebar (%s)"] = "Hide the details sidebar (%s)";
 localizedStrings["Hide the navigation sidebar (%s)"] = "Hide the navigation sidebar (%s)";
@@ -975,7 +975,6 @@ localizedStrings["Show Grid"] = "Show Grid";
 localizedStrings["Show Jump to Effective Property Button"] = "Show Jump to Effective Property Button";
 localizedStrings["Show Path"] = "Show Path";
 localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
-localizedStrings["Show Rulers"] = "Show Rulers";
 localizedStrings["Show Scope Chain on pause"] = "Show Scope Chain on pause";
 localizedStrings["Show all actions"] = "Show all actions";
 localizedStrings["Show all resources"] = "Show all resources";
@@ -989,6 +988,7 @@ localizedStrings["Show only for selected node"] = "Show only for selected node";
 localizedStrings["Show page load timing"] = "Show page load timing";
 localizedStrings["Show page resources"] = "Show page resources";
 localizedStrings["Show page rulers and node border lines"] = "Show page rulers and node border lines";
+localizedStrings["Show rulers"] = "Show rulers";
 localizedStrings["Show shadow DOM nodes"] = "Show shadow DOM nodes";
 localizedStrings["Show the details sidebar (%s)"] = "Show the details sidebar (%s)";
 localizedStrings["Show the navigation sidebar (%s)"] = "Show the navigation sidebar (%s)";
@@ -1173,8 +1173,8 @@ localizedStrings["Unsupported property value"] = "Unsupported property value";
 localizedStrings["Untitled"] = "Untitled";
 localizedStrings["Usage: %s"] = "Usage: %s";
 localizedStrings["Use Default Appearance"] = "Use Default Appearance";
-localizedStrings["Use Default Media Styles"] = "Use Default Media Styles";
 localizedStrings["Use Mock Capture Devices"] = "Use Mock Capture Devices";
+localizedStrings["Use default media styles"] = "Use default media styles";
 localizedStrings["Use the resource cache when loading resources"] = "Use the resource cache when loading resources";
 localizedStrings["User Agent"] = "User Agent";
 localizedStrings["User Agent Stylesheet"] = "User Agent Stylesheet";
index 1916d74..c5ff037 100644 (file)
@@ -31,21 +31,18 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
 
         super(representedObject);
 
-        if (InspectorBackend.domains.Page) {
-            this._compositingBordersButtonNavigationItem = new WI.ActivateButtonNavigationItem("layer-borders", WI.UIString("Show compositing borders"), WI.UIString("Hide compositing borders"), "Images/LayerBorders.svg", 13, 13);
-            this._compositingBordersButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleCompositingBorders, this);
-            this._compositingBordersButtonNavigationItem.enabled = !!InspectorBackend.domains.Page.getCompositingBordersVisible;
-            this._compositingBordersButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
-        }
-
-        if (InspectorBackend.domains.Page) {
-            WI.settings.showPaintRects.addEventListener(WI.Setting.Event.Changed, this._showPaintRectsSettingChanged, this);
-            this._paintFlashingButtonNavigationItem = new WI.ActivateButtonNavigationItem("paint-flashing", WI.UIString("Enable paint flashing"), WI.UIString("Disable paint flashing"), "Images/Paint.svg", 16, 16);
-            this._paintFlashingButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._togglePaintFlashing, this);
-            this._paintFlashingButtonNavigationItem.enabled = !!InspectorBackend.domains.Page.setShowPaintRects;
-            this._paintFlashingButtonNavigationItem.activated = InspectorBackend.domains.Page.setShowPaintRects && WI.settings.showPaintRects.value;
-            this._paintFlashingButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
-        }
+        this._compositingBordersButtonNavigationItem = new WI.ActivateButtonNavigationItem("layer-borders", WI.UIString("Show compositing borders"), WI.UIString("Hide compositing borders"), "Images/LayerBorders.svg", 13, 13);
+        this._compositingBordersButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleCompositingBorders, this);
+        this._compositingBordersButtonNavigationItem.enabled = !!InspectorBackend.domains.Page;
+        this._compositingBordersButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
+
+        // COMPATIBILITY (iOS 9)
+        WI.settings.showPaintRects.addEventListener(WI.Setting.Event.Changed, this._showPaintRectsSettingChanged, this);
+        this._paintFlashingButtonNavigationItem = new WI.ActivateButtonNavigationItem("paint-flashing", WI.UIString("Enable paint flashing"), WI.UIString("Disable paint flashing"), "Images/Paint.svg", 16, 16);
+        this._paintFlashingButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._togglePaintFlashing, this);
+        this._paintFlashingButtonNavigationItem.enabled = InspectorBackend.domains.Page && !!InspectorBackend.domains.Page.setShowPaintRects;
+        this._paintFlashingButtonNavigationItem.activated = InspectorBackend.domains.Page && InspectorBackend.domains.Page.setShowPaintRects && WI.settings.showPaintRects.value;
+        this._paintFlashingButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
 
         WI.settings.showShadowDOM.addEventListener(WI.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
         this._showsShadowDOMButtonNavigationItem = new WI.ActivateButtonNavigationItem("shows-shadow-DOM", WI.UIString("Show shadow DOM nodes"), WI.UIString("Hide shadow DOM nodes"), "Images/ShadowDOM.svg", 13, 13);
@@ -53,21 +50,19 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
         this._showsShadowDOMButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
         this._showShadowDOMSettingChanged();
 
-        if (InspectorBackend.domains.Page) {
-            this._showPrintStylesButtonNavigationItem = new WI.ActivateButtonNavigationItem("print-styles", WI.UIString("Force Print Media Styles"), WI.UIString("Use Default Media Styles"), "Images/Printer.svg", 16, 16);
-            this._showPrintStylesButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._togglePrintStyles, this);
-            this._showPrintStylesButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
-            this._showPrintStylesChanged();
-        }
+        this._showPrintStylesButtonNavigationItem = new WI.ActivateButtonNavigationItem("print-styles", WI.UIString("Force print media styles"), WI.UIString("Use default media styles"), "Images/Printer.svg", 16, 16);
+        this._showPrintStylesButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._togglePrintStyles, this);
+        this._showPrintStylesButtonNavigationItem.enabled = !!InspectorBackend.domains.Page;
+        this._showPrintStylesButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
+        this._showPrintStylesChanged();
 
-        // COMPATIBILITY (iOS 11.3)
-        if (InspectorBackend.domains.Page && InspectorBackend.domains.Page.setShowRulers) {
-            WI.settings.showRulers.addEventListener(WI.Setting.Event.Changed, this._showRulersChanged, this);
-            this._showRulersButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-rulers", WI.UIString("Show Rulers"), WI.UIString("Hide Rulers"), "Images/Rulers.svg", 16, 16);
-            this._showRulersButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleShowRulers, this);
-            this._showRulersButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
-            this._showRulersChanged();
-        }
+        // COMPATIBILITY (iOS 12)
+        WI.settings.showRulers.addEventListener(WI.Setting.Event.Changed, this._showRulersChanged, this);
+        this._showRulersButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-rulers", WI.UIString("Show rulers"), WI.UIString("Hide rulers"), "Images/Rulers.svg", 16, 16);
+        this._showRulersButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleShowRulers, this);
+        this._showRulersButtonNavigationItem.enabled = InspectorBackend.domains.Page && !!InspectorBackend.domains.Page.setShowRulers;
+        this._showRulersButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
+        this._showRulersChanged();
 
         this.element.classList.add("dom-tree");
         this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
@@ -95,8 +90,7 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
         this._breakpointGutterEnabled = false;
         this._pendingBreakpointNodeIdentifiers = new Set;
 
-        if (WI.cssManager.canForceAppearance())
-            this._defaultAppearanceDidChange();
+        this._defaultAppearanceDidChange();
 
         if (WI.domDebuggerManager.supported) {
             WI.debuggerManager.addEventListener(WI.DebuggerManager.Event.BreakpointsEnabledDidChange, this._breakpointsEnabledDidChange, this);
@@ -115,26 +109,14 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
 
     get navigationItems()
     {
-        let items = [];
-
-        if (this._showPrintStylesButtonNavigationItem)
-            items.push(this._showPrintStylesButtonNavigationItem);
-
-        items.push(this._showsShadowDOMButtonNavigationItem);
-
-        if (this._forceAppearanceButtonNavigationItem)
-            items.push(this._forceAppearanceButtonNavigationItem);
-
-        if (this._showRulersButtonNavigationItem)
-           items.unshift(this._showRulersButtonNavigationItem);
-
-        if (this._compositingBordersButtonNavigationItem)
-            items.push(this._compositingBordersButtonNavigationItem);
-
-        if (this._paintFlashingButtonNavigationItem)
-            items.push(this._paintFlashingButtonNavigationItem);
-
-        return items;
+        return [
+            this._showRulersButtonNavigationItem,
+            this._showPrintStylesButtonNavigationItem,
+            this._forceAppearanceButtonNavigationItem,
+            this._compositingBordersButtonNavigationItem,
+            this._paintFlashingButtonNavigationItem,
+            this._showsShadowDOMButtonNavigationItem,
+        ];
     }
 
     get domTreeOutline()
@@ -668,23 +650,17 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
 
     _defaultAppearanceDidChange()
     {
-        let defaultAppearance = WI.cssManager.defaultAppearance;
-        if (!defaultAppearance) {
-            this._lastKnownDefaultAppearance = null;
-            this._forceAppearanceButtonNavigationItem = null;
-            this.dispatchEventToListeners(WI.ContentView.Event.NavigationItemsDidChange);
-            return;
-        }
-
         // Don't update the navigation item if there is currently a forced appearance.
         // The user will need to toggle it off to update it based on the new default appearance.
-        if (WI.cssManager.forcedAppearance && this._forceAppearanceButtonNavigationItem)
+        if (WI.cssManager.forcedAppearance)
             return;
 
         this._forceAppearanceButtonNavigationItem = null;
 
+        let defaultAppearance = WI.cssManager.defaultAppearance;
         switch (defaultAppearance) {
         case WI.CSSManager.Appearance.Light:
+        case null: // if there is no default appearance, the navigation item will be disabled
             this._forceAppearanceButtonNavigationItem = new WI.ActivateButtonNavigationItem("appearance", WI.UIString("Force Dark Appearance"), WI.UIString("Use Default Appearance"), "Images/Appearance.svg", 16, 16);
             break;
         case WI.CSSManager.Appearance.Dark:
@@ -692,16 +668,11 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
             break;
         }
 
-        if (!this._forceAppearanceButtonNavigationItem) {
-            console.error("Unknown default appearance name:", defaultAppearance);
-            this.dispatchEventToListeners(WI.ContentView.Event.NavigationItemsDidChange);
-            return;
-        }
-
         this._lastKnownDefaultAppearance = defaultAppearance;
 
         this._forceAppearanceButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleAppearance, this);
         this._forceAppearanceButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
+        this._forceAppearanceButtonNavigationItem.enabled = WI.cssManager.canForceAppearance();
         this._forceAppearanceButtonNavigationItem.activated = !!WI.cssManager.forcedAppearance;
 
         this.dispatchEventToListeners(WI.ContentView.Event.NavigationItemsDidChange);
@@ -709,6 +680,8 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
 
     _toggleAppearance(event)
     {
+        console.assert(WI.cssManager.canForceAppearance());
+
         // Use the last known default appearance, since that is the appearance this navigation item was generated for.
         let appearanceToForce = null;
         switch (this._lastKnownDefaultAppearance) {