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:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@247405 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 6a692dc..45f8b2f 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -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"}]}
diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
index 20fb76a..2e350d9 100644
--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
@@ -494,7 +494,7 @@
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 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 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 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["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";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
index 1916d74..c5ff037 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
@@ -31,21 +31,18 @@
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;
- }
+ 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;
- 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;
- }
+ // 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 @@
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 @@
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 @@
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 @@
_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 @@
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 @@
_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) {
