Bug 1411906 - add close button to about:devtools if devtools are disabled;r=nchevobbe

A close button on the starting page of the devtools onboarding flow
will be helpful for users who triggered the shortcut by mistake and
would like to escape the flow.

MozReview-Commit-ID: 7rZ50jFepJ3

--HG--
extra : rebase_source : 9f0dadf3a68f084d05e9f0098a8a7ac90becf964

devtools/shim/aboutdevtools/aboutdevtools.css

@@ -4,6 +4,10 @@
   --blue-70: #003eaa;
   --blue-80: #002275;
   --grey-30: #d7d7db;
+  --grey-90: #0c0c0d;
+  --grey-90-alpha-10: rgba(12, 12, 13, 0.1);
+  --grey-90-alpha-20: rgba(12, 12, 13, 0.2);
+  --grey-90-alpha-30: rgba(12, 12, 13, 0.3);
   --white: #ffffff;
 }
 
@@ -108,9 +112,15 @@ p {
   line-height: 44px;
 }
 
-.installpage-button {
-  display: block;
+.buttons-container {
+  display: flex;
+}
 
+.buttons-container button:not(:last-child) {
+  margin-right: 10px;
+}
+
+button {
   margin: 2em 0 0 0;
   padding: 10px 20px;
 
@@ -120,28 +130,45 @@ p {
   font-size: 15px;
   font-weight: 400;
   line-height: 21px;
-
-  background-color: var(--blue-60);
-  color: var(--white);
-  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
   cursor: pointer;
-}
 
-.installpage-button:enabled:hover {
-  background-color: var(--blue-70)
-}
-
-.installpage-button:active,
-.installpage-button:hover:active,
-.installpage-button:enabled:hover:active {
-  background-color: var(--blue-80);
+  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
 }
 
 /* Remove light gray outline when clicking on the button */
-.installpage-button::-moz-focus-inner {
+button::-moz-focus-inner {
   border: 0;
 }
 
+.primary-button {
+  background-color: var(--blue-60);
+  color: var(--white);
+}
+
+.primary-button:enabled:hover {
+  background-color: var(--blue-70)
+}
+
+.primary-button:active,
+.primary-button:hover:active,
+.primary-button:enabled:hover:active {
+  background-color: var(--blue-80);
+}
+
+.default-button {
+  background-color: var(--grey-90-alpha-10);
+}
+
+.default-button:enabled:hover {
+  background-color: var(--grey-90-alpha-20)
+}
+
+.default-button:active,
+.default-button:hover:active,
+.default-button:enabled:hover:active {
+  background-color: var(--grey-90-alpha-30);
+}
+
 [hidden="true"] {
   display: none;
 }

devtools/shim/aboutdevtools/aboutdevtools.js

@@ -34,6 +34,10 @@ function onInstallButtonClick() {
   Services.prefs.setBoolPref("devtools.enabled", true);
 }
 
+function onCloseButtonClick() {
+  window.close();
+}
+
 function updatePage() {
   const installPage = document.getElementById("install-page");
   const welcomePage = document.getElementById("welcome-page");
@@ -53,8 +57,6 @@ window.addEventListener("load", function () {
   welcomeMessage.textContent = welcomeMessage.textContent.replace(
     "##INSPECTOR_SHORTCUT##", inspectorShortcut);
 
-  Services.prefs.addObserver(DEVTOOLS_ENABLED_PREF, updatePage);
-
   // Set the appropriate title message.
   if (reason == "ContextMenu") {
     document.getElementById("inspect-title").removeAttribute("hidden");
@@ -69,8 +71,10 @@ window.addEventListener("load", function () {
     message.removeAttribute("hidden");
   }
 
-  let installButton = document.getElementById("install");
-  installButton.addEventListener("click", onInstallButtonClick);
+  // Attach event listeners
+  document.getElementById("install").addEventListener("click", onInstallButtonClick);
+  document.getElementById("close").addEventListener("click", onCloseButtonClick);
+  Services.prefs.addObserver(DEVTOOLS_ENABLED_PREF, updatePage);
 
   // Update the current page based on the current value of DEVTOOLS_ENABLED_PREF.
   updatePage();
@@ -96,7 +100,7 @@ window.addEventListener("beforeunload", function () {
 }, {once: true});
 
 window.addEventListener("unload", function () {
-  let installButton = document.getElementById("install");
-  installButton.removeEventListener("click", onInstallButtonClick);
+  document.getElementById("install").removeEventListener("click", onInstallButtonClick);
+  document.getElementById("close").removeEventListener("click", onCloseButtonClick);
   Services.prefs.removeObserver(DEVTOOLS_ENABLED_PREF, updatePage);
 }, {once: true});

devtools/shim/aboutdevtools/aboutdevtools.xhtml

@@ -33,7 +33,10 @@
 
         <p>&aboutDevtools.enable.commonMessage;</p>
         <a class="external installpage-link" href="https://developer.mozilla.org/docs/Tools" target="_blank">&aboutDevtools.enable.learnMoreLink;</a>
-        <button class="installpage-button" id="install">&aboutDevtools.enable.installButton;</button>
+        <div class="buttons-container">
+          <button class="primary-button" id="install">&aboutDevtools.enable.installButton;</button>
+          <button class="default-button" id="close">&aboutDevtools.enable.closeButton;</button>
+        </div>
       </div>
     </div>
   </div>

devtools/shim/aboutdevtools/test/browser.ini

@@ -4,6 +4,7 @@ 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]

devtools/shim/aboutdevtools/test/browser_aboutdevtools_closes_page.js

@@ -0,0 +1,24 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* 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);
+
+  let {doc, win} = await openAboutDevTools();
+
+  info("Check that the close button is available on the page");
+  let closeButton = doc.getElementById("close");
+  ok(closeButton, "close button is displayed");
+
+  let 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/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd

@@ -20,5 +20,6 @@
 
 <!ENTITY  aboutDevtools.enable.learnMoreLink "Learn more about DevTools">
 <!ENTITY  aboutDevtools.enable.installButton "Enable Developer Tools">
+<!ENTITY  aboutDevtools.enable.closeButton "Close this page">
 <!ENTITY  aboutDevtools.welcome.title "Welcome to Firefox Developer Tools!">
 <!ENTITY  aboutDevtools.welcome.message "You’ve successfully enabled DevTools! To get started, explore the Web Developer menu or open the tools with ##INSPECTOR_SHORTCUT##.">