Bug 1630228 - Show a doorhanger when using F12 r=fluent-reviewers,nchevobbe,Gijs,victoria

Depends on D71035

When F12 is disabled, if the user presses this key we show a notification hanging below the Firefox Hamburger menu.
This anchor was chosen because this is where the users can normally find the Web Developer menu.
Note that they could also open DevTools via another keyboard shortcut, even if it's not mentioned in the message.

Pressing on F12 again hides the message. The message will be displayed again if the user presses F12 again (ie, F12 is a toggle and the message is not just a one shot)

{F2136447}

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

browser/base/content/browser.xhtml

@@ -618,6 +618,7 @@
 #include ../../components/controlcenter/content/identityPanel.inc.xhtml
 #include ../../components/controlcenter/content/protectionsPanel.inc.xhtml
 #include ../../components/downloads/content/downloadsPanel.inc.xhtml
+#include ../../../devtools/startup/enableDevToolsPopup.inc.xhtml
 #include browser-allTabsMenu.inc.xhtml
 
     <hbox id="downloads-animation-container">

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

@@ -228,3 +228,8 @@ popup-select-microphone =
     .value = Microphone to share:
     .accesskey = M
 popup-all-windows-shared = All visible windows on your screen will be shared.
+
+## DevTools F12 popup
+
+enable-devtools-popup-description = To use the F12 shortcut, first open DevTools via the Web Developer menu.
+

browser/themes/shared/browser.inc.css

@@ -587,3 +587,13 @@ menupopup::part(drop-indicator) {
   display: block;
   margin-bottom: 4px; /* matches the margin-bottom on description elements */
 }
+
+/* ENABLE DEVTOOLS POPUP */
+
+#enable-devtools-popup {
+  font-size: 13px;
+}
+
+.enable-devtools-description {
+  margin: 8px 12px;
+}

devtools/client/framework/devtools-browser.js

@@ -57,6 +57,12 @@ loader.lazyRequireGetter(
   "ResponsiveUIManager",
   "devtools/client/responsive/manager"
 );
+loader.lazyRequireGetter(
+  this,
+  "toggleEnableDevToolsPopup",
+  "devtools/client/framework/enable-devtools-popup",
+  true
+);
 loader.lazyImporter(
   this,
   "BrowserToolboxLauncher",
@@ -314,7 +320,9 @@ var gDevToolsBrowser = (exports.gDevToolsBrowser = {
           false
         );
 
-        if (!isF12Disabled) {
+        if (isF12Disabled) {
+          toggleEnableDevToolsPopup(window.document);
+        } else {
           await gDevToolsBrowser.toggleToolboxCommand(
             window.gBrowser,
             startTime

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

@@ -0,0 +1,33 @@
+/* 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 Web Developer 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) {
+  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

@@ -26,6 +26,7 @@ DevToolsModules(
     'browser-menus.js',
     'devtools-browser.js',
     'devtools.js',
+    'enable-devtools-popup.js',
     'menu-item.js',
     'menu.js',
     'selection.js',

devtools/startup/enableDevToolsPopup.inc.xhtml

@@ -0,0 +1,12 @@
+<!-- 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/. -->
+
+<panel id="enable-devtools-popup"
+       class="panel-no-padding"
+       type="arrow"
+       role="alert"
+       noautofocus="true"
+       orient="vertical">
+  <description class="enable-devtools-description" data-l10n-id="enable-devtools-popup-description"></description>
+</panel>