Bug 1411906 - add close button to about:devtools if devtools are disabled;r=nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 02 Nov 2017 21:56:26 +0100
changeset 443377 6f1e32b85be2e46a8167c3d9945df58e461e8adb
parent 443376 fa3745bff6ac5363c8a391062d929aed3ae31fc9
child 443378 09807e4448d083dab90a50b709608da810e3b85b
push id1618
push userCallek@gmail.com
push dateThu, 11 Jan 2018 17:45:48 +0000
treeherdermozilla-release@882ca853e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1411906
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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