Skip to content
Permalink
Browse files
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
  • Loading branch information
patrickangle committed Sep 1, 2022
1 parent d3bb932 commit bbe97632cc4eea1ce837b64335495e6b1ab7ec3a
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 5 deletions.
@@ -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";
@@ -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),
@@ -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()
}
};
@@ -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;
}

@@ -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"));

0 comments on commit bbe9763

Please sign in to comment.