Bug 1324533 - link timings panel to explanation. r?ntim,rickychien draft
authorLocke Chen <locke12456@gmail.com>
Wed, 05 Apr 2017 23:17:28 +0800
changeset 556285 9b10120f902e0d07450a8dc4b6ab51b2252e860d
parent 555725 b043233ec04f06768d59dcdfb9e928142280f3cc
child 622832 5277774d75ad07e52e4ccaae503e5d559c3ebda2
push id52489
push userbmo:locke12456@gmail.com
push dateWed, 05 Apr 2017 15:17:44 +0000
reviewersntim, rickychien
bugs1324533
milestone55.0a1
Bug 1324533 - link timings panel to explanation. r?ntim,rickychien MozReview-Commit-ID: KwaB7k9ehEe
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/netmonitor/src/components/timings-panel.js
devtools/client/netmonitor/src/utils/mdn-utils.js
--- 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,
 };