Bug 1309826 - Convert MDN [learn more] link as a react component;r=honza
MozReview-Commit-ID: DuBWwwXJzp0
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',