Backed out 5 changesets (bug 1609100) for causing mochitest failures on browser_check_identity_state.js CLOSED TREE

Backed out changeset 521cbbae0914 (bug 1609100)
Backed out changeset e22daee724f0 (bug 1609100)
Backed out changeset e5c4afe5dd66 (bug 1609100)
Backed out changeset e6ae2c01908e (bug 1609100)
Backed out changeset 3e59351660ab (bug 1609100)

browser/components/enterprisepolicies/Policies.jsm

@@ -584,6 +584,7 @@ var Policies = {
         setAndLockPref("devtools.chrome.enabled", false);
 
         manager.disallowFeature("devtools");
+        blockAboutPage(manager, "about:devtools");
         blockAboutPage(manager, "about:debugging");
         blockAboutPage(manager, "about:devtools-toolbox");
         blockAboutPage(manager, "about:profiling");

browser/components/enterprisepolicies/tests/browser/browser_policy_block_about.js

@@ -33,7 +33,12 @@ const policiesToTest = [
     policies: {
       DisableDeveloperTools: true,
     },
-    urls: ["about:debugging", "about:devtools-toolbox", "about:profiling"],
+    urls: [
+      "about:devtools",
+      "about:debugging",
+      "about:devtools-toolbox",
+      "about:profiling",
+    ],
   },
   {
     policies: {

browser/components/enterprisepolicies/tests/browser/disable_developer_tools/browser_policy_disable_developer_tools.js

@@ -27,6 +27,7 @@ add_task(async function test_updates_post_policy() {
     "devtools dedicated disabled pref can not be updated"
   );
 
+  await expectErrorPage("about:devtools");
   await expectErrorPage("about:devtools-toolbox");
   await expectErrorPage("about:debugging");
 

devtools/.eslintrc.js

@@ -121,6 +121,7 @@ module.exports = {
         "shared/loader/browser-loader.js",
         "shared/loader/worker-loader.js",
         "startup/aboutdebugging-registration.js",
+        "startup/aboutdevtools/aboutdevtools-registration.js",
         "startup/aboutdevtoolstoolbox-registration.js",
         "startup/devtools-startup.js",
       ],

devtools/client/aboutdebugging/aboutdebugging.js

@@ -68,6 +68,12 @@ const App = createFactory(
 
 const AboutDebugging = {
   async init() {
+    if (!Services.prefs.getBoolPref("devtools.enabled", true)) {
+      // If DevTools are disabled, navigate to about:devtools.
+      window.location = "about:devtools?reason=AboutDebugging";
+      return;
+    }
+
     const direction = Services.locale.isAppLocaleRTL ? "rtl" : "ltr";
     document.documentElement.setAttribute("dir", direction);
 

devtools/startup/DevToolsShim.jsm

@@ -27,6 +27,7 @@ XPCOMUtils.defineLazyGetter(this, "Telemetry", function() {
   return Telemetry;
 });
 
+const DEVTOOLS_ENABLED_PREF = "devtools.enabled";
 const DEVTOOLS_POLICY_DISABLED_PREF = "devtools.policy.disabled";
 
 const EXPORTED_SYMBOLS = ["DevToolsShim"];
@@ -43,7 +44,7 @@ function removeItem(array, callback) {
  * that work whether Devtools are enabled or not.
  *
  * It can be used to start listening to devtools events before DevTools are ready. As soon
- * as DevTools are ready, the DevToolsShim will forward all the requests received until
+ * as DevTools are enabled, the DevToolsShim will forward all the requests received until
  * then to the real DevTools instance.
  */
 const DevToolsShim = {
@@ -59,11 +60,13 @@ const DevToolsShim = {
   },
 
   /**
-   * Returns true if DevTools are enabled. This now only depends on the policy.
-   * TODO: Merge isEnabled and isDisabledByPolicy.
+   * Returns true if DevTools are enabled for the current profile. If devtools are not
+   * enabled, initializing DevTools will open the onboarding page. Some entry points
+   * should no-op in this case.
    */
   isEnabled: function() {
-    return !this.isDisabledByPolicy();
+    const enabled = Services.prefs.getBoolPref(DEVTOOLS_ENABLED_PREF);
+    return enabled && !this.isDisabledByPolicy();
   },
 
   /**

devtools/startup/DevToolsStartup.jsm

@@ -27,6 +27,7 @@ const kDebuggerPrefs = [
   "devtools.chrome.enabled",
 ];
 
+const DEVTOOLS_ENABLED_PREF = "devtools.enabled";
 const DEVTOOLS_F12_DISABLED_PREF = "devtools.experiment.f12.shortcut_disabled";
 
 const DEVTOOLS_POLICY_DISABLED_PREF = "devtools.policy.disabled";
@@ -88,6 +89,11 @@ XPCOMUtils.defineLazyGetter(this, "Telemetry", function() {
   return Telemetry;
 });
 
+XPCOMUtils.defineLazyGetter(this, "StartupBundle", function() {
+  const url = "chrome://devtools-startup/locale/startup.properties";
+  return Services.strings.createBundle(url);
+});
+
 XPCOMUtils.defineLazyGetter(this, "KeyShortcutsBundle", function() {
   return new Localization(["devtools/startup/key-shortcuts.ftl"], true);
 });
@@ -312,6 +318,7 @@ XPCOMUtils.defineLazyGetter(this, "ProfilerPopupBackground", function() {
 });
 
 function DevToolsStartup() {
+  this.onEnabledPrefChanged = this.onEnabledPrefChanged.bind(this);
   this.onWindowReady = this.onWindowReady.bind(this);
   this.addDevToolsItemsToSubview = this.addDevToolsItemsToSubview.bind(this);
   this.onMoreToolsViewShowing = this.onMoreToolsViewShowing.bind(this);
@@ -362,6 +369,10 @@ DevToolsStartup.prototype = {
     const isInitialLaunch =
       cmdLine.state == Ci.nsICommandLine.STATE_INITIAL_LAUNCH;
     if (isInitialLaunch) {
+      // Enable devtools for all users on startup (onboarding experiment from Bug 1408969
+      // is over).
+      Services.prefs.setBoolPref(DEVTOOLS_ENABLED_PREF, true);
+
       // The F12 shortcut might be disabled to avoid accidental usage.
       // Users who are already considered as devtools users should not be
       // impacted.
@@ -381,6 +392,12 @@ DevToolsStartup.prototype = {
         "browser-delayed-startup-finished"
       );
 
+      // Update menu items when devtools.enabled changes.
+      Services.prefs.addObserver(
+        DEVTOOLS_ENABLED_PREF,
+        this.onEnabledPrefChanged
+      );
+
       // Add DevTools menu items to the "More Tools" view.
       Services.obs.addObserver(
         this.onMoreToolsViewShowing,
@@ -508,6 +525,9 @@ DevToolsStartup.prototype = {
     if (!this.initialized) {
       this.hookBrowserToolsMenu(window);
     }
+
+    this.createDevToolsEnableMenuItem(window);
+    this.updateDevToolsMenuItems(window);
   },
 
   /**
@@ -570,9 +590,11 @@ DevToolsStartup.prototype = {
   },
 
   addDevToolsItemsToSubview(subview) {
-    // Initialize DevTools to create all menuitems in the system menu before
-    // trying to copy them.
-    this.initDevTools("HamburgerMenu");
+    if (Services.prefs.getBoolPref(DEVTOOLS_ENABLED_PREF)) {
+      // If DevTools are enabled, initialize DevTools to create all menuitems in the
+      // system menu before trying to copy them.
+      this.initDevTools("HamburgerMenu");
+    }
 
     // Populate the subview with whatever menuitems are in the developer
     // menu. We skip menu elements, because the menu panel has no way
@@ -674,12 +696,64 @@ DevToolsStartup.prototype = {
   hookBrowserToolsMenu(window) {
     const menu = window.document.getElementById("browserToolsMenu");
     const onPopupShowing = () => {
+      if (!Services.prefs.getBoolPref(DEVTOOLS_ENABLED_PREF)) {
+        return;
+      }
       menu.removeEventListener("popupshowing", onPopupShowing);
       this.initDevTools("SystemMenu");
     };
     menu.addEventListener("popupshowing", onPopupShowing);
   },
 
+  /**
+   * Create a new menu item to enable DevTools and insert it DevTools's submenu in the
+   * System Menu.
+   */
+  createDevToolsEnableMenuItem(window) {
+    const { document } = window;
+
+    // Create the menu item.
+    const item = document.createXULElement("menuitem");
+    item.id = "enableDeveloperTools";
+    item.setAttribute(
+      "label",
+      StartupBundle.GetStringFromName("enableDevTools.label")
+    );
+    item.setAttribute(
+      "accesskey",
+      StartupBundle.GetStringFromName("enableDevTools.accesskey")
+    );
+
+    // The menu item should open the install page for DevTools.
+    item.addEventListener("command", () => {
+      this.openInstallPage("SystemMenu");
+    });
+
+    // Insert the menu item in the DevTools submenu.
+    const systemMenuItem = document.getElementById("menuWebDeveloperPopup");
+    systemMenuItem.appendChild(item);
+  },
+
+  /**
+   * Update the visibility the menu item to enable DevTools.
+   */
+  updateDevToolsMenuItems(window) {
+    const item = window.document.getElementById("enableDeveloperTools");
+    item.hidden = Services.prefs.getBoolPref(DEVTOOLS_ENABLED_PREF);
+  },
+
+  /**
+   * Loop on all windows and update the hidden attribute of the "enable DevTools" menu
+   * item.
+   */
+  onEnabledPrefChanged() {
+    for (const window of Services.wm.getEnumerator("navigator:browser")) {
+      if (window.gBrowserInit && window.gBrowserInit.delayedStartupFinished) {
+        this.updateDevToolsMenuItems(window);
+      }
+    }
+  },
+
   /**
    * Check if the user is a DevTools user by looking at our selfxss pref.
    * This preference is incremented everytime the console is used (up to 5).
@@ -790,16 +864,20 @@ DevToolsStartup.prototype = {
           return;
         }
       }
-
-      // Record the timing at which this event started in order to compute later in
-      // gDevTools.showToolbox, the complete time it takes to open the toolbox.
-      // i.e. especially take `initDevTools` into account.
-      const startTime = Cu.now();
-      const require = this.initDevTools("KeyShortcut", key);
-      const {
-        gDevToolsBrowser,
-      } = require("devtools/client/framework/devtools-browser");
-      await gDevToolsBrowser.onKeyShortcut(window, key, startTime);
+      if (!Services.prefs.getBoolPref(DEVTOOLS_ENABLED_PREF)) {
+        const id = key.toolId || key.id;
+        this.openInstallPage("KeyShortcut", id);
+      } else {
+        // Record the timing at which this event started in order to compute later in
+        // gDevTools.showToolbox, the complete time it takes to open the toolbox.
+        // i.e. especially take `initDevTools` into account.
+        const startTime = Cu.now();
+        const require = this.initDevTools("KeyShortcut", key);
+        const {
+          gDevToolsBrowser,
+        } = require("devtools/client/framework/devtools-browser");
+        await gDevToolsBrowser.onKeyShortcut(window, key, startTime);
+      }
     } catch (e) {
       console.error(`Exception while trigerring key ${key}: ${e}\n${e.stack}`);
     }
@@ -836,6 +914,12 @@ DevToolsStartup.prototype = {
   },
 
   initDevTools: function(reason, key = "") {
+    // If an entry point is fired and tools are not enabled open the installation page
+    if (!Services.prefs.getBoolPref(DEVTOOLS_ENABLED_PREF)) {
+      this.openInstallPage(reason);
+      return null;
+    }
+
     // In the case of the --jsconsole and --jsdebugger command line parameters
     // there is no browser window yet so we don't send any telemetry yet.
     if (reason !== "CommandLine") {
@@ -852,6 +936,66 @@ DevToolsStartup.prototype = {
     return require;
   },
 
+  /**
+   * Open about:devtools to start the onboarding flow.
+   *
+   * @param {String} reason
+   *        One of "KeyShortcut", "SystemMenu", "HamburgerMenu", "ContextMenu",
+   *        "CommandLine".
+   * @param {String} keyId
+   *        Optional. If the onboarding flow was triggered by a keyboard shortcut, pass
+   *        the shortcut key id (or toolId) to about:devtools.
+   */
+  openInstallPage: function(reason, keyId) {
+    // If DevTools are completely disabled, bail out here as this might be called directly
+    // from other files.
+    if (this.isDisabledByPolicy()) {
+      return;
+    }
+
+    const { gBrowser } = Services.wm.getMostRecentWindow("navigator:browser");
+
+    // Focus about:devtools tab if there is already one opened in the current window.
+    for (const tab of gBrowser.tabs) {
+      const browser = tab.linkedBrowser;
+      // browser.documentURI might be undefined if the browser tab is still loading.
+      const location = browser.documentURI ? browser.documentURI.spec : "";
+      if (
+        location.startsWith("about:devtools") &&
+        !location.startsWith("about:devtools-toolbox")
+      ) {
+        // Focus the existing about:devtools tab and bail out.
+        gBrowser.selectedTab = tab;
+        return;
+      }
+    }
+
+    let url = "about:devtools";
+
+    const params = [];
+    if (reason) {
+      params.push("reason=" + encodeURIComponent(reason));
+    }
+
+    const selectedBrowser = gBrowser.selectedBrowser;
+    if (selectedBrowser) {
+      params.push("tabid=" + selectedBrowser.outerWindowID);
+    }
+
+    if (keyId) {
+      params.push("keyid=" + keyId);
+    }
+
+    if (params.length > 0) {
+      url += "?" + params.join("&");
+    }
+
+    // Set relatedToCurrent: true to open the tab next to the current one.
+    gBrowser.selectedTab = gBrowser.addTrustedTab(url, {
+      relatedToCurrent: true,
+    });
+  },
+
   handleConsoleFlag: function(cmdLine) {
     const window = Services.wm.getMostRecentWindow("devtools:webconsole");
     if (!window) {

devtools/startup/aboutdevtools/AboutDevToolsRegistration.jsm

@@ -0,0 +1,40 @@
+/* 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";
+
+// Register the about:devtools URL, that is opened whenever a user attempts to open
+// DevTools for the first time.
+const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+
+const { nsIAboutModule } = Ci;
+
+function AboutDevtools() {}
+
+AboutDevtools.prototype = {
+  uri: Services.io.newURI(
+    "chrome://devtools-startup/content/aboutdevtools/aboutdevtools.xhtml"
+  ),
+  classDescription: "about:devtools",
+  classID: Components.ID("3a16d383-92bd-4c24-ac10-0e2bd66883ab"),
+  contractID: "@mozilla.org/network/protocol/about;1?what=devtools",
+
+  QueryInterface: ChromeUtils.generateQI([nsIAboutModule]),
+
+  newChannel: function(uri, loadInfo) {
+    const chan = Services.io.newChannelFromURIWithLoadInfo(this.uri, loadInfo);
+    chan.owner = Services.scriptSecurityManager.getSystemPrincipal();
+    return chan;
+  },
+
+  getURIFlags: function(uri) {
+    return nsIAboutModule.ALLOW_SCRIPT | nsIAboutModule.IS_SECURE_CHROME_UI;
+  },
+
+  getChromeURI: function(_uri) {
+    return this.uri;
+  },
+};
+
+var EXPORTED_SYMBOLS = ["AboutDevtools"];

devtools/startup/aboutdevtools/aboutdevtools.css

@@ -0,0 +1,184 @@
+/* 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/. */
+
+:root {
+  --white: #ffffff;
+
+  /* Shared variables */
+  --line-height: 1.5em;
+}
+
+html, body {
+  min-width: 600px;
+}
+
+body {
+  margin-top: 17vh;
+}
+
+p {
+  line-height: var(--line-height);
+}
+
+.box {
+  max-width: 850px;
+  display: flex;
+  flex-shrink: 0;
+  padding: 0 0 50px 0;
+  /* Compensate for the optional scrollbar. */
+  margin-right: calc(100% - 100vw);
+}
+
+.wrapper:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.left-pane {
+  width: 300px;
+  height: 300px;
+  margin-inline-end: 20px;
+  background-image: url(images/otter.svg);
+  background-size: 100%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+}
+
+.features {
+  max-width: 980px;
+  border-top: 1px solid var(--in-content-border-color);
+}
+
+.features-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 40px 20px;
+  margin: 60px 20px;
+  padding: 0;
+}
+
+.feature-icon {
+  width: 60%;
+  max-width: 180px;
+  margin-bottom: 10px;
+}
+
+.feature {
+  list-style: none;
+  text-align: center;
+  margin: 10px 0;
+}
+
+.feature-name {
+  display: block;
+  margin: 10px 0;
+  font-size: 28px;
+  font-weight: 300;
+}
+
+.feature-name span {
+  display: block;
+}
+
+.feature-desc {
+  margin: 1em 20px;
+}
+
+.feature-link {
+  display: block;
+  color: inherit;
+}
+
+.feature-more-link {
+  display: block;
+  margin-top: 10px;
+}
+
+.external::after {
+  content: "";
+
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+
+  margin: -.3rem .15rem 0 0.25rem;
+  vertical-align: middle;
+
+  background-image: url(images/external-link.svg);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.title {
+  font-weight: 300;
+  font-size: 32px;
+  margin-top: 16px;
+  line-height: 44px;
+}
+
+.buttons-container {
+  display: flex;
+  margin-top: 5px;
+}
+
+.buttons-container button:not(:last-child) {
+  margin-right: 10px;
+}
+
+button {
+  margin: 20px 0 0 0;
+  padding: 10px 20px;
+
+  font-size: 15px;
+  line-height: 21px;
+  cursor: pointer;
+}
+
+/* Remove light gray outline when clicking on the button */
+button::-moz-focus-inner {
+  border: 0;
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 300px;
+  flex-grow: 1;
+  padding-bottom: 15px;
+  color: var(--white);
+  background: linear-gradient(0, var(--blue-60), var(--blue-80));
+}
+
+.dev-edition-logo {
+  flex-shrink: 0;
+  width: 165px;
+  margin: 20px 50px 0 0;
+}
+
+.footer-message {
+  max-width: 460px;
+}
+
+.footer-message-title {
+  color: var(--white);
+}
+
+.footer-link {
+  display: inline;
+  margin-top: 10px;
+}
+
+.footer-link,
+.footer-link:hover,
+.footer-link:visited,
+.footer-link:hover:active {
+  color: var(--white);
+}

devtools/startup/aboutdevtools/aboutdevtools.js

@@ -0,0 +1,250 @@
+/* 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";
+
+const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+
+const DEVTOOLS_ENABLED_PREF = "devtools.enabled";
+
+const MESSAGES = {
+  AboutDebugging: "about-debugging-message",
+  ContextMenu: "inspect-element-message",
+  HamburgerMenu: "menu-message",
+  KeyShortcut: "key-shortcut-message",
+  SystemMenu: "menu-message",
+};
+
+// Google analytics parameters that should be added to all outgoing links.
+const GA_PARAMETERS = [
+  ["utm_source", "devtools"],
+  ["utm_medium", "onboarding"],
+];
+
+const KEY_SHORTCUTS_STRINGS = "devtools/startup/key-shortcuts.ftl";
+const keyShortcutsBundle = new Localization([KEY_SHORTCUTS_STRINGS], true);
+
+// URL constructor doesn't support about: scheme,
+// we have to use http in order to have working searchParams.
+const url = new URL(window.location.href.replace("about:", "http://"));
+const reason = url.searchParams.get("reason");
+const tabid = parseInt(url.searchParams.get("tabid"), 10);
+
+function getToolboxShortcut() {
+  const modifier = Services.appinfo.OS == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+";
+  return (
+    modifier +
+    keyShortcutsBundle.formatValueSync("devtools-commandkey-toggle-toolbox")
+  );
+}
+
+function onInstallButtonClick() {
+  Services.prefs.setBoolPref("devtools.enabled", true);
+}
+
+function onCloseButtonClick() {
+  window.close();
+}
+
+function updatePage() {
+  const isEnabled = Services.prefs.getBoolPref("devtools.enabled");
+  document.getElementById("install-page").hidden = isEnabled;
+  document.getElementById("welcome-page").hidden = !isEnabled;
+}
+
+/**
+ * Array of descriptors for features displayed on about:devtools.
+ * Each feature should contain:
+ * - icon: the name of the image to use
+ * - title: the key of the localized title (from aboutDevTools.ftl)
+ * - desc: the key of the localized description (from aboutDevTools.ftl)
+ * - link: the MDN documentation link
+ */
+const features = [
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-inspector.svg",
+    title: "features-inspector-title",
+    desc: "features-inspector-desc",
+    link:
+      "https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/",
+  },
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-console.svg",
+    title: "features-console-title",
+    desc: "features-console-desc",
+    link: "https://firefox-source-docs.mozilla.org/devtools-user/web_console/",
+  },
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-debugger.svg",
+    title: "features-debugger-title",
+    desc: "features-debugger-desc",
+    link: "https://firefox-source-docs.mozilla.org/devtools-user/debugger/",
+  },
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-network.svg",
+    title: "features-network-title",
+    desc: "features-network-desc",
+    link:
+      "https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/",
+  },
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-storage.svg",
+    title: "features-storage-title",
+    desc: "features-storage-desc",
+    link:
+      "https://firefox-source-docs.mozilla.org/devtools-user/storage_inspector/",
+  },
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-responsive.svg",
+    title: "features-responsive-title",
+    desc: "features-responsive-desc",
+    link:
+      "https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/",
+  },
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-visualediting.svg",
+    title: "features-visual-editing-title",
+    desc: "features-visual-editing-desc",
+    link: "https://firefox-source-docs.mozilla.org/devtools-user/style_editor/",
+  },
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-performance.svg",
+    title: "features-performance-title",
+    desc: "features-performance-desc",
+    link: "https://firefox-source-docs.mozilla.org/devtools-user/performance/",
+  },
+  {
+    icon:
+      "chrome://devtools-startup/content/aboutdevtools/images/feature-memory.svg",
+    title: "features-memory-title",
+    desc: "features-memory-desc",
+    link: "https://firefox-source-docs.mozilla.org/devtools-user/memory/",
+  },
+];
+
+/**
+ * Helper to create a DOM element to represent a DevTools feature.
+ */
+function createFeatureEl(feature) {
+  const li = document.createElement("li");
+  li.classList.add("feature");
+
+  const { icon, link, title, desc } = feature;
+  // eslint-disable-next-line no-unsanitized/property
+  li.innerHTML = `
+    <h3 class="feature-name">
+      <a class="feature-link" href="${link}" target="_blank">
+        <img class="feature-icon" src="${icon}" alt="" />
+        <span data-l10n-id="${title}"></span>
+      </a>
+    </h3>
+    <p class="feature-desc" data-l10n-id="${desc}">
+      <a class="feature-more-link external" href="${link}"
+         aria-hidden="true" tabindex="-1"
+         target="_blank" data-l10n-name="learn-more"></a>
+    </p>`;
+
+  return li;
+}
+
+window.addEventListener(
+  "load",
+  function() {
+    const inspectorShortcut = getToolboxShortcut();
+    const welcomeMessage = document.getElementById("welcome-message");
+
+    // Set the welcome message content with the correct keyboard shortcut for the current
+    // platform.
+    document.l10n.setAttributes(welcomeMessage, "welcome-message", {
+      shortcut: inspectorShortcut,
+    });
+
+    // Set the appropriate title message.
+    if (reason == "ContextMenu") {
+      document.getElementById("inspect-title").removeAttribute("hidden");
+    } else {
+      document.getElementById("common-title").removeAttribute("hidden");
+    }
+
+    // Display the message specific to the reason
+    const id = MESSAGES[reason];
+    if (id) {
+      const message = document.getElementById(id);
+      message.removeAttribute("hidden");
+    }
+
+    // Attach event listeners
+    document
+      .getElementById("install")
+      .addEventListener("click", onInstallButtonClick);
+    document
+      .getElementById("close")
+      .addEventListener("click", onCloseButtonClick);
+    Services.prefs.addObserver(DEVTOOLS_ENABLED_PREF, updatePage);
+
+    const featuresContainer = document.querySelector(".features-list");
+    for (const feature of features) {
+      featuresContainer.appendChild(createFeatureEl(feature));
+    }
+
+    // Add Google Analytics parameters to all the external links.
+    const externalLinks = document.querySelectorAll("a[href*='mozilla.org']");
+    for (const link of externalLinks) {
+      const linkUrl = new URL(link.getAttribute("href"));
+      GA_PARAMETERS.forEach(([key, value]) =>
+        linkUrl.searchParams.set(key, value)
+      );
+      link.setAttribute("href", linkUrl.href);
+    }
+
+    // Update the current page based on the current value of DEVTOOLS_ENABLED_PREF.
+    updatePage();
+  },
+  { once: true }
+);
+
+window.addEventListener(
+  "beforeunload",
+  function() {
+    // Focus the tab that triggered the DevTools onboarding.
+    if (document.visibilityState != "visible") {
+      // Only try to focus the correct tab if the current tab is the about:devtools page.
+      return;
+    }
+
+    // Retrieve the original tab if it is still available.
+    const browserWindow = Services.wm.getMostRecentWindow("navigator:browser");
+    const { gBrowser } = browserWindow;
+    const originalBrowser = gBrowser.getBrowserForOuterWindowID(tabid);
+    const originalTab = gBrowser.getTabForBrowser(originalBrowser);
+
+    if (originalTab) {
+      // If the original tab was found, select it.
+      gBrowser.selectedTab = originalTab;
+    }
+  },
+  { once: true }
+);
+
+window.addEventListener(
+  "unload",
+  function() {
+    document
+      .getElementById("install")
+      .removeEventListener("click", onInstallButtonClick);
+    document
+      .getElementById("close")
+      .removeEventListener("click", onCloseButtonClick);
+    Services.prefs.removeObserver(DEVTOOLS_ENABLED_PREF, updatePage);
+  },
+  { once: true }
+);

devtools/startup/aboutdevtools/aboutdevtools.xhtml

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<!DOCTYPE html [
+<!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> %htmlDTD;
+<!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd"> %globalDTD;
+]>
+
+<html xmlns="http://www.w3.org/1999/xhtml" dir="&locale.dir;">
+<head>
+  <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'" />
+  <title data-l10n-id="head-title"></title>
+  <meta name="color-scheme" content="light dark"/>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>a
+  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools-startup/content/aboutdevtools/aboutdevtools.css"  type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools-startup/content/aboutdevtools/subscribe.css"  type="text/css"/>
+  <script src="chrome://devtools-startup/content/aboutdevtools/aboutdevtools.js"></script>
+  <script src="chrome://devtools-startup/content/aboutdevtools/subscribe.js"></script>
+  <link rel="localization" href="devtools/startup/aboutDevTools.ftl" />
+</head>
+<body>
+  <div id="install-page" class="wrapper" hidden="">
+    <div class="box">
+      <div class="left-pane" />
+      <div class="right-pane">
+        <h1 class="title" id="common-title" hidden="" data-l10n-id="enable-title"></h1>
+        <h1 class="title" id="inspect-title" hidden="" data-l10n-id="enable-inspect-element-title"></h1>
+
+        <!-- Include all the possible message, hidden by default
+             as we can't lazily load localized strings from dtd -->
+        <p id="about-debugging-message" hidden="" data-l10n-id="enable-about-debugging-message"></p>
+        <p id="menu-message" hidden="" data-l10n-id="enable-menu-message"></p>
+        <p id="key-shortcut-message" hidden="" data-l10n-id="enable-key-shortcut-message"></p>
+        <p id="inspect-element-message" hidden="" data-l10n-id="enable-inspect-element-message"></p>
+
+        <p data-l10n-id="enable-common-message"></p>
+        <a class="external installpage-link" href="https://firefox-source-docs.mozilla.org/devtools-user/" target="_blank" data-l10n-id="enable-learn-more-link"></a>
+        <div class="buttons-container">
+          <button class="primary" id="install" data-l10n-id="enable-enable-button"></button>
+          <button id="close" data-l10n-id="enable-close-button"></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- This page, hidden by default is displayed once the add-on is installed -->
+  <div id="welcome-page" class="wrapper" hidden="">
+    <div class="box">
+      <div class="left-pane" />
+      <div class="right-pane">
+        <h1 class="title" data-l10n-id="welcome-title"></h1>
+        <!-- The welcome message is dynamically updated with a keyboard shortcut at
+             runtime and added in aboutdevtools.js -->
+        <p id="welcome-message"></p>
+
+        <!-- Form dedicated to the newsletter subscription -->
+        <div class="newsletter">
+          <h2 class="newsletter-title" data-l10n-id="newsletter-title"></h2>
+          <p data-l10n-id="newsletter-message"></p>
+
+          <form id="newsletter-form" name="newsletter-form" action="https://www.mozilla.org/en-US/newsletter/" method="post">
+            <!-- "H" stands for the HTML format (->fmt). Alternative is T for text. -->
+            <input type="hidden" id="fmt" name="fmt" value="H" />
+            <!-- "app-dev" is the id of the Mozilla Developper newsletter -->
+            <input type="hidden" id="newsletters" name="newsletters" value="app-dev" />
+            <div id="newsletter-errors"></div>
+            <section id="newsletter-email" class="newsletter-form-section">
+              <input type="email" id="email" name="email" required="true" data-l10n-id="newsletter-email-placeholder" data-l10n-attrs="placeholder" />
+            </section>
+
+            <section id="newsletter-privacy" class="newsletter-form-section">
+              <input type="checkbox" id="privacy" name="privacy" required="true" />
+              <label for="privacy" data-l10n-id="newsletter-privacy-label">
+                <a class="external" href="https://www.mozilla.org/privacy/" data-l10n-name="privacy-policy"></a>
+              </label>
+            </section>
+            <button type="submit" id="newsletter-submit" class="primary" data-l10n-id="newsletter-subscribe-button"></button>
+          </form>
+          <div id="newsletter-thanks">
+            <h2 class="newsletter-title" data-l10n-id="newsletter-thanks-title"></h2>
+            <p data-l10n-id="newsletter-thanks-message"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="features">
+      <ul class="features-list">
+      </ul>
+    </div>
+
+    <footer>
+      <img class="dev-edition-logo"
+           src="chrome://devtools-startup/content/aboutdevtools/images/dev-edition-logo.svg"
+           alt="" />
+      <div class="footer-message">
+        <h1 class="footer-message-title" data-l10n-id="footer-title"></h1>
+        <p data-l10n-id="footer-message"></p>
+        <a class="external footer-link"
+           href="https://www.mozilla.org/firefox/developer/"
+           target="_blank" data-l10n-id="footer-learn-more-link"></a>
+      </div>
+    </footer>
+  </div>
+
+</body>
+</html>

devtools/startup/aboutdevtools/components.conf

@@ -0,0 +1,14 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+Classes = [
+    {
+        'cid': '{3a16d383-92bd-4c24-ac10-0e2bd66883ab}',
+        'contract_ids': ['@mozilla.org/network/protocol/about;1?what=devtools'],
+        'jsm': 'resource:///modules/AboutDevToolsRegistration.jsm',
+        'constructor': 'AboutDevtools',
+    },
+]

devtools/startup/aboutdevtools/images/external-link.svg

@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill #003eaa" d="M14.923 1.618A1 1 0 0 0 14 1H9a1 1 0 0 0 0 2h2.586L8.293 6.293a1 1 0 1 0 1.414 1.414L13 4.414V7a1 1 0 0 0 2 0V2a1 1 0 0 0-.077-.382z"/>
+  <path fill="context-fill #0060df" d="M14 10a1 1 0 0 0-1 1v2H3V3h2a1 1 0 0 0 0-2H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-console.svg

@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M159.832 106.154c6.121 0 11.427-4.63 11.427-10.749v-72a4.896 4.896 0 00-3.024-4.532 4.904 4.904 0 00-1.876-.373H54.399a4.899 4.899 0 00-4.9 4.903v.001l.001 72c0 6.12 5.306 10.75 11.427 10.75h98.905zM54.5 95.404c0 2.994 2.688 5.75 6.427 5.75h98.905c3.739 0 6.427-2.756 6.427-5.749V37.462H54.5v57.942z" fill="#0080FF"/>
+  <path fill-rule="evenodd" d="M61.117 28.88a3.19 3.19 0 01-3.187 3.191 3.19 3.19 0 010-6.381 3.19 3.19 0 013.187 3.19zm10.628 0a3.188 3.188 0 11-5.442-2.254 3.19 3.19 0 013.474-.693 3.188 3.188 0 011.968 2.947zm10.385 0a3.19 3.19 0 01-3.187 3.191 3.19 3.19 0 010-6.381 3.19 3.19 0 013.187 3.19" fill="#fff"/>
+  <path d="M77.575 88h12.586M65.863 74.33l6.123 6.127-6.123 6.13V74.33z" stroke="#00C7D8" stroke-width="3" stroke-linecap="round"/>
+  <path d="M156.5 47h-43a1.5 1.5 0 000 3h43a1.5 1.5 0 000-3zM102.5 47h-37a1.5 1.5 0 000 3h37a1.5 1.5 0 000-3zM144.5 59h-23a1.5 1.5 0 000 3h23a1.5 1.5 0 000-3zM112.5 59h-47a1.5 1.5 0 000 3h47a1.5 1.5 0 000-3z" fill="#1C2142"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-debugger.svg

@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M169.5 73.68h-119a2.5 2.5 0 000 5h119a2.5 2.5 0 100-5z" fill="#00C7D8"/>
+  <path d="M81.73 89.91H51.5a2.5 2.5 0 000 5h30.23a2.5 2.5 0 000-5z" fill="#0080FF"/>
+  <path d="M136.15 89.91H95.78a2.5 2.5 0 000 5h40.37a2.5 2.5 0 100-5z" fill="#1C2142"/>
+  <path d="M153.2 45.44v-3.97c0-3.04 2.45-5.5 5.47-5.5h10.62M141.37 55h7.78m7.17 0h7.78m-67.83 0h8.88m8.17 0h8.88M99.57 27h4.5c3.45 0 6.24 2.8 6.24 6.27v12.2M55.85 55h3.46m-7.22-11.82l2.7-4.15a6.8 6.8 0 019.43-2l11.1 7.3m-1.47-10.54l2.32 11.09-11.03 2.33m98.58-17.66l6.38 6.42-6.38 6.42V29.55zm-46.13 9.53l-7.29 7.32-7.29-7.32h14.58z" stroke="#0080FF" stroke-width="4" stroke-linecap="round"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-inspector.svg

@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M134.97 77.52h-64.4a8.92 8.92 0 01-8.87-8.96V44.42a8.92 8.92 0 018.88-8.96h64.4c4.9 0 8.87 4 8.87 8.96v24.14a8.91 8.91 0 01-8.88 8.96" fill="#0080FF"/>
+  <path d="M175.4 90.58H30.6M49.64 8.61v97.13V8.61zm105.54 0v97.13V8.61zm20.22 12.95H30.6h144.8z" stroke="#0080FF" stroke-width="4" stroke-linecap="round"/>
+  <path d="M122.97 113.11a15.27 15.27 0 01-15.25-15.32V58.96h66.7c8.42 0 15.25 6.86 15.25 15.32v23.51c0 8.46-6.83 15.32-15.25 15.32h-51.45z" fill="#1C2142"/>
+  <path d="M179.15 72.36h-12.7a1.47 1.47 0 100 2.94h12.7a1.47 1.47 0 100-2.94zM129.31 96.9h-12.7a1.47 1.47 0 100 2.94h12.7a1.47 1.47 0 100-2.94zM149.83 96.9h-12.7a1.47 1.47 0 100 2.94h12.7a1.47 1.47 0 100-2.94zM157.65 72.36h-41.04a1.47 1.47 0 100 2.94h41.04a1.47 1.47 0 100-2.94zM179.15 85.12h-62.54a1.47 1.47 0 100 2.94h62.54a1.47 1.47 0 100-2.94z" fill="#00C7D8"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-memory.svg

@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M152.49 65.74h2.5V64.2l-1.38-.7-1.12 2.24zm0-19.47l1.13 2.23 1.37-.7v-1.53h-2.5zM71 45.52h-2.5v1.54l1.37.7L71 45.51zm0 19.46l-1.13-2.23-1.37.7v1.53H71zm4.87 42.44h71.75v-5H75.87v5zm71.75 0c4.07 0 7.37-3.3 7.37-7.36h-5c0 1.3-1.06 2.36-2.37 2.36v5zm7.37-7.36V65.74h-5v34.32h5zM153.6 63.5c-3.3-1.67-5.17-4.07-5.17-7.5h-5c0 5.84 3.46 9.7 7.92 11.96l2.25-4.46zm-5.17-7.5c0-3.45 1.88-5.84 5.18-7.5l-2.26-4.47c-4.46 2.25-7.92 6.12-7.92 11.96h5zm6.55-9.74v-24.4h-5v24.4h5zm0-24.4c0-4.07-3.3-7.37-7.37-7.37v5c1.31 0 2.37 1.06 2.37 2.36h5zm-7.37-7.37H75.87v5h71.75v-5zm-71.75 0a7.36 7.36 0 00-7.37 7.36h5c0-1.3 1.06-2.36 2.37-2.36v-5zm-6 33.25c3.3 1.66 5.18 4.06 5.18 7.5h5c0-5.84-3.46-9.7-7.92-11.96l-2.26 4.46zm5.18 7.5c0 3.44-1.88 5.84-5.18 7.5l2.26 4.47c4.46-2.26 7.92-6.12 7.92-11.97h-5zm-6.55 9.73v35.52h5V64.98h-5zm0-43.12v23.66h5V21.86h-5zm0 78.64c0 1.63.49 3.41 1.82 4.8 1.35 1.42 3.28 2.12 5.55 2.12v-5c-1.23 0-1.73-.36-1.94-.57-.23-.24-.43-.67-.43-1.35h-5z" fill="#0080FF"/>
+  <path d="M118 85v5.22M129 85v5.22M107 85v5.22M96 85v5.22" stroke="#00C7D8" stroke-width="3" stroke-linecap="round"/>
+  <path d="M130.32 45h4.65m-4.65 8h4.65m-4.65 9h4.65M91 45h4.65M91 53h4.65M91 62h4.65M104 37.08v-4.63m8.5 4.63v-4.63m8.5 4.63v-4.63m-17 41.84v-4.63m8.5 4.63v-4.63m8.5 4.63v-4.63" stroke="#0022A9" stroke-width="4" stroke-linecap="round"/>
+  <path d="M125.9 37H99.76A3.76 3.76 0 0096 40.75v23.84a3.76 3.76 0 003.75 3.74h26.16a3.76 3.76 0 003.75-3.74V40.75a3.76 3.76 0 00-3.75-3.75z" stroke="#0022A9" stroke-width="4" stroke-linecap="round"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-network.svg

@@ -0,0 +1,10 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M48.47 33.67H170.1M164 38.7V30m-36 8.7V30m-37 8.7V30m-34 8.7V30" stroke="#031537" stroke-width="5" stroke-linecap="round"/>
+  <path d="M102.57 55H51.5a2.5 2.5 0 000 5h51.07a2.5 2.5 0 100-5z" fill="#0080FF"/>
+  <path d="M163.58 87H135.5a2.5 2.5 0 100 5h28.08a2.5 2.5 0 100-5z" fill="#00C7D8"/>
+  <path d="M144.58 55H116.5a2.5 2.5 0 100 5h28.08a2.5 2.5 0 100-5z" fill="#0080FF"/>
+  <path fill-rule="evenodd" d="M89 73.5a2.5 2.5 0 012.51-2.5h82.78a2.5 2.5 0 110 5H91.51A2.5 2.5 0 0189 73.5z" fill="#1C2142"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-performance.svg

@@ -0,0 +1,14 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M156.54 32.33v57.72c0 4.05-3.45 7.34-7.7 7.34H57.16c-4.26 0-7.7-3.29-7.7-7.34V32.33" stroke="#0080FF" stroke-width="5"/>
+  <path fill-rule="evenodd" d="M154.44 18.45H51.55a2.1 2.1 0 00-2.1 2.1v10.33h107.09V20.56a2.1 2.1 0 00-2.1-2.1z" fill="#0080FF"/>
+  <path d="M154.44 18.45H51.55a2.1 2.1 0 00-2.1 2.1v10.33h107.09V20.56a2.1 2.1 0 00-2.1-2.1z" stroke="#0080FF" stroke-width="5"/>
+  <path fill-rule="evenodd" d="M57.32 25.44a2.8 2.8 0 01-2.75 2.84 2.8 2.8 0 01-2.75-2.84 2.8 2.8 0 012.75-2.84 2.8 2.8 0 012.75 2.84zm9.17 0a2.8 2.8 0 01-2.75 2.84A2.8 2.8 0 0161 25.44a2.8 2.8 0 012.75-2.84 2.8 2.8 0 012.75 2.84zm8.96 0a2.8 2.8 0 01-2.75 2.84 2.8 2.8 0 01-2.75-2.84 2.8 2.8 0 012.75-2.84 2.8 2.8 0 012.75 2.84zM128.79 103.63h49.97a34.28 34.28 0 002.85-13.73A34.54 34.54 0 00147 55.4h-.17a34.54 34.54 0 00-34.6 34.49c0 4.88 1.02 9.52 2.85 13.73h13.7z" fill="#fff"/>
+  <path d="M128.79 103.63h49.97a34.28 34.28 0 002.85-13.73A34.54 34.54 0 00147 55.4h-.17a34.54 34.54 0 00-34.6 34.49c0 4.88 1.02 9.52 2.85 13.73h13.7v0z" stroke="#00C7D8" stroke-width="5" stroke-linecap="round"/>
+  <path d="M124.08 91.3h6.04m16.42-25.26v6.5-6.5zm-17.5 8.33l4.27 4.25-4.27-4.25z" stroke="#0080FF" stroke-width="3" stroke-linecap="round"/>
+  <path fill-rule="evenodd" d="M155.2 87.76c0 4.56-3.7 8.24-8.28 8.24a8.26 8.26 0 01-8.26-8.24 8.25 8.25 0 0116.54 0z" fill="#0022A9"/>
+  <path fill-rule="evenodd" d="M146.92 87.76l17.37-17.3z" fill="#005482"/>
+  <path d="M146.92 87.76l17.37-17.3" stroke="#137EFF" stroke-width="3" stroke-linecap="round"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-responsive.svg

@@ -0,0 +1,14 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M119.5 52h-60a1.5 1.5 0 000 3h60a1.5 1.5 0 000-3zM114.5 65h-55a1.5 1.5 0 000 3h55a1.5 1.5 0 000-3zM97.5 40h-38a1.5 1.5 0 000 3h38a1.5 1.5 0 000-3zM97.5 77h-38a1.5 1.5 0 000 3h38a1.5 1.5 0 000-3z" fill="#00C7D8"/>
+  <path d="M156.53 28.7v59.15c0 4.16-3.55 7.52-7.92 7.52H54.38c-4.37 0-7.92-3.36-7.92-7.52V28.69" stroke="#0080FF" stroke-width="5"/>
+  <path fill-rule="evenodd" d="M154.37 14.46H48.63c-1.2 0-2.17.97-2.17 2.16V27.2h110.07V16.62c0-1.2-.97-2.16-2.16-2.16" fill="#0080FF"/>
+  <path d="M154.37 14.46H48.63c-1.2 0-2.17.97-2.17 2.16V27.2h110.07V16.62c0-1.2-.97-2.16-2.16-2.16v0z" stroke="#0080FF" stroke-width="5"/>
+  <path fill-rule="evenodd" d="M54.55 21.63c0 1.6-1.27 2.91-2.83 2.91a2.87 2.87 0 01-2.82-2.91c0-1.6 1.26-2.91 2.82-2.91 1.56 0 2.83 1.3 2.83 2.91zm9.43 0c0 1.6-1.27 2.91-2.83 2.91a2.87 2.87 0 01-2.83-2.91c0-1.6 1.27-2.91 2.83-2.91s2.83 1.3 2.83 2.91zm9.2 0c0 1.6-1.26 2.91-2.82 2.91a2.87 2.87 0 01-2.83-2.91c0-1.6 1.27-2.91 2.83-2.91s2.83 1.3 2.83 2.91zM131.85 25.85h51.02v79h-51.02V25.85z" fill="#fff"/>
+  <path d="M173.5 47.27h-32.2a1.5 1.5 0 000 3h32.2a1.5 1.5 0 100-3zM168.6 56.27h-27.3a1.5 1.5 0 000 3h27.3a1.5 1.5 0 100-3zM164.32 37.27H141.3a1.5 1.5 0 000 3h23.02a1.5 1.5 0 100-3zM160.32 66.27H141.3a1.5 1.5 0 000 3h19.02a1.5 1.5 0 100-3z" fill="#1C2142"/>
+  <path d="M174.15 106.93h-34.49a9.27 9.27 0 01-9.26-9.23V33.64a9.27 9.27 0 019.26-9.24h34.49c5.1 0 9.26 4.16 9.26 9.24V97.7a9.28 9.28 0 01-9.26 9.23v0z" stroke="#0E59E1" stroke-width="5" stroke-linecap="round"/>
+  <path d="M183.41 82h-53" stroke="#0E59E1" stroke-width="4" stroke-linecap="round"/>
+  <path fill-rule="evenodd" d="M156.4 97.68a3.94 3.94 0 110-7.88 3.94 3.94 0 010 7.88z" fill="#0080FF"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-storage.svg

@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M146.02 101.91h-69.6c-4.95 0-8.99-3.22-8.99-7.15V81.88c0-3.93 4.04-7.15 8.99-7.15h69.6c4.94 0 8.98 3.22 8.98 7.15v12.88c0 3.93-4.04 7.15-8.98 7.15h0z" stroke="#0022A9" stroke-width="5" stroke-linecap="round"/>
+  <path d="M146.02 74.73h-69.6c-4.95 0-8.99-3.21-8.99-7.15V54.7c0-3.93 4.04-7.15 8.99-7.15h69.6c4.94 0 8.98 3.22 8.98 7.15v12.88c0 3.94-4.04 7.15-8.98 7.15h0z" stroke="#137EFF" stroke-width="5" stroke-linecap="round"/>
+  <path d="M146.02 47.56h-69.6c-4.95 0-8.99-3.22-8.99-7.15V27.53c0-3.94 4.04-7.15 8.99-7.15h69.6c4.94 0 8.98 3.21 8.98 7.15V40.4c0 3.93-4.04 7.15-8.98 7.15h0z" stroke="#00C7D8" stroke-width="5" stroke-linecap="round"/>
+  <path fill-rule="evenodd" d="M81.8 37.63a3.8 3.8 0 11.01-7.62 3.8 3.8 0 010 7.62zm3.8 23.18a3.8 3.8 0 11-7.61.02 3.8 3.8 0 017.61-.02zm-3.8 30.82a3.8 3.8 0 11.01-7.62 3.8 3.8 0 010 7.62z" fill="#1C2142"/>
+</svg>

devtools/startup/aboutdevtools/images/feature-visualediting.svg

@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg viewBox="0 0 220 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M74.9 77.01l76.85-33.52" stroke="#00C7D8" stroke-width="3" stroke-linecap="round"/>
+  <path d="M119.1 27h-15.8 15.8zm-17.28.38a7.38 7.38 0 10-14.76 0 7.38 7.38 0 0014.76 0h0zM108.83 90.88h15.8-15.8zm17.28 1.38a7.38 7.38 0 1114.75 0 7.38 7.38 0 01-14.75 0h0z" stroke="#0022A9" stroke-width="4" stroke-linecap="round"/>
+  <path d="M71 93.02c18.14 4.2 36.25-7.22 40.47-25.47l.9-3.94 2-8.6c4.2-18.25 17.2-30.19 35.33-26" stroke="#0080FF" stroke-width="5" stroke-linecap="round"/>
+  <path d="M71.16 99.3a6.15 6.15 0 100-12.3 6.15 6.15 0 000 12.3zM150.16 33.3a6.15 6.15 0 100-12.3 6.15 6.15 0 000 12.3z" fill="#0080FF"/>
+</svg>

devtools/startup/aboutdevtools/images/otter.svg

@@ -0,0 +1,29 @@
+<!-- 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/. -->
+<svg width="566" height="368" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M115.24 184.24a35.8 35.8 0 00-17.78 5.28 32.24 32.24 0 01-17.78 4.82 32.22 32.22 0 01-17.78-4.82 36 36 0 00-19.7-5.32 36 36 0 00-19.68 5.3 32.22 32.22 0 01-17.78 4.82 2 2 0 000 4 36 36 0 0019.68-5.3 32.22 32.22 0 0117.78-4.82 32.22 32.22 0 0117.8 4.82 36 36 0 0019.68 5.3 36 36 0 0019.68-5.3 32.22 32.22 0 0117.78-4.82h.76v-.76c-.96-1-1.84-2.08-2.66-3.2zm-22.5-3.56a1 1 0 00.4 0l1.84-.88A1.02 1.02 0 1094 178l-1.76.84a1.02 1.02 0 10.4 2l.1-.16zm-51.72-7.34a33.04 33.04 0 0118.26 4.94c1.26.68 2.54 1.38 3.9 2a1 1 0 00.42 0 1.02 1.02 0 10.42-2 56.9 56.9 0 01-3.8-2 35.16 35.16 0 00-19.2-5.18 1 1 0 100 2v.24zm38.1 8.14a1 1 0 100 2c2.05-.02 4.1-.2 6.12-.52a1 1 0 00.43-1.82 1.01 1.01 0 00-.75-.18c-1.92.32-3.86.5-5.8.52zm37.7 18.22a1 1 0 100 2c1.38 0 2.62 0 3.8.18a8 8 0 01-1.38-2c-.8-.14-1.56-.18-2.42-.18zm294.46 27.5a36 36 0 00-19.68 5.3 32.22 32.22 0 01-17.78 4.82 2 2 0 000 4 36 36 0 0019.68-5.3 32.22 32.22 0 0117.6-4.82c.28-1.36.58-2.7.92-4h-.74zm149.84 0a36 36 0 00-19.68 5.3 35.15 35.15 0 01-35.56 0 36 36 0 00-19.68-5.3 34.64 34.64 0 00-16.1 3.44 135 135 0 01.88 4 30.75 30.75 0 0115.22-3.48A32.22 32.22 0 01504 236a39.12 39.12 0 0039.36 0 32.22 32.22 0 0117.78-4.82 2 2 0 100-4l-.02.02zm-80.9-12.6a1 1 0 00-.62 1.74 1 1 0 00.72.26h.1c1.51-.16 3.04-.24 4.56-.24a1 1 0 00.7-1.7 1 1 0 00-.7-.3c-1.59 0-3.18.08-4.76.24zm-70.22-.26a1 1 0 100 2c1.85 0 3.7.12 5.54.36.28-.68.56-1.3.84-2-2.11-.28-4.25-.4-6.38-.36zm98.9 35.5a56.9 56.9 0 01-3.8-2 35.16 35.16 0 00-19.2-5.18 1 1 0 100 2 33.06 33.06 0 0118.26 4.94c1.26.68 2.54 1.38 3.9 2a1 1 0 00.42 0 1.02 1.02 0 10.42-2v.24zm51.88-7.14c-1.58 0-3.16.08-4.74.24a1 1 0 00-.62 1.74 1 1 0 00.72.26h.1a38.6 38.6 0 014.56-.22 1 1 0 00.7-1.7 1 1 0 00-.7-.3l-.02-.02zm-21.8 6.58l-1.76.84a1 1 0 00.08 1.8c.24.1.5.11.74.02l1.84-.88a1 1 0 10-.9-1.78zm-9.16 3.06c-1.93.3-3.87.47-5.82.48a1 1 0 100 2c2.05-.02 4.1-.2 6.12-.52a1.01 1.01 0 10-.32-2l.02.04zm-379.48 11.38A64.28 64.28 0 01138 221.54c-23.52 8-38.3 19.48-38.3 32.3 0 24 52 43.5 116 43.5 3.75 0 7.45-.07 11.12-.2-1.52-.88-3-1.78-4.4-2.7-30.86.88-57.04-10.18-72.08-30.72zm164.1 70.78a36 36 0 00-19.68 5.3 35.15 35.15 0 01-35.56 0 39.12 39.12 0 00-39.36 0 35.15 35.15 0 01-35.56 0 36 36 0 00-19.68-5.3 36 36 0 00-19.68 5.3 32.22 32.22 0 01-17.78 4.82 2 2 0 000 4 36 36 0 0019.68-5.3 35.14 35.14 0 0135.56 0 39.14 39.14 0 0039.36 0 35.16 35.16 0 0135.56 0 39.12 39.12 0 0039.36 0 32.22 32.22 0 0117.78-4.82 2 2 0 100-4zm-80.68-10.62c1.52-.16 3.04-.24 4.56-.24a1 1 0 00.7-1.7 1 1 0 00-.7-.3c-1.6 0-3.2.07-4.78.24a1 1 0 00-.62 1.74 1 1 0 00.72.26h.12zM215.12 331a1 1 0 00.4 0l1.84-.88a1 1 0 10-.9-1.78l-1.76.84a1.02 1.02 0 10.4 2l.02-.18z" fill="#EAEAEE"/>
+  <path d="M201.54 333.8c2.05-.02 4.1-.2 6.12-.52a1.03 1.03 0 00.66-.4 1.02 1.02 0 00.04-1.13 1.02 1.02 0 00-1.02-.47c-1.93.3-3.87.47-5.82.48a1 1 0 100 2l.02.04zm-19.88-5.2c1.26.68 2.54 1.38 3.9 2a1 1 0 00.42 0 1.02 1.02 0 10.42-2 56.9 56.9 0 01-3.8-2 35.16 35.16 0 00-19.2-5.18 1 1 0 100 2c6.46-.1 12.81 1.7 18.26 5.18zm101.48 31.06c-1.93.3-3.87.47-5.82.48a1 1 0 100 2c2.05-.02 4.1-.2 6.12-.52a1.03 1.03 0 00.66-.4 1.02 1.02 0 00.04-1.13 1 1 0 00-1.02-.47l.02.04zm-20.92-2.5a56.9 56.9 0 01-3.8-2 35.16 35.16 0 00-19.2-5.18 1 1 0 100 2 33.06 33.06 0 0118.26 4.94c1.26.68 2.54 1.38 3.9 2a1 1 0 00.42 0 1.02 1.02 0 10.42-2v.24zm30.08-.56l-1.76.84a1 1 0 00.08 1.8c.24.1.5.11.74.02l1.84-.88a.99.99 0 00.55-.58 1.01 1.01 0 00-.3-1.11.98.98 0 00-.76-.23 1 1 0 00-.39.14zM314 350c-1.58 0-3.17.08-4.74.24a1 1 0 00-.62 1.74 1 1 0 00.72.26h.1c1.51-.16 3.04-.24 4.56-.22a1 1 0 00.7-1.7 1 1 0 00-.7-.3L314 350z" fill="#EAEAEE"/>
+  <path d="M321.2 223.08c.24-.44.52-.86.78-1.28l-.66-.48 1.38-.6a20.29 20.29 0 014.58-4.58l-1.3-4.3c-4.94 4-13.38 6.24-19.56 7.38 4.61 2.24 9 4.92 13.1 8 .4-1.44.97-2.82 1.68-4.14zM338.04 215.34c9.45 0 17.12-9.35 17.12-20.88s-7.67-20.88-17.12-20.88c-9.46 0-17.12 9.35-17.12 20.88s7.66 20.88 17.12 20.88z" fill="#fff"/>
+  <path d="M335.84 233.84s-15.95-40.36-16.8-44.88l-1.76-5.84c-.37.15-.72.33-1.06.54-4.34 2.9-15.6 4.22-26.94 1.42a39.14 39.14 0 01-16.54-8.24 10.2 10.2 0 001.39-7.18 10.33 10.33 0 00-1.51-3.86c4.82-7.72 6.46-17.16 4.76-27.74a62 62 0 00-3.6-12.86 28.52 28.52 0 005-21.82 19.48 19.48 0 00-12.9-15c-10.74-3.64-19.76 1.68-25.5 7.7a75.22 75.22 0 00-34.82-8 25.34 25.34 0 00-18.96-7.86 8 8 0 00-7.58 5.78 41.85 41.85 0 00-17.32 1.74 8 8 0 00-5.42 6.26c-.25 1.6-.2 3.24.18 4.82a87.1 87.1 0 00-34.28 22c-8.56-2.54-20.18-2.82-27.76 6.52a19.48 19.48 0 00-2.8 19.58 28.44 28.44 0 0015.36 15.44 44 44 0 008.24 21.88 31.32 31.32 0 002.78 3.22v.76c-.41 3.55-.1 7.14.94 10.56.37 1.15.98 2.2 1.78 3.1a8 8 0 006.5 2.6c.38 0 .88 0 1.44-.2.7 2.53 1.83 4.93 3.34 7.08a8 8 0 005.56 3.4l1.18.12a82.59 82.59 0 00-.68 6.66 64.28 64.28 0 0012.36 42.18c15.06 20.54 41.24 31.62 72 30.72 1.4.9 2.88 1.8 4.4 2.7a175.42 175.42 0 0084.12 22.42c20.7 0 41.4-4.38 59.02-15.44a8 8 0 003.2-9.7c-11.34-28.88-24.96-48-37.32-60.58z" fill="#fff"/>
+  <path d="M287.86 190.92c-10.56-2.6-18.9-7.86-23.84-14.96a5.06 5.06 0 004.2-3.56c.3-1.28.16-3.6-3.38-6 6.1-7.04 8.42-16.42 6.66-27.3a55.73 55.73 0 00-4.64-14.8 22.6 22.6 0 006-19.62A13.44 13.44 0 00264 94.14c-11.02-3.74-19.16 5.62-22 9.56a71.74 71.74 0 00-37.4-9.52h-1.58c-4.42-4.86-8.82-7.84-16.38-7.84a2 2 0 00-2 2c-.02 1.85.1 3.7.36 5.54-8.72-4.46-20.82-.64-21.46-.44a2 2 0 00-1.36 1.56 7.2 7.2 0 001.46 5.34 8.54 8.54 0 002 1.84c-25.26 6.94-38 21.2-41.6 25.68-4.48-1.84-17.46-6-24.92 3.24a13.44 13.44 0 00-1.88 13.68A22.58 22.58 0 00112.7 158c.48 16.16 8.12 24.5 11.76 27.1 0 .36-.12.78-.2 1.22-.79 3.56-.67 7.27.34 10.78a2 2 0 002 1.42c2.57-.41 5.11-.97 7.62-1.66a13.2 13.2 0 002.64 11.14 2.01 2.01 0 001.4.86 12 12 0 008.28-2.18c-5.42 19.6-2.42 38.4 8.66 53.54 14.16 19.32 39.24 29.54 68.92 28.2 17.34 11.74 42.2 20.64 66.68 23.82 6.63.88 13.31 1.32 20 1.34 17.72 0 38-3.3 55.88-14.5a2 2 0 00.8-2.42c-9.52-24.34-20.6-41.42-31.02-53.36l-2-6.84a2.02 2.02 0 01.13-1.57 2 2 0 011.23-.99l8.94-2.72c.65.38 1.14 1 1.36 1.72l4.52 14.94a1.01 1.01 0 00.88.72c.13.01.27 0 .4-.04.12 0 .22-.16.36-.2a4.4 4.4 0 002.18-1.04.96.96 0 00.58-.3 21.37 21.37 0 00-14.3-35.58l-.32-1.04h.2a2 2 0 001-.26c9.08-5.18 10.36-17.1 5.84-24.98a12.17 12.17 0 00-6.46-5.72 11.18 11.18 0 00-9.38 1.24c-.1.07-.18.15-.26.24l-1.08-3.54a21.51 21.51 0 008.3-16.12 21.38 21.38 0 00-16.04-21.52.96.96 0 00-.44 0c-.66 0-.9.14-1.72 0-.44.12-.88.27-1.3.44a1.03 1.03 0 00-.72.88c-.01.14 0 .27.04.4l4.52 14.94c.22.73.15 1.52-.18 2.2l-9 2.72a1.99 1.99 0 01-2.2-.64 2 2 0 01-.36-.72l-4.42-14.56a.93.93 0 00-1-.7.95.95 0 00-.42.14.98.98 0 00-1.3 0 20.4 20.4 0 0012.44 36l.72 2.4 1.76 5.84c-5.62 3.38-17.92 5.14-31.1 1.88zm49.06 62a1 1 0 00.4 0 1.04 1.04 0 00.6-.5v-.14a.98.98 0 00.46-.16 180.84 180.84 0 0124.78 44.4c-42 25.08-106.46 9.44-137.38-11.82a2 2 0 00-1.14-.36h-.1c-28.58 1.52-52.7-8.16-66.16-26.52-11.58-15.8-13.66-36-5.86-56.76a2 2 0 00-2.36-2.64l-.66.16a2 2 0 00-1.16.82s-3.88 5.5-8.72 5.52c-3.76-6.14-.28-9.34.12-9.68a2 2 0 00-1.74-3.5c-2.88.78-7.42 2-10 2.48-.41-2.4-.35-4.86.18-7.24.23-1.03.34-2.08.32-3.14a2 2 0 00-1.14-1.66c-1.76-.82-10.68-8.6-10.68-25.86a2 2 0 00-1.68-2 18.79 18.79 0 01-14-11.02 9.55 9.55 0 011.26-9.76c6.28-7.86 18.9-2.66 21.16-1.64a44.42 44.42 0 00-6.7 15.18 1 1 0 00.78 1.18h.2a1 1 0 00.98-.8c1.38-5.82 4-11.27 7.66-16 .7-.84 1.45-1.63 2.26-2.36a.99.99 0 00.32-.78c5.38-6 19.44-18.84 44.5-23.86a2 2 0 00-.2-4A9.1 9.1 0 01166.9 98a3.55 3.55 0 01-.6-1.14c4.34-1.06 16.84-3.28 21.46 4.98a2.04 2.04 0 001.22.94 2.02 2.02 0 002.28-2.94 20.13 20.13 0 01-2.54-9.44c5.18.5 8.3 2.94 12 7.04a2 2 0 001.46.68h2.5c11-.3 21.9 2.12 31.72 7.08a65.3 65.3 0 0112.56 8.8 1 1 0 001.71-.71 1 1 0 00-.3-.71 47.06 47.06 0 00-6.37-4.88c.12-.1.23-.23.32-.36 0-.14 8-12.98 18.36-9.44a9.54 9.54 0 016.32 7.54 18.77 18.77 0 01-5.88 16.84 2 2 0 00-.58 2l.16.54c.04.14.1.27.16.4.14.24 13.1 24.84-2.64 40.12a2.01 2.01 0 00-.22 2.61 2 2 0 00.72.61c2.92 1.46 3.54 2.66 3.58 2.84.04.18-1.06.88-3.68.88a2 2 0 00-2 1.96c-.01.35.07.7.24 1 5.12 9.4 15.06 16.34 28 19.52 12 2.94 24.84 2.26 32.64-1.54l4.88 14.62c-5.22 5.44-20.32 8-26 8.44a2 2 0 00-1.64 1.2 65.03 65.03 0 00-17.18-3.22 1 1 0 100 2c6.04.31 12 1.49 17.7 3.48a2 2 0 00.8.46c.18 0 8.82 2.4 20.64 11.76a20.34 20.34 0 0018 20.9l.22.06zM326 211.84l1.3 4.3a20.31 20.31 0 00-4.58 4.58c-.26.34-.48.7-.72 1.08-.24.38-.54.84-.78 1.28a20.5 20.5 0 00-1.68 4.24 79.6 79.6 0 00-13.1-8c6.16-1.32 14.6-3.48 19.56-7.48zm31.74 15.22a19.22 19.22 0 01-2.98 17.12l-3.88-12.78a3.98 3.98 0 00-5.04-2.7l-10.62 3.3a4 4 0 00-2.7 5.04l3.88 12.78a19.39 19.39 0 01-4.74-33.96 1 1 0 00.38-1.1l-2.72-8.96c2.67 1.5 5.58 2.5 8.6 2.98l1.2 3.88a1 1 0 00.92.7 19.37 19.37 0 0117.68 13.7h.02zm-23.08-43.46c1.57-.8 3.4-.96 5.08-.44a8.26 8.26 0 014.3 4c2.62 4.6 3.08 12.82-2 17.68a2 2 0 00-1.08 0c-1.54.52-7.24-.5-11.58-3.62a7.85 7.85 0 01-3.8-5.82c.08-6.1 7.54-10.88 9.08-11.8zm-16.8-22.5l.6-.18-.6.18zm-15.38 3.74a19.26 19.26 0 013.04-17.2l3.88 12.78a4.02 4.02 0 005.04 2.7L325 160a4 4 0 002.7-5.04l-3.88-12.78a19.38 19.38 0 014.74 33.96 1 1 0 00-.38 1.1l1.52 4.92a25.02 25.02 0 00-5.74 6l-2.68-8.86a1 1 0 00-.92-.72 19.34 19.34 0 01-17.88-13.74z" fill="url(#paint0_linear)"/>
+  <path d="M319.68 238.6a20.34 20.34 0 01-.86-6.56c-11.82-9.36-20.46-11.72-20.64-11.76a2 2 0 01-.8-.46c-5.7-2-11.66-3.17-17.7-3.48a1 1 0 110-2c5.85.3 11.63 1.38 17.18 3.22a2 2 0 011.64-1.2c5.62-.52 20.7-3 26-8.44l-4.88-14.62c-7.8 3.8-20.7 4.48-32.64 1.54-12.92-3.18-22.86-10.12-28-19.52a2.01 2.01 0 01.77-2.7 2 2 0 01.99-.26c2.62 0 3.58-.7 3.68-.88.1-.18-.64-1.38-3.58-2.84a2 2 0 01-.5-3.22c15.74-15.26 2.76-39.86 2.64-40.12a2.04 2.04 0 01-.16-.4l-.16-.54a2 2 0 01.58-2 18.77 18.77 0 005.88-16.84 9.53 9.53 0 00-6.38-7.52c-10.44-3.54-18.28 9.3-18.36 9.44-.1.13-.2.25-.32.36a47.11 47.11 0 016.3 4.92.98.98 0 01.3.71 1 1 0 01-.63.93 1.02 1.02 0 01-1.09-.22 65.27 65.27 0 00-12.66-8.78 66.28 66.28 0 00-31.72-7.08h-2.5a2 2 0 01-1.46-.68c-3.62-4.12-6.74-6.56-12-7.04.06 3.3.93 6.55 2.54 9.44a2.01 2.01 0 11-3.5 2c-4.64-8.24-17.14-6-21.46-4.98.13.41.33.8.6 1.14a9.1 9.1 0 006.3 2.52 2 2 0 01.2 4c-25.04 5.04-39.12 17.88-44.5 23.86a.98.98 0 01-.32.78c-.8.73-1.56 1.52-2.26 2.36a42 42 0 00-7.66 16 1 1 0 01-.98.8h-.2a1 1 0 01-.78-1.18 44.43 44.43 0 016.8-15.3c-2.26-1.02-14.88-6.22-21.16 1.64a9.54 9.54 0 00-1.26 9.76 18.79 18.79 0 0014 11.02 2 2 0 011.68 2c0 17.24 8.92 25.04 10.68 25.86a2 2 0 011.14 1.66c.02 1.06-.09 2.11-.32 3.14-.5 2.35-.55 4.77-.14 7.14 2.56-.54 7.08-1.7 10-2.48a2 2 0 011.78 3.5c-.4.34-3.88 3.54-.12 9.68 4.84 0 8.68-5.48 8.72-5.52a2 2 0 011.16-.82l.66-.16a2 2 0 012.36 2.64c-7.8 20.8-5.72 40.96 5.86 56.76 13.46 18.36 37.58 28 66.16 26.52h.1a2 2 0 011.14.36c30.92 21.26 95.44 36.9 137.38 11.82a180.84 180.84 0 00-24.78-44.4c-.14.1-.3.15-.46.16v.14a1.01 1.01 0 01-.6.5 1 1 0 01-.4 0 20.38 20.38 0 01-17.28-14.32zm25 41.74c2.3 7.66-8 17.1-32 16-44-2-62.64-13.8-70-18a144.85 144.85 0 01-24-16.24c-.44 2.6-.44 5.25 0 7.84a2 2 0 01-1.56 2.36h-.4a2 2 0 01-2-1.6 29.83 29.83 0 017.28-24.56c3.64-3.72 10.26-7.74 20.98-5.78h.2a1 1 0 011.34.44 17.36 17.36 0 0012.32 9.22 4.3 4.3 0 004-1.36c5.42-7.22-1.6-14.4-2-14.7-9.66-8.16-28.2-13.16-51.12-2.54-12.66 5.88-21.18 14.64-21.18 21.84a1 1 0 01-1.7.7 1 1 0 01-.3-.7c0-5.34 3.84-11.2 10.36-16.38-9.62-13.14-17.3-24.76-14.36-30.62 0 0 15 3 37-6 11.02-4.5 17.28-13.54 20.68-19.7a86.97 86.97 0 01-33.58 14.28c-35 7.06-67.28-6.58-72-30.46-4.72-23.88 19.64-48.98 54.64-56 35-7.02 67.28 6.58 72 30.46 2.76 13.64-4 27.66-16.9 38.5 2.52 8.5 10.32 32.42 20.14 38.96 12 8 18 6 36 12s40.14 32.04 46.14 52.04h.02z" fill="url(#paint1_linear)"/>
+  <path d="M227.14 168.4a2 2 0 00-2.42 1.46 8.76 8.76 0 01-3.78 5.26 6.2 6.2 0 01-5.38-.58 1.99 1.99 0 00-2.74 1.04 6.45 6.45 0 01-3.72 4 10.6 10.6 0 01-7.44-1.08 2.01 2.01 0 00-2 3.48 16.4 16.4 0 007.28 2 9.7 9.7 0 008.68-5.1 9.1 9.1 0 007-.16c4.5-2 6-7.7 6-8a2 2 0 00-1.48-2.32zM164.28 159.36a3.04 3.04 0 003.92 1.8 3.05 3.05 0 001.8-3.92s-1.2-3.18-2.92-7.88a3 3 0 00-5.64 2c1.64 4.8 2.84 8 2.84 8zM230 141.48a3 3 0 004.8 1.4 3 3 0 00.96-3.2l-2.1-6.74a3 3 0 00-5.72 1.78l2.06 6.76zM175.82 158.7a2 2 0 00-2.28 1.66 5.8 5.8 0 01-2.58 4.54c-2.33.86-4.9.77-7.16-.24a2 2 0 10-1.58 3.68c1.9.77 3.94 1.18 6 1.2a9.73 9.73 0 004.74-1.12 9.6 9.6 0 004.62-7.42 2 2 0 00-1.76-2.3zM242.32 141.38a2 2 0 00-2.44 1.42 5.8 5.8 0 01-3.04 4.26c-2.4.62-4.95.28-7.1-.96a2.02 2.02 0 00-2 3.5 16 16 0 006.98 1.84 9.2 9.2 0 003.62-.7 9.62 9.62 0 005.36-6.92 2 2 0 00-1.38-2.44zM211.42 172.32c.23.03.45.03.68 0 1.45-.51 2.8-1.27 4-2.24a33.53 33.53 0 009.46-10.22 7.8 7.8 0 00.72-6 4 4 0 00-3.16-2.66c-5.12-1.2-20.44 2.48-27.12 10.54a4 4 0 00-.48 4.48c1.64 3.22 10.22 5.58 14.48 6 .47.06.94.1 1.42.1z" fill="#01C8D7"/>
+  <path d="M242.3 244.3a2 2 0 001.66-.48 18.95 18.95 0 0012.72 8.28 6.15 6.15 0 005.76-2.16c6.44-8.6-2-17.22-2.16-17.36-15.54-13.16-37.72-10.12-53.32-2.88a59.5 59.5 0 00-12 7.28c-6.52 5.18-10.36 11.04-10.36 16.38a1 1 0 001.7.7 1 1 0 00.3-.7c0-7.18 8.5-16 21.18-21.84 22.92-10.62 41.46-5.62 51.12 2.54.3.3 7.32 7.48 2 14.7a4.32 4.32 0 01-4 1.36 17.33 17.33 0 01-12.32-9.22 1 1 0 00-1.34-.44h-.2c-10.72-2-17.34 2-20.98 5.78a29.82 29.82 0 00-7.34 24.58 2 2 0 002 1.6h.4a1.99 1.99 0 001.56-1.58c.05-.26.05-.52 0-.78-.45-2.6-.45-5.25 0-7.84a24.4 24.4 0 016.2-13.14c4.34-4.52 10.2-6.1 17.42-4.78z" fill="#00C8D7"/>
+  <path d="M452 177.26a8 8 0 00-13.54-2 153.95 153.95 0 00-17 25.54 17.82 17.82 0 00-1.84 7.7 73.99 73.99 0 00-4.04 8.34A79.59 79.59 0 00412 227.2c-.34 1.3-.66 2.62-.92 4-.12.6-.24 1.2-.34 1.82a20.97 20.97 0 000 6.54 34.54 34.54 0 00-3.22 10c-.2.92-.44 2-.68 3.02-1.6 6.8 1.4 11.18 3.58 14.38a21.64 21.64 0 014.28 10.46c-.68 3.48-14.26 11.06-30.12 15.26a8 8 0 00-5.4 4.76c-2.12 5.3 0 10.98 5.22 14.48s14.2 5.32 24.12 5.32c14.34 0 30.56-4 39.74-13.18 16.84-16.84 24.34-34 24.34-55.66-.12-4.6-.68-9.17-1.68-13.66-.26-1.32-.56-2.66-.88-4-5.08-22.14-16.36-49.6-18.04-53.48zm-8 122.5c-8.16 8.16-22.66 11.36-35.24 11.36-9.04 0-17.1-1.64-21.08-4.28-3.98-2.64-3.46-6-2.96-7.24a2 2 0 011.34-1.2c9.42-2.48 36-11.8 34.52-21.78a27.66 27.66 0 00-5.28-13.12c-1.9-2.78-3.68-5.4-2.7-9.62.26-1.12.5-2.14.7-3.06 1.08-4.82 1.74-7.74 3.76-9.82a16.83 16.83 0 01-.48-6.98 72.14 72.14 0 018.26-22.7 2 2 0 01.78-.74c-.3-2.43.09-4.9 1.14-7.12a147.29 147.29 0 0116.26-24.38 2 2 0 013.38.5c.82 2 20.16 48.6 20.16 68.76 0 20.16-6.86 35.78-22.56 51.4v.02z" fill="#fff"/>
+  <path d="M444.96 178.36a2 2 0 00-1.84.7 147.35 147.35 0 00-16.26 24.38 12.87 12.87 0 00-1.14 7.12c-.32.17-.6.43-.78.74a72.11 72.11 0 00-8.24 22.7c-.33 2.34-.17 4.71.48 6.98-2 2-2.68 5-3.76 9.82-.22.94-.44 2-.7 3.06-1 4.22.8 6.84 2.7 9.62a27.66 27.66 0 015.28 13.12c1.42 10-25.12 19.3-34.52 21.78a2.01 2.01 0 00-1.34 1.2c-.5 1.26-1.22 4.48 2.96 7.24s12 4.28 21.08 4.28c12.58 0 27.08-3.18 35.24-11.36 15.62-15.62 22.58-31.48 22.58-51.42s-19.34-66.8-20.16-68.76a2 2 0 00-1.58-1.2z" fill="#00C8D7"/>
+  <path d="M430.46 205.22c-4.4 8.78 9.78 25.86 15.62 31.7a2 2 0 01-2.82 2.82c-.68-.68-12.28-12.4-16.26-23.8a68.4 68.4 0 00-6.36 18.72c-.3 3.4.4 6.8 2 9.82l13.58 18.68a2 2 0 01-3.04 2.58 80.6 80.6 0 01-14-19.22l-.44-.6c-.6 1.89-1.1 3.81-1.48 5.76-.22.94-.44 2-.7 3.1-.56 2.42.24 3.72 2.1 6.46a31.53 31.53 0 016 14.8c2 14.26-28.6 23.74-36.18 25.86.31.68.84 1.23 1.5 1.58 8.48 5.58 39.16 5.54 51.28-6.58 14.8-14.82 21.42-29.8 21.42-48.58 0-16.46-14.18-53.12-18.56-64a138.1 138.1 0 00-13.66 20.9z" fill="#CCFBFF"/>
+  <path d="M293.76 83.8H503.3a2.36 2.36 0 000-4.7h-48.68c-4.34-8-15.14-25.14-28.62-27.72-18-3.42-21.48 14.44-21.48 14.44s-12-30.96-42-26.86c-14.4 2-19.76 9.56-21.18 17.6a1.2 1.2 0 011.13 0c.34.18.58.55.61.94 0 .78.14 1.54.26 2.28a1.18 1.18 0 01-1 1.32c-.34 0-.66-.06-.93-.3-.3-.26-.39-.6-.39-.98-.2 3.75.14 7.52.98 11.18h1.72c-.16-.42-.34-.94-.54-1.52a1.18 1.18 0 012.22-.76c.62 1.82 1.12 2.94 1.12 2.96a1.19 1.19 0 01-.09 1.12 1.18 1.18 0 01-.99.54h-2.86a46.2 46.2 0 002 5.74h-50.82a2.36 2.36 0 000 4.7v.02z" fill="#fff"/>
+  <path d="M321.28 179.32l2.72 8.86c1.57-2.3 3.5-4.33 5.74-6l-1.52-4.92a1 1 0 01.38-1.1 19.46 19.46 0 008.03-14.53 19.39 19.39 0 00-12.77-19.43l3.88 12.78A4 4 0 01325 160l-10.62 3.22a3.99 3.99 0 01-5.04-2.7l-3.88-12.78c-.54.72-1.03 1.47-1.46 2.26a19.4 19.4 0 0016.42 28.52 1.01 1.01 0 01.86.8zM339.08 212.62l-1.2-3.88a25.8 25.8 0 01-8.6-2.98l2.72 8.96a1 1 0 01-.38 1.1 19.49 19.49 0 00-8.03 14.53 19.38 19.38 0 0012.77 19.43L332.48 237a4 4 0 012.7-5.04l10.62-3.22a3.99 3.99 0 015.04 2.7l3.88 12.78a19.38 19.38 0 00-14.72-30.9 1 1 0 01-.92-.7zM325.66 195.34a7.83 7.83 0 003.8 5.82c4.32 3.12 10 4.14 11.58 3.62a2 2 0 011.08 0c5-4.86 4.54-13.08 2-17.68a8.26 8.26 0 00-4.3-4 6.76 6.76 0 00-5.08.44c-1.62.98-9.08 5.76-9.08 11.8z" fill="#CCFBFF"/>
+  <path d="M70.86 36.18H187.8a2.36 2.36 0 000-4.72h-27.68c-2.4-4.42-8.44-14-16-15.5a9.24 9.24 0 00-5.45.2c-3.13 1.1-5.76 4.64-6.53 7.84 0 0-6.66-17.24-23.46-14.96-12.36 1.68-12.8 10.8-11.64 16.86h2.5a1.18 1.18 0 110 2.36h-2c.3 1.08.66 2.15 1.1 3.18H70.86a2.36 2.36 0 000 4.72v.02z" fill="#fff"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="57.78" y1="17.22" x2="465.72" y2="425.14" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#00C8D7"/>
+      <stop offset="1" stop-color="#0A84FF"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear" x1="82.96" y1="50.04" x2="441.7" y2="408.76" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#CCFBFF"/>
+      <stop offset="1" stop-color="#C9E4FF"/>
+    </linearGradient>
+  </defs>
+</svg>

devtools/startup/aboutdevtools/moz.build

@@ -0,0 +1,15 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+EXTRA_JS_MODULES += [
+    "AboutDevToolsRegistration.jsm",
+]
+
+XPCOM_MANIFESTS += [
+    "components.conf",
+]
+
+BROWSER_CHROME_MANIFESTS += ["test/browser.ini"]

devtools/startup/aboutdevtools/subscribe.css

@@ -0,0 +1,94 @@
+/* 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/. */
+
+/**
+ * This file contains the styles for the newsletter subscription form on about:devtools.
+ * It is largely inspired from https://mozilla.github.io/basket-example/
+ */
+
+.newsletter-title {
+  font-size: 17px;
+  font-weight: 500;
+  margin-top: 26px;
+  margin-bottom: -4px;
+}
+
+#newsletter-errors {
+  /* Hidden by default */
+  display: none;
+
+  margin-bottom: 20px;
+  padding: 10px;
+  border-radius: 2px;
+
+  background-color: var(--red-50);
+  color: var(--white);
+}
+
+#newsletter-errors.show {
+  display: block;
+}
+
+#newsletter-errors .error {
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+#newsletter-errors .error:last-child {
+  margin-bottom: 0;
+}
+
+#newsletter-thanks {
+  /* Hidden by default */
+  display: none;
+}
+
+#newsletter-thanks.show {
+  display: block;
+}
+
+.newsletter-form-section {
+  display: block;
+  margin-bottom: 20px;
+  width: 320px;
+}
+
+#newsletter-privacy {
+  display: flex;
+
+  /* The privacy section is hidden by default and only displayed on focus */
+  height: 0;
+  overflow: hidden;
+
+  padding: 3px 0 0 3px;
+  margin: -3px 0 -20px -3px;
+}
+
+#newsletter-privacy.animate {
+  transition: all 0.25s cubic-bezier(.15,.75,.35,.9);
+}
+
+#newsletter-privacy label {
+  line-height: var(--line-height);
+}
+
+#privacy {
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+  margin-inline: 5px 10px;
+  flex-shrink: 0;
+}
+
+#email {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 4px 0;
+  padding: 8px;
+}
+
+#newsletter-submit {
+  display: block;
+  padding: 8px 20px;
+}

devtools/startup/aboutdevtools/subscribe.js

@@ -0,0 +1,158 @@
+/* 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";
+
+/**
+ * This file handles the newsletter subscription form on about:devtools.
+ * It is largely inspired from https://mozilla.github.io/basket-example/
+ */
+
+window.addEventListener(
+  "load",
+  function() {
+    // Timeout for the subscribe XHR.
+    const REQUEST_TIMEOUT = 5000;
+
+    const emailInput = document.getElementById("email");
+    const newsletterErrors = document.getElementById("newsletter-errors");
+    const newsletterForm = document.getElementById("newsletter-form");
+    const newsletterPrivacySection = document.getElementById(
+      "newsletter-privacy"
+    );
+    const newsletterThanks = document.getElementById("newsletter-thanks");
+
+    /**
+     * Update the error panel to display the provided errors. If the argument is null or
+     * empty, a default error message will be displayed.
+     *
+     * @param {Array} errors
+     *        Array of strings, each item being an error message to display.
+     */
+    async function updateErrorPanel(errors) {
+      clearErrorPanel();
+
+      if (!errors || errors.length == 0) {
+        errors = [
+          await document.l10n.formatValues([
+            { id: "newsletter-error-unknown" },
+          ]),
+        ];
+      }
+
+      // Create errors markup.
+      const fragment = document.createDocumentFragment();
+      for (const error of errors) {
+        const item = document.createElement("p");
+        item.classList.add("error");
+        item.appendChild(document.createTextNode(error));
+        fragment.appendChild(item);
+      }
+
+      newsletterErrors.appendChild(fragment);
+      newsletterErrors.classList.add("show");
+    }
+
+    /**
+     * Hide the error panel and remove all errors.
+     */
+    function clearErrorPanel() {
+      newsletterErrors.classList.remove("show");
+      newsletterErrors.innerHTML = "";
+    }
+
+    // Show the additional form fields on focus of the email input.
+    function onEmailInputFocus() {
+      // Create a hidden measuring container, append it to the parent of the privacy section
+      const container = document.createElement("div");
+      container.style.cssText =
+        "visibility: hidden; overflow: hidden; position: absolute";
+      newsletterPrivacySection.parentNode.appendChild(container);
+
+      // Clone the privacy section, append the clone to the measuring container.
+      const clone = newsletterPrivacySection.cloneNode(true);
+      container.appendChild(clone);
+
+      // Measure the target height of the privacy section.
+      clone.style.height = "auto";
+      const height = clone.offsetHeight;
+
+      // Cleanup the measuring container.
+      container.remove();
+
+      // Set the animate class and set the height to the measured height.
+      newsletterPrivacySection.classList.add("animate");
+      newsletterPrivacySection.style.cssText = `height: ${height}px; margin-bottom: 0;`;
+    }
+
+    // XHR subscribe; handle errors; display thanks message on success.
+    function onFormSubmit(evt) {
+      evt.preventDefault();
+      evt.stopPropagation();
+
+      // New submission, clear old errors
+      clearErrorPanel();
+
+      const xhr = new XMLHttpRequest();
+
+      xhr.onload = async function(r) {
+        if (r.target.status >= 200 && r.target.status < 300) {
+          const { response } = r.target;
+
+          if (response.success === true) {
+            // Hide form and show success message.
+            newsletterForm.style.display = "none";
+            newsletterThanks.classList.add("show");
+          } else {
+            // We trust the error messages from the service to be meaningful for the user.
+            updateErrorPanel(response.errors);
+          }
+        } else {
+          const { status, statusText } = r.target;
+          const statusInfo = `${status} - ${statusText}`;
+          const error = await document.l10n.formatValues([
+            {
+              id: "newsletter-error-common",
+              args: { errorDescription: statusInfo },
+            },
+          ]);
+          updateErrorPanel([error]);
+        }
+      };
+
+      xhr.onerror = () => {
+        updateErrorPanel();
+      };
+
+      xhr.ontimeout = async () => {
+        const error = await document.l10n.formatValues([
+          { id: "newsletter-error-timeout" },
+        ]);
+        updateErrorPanel([error]);
+      };
+
+      const url = newsletterForm.getAttribute("action");
+
+      xhr.open("POST", url, true);
+      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+      xhr.timeout = REQUEST_TIMEOUT;
+      xhr.responseType = "json";
+
+      // Create form data.
+      const formData = new FormData(newsletterForm);
+      formData.append("source_url", document.location.href);
+
+      const params = new URLSearchParams(formData);
+
+      // Send the request.
+      xhr.send(params.toString());
+    }
+
+    // Attach event listeners.
+    newsletterForm.addEventListener("submit", onFormSubmit);
+    emailInput.addEventListener("focus", onEmailInputFocus);
+  },
+  { once: true }
+);

devtools/startup/aboutdevtools/test/.eslintrc.js

@@ -0,0 +1,7 @@
+"use strict";
+
+// General rule from /.eslintrc.js only accept folders matching **/test*/browser*/
+// where is this folder doesn't match, so manually apply browser test config
+module.exports = {
+  extends: ["plugin:mozilla/browser-test"],
+};

devtools/startup/aboutdevtools/test/browser.ini

@@ -0,0 +1,11 @@
+[DEFAULT]
+tags = devtools
+subsuite = devtools
+support-files =
+  head.js
+
+[browser_aboutdevtools_closes_page.js]
+[browser_aboutdevtools_enables_devtools.js]
+[browser_aboutdevtools_focus_owner_tab.js]
+[browser_aboutdevtools_reuse_existing.js]
+skip-if = (verify && (os == 'mac' || os == 'linux'))

devtools/startup/aboutdevtools/test/browser_aboutdevtools_closes_page.js

@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint-env browser */
+
+add_task(async function() {
+  pushPref("devtools.enabled", false);
+
+  const { doc, win } = await openAboutDevTools();
+
+  info("Check that the close button is available on the page");
+  const closeButton = doc.getElementById("close");
+  ok(closeButton, "close button is displayed");
+
+  const onWindowUnload = new Promise(r =>
+    win.addEventListener("unload", r, { once: true })
+  );
+  info("Click on the install button to enable DevTools.");
+  EventUtils.synthesizeMouseAtCenter(closeButton, {}, win);
+
+  info("Wait for the about:devtools tab to be closed");
+  await onWindowUnload;
+});

devtools/startup/aboutdevtools/test/browser_aboutdevtools_enables_devtools.js

@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint-env browser */
+
+add_task(async function() {
+  pushPref("devtools.enabled", false);
+
+  const { tab, doc, win } = await openAboutDevTools();
+
+  const installPage = doc.getElementById("install-page");
+  const welcomePage = doc.getElementById("welcome-page");
+
+  info(
+    "Check that about:devtools is in the correct state with devtools.enabled=false"
+  );
+  ok(!installPage.hasAttribute("hidden"), "install screen is visible");
+  ok(welcomePage.hasAttribute("hidden"), "welcome screen is hidden");
+
+  info("Click on the install button to enable DevTools.");
+  const installButton = doc.getElementById("install");
+  EventUtils.synthesizeMouseAtCenter(installButton, {}, win);
+
+  info("Wait until the UI updates");
+  await waitUntil(() => installPage.hasAttribute("hidden") === true);
+  ok(!welcomePage.hasAttribute("hidden"), "welcome screen is visible");
+  ok(
+    Services.prefs.getBoolPref("devtools.enabled"),
+    "The preference devtools.enabled has been flipped to true."
+  );
+
+  // Flip the devtools.enabled preference back to false, otherwise the pushPref cleanup
+  // times out.
+  Services.prefs.setBoolPref("devtools.enabled", false);
+
+  await removeTab(tab);
+});

devtools/startup/aboutdevtools/test/browser_aboutdevtools_focus_owner_tab.js

@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint-env browser */
+
+/**
+ * When closing about:devtools, test that the tab where the user triggered about:devtools
+ * is selected again.
+ */
+add_task(async function() {
+  await pushPref("devtools.enabled", false);
+
+  info("Add an about:blank tab");
+  const tab1 = await addTab("data:text/html;charset=utf-8,tab1");
+  const tab2 = await addTab("data:text/html;charset=utf-8,tab2");
+  ok(
+    tab1 === gBrowser.tabs[1],
+    "tab1 is the second tab in the current browser window"
+  );
+
+  info("Select the first tab");
+  gBrowser.selectedTab = tab1;
+
+  synthesizeToggleToolboxKey();
+
+  info("Wait for the about:devtools tab to be selected");
+  await waitUntil(() => isAboutDevtoolsTab(gBrowser.selectedTab));
+  info("about:devtools was opened as expected.");
+
+  const aboutDevtoolsTab = gBrowser.selectedTab;
+  ok(
+    aboutDevtoolsTab === gBrowser.tabs[2],
+    "about:devtools was opened next to its owner tab"
+  );
+
+  info("Move the owner tab to the end of the tabs array.");
+  gBrowser.moveTabTo(tab1, gBrowser.tabs.length - 1);
+  await removeTab(aboutDevtoolsTab);
+
+  await waitUntil(() => tab1 == gBrowser.selectedTab);
+  info("The correct tab was selected after closing about:devtools.");
+
+  await removeTab(tab1);
+  await removeTab(tab2);
+});
+
+/**
+ * When closing about:devtools, test that the current tab is not updated if
+ * about:devtools was not the selectedTab.
+ */
+add_task(async function() {
+  await pushPref("devtools.enabled", false);
+
+  info("Add an about:blank tab");
+  const tab1 = await addTab("data:text/html;charset=utf-8,tab1");
+  const tab2 = await addTab("data:text/html;charset=utf-8,tab2");
+  ok(
+    tab1 === gBrowser.tabs[1],
+    "tab1 is the second tab in the current browser window"
+  );
+
+  info("Select the first tab");
+  gBrowser.selectedTab = tab1;
+
+  synthesizeToggleToolboxKey();
+
+  info("Wait for the about:devtools tab to be selected");
+  await waitUntil(() => isAboutDevtoolsTab(gBrowser.selectedTab));
+  info("about:devtools was opened as expected.");
+
+  const aboutDevtoolsTab = gBrowser.selectedTab;
+  ok(
+    aboutDevtoolsTab === gBrowser.tabs[2],
+    "about:devtools was opened next to its owner tab"
+  );
+
+  info("Select the second tab");
+  gBrowser.selectedTab = tab2;
+
+  const aboutDevtoolsDocument = aboutDevtoolsTab.linkedBrowser.contentDocument;
+  await waitUntil(() => aboutDevtoolsDocument.visibilityState === "hidden");
+
+  await removeTab(aboutDevtoolsTab);
+
+  ok(tab2 == gBrowser.selectedTab, "Tab 2 should still be selected.");
+
+  await removeTab(tab1);
+  await removeTab(tab2);
+});

devtools/startup/aboutdevtools/test/browser_aboutdevtools_reuse_existing.js

@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint-env browser */
+
+/**
+ * Test that only one tab of about:devtools is used for a given window.
+ */
+add_task(async function() {
+  await pushPref("devtools.enabled", false);
+
+  info("Add an about:blank tab");
+  const tab = await addTab("about:blank");
+
+  synthesizeToggleToolboxKey();
+
+  info("Wait for the about:devtools tab to be selected");
+  await waitUntil(() => isAboutDevtoolsTab(gBrowser.selectedTab));
+
+  // Keep a reference on this tab to assert it later on.
+  const aboutDevtoolsTab = gBrowser.selectedTab;
+
+  info("Select the about:blank tab again");
+  gBrowser.selectedTab = tab;
+
+  synthesizeToggleToolboxKey();
+
+  info("Wait for the about:devtools tab to be selected");
+  await waitUntil(() => isAboutDevtoolsTab(gBrowser.selectedTab));
+
+  // filter is not available on gBrowser.tabs.
+  const aboutDevtoolsTabs = [...gBrowser.tabs].filter(isAboutDevtoolsTab);
+  ok(
+    aboutDevtoolsTabs.length === 1,
+    "Only one tab of about:devtools was opened."
+  );
+  ok(
+    aboutDevtoolsTabs[0] === aboutDevtoolsTab,
+    "The existing about:devtools tab was reused."
+  );
+
+  await removeTab(aboutDevtoolsTab);
+  await removeTab(tab);
+});

devtools/startup/aboutdevtools/test/head.js

@@ -0,0 +1,135 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// All test are asynchronous
+waitForExplicitFinish();
+
+/**
+ * Waits until a predicate returns true.
+ *
+ * @param function predicate
+ *        Invoked once in a while until it returns true.
+ * @param number interval [optional]
+ *        How often the predicate is invoked, in milliseconds.
+ */
+const waitUntil = function(predicate, interval = 100) {
+  if (predicate()) {
+    return Promise.resolve(true);
+  }
+  return new Promise(resolve => {
+    setTimeout(function() {
+      waitUntil(predicate, interval).then(() => resolve(true));
+    }, interval);
+  });
+};
+
+/**
+ * Copied from devtools shared-head.js
+ *
+ * @param {BrowsingContext} context
+ **/
+const waitForPresShell = function(context) {
+  return SpecialPowers.spawn(context, [], async () => {
+    const winUtils = SpecialPowers.getDOMWindowUtils(content);
+    await ContentTaskUtils.waitForCondition(() => {
+      try {
+        return !!winUtils.getPresShellId();
+      } catch (e) {
+        return false;
+      }
+    }, "Waiting for a valid presShell");
+  });
+};
+
+/**
+ * Open the provided url in a new tab.
+ */
+const addTab = async function(url) {
+  info("Adding a new tab with URL: " + url);
+
+  const { gBrowser } = window;
+
+  const tab = BrowserTestUtils.addTab(gBrowser, url);
+  gBrowser.selectedTab = tab;
+
+  await BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+
+  // Wait for a valid presShell to avoid test timeouts on linux webrender
+  // platforms.
+  await waitForPresShell(tab.linkedBrowser);
+
+  info("Tab added and finished loading");
+
+  return tab;
+};
+
+/**
+ * Remove the given tab.
+ * @param {Object} tab The tab to be removed.
+ * @return Promise<undefined> resolved when the tab is successfully removed.
+ */
+const removeTab = async function(tab) {
+  info("Removing tab.");
+
+  const { gBrowser } = tab.ownerGlobal;
+
+  await new Promise(resolve => {
+    gBrowser.tabContainer.addEventListener("TabClose", resolve, { once: true });
+    gBrowser.removeTab(tab);
+  });
+
+  info("Tab removed and finished closing");
+};
+
+/**
+ * Open a new tab on about:devtools
+ */
+const openAboutDevTools = async function() {
+  info("Open about:devtools programmatically in a new tab");
+  const tab = await addTab("about:devtools");
+
+  const browser = tab.linkedBrowser;
+  const doc = browser.contentDocument;
+  const win = browser.contentWindow;
+
+  return { tab, doc, win };
+};
+
+/**
+ * Copied from devtools shared-head.js.
+ * Set a temporary value for a preference, that will be cleaned up after the test.
+ */
+const pushPref = function(preferenceName, value) {
+  return new Promise(resolve => {
+    const options = { set: [[preferenceName, value]] };
+    SpecialPowers.pushPrefEnv(options, resolve);
+  });
+};
+
+/**
+ * Helper to call the toggle devtools shortcut.
+ */
+function synthesizeToggleToolboxKey() {
+  info("Trigger the toogle toolbox shortcut");
+  if (Services.appinfo.OS == "Darwin") {
+    EventUtils.synthesizeKey("i", { accelKey: true, altKey: true });
+  } else {
+    EventUtils.synthesizeKey("i", { accelKey: true, shiftKey: true });
+  }
+}
+
+/**
+ * Helper to check if a given tab is about:devtools.
+ */
+function isAboutDevtoolsTab(tab) {
+  const browser = tab.linkedBrowser;
+  // browser.documentURI might be unavailable if the tab is loading.
+  if (browser && browser.documentURI) {
+    const location = browser.documentURI.spec;
+    return location.startsWith("about:devtools");
+  }
+  return false;
+}

devtools/startup/jar.mn

@@ -4,5 +4,24 @@
 
 devtools-startup.jar:
 %   content devtools-startup %content/
+    content/aboutdevtools/aboutdevtools.xhtml  (aboutdevtools/aboutdevtools.xhtml)
+    content/aboutdevtools/aboutdevtools.css (aboutdevtools/aboutdevtools.css)
+    content/aboutdevtools/aboutdevtools.js (aboutdevtools/aboutdevtools.js)
+    content/aboutdevtools/subscribe.css (aboutdevtools/subscribe.css)
+    content/aboutdevtools/subscribe.js (aboutdevtools/subscribe.js)
+
+    content/aboutdevtools/images/otter.svg (aboutdevtools/images/otter.svg)
+
+    content/aboutdevtools/images/dev-edition-logo.svg (aboutdevtools/images/dev-edition-logo.svg)
+    content/aboutdevtools/images/external-link.svg (aboutdevtools/images/external-link.svg)
+    content/aboutdevtools/images/feature-inspector.svg (aboutdevtools/images/feature-inspector.svg)
+    content/aboutdevtools/images/feature-console.svg (aboutdevtools/images/feature-console.svg)
+    content/aboutdevtools/images/feature-debugger.svg (aboutdevtools/images/feature-debugger.svg)
+    content/aboutdevtools/images/feature-network.svg (aboutdevtools/images/feature-network.svg)
+    content/aboutdevtools/images/feature-memory.svg (aboutdevtools/images/feature-memory.svg)
+    content/aboutdevtools/images/feature-visualediting.svg (aboutdevtools/images/feature-visualediting.svg)
+    content/aboutdevtools/images/feature-responsive.svg (aboutdevtools/images/feature-responsive.svg)
+    content/aboutdevtools/images/feature-storage.svg (aboutdevtools/images/feature-storage.svg)
+    content/aboutdevtools/images/feature-performance.svg (aboutdevtools/images/feature-performance.svg)
 
     content/DevToolsShim.jsm  (DevToolsShim.jsm)

devtools/startup/locales/en-US/aboutDevTools.ftl

@@ -0,0 +1,57 @@
+# 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/.
+
+head-title = About Developer Tools
+enable-title = Enable Firefox Developer Tools
+enable-inspect-element-title = Enable Firefox Developer Tools to use Inspect Element
+enable-inspect-element-message = Examine and edit HTML and CSS with the Developer Tools’ Inspector.
+enable-about-debugging-message = Develop and debug WebExtensions, web workers, service workers and more with Firefox Developer Tools.
+enable-key-shortcut-message = You activated a Developer Tools shortcut. If that was a mistake, you can close this Tab.
+enable-menu-message = Perfect your website’s HTML, CSS, and JavaScript with tools like Inspector and Debugger.
+enable-common-message = Firefox Developer Tools are disabled by default to give you more control over your browser.
+enable-learn-more-link = Learn more about Developer Tools
+enable-enable-button = Enable Developer Tools
+enable-close-button = Close this Tab
+
+welcome-title = Welcome to Firefox Developer Tools!
+newsletter-title = Mozilla Developer Newsletter
+newsletter-message = Get developer news, tricks and resources sent straight to your inbox.
+newsletter-email-placeholder =
+    .placeholder = Email
+newsletter-privacy-label = I’m okay with Mozilla handling my info as explained in this <a data-l10n-name="privacy-policy">Privacy Policy</a>.
+newsletter-subscribe-button = Subscribe
+newsletter-thanks-title = Thanks!
+newsletter-thanks-message = If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.
+
+footer-title = Firefox Developer Edition
+footer-message = Looking for more than just Developer Tools? Check out the Firefox browser that is built specifically for developers and modern workflows.
+footer-learn-more-link = Learn more
+
+features-learn-more = Learn more
+features-inspector-title = Inspector
+features-inspector-desc = Inspect and refine code to build pixel-perfect layouts. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+features-console-title = Console
+features-console-desc = Track CSS, JavaScript, security and network issues. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+features-debugger-title = Debugger
+features-debugger-desc = Powerful JavaScript debugger with support for your framework. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+features-network-title = Network
+features-network-desc = Monitor network requests that can slow or block your site. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+features-storage-title = Storage
+features-storage-desc = Add, modify and remove cache, cookies, databases and session data. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+features-responsive-title = Responsive Design Mode
+features-responsive-desc = Test sites on emulated devices in your browser. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+features-visual-editing-title = Visual Editing
+features-visual-editing-desc = Fine-tune animations, alignment and padding. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+features-performance-title = Performance
+features-performance-desc = Unblock bottlenecks, streamline processes, optimize assets. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+features-memory-title = Memory
+features-memory-desc = Find memory leaks and make your application zippy. <a data-l10n-name="learn-more">{ features-learn-more }</a>
+# Variables:
+#   $errorDescription (String) - The error that occurred e.g. 404 - Not Found
+newsletter-error-common = Subscription request failed ({ $errorDescription }).
+newsletter-error-unknown = An unexpected error occurred.
+newsletter-error-timeout = Subscription request timed out.
+# Variables:
+#   $shortcut (String) - The keyboard shortcut used for the tool
+welcome-message = You’ve successfully enabled Developer Tools! To get started, explore the Web Developer menu or open the tools with { $shortcut }.

devtools/startup/locales/en-US/startup.properties

@@ -0,0 +1,8 @@
+# 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/.
+
+# LOCALIZATION NOTE (enableDevTools.label):
+# Label for the menu item displayed in Tools > Developer Tools when DevTools are disabled.
+enableDevTools.label=Enable Developer Tools…
+enableDevTools.accesskey=E

devtools/startup/locales/jar.mn

@@ -5,3 +5,8 @@
 
 [localization] @AB_CD@.jar:
     devtools/startup                         (%*.ftl)
+
+@AB_CD@.jar:
+%   locale devtools-startup @AB_CD@ %locale/@AB_CD@/devtools/startup/
+    locale/@AB_CD@/devtools/startup/ (%*.dtd)
+    locale/@AB_CD@/devtools/startup/ (%*.properties)

devtools/startup/moz.build

@@ -15,6 +15,7 @@ if CONFIG["MOZ_DEVTOOLS"] == "all":
     ]
 
     DIRS += [
+        "aboutdevtools",
         "locales",
     ]
 

devtools/startup/tests/browser/browser_shim_disable_devtools.js

@@ -76,6 +76,13 @@ add_task(async function() {
 
   is(gDevTools._toolboxes.size, 0, "No toolbox has been opened");
 
+  const browser = gBrowser.selectedTab.linkedBrowser;
+  const location = browser.documentURI.spec;
+  ok(
+    !location.startsWith("about:devtools"),
+    "The current tab is not about:devtools"
+  );
+
   info("Open the context menu for the content page.");
   const contextMenu = win.document.getElementById("contentAreaContextMenu");
   const popupShownPromise = BrowserTestUtils.waitForEvent(

devtools/startup/tests/xpcshell/test_devtools_shim.js

@@ -134,8 +134,9 @@ function test_events() {
 }
 
 function test_restore_session_apis() {
-  // Backup method that will be updated for the test.
+  // Backup method and preferences that will be updated for the test.
   const initDevToolsBackup = DevToolsShim.initDevTools;
+  const devtoolsEnabledValue = Services.prefs.getBoolPref("devtools.enabled");
 
   // Create fake session objects to restore.
   const sessionWithoutDevTools = {};
@@ -143,16 +144,27 @@ function test_restore_session_apis() {
     browserConsole: true,
   };
 
-  Services.prefs.setBoolPref("devtools.policy.disabled", true);
-  ok(!DevToolsShim.isInitialized(), "DevTools are not initialized");
-  ok(!DevToolsShim.isEnabled(), "DevTools are not enabled");
+  function checkRestoreSessionNotApplied(policyDisabled, enabled) {
+    Services.prefs.setBoolPref("devtools.enabled", enabled);
+    Services.prefs.setBoolPref("devtools.policy.disabled", policyDisabled);
+    ok(!DevToolsShim.isInitialized(), "DevTools are not initialized");
+    ok(!DevToolsShim.isEnabled(), "DevTools are not enabled");
 
-  // Check that save & restore DevToolsSession don't initialize the tools and don't
-  // crash.
-  DevToolsShim.saveDevToolsSession({});
-  DevToolsShim.restoreDevToolsSession(sessionWithDevTools);
-  ok(!DevToolsShim.isInitialized(), "DevTools are still not initialized");
+    // Check that save & restore DevToolsSession don't initialize the tools and don't
+    // crash.
+    DevToolsShim.saveDevToolsSession({});
+    DevToolsShim.restoreDevToolsSession(sessionWithDevTools);
+    ok(!DevToolsShim.isInitialized(), "DevTools are still not initialized");
+  }
 
+  // Tools are disabled by policy and not enabled
+  checkRestoreSessionNotApplied(true, false);
+  // Tools are not disabled by policy, but not enabled
+  checkRestoreSessionNotApplied(false, false);
+  // Tools are disabled by policy and "considered" as enabled (see Bug 1440675)
+  checkRestoreSessionNotApplied(true, true);
+
+  Services.prefs.setBoolPref("devtools.enabled", true);
   Services.prefs.setBoolPref("devtools.policy.disabled", false);
   ok(DevToolsShim.isEnabled(), "DevTools are enabled");
   ok(!DevToolsShim.isInitialized(), "DevTools are not initialized");
@@ -177,8 +189,9 @@ function test_restore_session_apis() {
   DevToolsShim.saveDevToolsSession({});
   checkCalls(mock, "saveDevToolsSession", 1, []);
 
-  // Restore initDevTools backup.
+  // Restore initial backups.
   DevToolsShim.initDevTools = initDevToolsBackup;
+  Services.prefs.setBoolPref("devtools.enabled", devtoolsEnabledValue);
 }
 
 function run_test() {

dom/console/Console.cpp

@@ -1119,9 +1119,23 @@ void Console::ProfileMethod(const GlobalObject& aGlobal, MethodName aName,
   console->ProfileMethodInternal(cx, aName, aAction, aData);
 }
 
+bool Console::IsEnabled(JSContext* aCx) const {
+  // Console is always enabled if it is a custom Chrome-Only instance.
+  if (mChromeInstance) {
+    return true;
+  }
+
+  // Make all Console API no-op if DevTools aren't enabled.
+  return StaticPrefs::devtools_enabled();
+}
+
 void Console::ProfileMethodInternal(JSContext* aCx, MethodName aMethodName,
                                     const nsAString& aAction,
                                     const Sequence<JS::Value>& aData) {
+  if (!IsEnabled(aCx)) {
+    return;
+  }
+
   if (!ShouldProceed(aMethodName)) {
     return;
   }
@@ -1274,6 +1288,10 @@ void Console::Method(const GlobalObject& aGlobal, MethodName aMethodName,
 void Console::MethodInternal(JSContext* aCx, MethodName aMethodName,
                              const nsAString& aMethodString,
                              const Sequence<JS::Value>& aData) {
+  if (!IsEnabled(aCx)) {
+    return;
+  }
+
   if (!ShouldProceed(aMethodName)) {
     return;
   }

dom/console/Console.h

@@ -369,6 +369,8 @@ class Console final : public nsIObserver, public nsSupportsWeakReference {
   MOZ_CAN_RUN_SCRIPT
   void ExecuteDumpFunction(const nsAString& aMessage);
 
+  bool IsEnabled(JSContext* aCx) const;
+
   bool ShouldProceed(MethodName aName) const;
 
   uint32_t WebIDLLogLevelToInteger(ConsoleLogLevel aLevel) const;

dom/console/tests/mochitest.ini

@@ -9,5 +9,6 @@ support-files =
 [test_consoleEmptyStack.html]
 [test_console_binding.html]
 [test_console_proto.html]
+[test_devtools_pref.html]
 [test_timer.html]
 [test_count.html]

dom/console/tests/test_devtools_pref.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test Console with devtools preference</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+  <script type="application/javascript">
+
+function consoleListener(expected) {
+  var messages = [];
+  return new Promise(done => {
+    let observer = {
+      observe: function listener(aSubject, aTopic, aData) {
+        var obj = aSubject.wrappedJSObject;
+        ok(!obj.chromeContext, "This is not a chrome context");
+        messages.push(parseInt(obj.arguments[0]));
+        if (messages.length == expected) {
+          SpecialPowers.removeObserver(observer, "console-api-log-event");
+          SpecialPowers.removeObserver(observer, "console-api-profiler");
+          done(messages);
+        }
+      },
+    };
+    SpecialPowers.addObserver(observer, "console-api-log-event");
+    SpecialPowers.addObserver(observer, "console-api-profiler");
+  });
+}
+
+SimpleTest.waitForExplicitFinish();
+(async function() {
+  var onMessages = consoleListener(4);
+
+  await SpecialPowers.pushPrefEnv({set: [["devtools.enabled", false]]});
+  console.log(1);
+  console.profile(2);
+
+  await SpecialPowers.pushPrefEnv({set: [["devtools.enabled", true]]});
+  console.log(3);
+  console.profile(4);
+
+  await SpecialPowers.pushPrefEnv({set: [["devtools.enabled", false]]});
+  console.log(5);
+  console.profile(6);
+
+  await SpecialPowers.pushPrefEnv({set: [["devtools.enabled", true]]});
+  console.log(7);
+  console.profile(8);
+
+  var messages = await onMessages;
+
+  is(messages[0], 3, "Got only console message while pref was true");
+  is(messages[1], 4, "Got only profile message while pref was true");
+  is(messages[2], 7, "Got only console message while pref was true");
+  is(messages[3], 8, "Got only profile message while pref was true");
+
+  SimpleTest.finish();
+})();
+
+
+  </script>
+</body>
+</html>

dom/security/DOMSecurityMonitor.cpp

@@ -59,6 +59,8 @@ void DOMSecurityMonitor::AuditParsingOfHTMLXMLFragments(
       "chrome://browser/content/certerror/aboutNetError.js"_ns,
       nsLiteralCString("chrome://devtools/content/shared/sourceeditor/"
                        "codemirror/codemirror.bundle.js"),
+      nsLiteralCString(
+          "chrome://devtools-startup/content/aboutdevtools/aboutdevtools.js"),
       nsLiteralCString(
           "resource://activity-stream/data/content/activity-stream.bundle.js"),
       nsLiteralCString("resource://devtools/client/debugger/src/components/"

modules/libpref/init/StaticPrefList.yaml

@@ -1775,6 +1775,14 @@
 # Prefs starting with "devtools."
 #---------------------------------------------------------------------------
 
+# Tells if DevTools have been explicitely enabled by the user. This pref
+# allows to disable all features related to DevTools for users that never use
+# them. Until bug 1361080 lands, we always consider them enabled.
+- name: devtools.enabled
+  type: RelaxedAtomicBool
+  value: true
+  mirror: always
+
 - name: devtools.console.stdout.chrome
   type: RelaxedAtomicBool
   value: @IS_NOT_MOZILLA_OFFICIAL@

modules/libpref/init/all.js

@@ -4479,7 +4479,7 @@ pref("devtools.jsonview.enabled", true);
 pref("devtools.theme", "auto", sticky);
 
 // Completely disable DevTools entry points, as well as all DevTools command
-// line arguments.
+// line arguments This should be merged with devtools.enabled, see Bug 1440675.
 pref("devtools.policy.disabled", false);
 
 // Enable deprecation warnings.