From 8114b67b64e17482e46c2eaa77dd6a6156130dba Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Sat, 3 Mar 2018 17:44:55 +0100 Subject: moebius#93: DevTools: Network - DOMContentLoaded and load Issue #31 Improvements: #34 https://github.com/MoonchildProductions/moebius/pull/93 --- devtools/client/netmonitor/actions/index.js | 3 +- devtools/client/netmonitor/actions/moz.build | 1 + .../client/netmonitor/actions/timing-markers.js | 19 ++++++++ .../client/netmonitor/components/summary-button.js | 24 ++++++++-- devtools/client/netmonitor/constants.js | 2 + .../client/netmonitor/netmonitor-controller.js | 2 + devtools/client/netmonitor/reducers/index.js | 2 + devtools/client/netmonitor/reducers/moz.build | 1 + .../client/netmonitor/reducers/timing-markers.js | 52 ++++++++++++++++++++++ devtools/client/netmonitor/requests-menu-view.js | 7 +++ devtools/client/netmonitor/selectors/index.js | 18 ++++++++ 11 files changed, 127 insertions(+), 4 deletions(-) create mode 100644 devtools/client/netmonitor/actions/timing-markers.js create mode 100644 devtools/client/netmonitor/reducers/timing-markers.js (limited to 'devtools/client/netmonitor') diff --git a/devtools/client/netmonitor/actions/index.js b/devtools/client/netmonitor/actions/index.js index 2ce23448e..de8f4ae1d 100644 --- a/devtools/client/netmonitor/actions/index.js +++ b/devtools/client/netmonitor/actions/index.js @@ -5,6 +5,7 @@ const filters = require("./filters"); const requests = require("./requests"); +const timingMarkers = require("./timing-markers"); const ui = require("./ui"); -module.exports = Object.assign({}, filters, requests, ui); +module.exports = Object.assign({}, filters, requests, timingMarkers, ui); diff --git a/devtools/client/netmonitor/actions/moz.build b/devtools/client/netmonitor/actions/moz.build index d0ac61944..ce904cae8 100644 --- a/devtools/client/netmonitor/actions/moz.build +++ b/devtools/client/netmonitor/actions/moz.build @@ -7,5 +7,6 @@ DevToolsModules( 'filters.js', 'index.js', 'requests.js', + 'timing-markers.js', 'ui.js', ) diff --git a/devtools/client/netmonitor/actions/timing-markers.js b/devtools/client/netmonitor/actions/timing-markers.js new file mode 100644 index 000000000..4f1363a70 --- /dev/null +++ b/devtools/client/netmonitor/actions/timing-markers.js @@ -0,0 +1,19 @@ +/* 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 { ADD_TIMING_MARKER, CLEAR_TIMING_MARKERS } = require("../constants"); + +exports.addTimingMarker = (marker) => { + return { + type: ADD_TIMING_MARKER, + marker + }; +}; + +exports.clearTimingMarkers = () => { + return { + type: CLEAR_TIMING_MARKERS + }; +}; 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: () => { diff --git a/devtools/client/netmonitor/constants.js b/devtools/client/netmonitor/constants.js index 33bc71ea7..1605496a5 100644 --- a/devtools/client/netmonitor/constants.js +++ b/devtools/client/netmonitor/constants.js @@ -10,6 +10,8 @@ const general = { }; const actionTypes = { + ADD_TIMING_MARKER: "ADD_TIMING_MARKER", + CLEAR_TIMING_MARKERS: "CLEAR_TIMING_MARKERS", TOGGLE_FILTER_TYPE: "TOGGLE_FILTER_TYPE", ENABLE_FILTER_TYPE_ONLY: "ENABLE_FILTER_TYPE_ONLY", SET_FILTER_TEXT: "SET_FILTER_TEXT", diff --git a/devtools/client/netmonitor/netmonitor-controller.js b/devtools/client/netmonitor/netmonitor-controller.js index 739e174fb..939b6e4f5 100644 --- a/devtools/client/netmonitor/netmonitor-controller.js +++ b/devtools/client/netmonitor/netmonitor-controller.js @@ -414,6 +414,7 @@ TargetEventsHandler.prototype = { } // Clear any accumulated markers. NetMonitorController.NetworkEventsHandler.clearMarkers(); + gStore.dispatch(Actions.clearTimingMarkers()); window.emit(EVENTS.TARGET_WILL_NAVIGATE); break; @@ -534,6 +535,7 @@ NetworkEventsHandler.prototype = { _onDocLoadingMarker: function (marker) { window.emit(EVENTS.TIMELINE_EVENT, marker); this._markers.push(marker); + gStore.dispatch(Actions.addTimingMarker(marker)); }, /** diff --git a/devtools/client/netmonitor/reducers/index.js b/devtools/client/netmonitor/reducers/index.js index f36b1d91f..f003c7805 100644 --- a/devtools/client/netmonitor/reducers/index.js +++ b/devtools/client/netmonitor/reducers/index.js @@ -6,10 +6,12 @@ const { combineReducers } = require("devtools/client/shared/vendor/redux"); const filters = require("./filters"); const requests = require("./requests"); +const timingMarkers = require("./timing-markers"); const ui = require("./ui"); module.exports = combineReducers({ filters, requests, + timingMarkers, ui, }); diff --git a/devtools/client/netmonitor/reducers/moz.build b/devtools/client/netmonitor/reducers/moz.build index d0ac61944..ce904cae8 100644 --- a/devtools/client/netmonitor/reducers/moz.build +++ b/devtools/client/netmonitor/reducers/moz.build @@ -7,5 +7,6 @@ DevToolsModules( 'filters.js', 'index.js', 'requests.js', + 'timing-markers.js', 'ui.js', ) diff --git a/devtools/client/netmonitor/reducers/timing-markers.js b/devtools/client/netmonitor/reducers/timing-markers.js new file mode 100644 index 000000000..cb500b2c4 --- /dev/null +++ b/devtools/client/netmonitor/reducers/timing-markers.js @@ -0,0 +1,52 @@ +/* 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 I = require("devtools/client/shared/vendor/immutable"); +const { ADD_TIMING_MARKER, + CLEAR_TIMING_MARKERS } = require("../constants"); + +const TimingMarkers = I.Record({ + firstDocumentDOMContentLoadedTimestamp: -1, + firstDocumentLoadTimestamp: -1, +}); + +function addTimingMarker(state, action) { + if (action.marker.name == "document::DOMContentLoaded" && + state.firstDocumentDOMContentLoadedTimestamp == -1) { + return state.set("firstDocumentDOMContentLoadedTimestamp", + action.marker.unixTime / 1000); + } + + if (action.marker.name == "document::Load" && + state.firstDocumentLoadTimestamp == -1) { + return state.set("firstDocumentLoadTimestamp", + action.marker.unixTime / 1000); + } + + return state; +} + +function clearTimingMarkers(state) { + return state.withMutations(st => { + st.remove("firstDocumentDOMContentLoadedTimestamp"); + st.remove("firstDocumentLoadTimestamp"); + }); +} + +function timingMarkers(state = new TimingMarkers(), action) { + switch (action.type) { + case ADD_TIMING_MARKER: + return addTimingMarker(state, action); + + case CLEAR_TIMING_MARKERS: + return clearTimingMarkers(state); + + default: + return state; + } +} + +module.exports = timingMarkers; diff --git a/devtools/client/netmonitor/requests-menu-view.js b/devtools/client/netmonitor/requests-menu-view.js index 4ee307145..c491fcb0e 100644 --- a/devtools/client/netmonitor/requests-menu-view.js +++ b/devtools/client/netmonitor/requests-menu-view.js @@ -275,6 +275,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { this._addQueue = []; this._updateQueue = []; this._firstRequestStartedMillis = -1; + this._firstRequestStartedMillisInRequests = false; this._lastRequestEndedMillis = -1; }, @@ -650,6 +651,9 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { // Append a network request item to this container. let requestItem = this.push([menuView, id], { attachment: { + firstRequestStartedMillis: this._firstRequestStartedMillisInRequests + ? null + : this._firstRequestStartedMillis, startedDeltaMillis: unixTime - this._firstRequestStartedMillis, startedMillis: unixTime, method: method, @@ -661,6 +665,8 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { } }); + this._firstRequestStartedMillisInRequests = true; + if (id == this._preferredItemId) { this.selectedItem = requestItem; } @@ -1563,6 +1569,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { _ctx: null, _cachedWaterfallWidth: 0, _firstRequestStartedMillis: -1, + _firstRequestStartedMillisInRequests: false, _lastRequestEndedMillis: -1, _updateQueue: [], _addQueue: [], diff --git a/devtools/client/netmonitor/selectors/index.js b/devtools/client/netmonitor/selectors/index.js index 60d6007cd..612188758 100644 --- a/devtools/client/netmonitor/selectors/index.js +++ b/devtools/client/netmonitor/selectors/index.js @@ -73,6 +73,24 @@ const getDisplayedRequestsSummary = createSelector( }) ); +function getDisplayedTimingMarker(state, marker) { + let timingMarker = null; + if (state.timingMarkers) { + timingMarker = state.timingMarkers.get(marker); + } + let firstRequestStartedMillis = null; + if (state.requests.items.length) { + firstRequestStartedMillis = state.requests.items[0] + .attachment.firstRequestStartedMillis; + } + if (timingMarker && firstRequestStartedMillis) { + return timingMarker - firstRequestStartedMillis; + } else { + return -1; + } +} + module.exports = { getDisplayedRequestsSummary, + getDisplayedTimingMarker, }; -- cgit v1.2.3