Bug 768469 - [gcli] implement a "mdn" command. r=pbrosset

devtools/client/commandline/commandline.css

@@ -77,3 +77,9 @@
 .gcli-row-out .nowrap {
   white-space: nowrap;
 }
+
+.gcli-mdn-url {
+  text-decoration: underline;
+  cursor: pointer;
+}
+

devtools/client/shared/widgets/MdnDocsWidget.js

@@ -41,6 +41,7 @@ var XHR_CSS_URL = "https://developer.mozilla.org/en-US/docs/Web/CSS/";
 const PAGE_LINK_PARAMS = "?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default"
 // URL for the page link omits locale, so a locale-specific page will be loaded
 var PAGE_LINK_URL = "https://developer.mozilla.org/docs/Web/CSS/";
+exports.PAGE_LINK_URL = PAGE_LINK_URL;
 
 const BROWSER_WINDOW = 'navigator:browser';
 

devtools/shared/gcli/commands/index.js

@@ -65,6 +65,7 @@ exports.devtoolsModules = [
   "devtools/shared/gcli/commands/inject",
   "devtools/shared/gcli/commands/jsb",
   "devtools/shared/gcli/commands/listen",
+  "devtools/shared/gcli/commands/mdn",
   "devtools/shared/gcli/commands/measure",
   "devtools/shared/gcli/commands/media",
   "devtools/shared/gcli/commands/pagemod",

devtools/shared/gcli/commands/mdn.js

@@ -0,0 +1,76 @@
+/* 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/. */
+
+"use strict";
+
+const l10n = require("gcli/l10n");
+const {
+  getCssDocs,
+  PAGE_LINK_URL
+} = require("devtools/client/shared/widgets/MdnDocsWidget");
+
+exports.items = [{
+  name: "mdn",
+  description: l10n.lookup("mdnDesc")
+}, {
+  item: "command",
+  runAt: "client",
+  name: "mdn css",
+  description: l10n.lookup("mdnCssDesc"),
+  returnType: "cssPropertyOutput",
+  params: [{
+    name: "property",
+    type: { name: "string" },
+    defaultValue: null,
+    description: l10n.lookup("mdnCssProp")
+  }],
+  exec: function(args) {
+    return getCssDocs(args.property).then(result => {
+      return {
+        data: result,
+        url: PAGE_LINK_URL + args.property,
+        property: args.property
+      };
+    }, error => {
+      return { error, property: args.property };
+    });
+  }
+}, {
+  item: "converter",
+  from: "cssPropertyOutput",
+  to: "dom",
+  exec: function(result, context) {
+    let propertyName = result.property;
+
+    let document = context.document;
+    let root = document.createElement("div");
+
+    if (result.error) {
+      // The css property specified doesn't exist.
+      root.appendChild(document.createTextNode(
+        l10n.lookupFormat("mdnCssPropertyNotFound", [ propertyName ]) +
+        " (" + result.error + ")"));
+    } else {
+      let title = document.createElement("h2");
+      title.textContent = propertyName;
+      root.appendChild(title);
+
+      let link = document.createElement("p");
+      link.classList.add("gcli-mdn-url");
+      link.textContent = l10n.lookup("mdnCssVisitPage");
+      root.appendChild(link);
+
+      link.addEventListener("click", () => {
+        let gBrowser = context.environment.chromeWindow.gBrowser;
+        gBrowser.selectedTab = gBrowser.addTab(result.url);
+      });
+
+      let summary = document.createElement("p");
+      summary.textContent = result.data.summary;
+      root.appendChild(summary);
+    }
+
+    return root;
+  }
+}];

devtools/shared/locales/en-US/gclicommands.properties

@@ -1612,6 +1612,24 @@ folderInvalidPath=Please enter a valid path
 # The argument (%1$S) is the folder path.
 folderOpenDirResult=Opened %1$S
 
+# LOCALIZATION NOTE (mdnDesc) A very short string used to describe the
+# use of 'mdn' command.
+mdnDesc=Retrieve documentation from MDN
+# LOCALIZATION NOTE (mdnCssDesc) A very short string used to describe the
+# result of the 'mdn css' commmand.
+mdnCssDesc=Retrieve documentation about a given CSS property name from MDN
+# LOCALIZATION NOTE (mdnCssProp) String used to describe the 'property name'
+# parameter used in the 'mdn css' command.
+mdnCssProp=Property name
+# LOCALIZATION NOTE (mdnCssPropertyNotFound) String used to display an error in
+# the result of the 'mdn css' command. Errors occur when a given CSS property
+# wasn't found on MDN. The %1$S parameter will be replaced with the name of the
+# CSS property.
+mdnCssPropertyNotFound=MDN documentation for the CSS property '%1$S' was not found.
+# LOCALIZATION NOTE (mdnCssVisitPage) String used as the label of a link to the
+# MDN page for a given CSS property.
+mdnCssVisitPage=Visit MDN page
+
 # LOCALIZATION NOTE (security)
 securityPrivacyDesc=Display supported security and privacy features
 securityManual=Commands to list and get suggestions about security features for the current domain.