Bug 1746831 - Added option to the Settings panel for toggling custom formatters. r=nchevobbe,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D136781

browser/app/profile/firefox.js

@@ -2374,6 +2374,9 @@ pref("devtools.application.enabled", true);
 // Enable the custom formatters feature
 // TODO remove once the custom formatters feature is stable (see bug 1734614)
 pref("devtools.custom-formatters", false);
+// This preference represents the user's choice to enable the custom formatters feature.
+// While the preference above will be removed once the feature is stable, this one is menat to stay.
+pref("devtools.custom-formatters.enabled", false);
 
 // The default Network Monitor UI settings
 pref("devtools.netmonitor.panes-network-details-width", 550);

devtools/client/framework/toolbox-options.js

@@ -443,6 +443,16 @@ OptionsPanel.prototype = {
       });
     }
 
+    if (GetPref("devtools.custom-formatters")) {
+      prefDefinitions.push({
+        pref: "devtools.custom-formatters.enabled",
+        l10nLabelId: "options-enable-custom-formatters-label",
+        l10nTooltipId: "options-enable-custom-formatters-tooltip",
+        id: "devtools-custom-formatters",
+        parentId: "context-options",
+      });
+    }
+
     if (this.toolbox.isBrowserToolbox) {
       // The Multiprocess Browser Toolbox is only displayed in the settings
       // panel for the Browser Toolbox, or when debugging the main process in
@@ -481,8 +491,18 @@ OptionsPanel.prototype = {
       });
     }
 
-    const createPreferenceOption = ({ pref, label, id, onChange }) => {
+    const createPreferenceOption = ({
+      pref,
+      label,
+      l10nLabelId,
+      l10nTooltipId,
+      id,
+      onChange,
+    }) => {
       const inputLabel = this.panelDoc.createElement("label");
+      if (l10nTooltipId) {
+        this.panelDoc.l10n.setAttributes(inputLabel, l10nTooltipId);
+      }
       const checkbox = this.panelDoc.createElement("input");
       checkbox.setAttribute("type", "checkbox");
       if (GetPref(pref)) {
@@ -497,7 +517,11 @@ OptionsPanel.prototype = {
       });
 
       const inputSpanLabel = this.panelDoc.createElement("span");
-      inputSpanLabel.textContent = label;
+      if (l10nLabelId) {
+        this.panelDoc.l10n.setAttributes(inputSpanLabel, l10nLabelId);
+      } else if (label) {
+        inputSpanLabel.textContent = label;
+      }
       inputLabel.appendChild(checkbox);
       inputLabel.appendChild(inputSpanLabel);
 

devtools/client/locales/en-US/toolbox-options.ftl

@@ -117,6 +117,11 @@ options-enable-remote-label = Enable remote debugging
 options-enable-remote-tooltip2 =
     .title = Turning this option on will allow to debug this browser instance remotely
 
+# The label for checkbox that toggles custom formatters for objects
+options-enable-custom-formatters-label = Enable custom formatters
+options-enable-custom-formatters-tooltip =
+    .title = Turning this option on will allow sites to define custom formatters for DOM objects
+
 # The label for checkbox that toggles the service workers testing over HTTP on or off.
 options-enable-service-workers-http-label = Enable Service Workers over HTTP (when toolbox is open)
 options-enable-service-workers-http-tooltip =