Bug 1324533 - link timings panel to explanation. r=ntim,rickychien

MozReview-Commit-ID: KwaB7k9ehEe

--HG--
extra : rebase_source : 3b81d718d5ccd739c93ba57b0bcc5d496385c55b
This commit is contained in:
Locke Chen 2017-04-05 23:17:28 +08:00
parent bac5d6f7ce
commit 9965da51ca
3 changed files with 37 additions and 13 deletions

View File

@ -854,6 +854,18 @@ body,
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 {
@ -904,18 +916,6 @@ body,
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 {

View File

@ -6,6 +6,10 @@
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"];
@ -58,7 +62,14 @@ function TimingsPanel({ request }) {
);
});
return div({ className: "panel-container" }, timelines);
return (
div({ className: "panel-container" },
timelines,
MDNLink({
url: getNetMonitorTimingsURL(),
}),
)
);
}
TimingsPanel.displayName = "TimingsPanel";

View File

@ -143,6 +143,9 @@ const SUPPORTED_HTTP_CODES = [
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.
*
@ -170,7 +173,17 @@ function getHTTPStatusCodeURL(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,
};