Bug 1309826 - Convert MDN [learn more] link as a react component;r=honza draft
authorFred Lin <gasolin@mozilla.com>
Wed, 15 Feb 2017 13:17:58 +0800
changeset 484319 6c2c304a6be045b7e8e21c819f6c6bc22a8486f8
parent 484317 90b255720b5c3531ec78e42260582cb395996841
child 545759 5d6eb3032228ab230414cdcdedc7b07cb7fdc8d9
push id45445
push userbmo:gasolin@mozilla.com
push dateWed, 15 Feb 2017 05:19:23 +0000
reviewershonza
bugs1309826
milestone54.0a1
Bug 1309826 - Convert MDN [learn more] link as a react component;r=honza MozReview-Commit-ID: DuBWwwXJzp0
devtools/client/netmonitor/shared/components/headers-mdn.js
devtools/client/netmonitor/shared/components/headers-panel.js
devtools/client/netmonitor/shared/components/mdn-link.js
devtools/client/netmonitor/shared/components/moz.build
deleted file mode 100644
--- a/devtools/client/netmonitor/shared/components/headers-mdn.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/* 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/. */
-
-/**
- * A mapping of header names to external documentation. Any header included
- * here will show a "Learn More" link alongside it.
- */
-
-"use strict";
-
-var URL_DOMAIN = "https://developer.mozilla.org";
-const URL_PATH = "/en-US/docs/Web/HTTP/Headers/";
-const URL_PARAMS =
-  "?utm_source=mozilla&utm_medium=devtools-netmonitor&utm_campaign=default";
-
-var SUPPORTED_HEADERS = [
-  "Accept",
-  "Accept-Charset",
-  "Accept-Encoding",
-  "Accept-Language",
-  "Accept-Ranges",
-  "Access-Control-Allow-Credentials",
-  "Access-Control-Allow-Headers",
-  "Access-Control-Allow-Methods",
-  "Access-Control-Allow-Origin",
-  "Access-Control-Expose-Headers",
-  "Access-Control-Max-Age",
-  "Access-Control-Request-Headers",
-  "Access-Control-Request-Method",
-  "Age",
-  "Cache-Control",
-  "Connection",
-  "Content-Disposition",
-  "Content-Encoding",
-  "Content-Language",
-  "Content-Length",
-  "Content-Location",
-  "Content-Security-Policy",
-  "Content-Security-Policy-Report-Only",
-  "Content-Type",
-  "Cookie",
-  "Cookie2",
-  "DNT",
-  "Date",
-  "ETag",
-  "Expires",
-  "From",
-  "Host",
-  "If-Match",
-  "If-Modified-Since",
-  "If-None-Match",
-  "If-Range",
-  "If-Unmodified-Since",
-  "Keep-Alive",
-  "Last-Modified",
-  "Location",
-  "Origin",
-  "Pragma",
-  "Public-Key-Pins",
-  "Public-Key-Pins-Report-Only",
-  "Referer",
-  "Referrer-Policy",
-  "Retry-After",
-  "Server",
-  "Set-Cookie",
-  "Set-Cookie2",
-  "Strict-Transport-Security",
-  "TE",
-  "Tk",
-  "Trailer",
-  "Transfer-Encoding",
-  "Upgrade-Insecure-Requests",
-  "User-Agent",
-  "Vary",
-  "Via",
-  "Warning",
-  "X-Content-Type-Options",
-  "X-DNS-Prefetch-Control",
-  "X-Frame-Options",
-  "X-XSS-Protection"
-];
-
-/**
- * Get the MDN URL for the specified header
- *
- * @param {string} Name of the header
- * The baseURL to use.
- *
- * @return {string}
- * The MDN URL for the header, or null if not available.
- */
-exports.getURL = (header) => {
-  if (SUPPORTED_HEADERS.indexOf(header) === -1) {
-    return null;
-  }
-
-  return URL_DOMAIN + URL_PATH + header + URL_PARAMS;
-};
-
-/**
- * Use a different domain for the URLs. Used only for testing.
- *
- * @param {string} domain
- * The domain to use.
- */
-exports.setDomain = (domain) => {
-  URL_DOMAIN = domain;
-};
-
-/**
- * Use a different list of supported headers. Used only for testing.
- *
- * @param {array} headers
- * The supported headers to use.
- */
-exports.setSupportedHeaders = (headers) => {
-  SUPPORTED_HEADERS = headers;
-};
--- a/devtools/client/netmonitor/shared/components/headers-panel.js
+++ b/devtools/client/netmonitor/shared/components/headers-panel.js
@@ -10,41 +10,115 @@ const {
   createClass,
   createFactory,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { L10N } = require("../../l10n");
 const { writeHeaderText } = require("../../request-utils");
 const { getFormattedSize } = require("../../utils/format-utils");
-const Services = require("Services");
-const { gDevTools } = require("devtools/client/framework/devtools");
-const HeadersMDN = require("devtools/client/netmonitor/shared/components/headers-mdn");
 const { REPS, MODE } = require("devtools/client/shared/components/reps/load-reps");
 const Rep = createFactory(REPS.Rep);
 
 // Components
 const PropertiesView = createFactory(require("./properties-view"));
+const MdnLink = createFactory(require("./mdn-link"));
 
-const { a, div, input, textarea } = DOM;
+const { div, input, textarea } = DOM;
 const EDIT_AND_RESEND = L10N.getStr("netmonitor.summary.editAndResend");
 const RAW_HEADERS = L10N.getStr("netmonitor.summary.rawHeaders");
 const RAW_HEADERS_REQUEST = L10N.getStr("netmonitor.summary.rawHeaders.requestHeaders");
 const RAW_HEADERS_RESPONSE = L10N.getStr("netmonitor.summary.rawHeaders.responseHeaders");
 const HEADERS_EMPTY_TEXT = L10N.getStr("headersEmptyText");
 const HEADERS_FILTER_TEXT = L10N.getStr("headersFilterText");
 const REQUEST_HEADERS = L10N.getStr("requestHeaders");
 const REQUEST_HEADERS_FROM_UPLOAD = L10N.getStr("requestHeadersFromUpload");
 const RESPONSE_HEADERS = L10N.getStr("responseHeaders");
 const SUMMARY_ADDRESS = L10N.getStr("netmonitor.summary.address");
 const SUMMARY_METHOD = L10N.getStr("netmonitor.summary.method");
 const SUMMARY_URL = L10N.getStr("netmonitor.summary.url");
 const SUMMARY_STATUS = L10N.getStr("netmonitor.summary.status");
 const SUMMARY_VERSION = L10N.getStr("netmonitor.summary.version");
 
+/**
+ * A mapping of header names to external documentation. Any header included
+ * here will show a MDN link alongside it.
+ */
+var URL_DOMAIN = "https://developer.mozilla.org";
+const URL_PATH = "/en-US/docs/Web/HTTP/Headers/";
+const URL_PARAMS =
+  "?utm_source=mozilla&utm_medium=devtools-netmonitor&utm_campaign=default";
+
+var SUPPORTED_HEADERS = [
+  "Accept",
+  "Accept-Charset",
+  "Accept-Encoding",
+  "Accept-Language",
+  "Accept-Ranges",
+  "Access-Control-Allow-Credentials",
+  "Access-Control-Allow-Headers",
+  "Access-Control-Allow-Methods",
+  "Access-Control-Allow-Origin",
+  "Access-Control-Expose-Headers",
+  "Access-Control-Max-Age",
+  "Access-Control-Request-Headers",
+  "Access-Control-Request-Method",
+  "Age",
+  "Cache-Control",
+  "Connection",
+  "Content-Disposition",
+  "Content-Encoding",
+  "Content-Language",
+  "Content-Length",
+  "Content-Location",
+  "Content-Security-Policy",
+  "Content-Security-Policy-Report-Only",
+  "Content-Type",
+  "Cookie",
+  "Cookie2",
+  "DNT",
+  "Date",
+  "ETag",
+  "Expires",
+  "From",
+  "Host",
+  "If-Match",
+  "If-Modified-Since",
+  "If-None-Match",
+  "If-Range",
+  "If-Unmodified-Since",
+  "Keep-Alive",
+  "Last-Modified",
+  "Location",
+  "Origin",
+  "Pragma",
+  "Public-Key-Pins",
+  "Public-Key-Pins-Report-Only",
+  "Referer",
+  "Referrer-Policy",
+  "Retry-After",
+  "Server",
+  "Set-Cookie",
+  "Set-Cookie2",
+  "Strict-Transport-Security",
+  "TE",
+  "Tk",
+  "Trailer",
+  "Transfer-Encoding",
+  "Upgrade-Insecure-Requests",
+  "User-Agent",
+  "Vary",
+  "Via",
+  "Warning",
+  "X-Content-Type-Options",
+  "X-DNS-Prefetch-Control",
+  "X-Frame-Options",
+  "X-XSS-Protection"
+];
+
 /*
  * Headers panel component
  * Lists basic information about the request
  */
 const HeadersPanel = createClass({
   displayName: "HeadersPanel",
 
   propTypes: {
@@ -221,47 +295,50 @@ const HeadersPanel = createClass({
           sectionNames: Object.keys(object),
           renderValue
         }),
       )
     );
   }
 });
 
-function onLearnMoreClick(e, headerDocURL) {
-  e.stopPropagation();
-  e.preventDefault();
-
-  let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
-  win.openUILinkIn(headerDocURL, "tab");
-}
-
 function renderValue(props) {
   const { member, value } = props;
 
   if (typeof value !== "string") {
     return null;
   }
 
-  let headerDocURL = HeadersMDN.getURL(member.name);
+  let headerDocURL = getURL(member.name);
 
   return (
     div({ className: "treeValueCellDivider" },
       Rep(Object.assign(props, {
         // FIXME: A workaround for the issue in StringRep
         // Force StringRep to crop the text everytime
         member: Object.assign({}, member, { open: false }),
         mode: MODE.TINY,
         cropLimit: 60,
       })),
-      headerDocURL ?
-        a({
-          className: "learn-more-link",
-          title: headerDocURL,
-          onClick: (e) => onLearnMoreClick(e, headerDocURL),
-        }, `[${L10N.getStr("netmonitor.headers.learnMore")}]`)
-        :
-        null
+      headerDocURL ? MdnLink({
+        link: headerDocURL,
+      }) : null
     )
   );
 }
 
+/**
+ * Get the MDN URL for the specified header
+ *
+ * @param {string} Name of the header
+ * The baseURL to use.
+ *
+ * @return {string}
+ * The MDN URL for the header, or null if not available.
+ */
+function getURL(header) {
+  let idx = SUPPORTED_HEADERS.findIndex(item =>
+    item.toLowerCase() === header.toLowerCase());
+  return idx > -1 ?
+    URL_DOMAIN + URL_PATH + SUPPORTED_HEADERS[idx] + URL_PARAMS : null;
+};
+
 module.exports = HeadersPanel;
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/shared/components/mdn-link.js
@@ -0,0 +1,43 @@
+/* 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 {
+  DOM,
+  PropTypes,
+} = require("devtools/client/shared/vendor/react");
+const { L10N } = require("../../l10n");
+const Services = require("Services");
+const { gDevTools } = require("devtools/client/framework/devtools");
+
+const { a } = DOM;
+
+const LEARN_MORE = L10N.getStr("netmonitor.headers.learnMore");
+
+function onLearnMoreClick(e, link) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
+  win.openUILinkIn(link, "tab");
+}
+
+function MdnLink({ link }) {
+  return (
+    a({
+      className: "learn-more-link",
+      title: link,
+      onClick: (e) => onLearnMoreClick(e, link),
+    }, `[${LEARN_MORE}]`)
+  );
+}
+
+MdnLink.displayName = "MdnLink";
+
+MdnLink.propTypes = {
+  link: PropTypes.string,
+};
+
+module.exports = MdnLink;
--- a/devtools/client/netmonitor/shared/components/moz.build
+++ b/devtools/client/netmonitor/shared/components/moz.build
@@ -1,18 +1,18 @@
 # 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/.
 
 DevToolsModules(
     'cookies-panel.js',
     'custom-request-panel.js',
     'editor.js',
-    'headers-mdn.js',
     'headers-panel.js',
+    'mdn-link.js',
     'network-details-panel.js',
     'params-panel.js',
     'preview-panel.js',
     'properties-view.js',
     'response-panel.js',
     'security-panel.js',
     'tabbox-panel.js',
     'timings-panel.js',