moebius#93: DevTools: Network - DOMContentLoaded and load

Issue #31
Improvements: #34
https://github.com/MoonchildProductions/moebius/pull/93

1 files changed, 21 insertions, 3 deletions

diff --git a/devtools/client/netmonitor/components/summary-button.js b/devtools/client/netmonitor/components/summary-button.js
index 223552fbf..00595e5e6 100644
--- a/devtools/client/netmonitor/components/summary-button.js
+++ b/devtools/client/netmonitor/components/summary-button.js
@@ -15,16 +15,22 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { PluralForm } = require("devtools/shared/plural-form");
 const { L10N } = require("../l10n");
 const { 
-  getDisplayedRequestsSummary
+  getDisplayedRequestsSummary,
+  getDisplayedTimingMarker
 } = require("../selectors/index");
 
 const { button, span } = DOM;
 
 function SummaryButton({
   summary,
-  triggerSummary
+  triggerSummary,
+  timingMarkers
 }) {
   let { count, contentSize, transferredSize, millis } = summary;
+  let {
+    DOMContentLoaded,
+    load,
+  } = timingMarkers;
   const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
     PluralForm.get(count, L10N.getStr("networkMenu.summary2"))
     .replace("#1", count)
@@ -33,7 +39,13 @@ function SummaryButton({
     .replace("#3", L10N.numberWithDecimals(transferredSize / 1024,
       CONTENT_SIZE_DECIMALS))
     .replace("#4", L10N.numberWithDecimals(millis / 1000,
-      REQUEST_TIME_DECIMALS));
+      REQUEST_TIME_DECIMALS))
+    + ((DOMContentLoaded > -1)
+        ? ", " + "DOMContentLoaded: " + L10N.getFormatStrWithNumbers("networkMenu.timeS", L10N.numberWithDecimals(DOMContentLoaded / 1000, REQUEST_TIME_DECIMALS))
+        : "")
+    + ((load > -1)
+        ? ", " + "load: " + L10N.getFormatStrWithNumbers("networkMenu.timeS", L10N.numberWithDecimals(load / 1000, REQUEST_TIME_DECIMALS))
+        : "");
 
   return button({
     id: "requests-menu-network-summary-button",
@@ -47,11 +59,17 @@ function SummaryButton({
 
 SummaryButton.propTypes = {
   summary: PropTypes.object.isRequired,
+  timingMarkers: PropTypes.object.isRequired,
 };
 
 module.exports = connect(
   (state) => ({
     summary: getDisplayedRequestsSummary(state),
+    timingMarkers: {
+      DOMContentLoaded:
+        getDisplayedTimingMarker(state, "firstDocumentDOMContentLoadedTimestamp"),
+      load: getDisplayedTimingMarker(state, "firstDocumentLoadTimestamp"),
+    },
   }),
   (dispatch) => ({
     triggerSummary: () => {