devtools/client/devtools-experimental-prefs.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 "use strict";
   6
   7 loader.lazyRequireGetter(
   8   this,
   9   "HTMLTooltip",
  10   "resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js",
  11   true
  12 );
  13
  14 const PREFERENCES = [
  15   [
  16     "fission.autostart",
  17     "Enable fission in Firefox. When navigating between two domains, you " +
  18       "will switch between two distinct processes. And if an iframe is " +
  19       "hosted from another domain, it will run in another process",
  20   ],
  21   [
  22     "devtools.every-frame-target.enabled",
  23     "When enabled, targets will be created for all iframes, no matter if " +
  24       "they are remote or not, independently of Fission being enabled or not",
  25   ],
  26   [
  27     "fission.bfcacheInParent",
  28     "Enable bfcache navigation in parent process (requires Fission and involve " +
  29       "more top level target switching",
  30   ],
  31   [
  32     "devtools.debugger.features.javascript-tracing",
  33     "Enable the JavaScript tracer. (You need to restart Firefox / the Browser Toolbox to apply this setting)",
  34   ],
  35 ];
  36
  37 /**
  38  * Temporary module to show a Tooltip with the currently enabled preferences
  39  * relevant for DevTools ongoing architectural work (e.g. Fission, EFT, …).
  40  *
  41  * This module should be deleted once all experimental prefs are preffed on in Nightly.
  42  */
  43 function showTooltip(toolbox) {
  44   if (!toolbox._experimentalPrefsTooltip) {
  45     toolbox._experimentalPrefsTooltip = new HTMLTooltip(toolbox.doc, {
  46       type: "doorhanger",
  47       useXulWrapper: true,
  48     });
  49     toolbox.once("destroy", () => toolbox._experimentalPrefsTooltip.destroy());
  50   }
  51
  52   // Terrible hack to allow to toggle using the command button.
  53   if (toolbox._experimentalPrefsTooltip.preventShow) {
  54     return;
  55   }
  56
  57   updateTooltipContent(toolbox);
  58
  59   const commandId = "command-button-experimental-prefs";
  60   toolbox._experimentalPrefsTooltip.show(toolbox.doc.getElementById(commandId));
  61
  62   // Follows a hack to be able to close the tooltip when clicking on the
  63   // command button. Otherwise it will flicker and reopen.
  64   toolbox._experimentalPrefsTooltip.preventShow = true;
  65   toolbox._experimentalPrefsTooltip.once("hidden", () => {
  66     toolbox.win.setTimeout(
  67       () => (toolbox._experimentalPrefsTooltip.preventShow = false),
  68       250
  69     );
  70   });
  71 }
  72 exports.showTooltip = showTooltip;
  73 function updateTooltipContent(toolbox) {
  74   const container = toolbox.doc.createElement("div");
  75
  76   /*
  77    *  This is the grid we want to have:
  78    *  +--------------------------------------------+---------------+
  79    *  | Header text                                | Reset button  |
  80    *  +------+-----------------------------+-------+---------------+
  81    *  | Icon | Preference name             | Value | Toggle button |
  82    *  +------+-----------------------------+-------+---------------+
  83    *  | Icon | Preference name             | Value | Toggle button |
  84    *  +------+-----------------------------+-------+---------------+
  85    */
  86
  87   Object.assign(container.style, {
  88     display: "grid",
  89     gridTemplateColumns:
  90       "max-content minmax(300px, auto) max-content max-content",
  91     gridColumnGap: "8px",
  92     gridTemplateRows: `repeat(${PREFERENCES.length + 1}, auto)`,
  93     gridRowGap: "8px",
  94     padding: "12px",
  95     fontSize: "11px",
  96   });
  97
  98   container.classList.add("theme-body");
  99
 100   const headerContainer = toolbox.doc.createElement("header");
 101   /**
 102    * The grid layout of the header container is as follows:
 103    *
 104    *  +-------------------------+--------------+
 105    *  | Header text             | Reset button |
 106    *  +-------------------------+--------------+
 107    */
 108
 109   Object.assign(headerContainer.style, {
 110     display: "grid",
 111     gridTemplateColumns: "subgrid",
 112     gridColumn: "1 / -1",
 113   });
 114
 115   const header = toolbox.doc.createElement("h1");
 116
 117   Object.assign(header.style, {
 118     gridColumn: "1 / -2",
 119     fontSize: "11px",
 120     margin: "0",
 121     padding: "0",
 122   });
 123
 124   header.textContent = "DevTools Experimental preferences";
 125
 126   const resetButton = toolbox.doc.createElement("button");
 127   resetButton.addEventListener("click", () => {
 128     for (const [name] of PREFERENCES) {
 129       Services.prefs.clearUserPref(name);
 130     }
 131     updateTooltipContent(toolbox);
 132   });
 133   resetButton.textContent = "reset all";
 134
 135   headerContainer.append(header, resetButton);
 136
 137   const prefList = toolbox.doc.createElement("ul");
 138   Object.assign(prefList.style, {
 139     display: "grid",
 140     gridTemplateColumns: "subgrid",
 141     gridTemplateRows: "subgrid",
 142     // Subgrid should span all grid columns
 143     gridColumn: "1 / -1",
 144     gridRow: "2 / -1",
 145     listStyle: "none",
 146     margin: "0",
 147     padding: "0",
 148   });
 149
 150   for (const [name, desc] of PREFERENCES) {
 151     const prefEl = createPreferenceListItem(toolbox, name, desc);
 152     prefList.appendChild(prefEl);
 153   }
 154
 155   container.append(headerContainer, prefList);
 156
 157   toolbox._experimentalPrefsTooltip.panel.innerHTML = "";
 158   // There is a hardcoded 320px max width for doorhanger tooltips,
 159   // see Bug 1654020.
 160   toolbox._experimentalPrefsTooltip.panel.style.maxWidth = "unset";
 161   toolbox._experimentalPrefsTooltip.panel.appendChild(container);
 162 }
 163
 164 function createPreferenceListItem(toolbox, name, desc) {
 165   const isPrefEnabled = Services.prefs.getBoolPref(name, false);
 166
 167   const prefEl = toolbox.doc.createElement("li");
 168
 169   /**
 170    * The grid layout of a preference line is as follows:
 171    *
 172    *  +------+-----------------------------+-------+---------------+
 173    *  | Icon | Preference name             | Value | Toggle button |
 174    *  +------+-----------------------------+-------+---------------+
 175    */
 176
 177   Object.assign(prefEl.style, {
 178     margin: "0",
 179     lineHeight: "12px",
 180     display: "grid",
 181     alignItems: "center",
 182     gridTemplateColumns: "subgrid",
 183     gridColumn: "1 / -1",
 184   });
 185
 186   prefEl.classList.toggle("theme-comment", !isPrefEnabled);
 187
 188   // Icon
 189   const prefInfo = toolbox.doc.createElement("div");
 190   prefInfo.title = desc;
 191
 192   Object.assign(prefInfo.style, {
 193     width: "12px",
 194     height: "12px",
 195   });
 196
 197   prefInfo.classList.add("experimental-pref-icon");
 198
 199   // Preference name
 200   const prefTitle = toolbox.doc.createElement("span");
 201
 202   Object.assign(prefTitle.style, {
 203     userSelect: "text",
 204     fontWeight: isPrefEnabled ? "bold" : "normal",
 205   });
 206
 207   prefTitle.textContent = name;
 208
 209   // Value
 210   const prefValue = toolbox.doc.createElement("span");
 211   prefValue.textContent = isPrefEnabled;
 212
 213   // Toggle Button
 214   const toggleButton = toolbox.doc.createElement("button");
 215   toggleButton.addEventListener("click", () => {
 216     Services.prefs.setBoolPref(name, !isPrefEnabled);
 217     updateTooltipContent(toolbox);
 218   });
 219   toggleButton.textContent = "toggle";
 220
 221   prefEl.append(prefInfo, prefTitle, prefValue, toggleButton);
 222   return prefEl;
 223 }
 224
 225 function isAnyPreferenceEnabled() {
 226   for (const [name] of PREFERENCES) {
 227     const isPrefEnabled = Services.prefs.getBoolPref(name, false);
 228     if (isPrefEnabled) {
 229       return true;
 230     }
 231   }
 232   return false;
 233 }
 234 exports.isAnyPreferenceEnabled = isAnyPreferenceEnabled;