From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- devtools/client/devtools-experimental-prefs.js | 230 +++++++++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 devtools/client/devtools-experimental-prefs.js (limited to 'devtools/client/devtools-experimental-prefs.js') diff --git a/devtools/client/devtools-experimental-prefs.js b/devtools/client/devtools-experimental-prefs.js new file mode 100644 index 0000000000..dfa0068410 --- /dev/null +++ b/devtools/client/devtools-experimental-prefs.js @@ -0,0 +1,230 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +loader.lazyRequireGetter( + this, + "HTMLTooltip", + "resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js", + true +); + +const PREFERENCES = [ + [ + "fission.autostart", + "Enable fission in Firefox. When navigating between two domains, you " + + "will switch between two distinct processes. And if an iframe is " + + "hosted from another domain, it will run in another process", + ], + [ + "devtools.every-frame-target.enabled", + "When enabled, targets will be created for all iframes, no matter if " + + "they are remote or not, independently of Fission being enabled or not", + ], + [ + "fission.bfcacheInParent", + "Enable bfcache navigation in parent process (requires Fission and involve " + + "more top level target switching", + ], +]; + +/** + * Temporary module to show a Tooltip with the currently enabled preferences + * relevant for DevTools ongoing architectural work (e.g. Fission, EFT, …). + * + * This module should be deleted once all experimental prefs are preffed on in Nightly. + */ +function showTooltip(toolbox) { + if (!toolbox._experimentalPrefsTooltip) { + toolbox._experimentalPrefsTooltip = new HTMLTooltip(toolbox.doc, { + type: "doorhanger", + useXulWrapper: true, + }); + toolbox.once("destroy", () => toolbox._experimentalPrefsTooltip.destroy()); + } + + // Terrible hack to allow to toggle using the command button. + if (toolbox._experimentalPrefsTooltip.preventShow) { + return; + } + + updateTooltipContent(toolbox); + + const commandId = "command-button-experimental-prefs"; + toolbox._experimentalPrefsTooltip.show(toolbox.doc.getElementById(commandId)); + + // Follows a hack to be able to close the tooltip when clicking on the + // command button. Otherwise it will flicker and reopen. + toolbox._experimentalPrefsTooltip.preventShow = true; + toolbox._experimentalPrefsTooltip.once("hidden", () => { + toolbox.win.setTimeout( + () => (toolbox._experimentalPrefsTooltip.preventShow = false), + 250 + ); + }); +} +exports.showTooltip = showTooltip; +function updateTooltipContent(toolbox) { + const container = toolbox.doc.createElement("div"); + + /* + * This is the grid we want to have: + * +--------------------------------------------+---------------+ + * | Header text | Reset button | + * +------+-----------------------------+-------+---------------+ + * | Icon | Preference name | Value | Toggle button | + * +------+-----------------------------+-------+---------------+ + * | Icon | Preference name | Value | Toggle button | + * +------+-----------------------------+-------+---------------+ + */ + + Object.assign(container.style, { + display: "grid", + gridTemplateColumns: + "max-content minmax(300px, auto) max-content max-content", + gridColumnGap: "8px", + gridTemplateRows: `repeat(${PREFERENCES.length + 1}, auto)`, + gridRowGap: "8px", + padding: "12px", + fontSize: "11px", + }); + + container.classList.add("theme-body"); + + const headerContainer = toolbox.doc.createElement("header"); + /** + * The grid layout of the header container is as follows: + * + * +-------------------------+--------------+ + * | Header text | Reset button | + * +-------------------------+--------------+ + */ + + Object.assign(headerContainer.style, { + display: "grid", + gridTemplateColumns: "subgrid", + gridColumn: "1 / -1", + }); + + const header = toolbox.doc.createElement("h1"); + + Object.assign(header.style, { + gridColumn: "1 / -2", + fontSize: "11px", + margin: "0", + padding: "0", + }); + + header.textContent = "DevTools Experimental preferences"; + + const resetButton = toolbox.doc.createElement("button"); + resetButton.addEventListener("click", () => { + for (const [name] of PREFERENCES) { + Services.prefs.clearUserPref(name); + } + updateTooltipContent(toolbox); + }); + resetButton.textContent = "reset all"; + + headerContainer.append(header, resetButton); + + const prefList = toolbox.doc.createElement("ul"); + Object.assign(prefList.style, { + display: "grid", + gridTemplateColumns: "subgrid", + gridTemplateRows: "subgrid", + // Subgrid should span all grid columns + gridColumn: "1 / -1", + gridRow: "2 / -1", + listStyle: "none", + margin: "0", + padding: "0", + }); + + for (const [name, desc] of PREFERENCES) { + const prefEl = createPreferenceListItem(toolbox, name, desc); + prefList.appendChild(prefEl); + } + + container.append(headerContainer, prefList); + + toolbox._experimentalPrefsTooltip.panel.innerHTML = ""; + // There is a hardcoded 320px max width for doorhanger tooltips, + // see Bug 1654020. + toolbox._experimentalPrefsTooltip.panel.style.maxWidth = "unset"; + toolbox._experimentalPrefsTooltip.panel.appendChild(container); +} + +function createPreferenceListItem(toolbox, name, desc) { + const isPrefEnabled = Services.prefs.getBoolPref(name, false); + + const prefEl = toolbox.doc.createElement("li"); + + /** + * The grid layout of a preference line is as follows: + * + * +------+-----------------------------+-------+---------------+ + * | Icon | Preference name | Value | Toggle button | + * +------+-----------------------------+-------+---------------+ + */ + + Object.assign(prefEl.style, { + margin: "0", + lineHeight: "12px", + display: "grid", + alignItems: "center", + gridTemplateColumns: "subgrid", + gridColumn: "1 / -1", + }); + + prefEl.classList.toggle("theme-comment", !isPrefEnabled); + + // Icon + const prefInfo = toolbox.doc.createElement("div"); + prefInfo.title = desc; + + Object.assign(prefInfo.style, { + width: "12px", + height: "12px", + }); + + prefInfo.classList.add("experimental-pref-icon"); + + // Preference name + const prefTitle = toolbox.doc.createElement("span"); + + Object.assign(prefTitle.style, { + userSelect: "text", + fontWeight: isPrefEnabled ? "bold" : "normal", + }); + + prefTitle.textContent = name; + + // Value + const prefValue = toolbox.doc.createElement("span"); + prefValue.textContent = isPrefEnabled; + + // Toggle Button + const toggleButton = toolbox.doc.createElement("button"); + toggleButton.addEventListener("click", () => { + Services.prefs.setBoolPref(name, !isPrefEnabled); + updateTooltipContent(toolbox); + }); + toggleButton.textContent = "toggle"; + + prefEl.append(prefInfo, prefTitle, prefValue, toggleButton); + return prefEl; +} + +function isAnyPreferenceEnabled() { + for (const [name] of PREFERENCES) { + const isPrefEnabled = Services.prefs.getBoolPref(name, false); + if (isPrefEnabled) { + return true; + } + } + return false; +} +exports.isAnyPreferenceEnabled = isAnyPreferenceEnabled; -- cgit v1.2.3