Bug 1836046 - [devtools] Remove the enable devtools popup for the F12 experiment r=devtools-reviewers,desktop-theme-reviewers,fluent-reviewers,flod,dao,ochameau

We will add another onboarding popup in the future, but we should first remove this old unused UI for the F12 experiment.

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

browser/base/content/main-popupset.inc.xhtml

@@ -533,7 +533,6 @@
 #include ../../components/controlcenter/content/protectionsPanel.inc.xhtml
 #include ../../components/downloads/content/downloadsPanel.inc.xhtml
 #include ../../components/translations/content/translationsPanel.inc.xhtml
-#include ../../../devtools/startup/enableDevToolsPopup.inc.xhtml
 #include browser-allTabsMenu.inc.xhtml
 
   <tooltip id="dynamic-shortcut-tooltip"

browser/locales/en-US/browser/browser.ftl

@@ -505,10 +505,6 @@ sharing-warning-proceed-to-tab =
 sharing-warning-disable-for-session =
   .label = Disable sharing protection for this session
 
-## DevTools F12 popup
-
-enable-devtools-popup-description2 = To use the F12 shortcut, first open DevTools via the Browser Tools menu.
-
 ## URL Bar
 
 # This placeholder is used when not in search mode and the user's default search

browser/themes/shared/browser-shared.css

@@ -701,13 +701,6 @@ menupopup::part(drop-indicator) {
   overflow: hidden;
 }
 
-/* ENABLE DEVTOOLS POPUP */
-@media (-moz-platform: macos), (-moz-platform: windows) {
-  #enable-devtools-popup {
-    font-size: 1.18em;
-  }
-}
-
 #sharing-tabs-warning-panel > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header,
 #sharing-tabs-warning-panel > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header {
   display: none;

devtools/client/framework/enable-devtools-popup.js

@@ -1,40 +0,0 @@
-/* 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";
-
-/**
- * Helper dedicated to toggle a popup triggered by pressing F12 if DevTools have
- * never been opened by the user.
- *
- * This popup should be anchored below the main hamburger menu of Firefox,
- * which contains the Browser Tools menu.
- *
- * This is part of the OFF12 experiment which tries to disable F12 by default to
- * reduce accidental usage of DevTools and increase retention of non DevTools
- * users.
- */
-exports.toggleEnableDevToolsPopup = function (doc) {
-  // The popup is initially wrapped in a template tag to avoid loading
-  // resources on startup. Unwrap it the first time we show the notification.
-  const panelWrapper = doc.getElementById("wrapper-enable-devtools-popup");
-  if (panelWrapper) {
-    panelWrapper.replaceWith(panelWrapper.content);
-  }
-
-  const popup = doc.getElementById("enable-devtools-popup");
-
-  // Use the icon of the Firefox menu in order to be aligned with the
-  // position of the hamburger menu.
-  const anchor = doc
-    .getElementById("PanelUI-menu-button")
-    .querySelector(".toolbarbutton-icon");
-
-  const isVisible = popup.state === "open";
-  if (isVisible) {
-    popup.hidePopup();
-  } else {
-    popup.openPopup(anchor, "bottomcenter topright");
-  }
-};

devtools/client/framework/moz.build

@@ -28,7 +28,6 @@ DevToolsModules(
     "commands-from-url.js",
     "devtools-browser.js",
     "devtools.js",
-    "enable-devtools-popup.js",
     "local-tab-commands-factory.js",
     "menu-item.js",
     "menu.js",

devtools/client/framework/test/browser_toolbox_disable_f12.js

@@ -44,16 +44,12 @@ add_task(async function () {
   gBrowser.removeTab(tab);
 });
 
-const hasPromiseResolved = async function (promise) {
-  let resolved = false;
-  promise.finally(() => (resolved = true));
-  // Make sure microtasks have time to run.
-  await new Promise(resolve => Services.tm.dispatchToMainThread(resolve));
-  return resolved;
-};
-
 const assertToolboxCloses = async function (tab, { shortcut, shouldClose }) {
-  info(`Use F12 to close the toolbox (close expected: ${shouldClose})`);
+  info(
+    `Use ${
+      shortcut ? "shortcut" : "F12"
+    } to close the toolbox (close expected: ${shouldClose})`
+  );
   const onToolboxDestroy = gDevTools.once("toolbox-destroyed");
 
   if (shortcut) {
@@ -65,11 +61,9 @@ const assertToolboxCloses = async function (tab, { shortcut, shouldClose }) {
   if (shouldClose) {
     await onToolboxDestroy;
   } else {
-    await wait(1000);
-    ok(
-      !(await hasPromiseResolved(onToolboxDestroy)),
-      "No toolbox-destroyed event received"
-    );
+    const onTimeout = wait(1000).then(() => "TIMEOUT");
+    const res = await Promise.race([onTimeout, onToolboxDestroy]);
+    is(res, "TIMEOUT", "No toolbox-destroyed event received");
   }
   is(
     !(await gDevTools.getToolboxForTab(tab)),
@@ -79,7 +73,11 @@ const assertToolboxCloses = async function (tab, { shortcut, shouldClose }) {
 };
 
 const assertToolboxOpens = async function (tab, { shortcut, shouldOpen }) {
-  info(`Use F12 to open the toolbox (open expected: ${shouldOpen})`);
+  info(
+    `Use ${
+      shortcut ? "shortcut" : "F12"
+    } to open the toolbox (open expected: ${shouldOpen})`
+  );
   const onToolboxReady = gDevTools.once("toolbox-ready");
 
   if (shortcut) {
@@ -92,11 +90,9 @@ const assertToolboxOpens = async function (tab, { shortcut, shouldOpen }) {
     await onToolboxReady;
     info(`Received toolbox-ready`);
   } else {
-    await wait(1000);
-    ok(
-      !(await hasPromiseResolved(onToolboxReady)),
-      "No toolbox-ready event received"
-    );
+    const onTimeout = wait(1000).then(() => "TIMEOUT");
+    const res = await Promise.race([onTimeout, onToolboxReady]);
+    is(res, "TIMEOUT", "No toolbox-ready event received");
   }
   is(
     !!(await gDevTools.getToolboxForTab(tab)),

devtools/startup/enableDevToolsPopup.inc.xhtml

@@ -1,14 +0,0 @@
-<!-- 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/. -->
-
-<!-- Wrap the arrow panel in a template to avoid loading images on startup -->
-<html:template id="wrapper-enable-devtools-popup">
-  <panel id="enable-devtools-popup"
-         type="arrow"
-         role="alert"
-         noautofocus="true"
-         orient="vertical">
-    <description data-l10n-id="enable-devtools-popup-description2"></description>
-  </panel>
-</html:template>