Web Inspector: Add a setting to turn off dimming unrendered nodes

https://bugs.webkit.org/show_bug.cgi?id=244361 rdar://99155655 Reviewed by Devin Rousso. For some use cases it can still be useful to get full-color non-rendered elements in the DOM tree, particularly when looking through and modifying elements inside the <head> of the document, so add a setting to turn the enable/disable the dimming (defaults to enabled). * Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js: * Source/WebInspectorUI/UserInterface/Base/Setting.js: * Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js: (WI.DOMTreeContentView): (WI.DOMTreeContentView.prototype.closed): (WI.DOMTreeContentView.prototype._updateDOMTreeDeemphasizesNodeThatAreNotRendered): (WI.DOMTreeContentView.prototype._handleDOMTreeDeemphasizesNodesThatAreNotRenderedChanged): * Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css: (.content-view.dom-tree.deemphasize-unrendered .tree-outline.dom li:not(.rendered) > span > *:not(.html-comment)): (.content-view.dom-tree.deemphasize-unrendered .tree-outline.dom li:not(.rendered, .selected) > span > *:not(.html-comment),): (.content-view.dom-tree .tree-outline.dom li:not(.rendered) > span > *:not(.html-comment)): Deleted. (.content-view.dom-tree .tree-outline.dom li:not(.rendered, .selected) > span > *:not(.html-comment),): Deleted. * Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js: (WI.SettingsTabContentView.prototype._createElementsSettingsView): Canonical link: https://commits.webkit.org/254022@main
WebKit · Sep 1, 2022 · bbe97632cc4eea1ce837b64335495e6b1ab7ec3a · bbe9763
1 parent d3bb932
commit bbe97632cc4eea1ce837b64335495e6b1ab7ec3a
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
@@ -451,6 +451,7 @@ localizedStrings["DOM Content Loaded \u2014 %s"] = "DOM Content Loaded \u2014 %s
 localizedStrings["DOM Event \u201C%s\u201D"] = "DOM Event \u201C%s\u201D";
 localizedStrings["DOM Events"] = "DOM Events";
 localizedStrings["DOM Nodes:"] = "DOM Nodes:";
+localizedStrings["DOM Tree:"] = "DOM Tree:";
 /* Label indicating that network activity is being simulated with DSL connectivity. */
 localizedStrings["DSL"] = "DSL";
 localizedStrings["Damping"] = "Damping";
@@ -463,6 +464,7 @@ localizedStrings["Database"] = "Database";
 localizedStrings["Database no longer has expected version."] = "Database no longer has expected version.";
 localizedStrings["Databases"] = "Databases";
 localizedStrings["Date"] = "Date";
+localizedStrings["De-emphasize nodes that are not rendered"] = "De-emphasize nodes that are not rendered";
 localizedStrings["Debug: "] = "Debug: ";
 localizedStrings["Debugger Statement"] = "Debugger Statement";
 /* Break (pause) on debugger statements */
@@ -839,8 +841,8 @@ localizedStrings["Import audit or result"] = "Import audit or result";
 localizedStrings["Imported"] = "Imported";
 localizedStrings["Imported - %s"] = "Imported - %s";
 localizedStrings["Imported \u2014 %s"] = "Imported \u2014 %s";
-localizedStrings["Include original response data"] = "Include original response data";
 localizedStrings["Include original request data"] = "Include original request data";
+localizedStrings["Include original response data"] = "Include original response data";
 localizedStrings["Incomplete"] = "Incomplete";
 localizedStrings["Indent width:"] = "Indent width:";
 localizedStrings["Index"] = "Index";

diff --git a/Source/WebInspectorUI/UserInterface/Base/Setting.js b/Source/WebInspectorUI/UserInterface/Base/Setting.js
@@ -193,6 +193,7 @@ WI.settings = {
     clearLogOnNavigate: new WI.Setting("clear-log-on-navigate", true),
     clearNetworkOnNavigate: new WI.Setting("clear-network-on-navigate", true),
     cpuTimelineThreadDetailsExpanded: new WI.Setting("cpu-timeline-thread-details-expanded", false),
+    domTreeDeemphasizesNodesThatAreNotRendered: new WI.Setting("dom-tree-deemphasizes-nodes-that-are-not-rendered", true),
     emulateInUserGesture: new WI.Setting("emulate-in-user-gesture", false),
     enableControlFlowProfiler: new WI.Setting("enable-control-flow-profiler", false),
     enableElementsTabIndependentStylesDetailsSidebarPanel: new WI.Setting("elements-tab-independent-styles-details-panel", true),

diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
@@ -109,6 +109,9 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
 
             this._breakpointsEnabledDidChange();
         }
+
+        WI.settings.domTreeDeemphasizesNodesThatAreNotRendered.addEventListener(WI.Setting.Event.Changed, this._handleDOMTreeDeemphasizesNodesThatAreNotRenderedChanged, this);
+        this._updateDOMTreeDeemphasizesNodesThatAreNotRendered();
     }
 
     // Public
@@ -172,6 +175,8 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
             WI.DOMBreakpoint.removeEventListener(WI.DOMBreakpoint.Event.DOMNodeDidChange, this._handleDOMBreakpointDOMNodeDidChange, this);
         }
 
+        WI.settings.domTreeDeemphasizesNodesThatAreNotRendered.removeEventListener(WI.Setting.Event.Changed, this._handleDOMTreeDeemphasizesNodesThatAreNotRenderedChanged, this);
+
         this._domTreeOutline.close();
         this._pendingBreakpointNodes.clear();
     }
@@ -863,4 +868,14 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
     {
         this._domTreeOutline.element.classList.toggle("breakpoints-disabled", !WI.debuggerManager.breakpointsEnabled);
     }
+
+    _updateDOMTreeDeemphasizesNodesThatAreNotRendered()
+    {
+        this.element.classList.toggle("deemphasize-unrendered", WI.settings.domTreeDeemphasizesNodesThatAreNotRendered.value);
+    }
+
+    _handleDOMTreeDeemphasizesNodesThatAreNotRenderedChanged(event)
+    {
+        this._updateDOMTreeDeemphasizesNodesThatAreNotRendered()
+    }
 };
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
@@ -87,13 +87,13 @@ body:not(.window-inactive, .window-docked-inactive) .tree-outline.dom:focus-with
     color: var(--selected-secondary-text-color);
 }
 
-.content-view.dom-tree .tree-outline.dom li:not(.rendered) > span > *:not(.html-comment) {
+.content-view.dom-tree.deemphasize-unrendered .tree-outline.dom li:not(.rendered) > span > *:not(.html-comment) {
     filter: grayscale();
 }
 
-.content-view.dom-tree .tree-outline.dom li:not(.rendered, .selected) > span > *:not(.html-comment),
-.content-view.dom-tree .tree-outline.dom:not(:focus-within) li.selected:not(.rendered) > span > *:not(.html-comment),
-body:is(.window-inactive, .window-docked-inactive) .content-view.dom-tree .tree-outline.dom li.selected:not(.rendered) > span > *:not(.html-comment) {
+.content-view.dom-tree.deemphasize-unrendered .tree-outline.dom li:not(.rendered, .selected) > span > *:not(.html-comment),
+.content-view.dom-tree.deemphasize-unrendered .tree-outline.dom:not(:focus-within) li.selected:not(.rendered) > span > *:not(.html-comment),
+body:is(.window-inactive, .window-docked-inactive) .content-view.dom-tree.deemphasize-unrendered .tree-outline.dom li.selected:not(.rendered) > span > *:not(.html-comment) {
     opacity: 0.7;
 }
 

diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
@@ -279,6 +279,14 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
 
         let elementsSettingsView = new WI.SettingsView("elements", WI.UIString("Elements"));
 
+        // COMPATIBILITY (macOS 13.0, iOS 16.0): CSS.LayoutFlag.Rendered did not exist yet.
+        console.log(InspectorBackend.Enum.CSS);
+        if (InspectorBackend.Enum.CSS?.LayoutFlag?.Rendered) {
+            elementsSettingsView.addSetting(WI.UIString("DOM Tree:"), WI.settings.domTreeDeemphasizesNodesThatAreNotRendered, WI.UIString("De-emphasize nodes that are not rendered"));
+
+            elementsSettingsView.addSeparator();
+        }
+
         if (InspectorBackend.hasCommand("DOM.setInspectModeEnabled", "showRulers")) {
             elementsSettingsView.addSetting(WI.UIString("Element Selection:"), WI.settings.showRulersDuringElementSelection, WI.UIString("Show page rulers and node border lines"));