Bug 1413840 - add a link to MDN on each about:devtools feature;r=flod,nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 02 Nov 2017 23:21:50 +0100
changeset 390324 15232bc444483026196d3b58fd1211ba7b9f6bde
parent 390323 772f0ebc6889484d1e17daf9062dffd1a17455e2
child 390325 fef50221fd78773c1b3cc83e3b81e4339381106f
push id32827
push userccoroiu@mozilla.com
push dateMon, 06 Nov 2017 23:02:00 +0000
treeherdermozilla-central@62aeebcc676e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflod, nchevobbe
bugs1413840
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 1413840 - add a link to MDN on each about:devtools feature;r=flod,nchevobbe MozReview-Commit-ID: J9BXHha9SPe
devtools/shim/aboutdevtools/aboutdevtools.css
devtools/shim/aboutdevtools/aboutdevtools.js
devtools/shim/aboutdevtools/aboutdevtools.xhtml
devtools/shim/aboutdevtools/images/feature-responsive-mode.svg
devtools/shim/aboutdevtools/images/feature-responsive.svg
devtools/shim/aboutdevtools/images/feature-visual-editing.svg
devtools/shim/aboutdevtools/images/feature-visualediting.svg
devtools/shim/jar.mn
devtools/shim/locales/en-US/aboutdevtools.properties
--- 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.