Bug 1413840 - add a link to MDN on each about:devtools feature;r=nchevobbe,flod
MozReview-Commit-ID: J9BXHha9SPe
--- a/devtools/shim/aboutdevtools/aboutdevtools.css
+++ b/devtools/shim/aboutdevtools/aboutdevtools.css
@@ -79,35 +79,43 @@ p {
font-weight: 300;
margin: 10px 0;
}
.feature-desc {
margin: 1em 20px;
}
-.installpage-link {
+.feature-link {
+ display: block;
+}
+
+.external,
+.external:hover,
+.external:visited,
+.external:hover:active {
color: var(--blue-60);
- -moz-context-properties: fill;
- fill: var(--blue-60);
}
.external::after {
content: "";
display: inline-block;
height: 16px;
width: 16px;
margin: -.3rem .15rem 0 0.25rem;
vertical-align: middle;
background-image: url(images/external-link.svg);
background-repeat: no-repeat;
background-size: 16px 16px;
+
+ -moz-context-properties: fill;
+ fill: var(--blue-60);
}
.title {
font-weight: 300;
font-size: 32px;
margin-top: 16px;
line-height: 44px;
}
@@ -196,17 +204,19 @@ footer {
.footer-message-title {
color: var(--white);
}
.footer-link {
display: block;
margin-top: 10px;
- -moz-context-properties: fill;
+}
+
+.footer-link::after {
fill: var(--white);
}
.footer-link,
.footer-link:hover,
.footer-link:visited,
.footer-link:hover:active {
color: var(--white);
--- a/devtools/shim/aboutdevtools/aboutdevtools.js
+++ b/devtools/shim/aboutdevtools/aboutdevtools.js
@@ -12,27 +12,31 @@ const DEVTOOLS_ENABLED_PREF = "devtools.
const MESSAGES = {
AboutDebugging: "about-debugging-message",
ContextMenu: "inspect-element-message",
HamburgerMenu: "menu-message",
KeyShortcut: "key-shortcut-message",
SystemMenu: "menu-message",
};
+const ABOUTDEVTOOLS_STRINGS = "chrome://devtools-shim/locale/aboutdevtools.properties";
+const aboutDevtoolsBundle = Services.strings.createBundle(ABOUTDEVTOOLS_STRINGS);
+
+const KEY_SHORTCUTS_STRINGS = "chrome://devtools-shim/locale/key-shortcuts.properties";
+const keyShortcutsBundle = Services.strings.createBundle(KEY_SHORTCUTS_STRINGS);
+
// URL constructor doesn't support about: scheme,
// we have to use http in order to have working searchParams.
let url = new URL(window.location.href.replace("about:", "http://"));
let reason = url.searchParams.get("reason");
let tabid = parseInt(url.searchParams.get("tabid"), 10);
function getToolboxShortcut() {
- const bundleUrl = "chrome://devtools-shim/locale/key-shortcuts.properties";
- const bundle = Services.strings.createBundle(bundleUrl);
const modifier = Services.appinfo.OS == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+";
- return modifier + bundle.GetStringFromName("toggleToolbox.commandkey");
+ return modifier + keyShortcutsBundle.GetStringFromName("toggleToolbox.commandkey");
}
function onInstallButtonClick() {
Services.prefs.setBoolPref("devtools.enabled", true);
}
function onCloseButtonClick() {
window.close();
@@ -46,16 +50,98 @@ function updatePage() {
installPage.setAttribute("hidden", "true");
welcomePage.removeAttribute("hidden");
} else {
welcomePage.setAttribute("hidden", "true");
installPage.removeAttribute("hidden");
}
}
+/**
+ * Array of descriptors for features displayed on about:devtools.
+ * Each feature should contain:
+ * - icon: the name of the image to use
+ * - title: the key of the localized title (from aboutdevtools.properties)
+ * - desc: the key of the localized description (from aboutdevtools.properties)
+ * - link: the MDN documentation link
+ */
+const features = [
+ {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-inspector.svg",
+ title: "features.inspector.title",
+ desc: "features.inspector.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Page_Inspector",
+ }, {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-console.svg",
+ title: "features.console.title",
+ desc: "features.console.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Web_Console",
+ }, {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-debugger.svg",
+ title: "features.debugger.title",
+ desc: "features.debugger.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Debugger",
+ }, {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-network.svg",
+ title: "features.network.title",
+ desc: "features.network.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Network_Monitor",
+ }, {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-storage.svg",
+ title: "features.storage.title",
+ desc: "features.storage.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Storage_Inspector",
+ }, {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-responsive.svg",
+ title: "features.responsive.title",
+ desc: "features.responsive.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Responsive_Design_Mode",
+ }, {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-visualediting.svg",
+ title: "features.visualediting.title",
+ desc: "features.visualediting.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Style_Editor",
+ }, {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-performance.svg",
+ title: "features.performance.title",
+ desc: "features.performance.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Performance",
+ }, {
+ icon: "chrome://devtools-shim/content/aboutdevtools/images/feature-memory.svg",
+ title: "features.memory.title",
+ desc: "features.memory.desc",
+ link: "https://developer.mozilla.org/docs/Tools/Memory",
+ },
+];
+
+/**
+ * Helper to create a DOM element to represent a DevTools feature.
+ */
+function createFeatureEl(feature) {
+ let li = document.createElement("li");
+ li.classList.add("feature");
+ let learnMore = aboutDevtoolsBundle.GetStringFromName("features.learnMore");
+
+ let {icon, link, title, desc} = feature;
+ title = aboutDevtoolsBundle.GetStringFromName(title);
+ desc = aboutDevtoolsBundle.GetStringFromName(desc);
+ // eslint-disable-next-line no-unsanitized/property
+ li.innerHTML =
+ `<a class="feature-link" href="${link}" target="_blank">
+ <img class="feature-icon" src="${icon}"/>
+ </a>
+ <h3 class="feature-name">${title}</h3>
+ <p class="feature-desc">
+ ${desc}
+ <a class="external feature-link" href="${link}" target="_blank">${learnMore}</a>
+ </p>`;
+
+ return li;
+}
+
window.addEventListener("load", function () {
const inspectorShortcut = getToolboxShortcut();
const welcomeMessage = document.getElementById("welcome-message");
welcomeMessage.textContent = welcomeMessage.textContent.replace(
"##INSPECTOR_SHORTCUT##", inspectorShortcut);
// Set the appropriate title message.
if (reason == "ContextMenu") {
@@ -71,16 +157,21 @@ window.addEventListener("load", function
message.removeAttribute("hidden");
}
// Attach event listeners
document.getElementById("install").addEventListener("click", onInstallButtonClick);
document.getElementById("close").addEventListener("click", onCloseButtonClick);
Services.prefs.addObserver(DEVTOOLS_ENABLED_PREF, updatePage);
+ let featuresContainer = document.querySelector(".features-list");
+ for (let feature of features) {
+ featuresContainer.appendChild(createFeatureEl(feature));
+ }
+
// 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") {
// Only try to focus the correct tab if the current tab is the about:devtools page.
--- a/devtools/shim/aboutdevtools/aboutdevtools.xhtml
+++ b/devtools/shim/aboutdevtools/aboutdevtools.xhtml
@@ -48,69 +48,16 @@
<div class="right-pane">
<h1 class="title" >&aboutDevtools.welcome.title;</h1>
<p id="welcome-message">&aboutDevtools.welcome.message;</p>
</div>
</div>
<div class="features">
<ul class="features-list">
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-inspector.svg" alt=""/>
- <h3 class="feature-name">Inspector</h3>
- <p class="feature-desc">Inspect and refine code to build pixel-perfect layouts.</p>
- </li>
-
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-console.svg" alt=""/>
- <h3 class="feature-name">Console</h3>
- <p class="feature-desc">Track CSS, JavaScript, security and network issues.</p>
- </li>
-
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-debugger.svg" alt=""/>
- <h3 class="feature-name">Debugger</h3>
- <p class="feature-desc">Powerful JavaScript debugger with support for your framework.</p>
- </li>
-
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-network.svg" alt=""/>
- <h3 class="feature-name">Network</h3>
- <p class="feature-desc">Monitor network requests that can slow or block your site.</p>
- </li>
-
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-storage.svg" alt=""/>
- <h3 class="feature-name">Storage panel</h3>
- <p class="feature-desc">Add, modify and remove cache, cookies, databases and session data.</p>
- </li>
-
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-responsive-mode.svg" alt=""/>
- <h3 class="feature-name">Responsive Design Mode</h3>
- <p class="feature-desc">Test sites on emulated devices in your browser.</p>
- </li>
-
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-visual-editing.svg" alt=""/>
- <h3 class="feature-name">Visual Editing</h3>
- <p class="feature-desc">Fine-tune animations, alignment and padding.</p>
- </li>
-
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-performance.svg" alt=""/>
- <h3 class="feature-name">Performance</h3>
- <p class="feature-desc">Unblock bottlenecks, streamline processes, optimize assets.</p>
- </li>
-
- <li class="feature">
- <img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-memory.svg" alt=""/>
- <h3 class="feature-name">Memory</h3>
- <p class="feature-desc">Find memory leaks and make your application zippy.</p>
- </li>
</ul>
</div>
<footer>
<img class="dev-edition-logo"
src="chrome://devtools-shim/content/aboutdevtools/images/dev-edition-logo.svg"
alt="Firefox Developer Edition logo"/>
<div class="footer-message">
rename from devtools/shim/aboutdevtools/images/feature-responsive-mode.svg
rename to devtools/shim/aboutdevtools/images/feature-responsive.svg
rename from devtools/shim/aboutdevtools/images/feature-visual-editing.svg
rename to devtools/shim/aboutdevtools/images/feature-visualediting.svg
--- a/devtools/shim/jar.mn
+++ b/devtools/shim/jar.mn
@@ -16,14 +16,14 @@ devtools-shim.jar:
content/aboutdevtools/images/dev-edition-logo.svg (aboutdevtools/images/dev-edition-logo.svg)
content/aboutdevtools/images/external-link.svg (aboutdevtools/images/external-link.svg)
content/aboutdevtools/images/feature-inspector.svg (aboutdevtools/images/feature-inspector.svg)
content/aboutdevtools/images/feature-console.svg (aboutdevtools/images/feature-console.svg)
content/aboutdevtools/images/feature-debugger.svg (aboutdevtools/images/feature-debugger.svg)
content/aboutdevtools/images/feature-network.svg (aboutdevtools/images/feature-network.svg)
content/aboutdevtools/images/feature-memory.svg (aboutdevtools/images/feature-memory.svg)
- content/aboutdevtools/images/feature-visual-editing.svg (aboutdevtools/images/feature-visual-editing.svg)
- content/aboutdevtools/images/feature-responsive-mode.svg (aboutdevtools/images/feature-responsive-mode.svg)
+ content/aboutdevtools/images/feature-visualediting.svg (aboutdevtools/images/feature-visualediting.svg)
+ content/aboutdevtools/images/feature-responsive.svg (aboutdevtools/images/feature-responsive.svg)
content/aboutdevtools/images/feature-storage.svg (aboutdevtools/images/feature-storage.svg)
content/aboutdevtools/images/feature-performance.svg (aboutdevtools/images/feature-performance.svg)
content/DevToolsShim.jsm (DevToolsShim.jsm)
new file mode 100644
--- /dev/null
+++ b/devtools/shim/locales/en-US/aboutdevtools.properties
@@ -0,0 +1,37 @@
+# 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/.
+
+# LOCALIZATION NOTE These strings are used in the about:devtools page.
+
+# LOCALIZATION NOTE (features.learnMore): The text of the learn more link displayed below
+# each feature section of about:devtools. Each section presents a quick description of a
+# DevTools panel/feature. The learn more link points to the associated MDN page.
+features.learnMore=Learn more
+
+features.inspector.title=Inspector
+features.inspector.desc=Inspect and refine code to build pixel-perfect layouts.
+
+features.console.title=Console
+features.console.desc=Track CSS, JavaScript, security and network issues.
+
+features.debugger.title=Debugger
+features.debugger.desc=Powerful JavaScript debugger with support for your framework.
+
+features.network.title=Network
+features.network.desc=Monitor network requests that can slow or block your site.
+
+features.storage.title=Storage
+features.storage.desc=Add, modify and remove cache, cookies, databases and session data.
+
+features.responsive.title=Responsive Design Mode
+features.responsive.desc=Test sites on emulated devices in your browser.
+
+features.visualediting.title=Visual Editing
+features.visualediting.desc=Fine-tune animations, alignment and padding.
+
+features.performance.title=Performance
+features.performance.desc=Unblock bottlenecks, streamline processes, optimize assets.
+
+features.memory.title=Memory
+features.memory.desc=Find memory leaks and make your application zippy.