Bug 1350228 - Add network monitor status bar. r=Honza

MozReview-Commit-ID: DEOllBeirq8

--HG--
extra : rebase_source : ff6a8a4d89766ccda9dba3f980009ea39968fe73

devtools/client/netmonitor/src/assets/styles/netmonitor.css

@@ -71,8 +71,11 @@ body,
   flex: auto;
 }
 
-.devtools-toolbar-container {
+.devtools-toolbar {
   display: flex;
+}
+
+.devtools-toolbar-container {
   justify-content: space-between;
 }
 
@@ -92,6 +95,32 @@ body,
   text-overflow: ellipsis;
 }
 
+/* Status bar */
+
+.status-bar-label {
+  display: inline-flex;
+  align-content: stretch;
+  margin-inline-end: 10px;
+}
+
+.status-bar-label::before {
+  content: "";
+  display: inline-block;
+  margin-inline-end: 10px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  width: 1px;
+  background: var(--theme-splitter-color);
+}
+
+.status-bar-label.dom-content-loaded {
+  color: blue;
+}
+
+.status-bar-label.load {
+  color: red;
+}
+
 /* Request list */
 
 .request-list-container {
@@ -99,12 +128,15 @@ body,
   flex-direction: column;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 .request-list-empty-notice {
   margin: 0;
   padding: 12px;
   font-size: 120%;
+  flex: 1;
+  overflow: auto;
 }
 
 .notice-perf-message {
@@ -149,6 +181,7 @@ body,
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
+  flex: 1;
   --timings-scale: 1;
   --timings-rev-scale: 1;
 }

devtools/client/netmonitor/src/components/moz.build

@@ -23,6 +23,7 @@ DevToolsModules(
     'security-panel.js',
     'stack-trace-panel.js',
     'statistics-panel.js',
+    'status-bar.js',
     'tabbox-panel.js',
     'timings-panel.js',
     'toolbar.js',

devtools/client/netmonitor/src/components/request-list-empty-notice.js

@@ -37,7 +37,7 @@ const RequestListEmptyNotice = createClass({
         span(null, L10N.getStr("netmonitor.reloadNotice1")),
         button(
           {
-            className: "devtools-toolbarbutton requests-list-reload-notice-button",
+            className: "devtools-button requests-list-reload-notice-button",
             "data-standalone": true,
             onClick: this.props.onReloadClick,
           },

devtools/client/netmonitor/src/components/request-list.js

@@ -14,6 +14,7 @@ const {
 const RequestListContent = createFactory(require("./request-list-content"));
 const RequestListEmptyNotice = createFactory(require("./request-list-empty-notice"));
 const RequestListHeader = createFactory(require("./request-list-header"));
+const StatusBar = createFactory(require("./status-bar"));
 
 const { div } = DOM;
 
@@ -25,6 +26,7 @@ function RequestList({ isEmpty }) {
     div({ className: "request-list-container" },
       RequestListHeader(),
       isEmpty ? RequestListEmptyNotice() : RequestListContent(),
+      StatusBar(),
     )
   );
 }

devtools/client/netmonitor/src/components/status-bar.js

@@ -0,0 +1,84 @@
+/* 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 { connect } = require("devtools/client/shared/vendor/react-redux");
+const { PluralForm } = require("devtools/shared/plural-form");
+
+const Actions = require("../actions/index");
+const {
+  getDisplayedRequestsSummary,
+  getDisplayedTimingMarker,
+} = require("../selectors/index");
+const {
+  getFormattedSize,
+  getFormattedTime
+} = require("../utils/format-utils");
+const { L10N } = require("../utils/l10n");
+
+// Components
+const { div, button, span } = DOM;
+
+function StatusBar({ summary, openStatistics, timingMarkers }) {
+  let { count, contentSize, transferredSize, millis } = summary;
+  let {
+    DOMContentLoaded,
+    load,
+  } = timingMarkers;
+
+  let text = (count === 0) ? L10N.getStr("networkMenu.empty") :
+    PluralForm.get(count, L10N.getStr("networkMenu.summary3"))
+    .replace("#1", count)
+    .replace("#2", getFormattedSize(contentSize))
+    .replace("#3", getFormattedSize(transferredSize))
+    .replace("#4", getFormattedTime(millis));
+
+  return (
+    div({ className: "devtools-toolbar devtools-toolbar-bottom" },
+      button({
+        className: "devtools-button requests-list-network-summary-button",
+        title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
+        onClick: openStatistics,
+      },
+        span({ className: "summary-info-icon" }),
+        span({ className: "summary-info-text" }, text),
+      ),
+
+      DOMContentLoaded > -1 &&
+      span({ className: "status-bar-label dom-content-loaded" },
+        `DOMContentLoaded: ${getFormattedTime(DOMContentLoaded)}`),
+
+      load > -1 &&
+      span({ className: "status-bar-label load" },
+        `load: ${getFormattedTime(load)}`),
+    )
+  );
+}
+
+StatusBar.displayName = "StatusBar";
+
+StatusBar.propTypes = {
+  openStatistics: PropTypes.func.isRequired,
+  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) => ({
+    openStatistics: () => dispatch(Actions.openStatistics(true)),
+  }),
+)(StatusBar);

devtools/client/netmonitor/src/components/toolbar.js

@@ -11,7 +11,6 @@ const {
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const { PluralForm } = require("devtools/shared/plural-form");
 const Actions = require("../actions/index");
 const { FILTER_SEARCH_DELAY } = require("../constants");
 const {
@@ -19,10 +18,7 @@ const {
   getRequestFilterTypes,
   isNetworkDetailsToggleButtonDisabled,
 } = require("../selectors/index");
-const {
-  getFormattedSize,
-  getFormattedTime
-} = require("../utils/format-utils");
+
 const { L10N } = require("../utils/l10n");
 
 // Components
@@ -45,12 +41,10 @@ const Toolbar = createClass({
 
   propTypes: {
     clearRequests: PropTypes.func.isRequired,
-    openStatistics: PropTypes.func.isRequired,
     requestFilterTypes: PropTypes.array.isRequired,
     setRequestFilterText: PropTypes.func.isRequired,
     networkDetailsToggleDisabled: PropTypes.bool.isRequired,
     networkDetailsOpen: PropTypes.bool.isRequired,
-    summary: PropTypes.object.isRequired,
     toggleNetworkDetails: PropTypes.func.isRequired,
     toggleRequestFilterType: PropTypes.func.isRequired,
   },
@@ -65,12 +59,10 @@ const Toolbar = createClass({
   render() {
     let {
       clearRequests,
-      openStatistics,
       requestFilterTypes,
       setRequestFilterText,
       networkDetailsToggleDisabled,
       networkDetailsOpen,
-      summary,
       toggleNetworkDetails,
     } = this.props;
 
@@ -82,14 +74,6 @@ const Toolbar = createClass({
       toggleButtonClassName.push("pane-collapsed");
     }
 
-    let { count, contentSize, transferredSize, millis } = summary;
-    let text = (count === 0) ? L10N.getStr("networkMenu.empty") :
-      PluralForm.get(count, L10N.getStr("networkMenu.summary3"))
-      .replace("#1", count)
-      .replace("#2", getFormattedSize(contentSize))
-      .replace("#3", getFormattedSize(transferredSize))
-      .replace("#4", getFormattedTime(millis));
-
     let buttons = requestFilterTypes.map(([type, checked]) => {
       let classList = ["devtools-button", `requests-list-filter-${type}-button`];
       checked && classList.push("checked");
@@ -119,14 +103,6 @@ const Toolbar = createClass({
           div({ className: "requests-list-filter-buttons" }, buttons),
         ),
         span({ className: "devtools-toolbar-group" },
-          button({
-            className: "devtools-button requests-list-network-summary-button",
-            title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
-            onClick: openStatistics,
-          },
-            span({ className: "summary-info-icon" }),
-            span({ className: "summary-info-text" }, text),
-          ),
           SearchBox({
             delay: FILTER_SEARCH_DELAY,
             keyShortcut: SEARCH_KEY_SHORTCUT,
@@ -156,7 +132,6 @@ module.exports = connect(
   }),
   (dispatch) => ({
     clearRequests: () => dispatch(Actions.clearRequests()),
-    openStatistics: () => dispatch(Actions.openStatistics(true)),
     setRequestFilterText: (text) => dispatch(Actions.setRequestFilterText(text)),
     toggleRequestFilterType: (type) => dispatch(Actions.toggleRequestFilterType(type)),
     toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),

devtools/client/netmonitor/src/selectors/index.js

@@ -6,10 +6,12 @@
 
 const filters = require("./filters");
 const requests = require("./requests");
+const timingMarkers = require("./timing-markers");
 const ui = require("./ui");
 
 Object.assign(exports,
   filters,
   requests,
+  timingMarkers,
   ui
 );

devtools/client/netmonitor/src/selectors/moz.build

@@ -6,5 +6,6 @@ DevToolsModules(
     'filters.js',
     'index.js',
     'requests.js',
+    'timing-markers.js',
     'ui.js',
 )

devtools/client/netmonitor/src/selectors/timing-markers.js

@@ -0,0 +1,13 @@
+/* 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";
+
+function getDisplayedTimingMarker(state, marker) {
+  return state.timingMarkers.get(marker) - state.requests.get("firstStartedMillis");
+}
+
+module.exports = {
+  getDisplayedTimingMarker,
+};

devtools/client/themes/toolbars.css

@@ -39,7 +39,7 @@
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
-  -moz-appearance: none; appearance: none;
+  -moz-appearance: none;
   padding: 0;
   border-width: 0;
   border-bottom-width: 1px;
@@ -74,6 +74,11 @@
   padding: 0;
 }
 
+.devtools-toolbar-bottom {
+  border-top-width: 1px;
+  border-bottom: none;
+}
+
 .devtools-separator {
   margin: 0 2px;
   width: 2px;