Honour the showUAShadowDOM setting in the layout panel
The backend always returns all nodes, including user-agent shadow DOM.
In the elements pane, there's some filtering logic on the front-end to
only show those nodes when the showUAShadowDOM setting is ON.
This logic was not added to the layout pane when grid containers are
fetched.
This means that sites that have, say, <video> or <audio> elements will
cause a lot of grids to show up in the layout pane because <video> and
<audio> elements do use a bunch of grids in their internal DOM.
This change:
- adds the filtering logic to the layout panel
- makes the panel re-render itself when the setting changes
- adds a new e2e test to cover this logic
Bug: 1136846
Change-Id: Ic2e3fd331c275667e0b646d764e7a18c834833a5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2468016
Commit-Queue: Patrick Brosset <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Brandon Goddard <[email protected]>
diff --git a/front_end/elements/LayoutSidebarPane.js b/front_end/elements/LayoutSidebarPane.js
index 2e411f3..f48acbe 100644
--- a/front_end/elements/LayoutSidebarPane.js
+++ b/front_end/elements/LayoutSidebarPane.js
@@ -62,6 +62,7 @@
this._layoutPane = createLayoutPane();
this.contentElement.appendChild(this._layoutPane);
this._settings = ['showGridLineLabels', 'showGridTrackSizes', 'showGridAreas', 'extendGridLines'];
+ this._uaShadowDOMSetting = Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM');
this._boundOnSettingChanged = this.onSettingChanged.bind(this);
this._domModels = [];
}
@@ -87,13 +88,18 @@
}
async _fetchGridNodes() {
+ const showUAShadowDOM = this._uaShadowDOMSetting.get();
+
const nodes = [];
for (const domModel of this._domModels) {
const nodeIds = await domModel.getNodesByStyle(
[{name: 'display', value: 'grid'}, {name: 'display', value: 'inline-grid'}], true /* pierce */);
- nodes.push(...nodeIds.map(id => domModel.nodeForId(id)).filter(node => node !== null));
+ nodes.push(...nodeIds.map(id => domModel.nodeForId(id)).filter(node => {
+ return node && (showUAShadowDOM || !node.ancestorUserAgentShadowRoot());
+ }));
}
+
return nodes;
}
@@ -153,6 +159,7 @@
this._domModels = [];
SDK.SDKModel.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel, this);
UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+ this._uaShadowDOMSetting.addChangeListener(this.update, this);
this.update();
}
@@ -166,5 +173,6 @@
this._layoutPane.removeEventListener('setting-changed', this._boundOnSettingChanged);
SDK.SDKModel.TargetManager.instance().unobserveModels(SDK.DOMModel.DOMModel, this);
UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+ this._uaShadowDOMSetting.removeChangeListener(this.update, this);
}
}
