commit 294a3b2d53010861a2dc1b7b609c2b68ddb8aaf2
parent 0b78757c4ba9ed894b4160a70dc6d6512793eade
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Thu, 23 Oct 2025 12:11:03 +0000
Bug 1995333 - [devtools] Expose devtools.inspector.showAllAnonymousContent in the Settings panel. r=devtools-reviewers,fluent-reviewers,bolsson,ochameau.
Differential Revision: https://phabricator.services.mozilla.com/D269352
Diffstat:
5 files changed, 57 insertions(+), 2 deletions(-)
diff --git a/devtools/client/framework/options-panel.css b/devtools/client/framework/options-panel.css
@@ -102,6 +102,21 @@
padding-inline-end: 4px;
}
+label:has(.option-secondary-label) {
+ display: grid;
+ grid-template-areas:
+ "input label"
+ ". secondary-label";
+ grid-template-columns: auto 1fr;
+}
+
+.option-secondary-label {
+ font-size: 0.9em;
+ font-style: italic;
+ grid-area: secondary-label;
+ color: var(--theme-text-color-alt);
+}
+
#devtools-sourceeditor-keybinding-select {
min-width: 130px;
}
diff --git a/devtools/client/framework/test/browser_toolbox_options.js b/devtools/client/framework/test/browser_toolbox_options.js
@@ -141,6 +141,10 @@ async function testOptions() {
const prefNodes = tool.panelDoc.querySelectorAll(
"input[type=checkbox][data-pref]"
);
+ ok(
+ [...prefNodes].some(prefNode => prefNode.hasAttribute("data-force-reload")),
+ "There's at least one checkbox with the data-force-reload attribute"
+ );
// Store modified pref names so that they can be cleared on error.
for (const node of tool.panelDoc.querySelectorAll("[data-pref]")) {
@@ -219,6 +223,11 @@ async function testMouseClick(node, prefValue) {
});
});
+ // if changing the setting reloads the page, waits for the toolbox to be reloaded
+ const waitForDevToolsReload = node.hasAttribute("data-force-reload")
+ ? await watchForDevToolsReload(gBrowser.selectedBrowser)
+ : null;
+
const onNewConfigurationApplied = Object.keys(
BOOLEAN_CONFIGURATION_PREFS
).includes(pref)
@@ -242,6 +251,12 @@ async function testMouseClick(node, prefValue) {
await onNewConfigurationApplied;
ok(true, `Configuration was changed when updating pref "${pref}"`);
}
+
+ if (waitForDevToolsReload) {
+ await waitForDevToolsReload();
+ ok(true, `The page was reloaded when toggling ${node.outerHTML}`);
+ }
+
observer.destroy();
}
diff --git a/devtools/client/framework/toolbox-options.html b/devtools/client/framework/toolbox-options.html
@@ -58,6 +58,20 @@
/>
<span data-l10n-id="options-show-user-agent-styles-label"></span>
</label>
+ <label data-l10n-id="options-show-user-agent-shadow-dom-tooltip">
+ <input
+ type="checkbox"
+ data-pref="devtools.inspector.showAllAnonymousContent"
+ data-force-reload
+ />
+ <span
+ data-l10n-id="options-show-user-agent-shadow-dom-label"
+ ></span>
+ <span
+ class="option-secondary-label"
+ data-l10n-id="options-context-triggers-page-refresh-persists"
+ ></span>
+ </label>
<label data-l10n-id="options-collapse-attrs-tooltip">
<input
type="checkbox"
diff --git a/devtools/client/framework/toolbox-options.js b/devtools/client/framework/toolbox-options.js
@@ -496,9 +496,12 @@ class OptionsPanel extends EventEmitter {
if (GetPref(prefCheckbox.getAttribute("data-pref"))) {
prefCheckbox.setAttribute("checked", true);
}
- prefCheckbox.addEventListener("change", function (e) {
+ prefCheckbox.addEventListener("change", e => {
const checkbox = e.target;
SetPref(checkbox.getAttribute("data-pref"), checkbox.checked);
+ if (checkbox.hasAttribute("data-force-reload")) {
+ this.commands.targetCommand.reloadTopLevelTarget();
+ }
});
}
// Themes radio inputs are handled in setupThemeList
diff --git a/devtools/client/locales/en-US/toolbox-options.ftl b/devtools/client/locales/en-US/toolbox-options.ftl
@@ -34,6 +34,11 @@ options-show-user-agent-styles-label = Show Browser Styles
options-show-user-agent-styles-tooltip =
.title = Turning this on will show default styles that are loaded by the browser.
+# The label for the checkbox option to show all anonymous content
+options-show-user-agent-shadow-dom-label = Show Browser Shadow DOM
+options-show-user-agent-shadow-dom-tooltip =
+ .title = Turning this on will show Shadow DOM elements handled by the browser.
+
# The label for the checkbox option to enable collapse attributes
options-collapse-attrs-label = Truncate DOM attributes
options-collapse-attrs-tooltip =
@@ -164,5 +169,8 @@ options-source-maps-label = Enable Source Maps
options-source-maps-tooltip =
.title = If you enable this option sources will be mapped in the tools.
-# The message shown for settings that trigger page reload
+# The message shown for settings that trigger page reload and will only apply to the current session
options-context-triggers-page-refresh = * Current session only, reloads the page
+
+# The message shown for settings that trigger page reload
+options-context-triggers-page-refresh-persists = (reloads the page)
