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
--- 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