Bug 1411906 - add close button to about:devtools if devtools are disabled;r=nchevobbe draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 02 Nov 2017 21:56:26 +0100
changeset 692235 9f0dadf3a68f084d05e9f0098a8a7ac90becf964
parent 692153 4ca45dde569abab576eb46abe1f7496866140402
child 692255 e1bd44eed46290bb279181686e58bc9fcb495485
push id87455
push userjdescottes@mozilla.com
push dateThu, 02 Nov 2017 20:59:05 +0000
reviewersnchevobbe
bugs1411906
milestone58.0a1
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
devtools/shim/aboutdevtools/aboutdevtools.css
devtools/shim/aboutdevtools/aboutdevtools.js
devtools/shim/aboutdevtools/aboutdevtools.xhtml
devtools/shim/aboutdevtools/test/browser.ini
devtools/shim/aboutdevtools/test/browser_aboutdevtools_closes_page.js
devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
--- a/devtools/shim/aboutdevtools/aboutdevtools.css
+++ b/devtools/shim/aboutdevtools/aboutdevtools.css
@@ -1,14 +1,18 @@
 :root {
   /* Photon color variables used on the aboutdevtools page */
   --blue-60: #0060df;
   --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;
 }
 
 html, body {
   min-width: 600px;
   height: 100%;
 }
 
@@ -103,48 +107,71 @@ p {
 
 .title {
   font-weight: 300;
   font-size: 32px;
   margin-top: 16px;
   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;
 
   border: none;
   border-radius: 2px;
 
   font-size: 15px;
   font-weight: 400;
   line-height: 21px;
+  cursor: pointer;
 
+  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
+}
+
+/* Remove light gray outline when clicking on the button */
+button::-moz-focus-inner {
+  border: 0;
+}
+
+.primary-button {
   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 {
+.primary-button:enabled:hover {
   background-color: var(--blue-70)
 }
 
-.installpage-button:active,
-.installpage-button:hover:active,
-.installpage-button:enabled:hover:active {
+.primary-button:active,
+.primary-button:hover:active,
+.primary-button:enabled:hover:active {
   background-color: var(--blue-80);
 }
 
-/* Remove light gray outline when clicking on the button */
-.installpage-button::-moz-focus-inner {
-  border: 0;
+.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;
 }
 
 footer {
   display: flex;
--- a/devtools/shim/aboutdevtools/aboutdevtools.js
+++ b/devtools/shim/aboutdevtools/aboutdevtools.js
@@ -29,16 +29,20 @@ function getToolboxShortcut() {
   const modifier = Services.appinfo.OS == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+";
   return modifier + bundle.GetStringFromName("toggleToolbox.commandkey");
 }
 
 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");
   const isEnabled = Services.prefs.getBoolPref("devtools.enabled");
   if (isEnabled) {
     installPage.setAttribute("hidden", "true");
     welcomePage.removeAttribute("hidden");
   } else {
@@ -48,34 +52,34 @@ function updatePage() {
 }
 
 window.addEventListener("load", function () {
   const inspectorShortcut = getToolboxShortcut();
   const welcomeMessage = document.getElementById("welcome-message");
   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");
   } else {
     document.getElementById("common-title").removeAttribute("hidden");
   }
 
   // Display the message specific to the reason
   let id = MESSAGES[reason];
   if (id) {
     let message = document.getElementById(id);
     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();
 }, { once: true });
 
 window.addEventListener("beforeunload", function () {
   // Focus the tab that triggered the DevTools onboarding.
   if (document.visibilityState != "visible") {
@@ -91,12 +95,12 @@ window.addEventListener("beforeunload", 
 
   if (originalTab) {
     // If the original tab was found, select it.
     gBrowser.selectedTab = originalTab;
   }
 }, {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});
--- a/devtools/shim/aboutdevtools/aboutdevtools.xhtml
+++ b/devtools/shim/aboutdevtools/aboutdevtools.xhtml
@@ -28,17 +28,20 @@
              as we can't lazily load localized strings from dtd -->
         <p id="about-debugging-message" hidden="true">&aboutDevtools.enable.aboutDebuggingMessage;</p>
         <p id="menu-message" hidden="true">&aboutDevtools.enable.menuMessage;</p>
         <p id="key-shortcut-message" hidden="true">&aboutDevtools.enable.keyShortcutMessage;</p>
         <p id="inspect-element-message" hidden="true">&aboutDevtools.enable.inspectElementMessage;</p>
 
         <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>
 
   <!-- This page, hidden by default is displayed once the add-on is installed -->
   <div id="welcome-page" class="wrapper" hidden="true">
     <div class="box">
       <div class="left-pane" />
--- a/devtools/shim/aboutdevtools/test/browser.ini
+++ b/devtools/shim/aboutdevtools/test/browser.ini
@@ -1,9 +1,10 @@
 [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]
new file mode 100644
--- /dev/null
+++ b/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;
+});
--- a/devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
+++ b/devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
@@ -15,10 +15,11 @@
 <!ENTITY  aboutDevtools.enable.menuMessage
           "Examine, edit and debug HTML, CSS, and JavaScript with tools like Inspector and Debugger.">
 
 <!ENTITY  aboutDevtools.enable.commonMessage
           "As of Firefox 58, Developer Tools are disabled by default to give you more control over your browser.">
 
 <!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##.">
\ No newline at end of file