Bug 1324533 - link timings panel to explanation. r?ntim,rickychien
MozReview-Commit-ID: KwaB7k9ehEe
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -848,16 +848,28 @@ body,
color: inherit;
padding-inline-start: 3px;
}
.theme-dark .tabpanel-summary-value {
color: var(--theme-selection-color);
}
+.learn-more-link {
+ color: var(--theme-highlight-blue);
+ cursor: pointer;
+ margin: 0 5px;
+ white-space: nowrap;
+ flex-grow: 1;
+}
+
+.learn-more-link:hover {
+ text-decoration: underline;
+}
+
/* Headers tabpanel */
.headers-overview {
background: var(--theme-toolbar-background);
}
.headers-summary,
.response-summary {
@@ -898,28 +910,16 @@ body,
.headers-summary .textbox-input {
margin-inline-end: 2px;
}
.headers-summary .status-text {
width: auto!important;
}
-.headers-summary .learn-more-link {
- color: var(--theme-highlight-blue);
- cursor: pointer;
- margin: 0 5px;
- white-space: nowrap;
- flex-grow: 1;
-}
-
-.headers-summary .learn-more-link:hover {
- text-decoration: underline;
-}
-
/* Response tabpanel */
.response-error-header {
margin: 0;
padding: 3px 8px;
background-color: var(--theme-highlight-red);
color: var(--theme-selection-color);
}
--- a/devtools/client/netmonitor/src/components/timings-panel.js
+++ b/devtools/client/netmonitor/src/components/timings-panel.js
@@ -1,16 +1,20 @@
/* 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("../utils/l10n");
+const { getNetMonitorTimingsURL } = require("../utils/mdn-utils");
+
+// Components
+const MDNLink = require("./mdn-link");
const { div, span } = DOM;
const types = ["blocked", "dns", "connect", "send", "wait", "receive"];
const TIMINGS_END_PADDING = "80px";
/*
* Timings panel component
* Display timeline bars that shows the total wait time for various stages
@@ -53,17 +57,24 @@ function TimingsPanel({ request }) {
}),
span({ className: "requests-list-timings-total" },
L10N.getFormatStr("networkMenu.totalMS", timings[type])
)
),
);
});
- return div({ className: "panel-container" }, timelines);
+ return (
+ div({ className: "panel-container" },
+ timelines,
+ MDNLink({
+ url: getNetMonitorTimingsURL(),
+ }),
+ )
+ );
}
TimingsPanel.displayName = "TimingsPanel";
TimingsPanel.propTypes = {
request: PropTypes.object.isRequired,
};
--- a/devtools/client/netmonitor/src/utils/mdn-utils.js
+++ b/devtools/client/netmonitor/src/utils/mdn-utils.js
@@ -138,16 +138,19 @@ const SUPPORTED_HTTP_CODES = [
"504",
"505",
"511"
];
const GA_PARAMS =
"?utm_source=mozilla&utm_medium=devtools-netmonitor&utm_campaign=default";
+const NETWORK_MONITOR_TIMINGS_MDN_URL =
+ "https://developer.mozilla.org/docs/Tools/Network_Monitor#Timings";
+
/**
* Get the MDN URL for the specified header.
*
* @param {string} header Name of the header for the baseURL to use.
*
* @return {string} The MDN URL for the header, or null if not available.
*/
function getHeadersURL(header) {
@@ -165,12 +168,22 @@ function getHeadersURL(header) {
*
* @return {string} The MDN URL for the HTTP status code, or null if not available.
*/
function getHTTPStatusCodeURL(statusCode) {
let idx = SUPPORTED_HTTP_CODES.indexOf(statusCode);
return idx > -1 ? `https://developer.mozilla.org/docs/Web/HTTP/Status/${SUPPORTED_HTTP_CODES[idx] + GA_PARAMS}` : null;
}
+/**
+ * Get the MDN URL of the Timings tag for Network Monitor.
+ *
+ * @return {string} the MDN URL of the Timings tag for Network Monitor.
+ */
+function getNetMonitorTimingsURL() {
+ return NETWORK_MONITOR_TIMINGS_MDN_URL;
+}
+
module.exports = {
getHeadersURL,
getHTTPStatusCodeURL,
+ getNetMonitorTimingsURL,
};