From 627f167bf41935cad572b04c5b412f9294293ecb Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 28 Feb 2018 12:17:13 +0100 Subject: Bug 1309194: Implement summary info in Net Panel Toolbar; Bug 1317205: CSS improvement for summary button Required for: https://github.com/MoonchildProductions/moebius/pull/93 --- devtools/client/netmonitor/requests-menu-view.js | 105 +++-------------------- 1 file changed, 10 insertions(+), 95 deletions(-) (limited to 'devtools/client/netmonitor/requests-menu-view.js') diff --git a/devtools/client/netmonitor/requests-menu-view.js b/devtools/client/netmonitor/requests-menu-view.js index 6ea6381ec..d8c66b05d 100644 --- a/devtools/client/netmonitor/requests-menu-view.js +++ b/devtools/client/netmonitor/requests-menu-view.js @@ -19,7 +19,6 @@ const {setImageTooltip, getImageDimensions} = const {Heritage, WidgetMethods, setNamedTimeout} = require("devtools/client/shared/widgets/view-helpers"); const {CurlUtils} = require("devtools/client/shared/curl"); -const {PluralForm} = require("devtools/shared/plural-form"); const {Filters, isFreetextMatch} = require("./filter-predicates"); const {Sorters} = require("./sort-predicates"); const {L10N, WEBCONSOLE_L10N} = require("./l10n"); @@ -90,10 +89,11 @@ function storeWatcher(initialValue, reduceValue, onChange) { let currentValue = initialValue; return () => { + const oldValue = currentValue; const newValue = reduceValue(currentValue); - if (newValue !== currentValue) { - onChange(newValue, currentValue); + if (newValue !== oldValue) { currentValue = newValue; + onChange(newValue, oldValue); } }; } @@ -129,8 +129,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { let widgetParentEl = $("#requests-menu-contents"); this.widget = new SideMenuWidget(widgetParentEl); this._splitter = $("#network-inspector-view-splitter"); - this._summary = $("#requests-menu-network-summary-button"); - this._summary.setAttribute("label", L10N.getStr("networkMenu.empty")); // Create a tooltip for the newly appended network request item. this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" }); @@ -211,13 +209,10 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { if (NetMonitorController.supportsPerfStats) { $("#requests-menu-perf-notice-button").addEventListener("command", this._onContextPerfCommand, false); - $("#requests-menu-network-summary-button").addEventListener("command", - this._onContextPerfCommand, false); $("#network-statistics-back-button").addEventListener("command", this._onContextPerfCommand, false); } else { $("#notice-perf-message").hidden = true; - $("#requests-menu-network-summary-button").hidden = true; } if (!NetMonitorController.supportsTransferredResponseSize) { @@ -257,8 +252,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { this._onReloadCommand, false); $("#requests-menu-perf-notice-button").removeEventListener("command", this._onContextPerfCommand, false); - $("#requests-menu-network-summary-button").removeEventListener("command", - this._onContextPerfCommand, false); $("#network-statistics-back-button").removeEventListener("command", this._onContextPerfCommand, false); @@ -422,7 +415,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { */ reFilterRequests: function () { this.filterContents(this._filterPredicate); - this.refreshSummary(); + this.updateRequests(); this.refreshZebra(); }, @@ -541,7 +534,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { break; } - this.refreshSummary(); + this.updateRequests(); this.refreshZebra(); }, @@ -552,41 +545,17 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { NetMonitorController.NetworkEventsHandler.clearMarkers(); NetMonitorView.Sidebar.toggle(false); - this.store.dispatch(Actions.disableToggleButton(true)); $("#requests-menu-empty-notice").hidden = false; this.empty(); - this.refreshSummary(); + this.updateRequests(); }, /** - * Refreshes the status displayed in this container's footer, providing - * concise information about all requests. + * Update store request itmes and trigger related UI update */ - refreshSummary: function () { - let visibleItems = this.visibleItems; - let visibleRequestsCount = visibleItems.length; - if (!visibleRequestsCount) { - this._summary.setAttribute("label", L10N.getStr("networkMenu.empty")); - return; - } - - let totalBytes = this._getTotalBytesOfRequests(visibleItems); - let totalMillis = - this._getNewestRequest(visibleItems).attachment.endedMillis - - this._getOldestRequest(visibleItems).attachment.startedMillis; - - // https://developer.mozilla.org/en-US/docs/Localization_and_Plurals - let str = PluralForm.get(visibleRequestsCount, - L10N.getStr("networkMenu.summary")); - - this._summary.setAttribute("label", str - .replace("#1", visibleRequestsCount) - .replace("#2", L10N.numberWithDecimals((totalBytes || 0) / 1024, - CONTENT_SIZE_DECIMALS)) - .replace("#3", L10N.numberWithDecimals((totalMillis || 0) / 1000, - REQUEST_TIME_DECIMALS)) - ); + updateRequests: function () { + this.store.dispatch(Actions.updateRequests(this.visibleItems)); }, /** @@ -865,7 +834,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { this._updateQueue = []; this._addQueue = []; - this.store.dispatch(Actions.disableToggleButton(!this.itemCount)); $("#requests-menu-empty-notice").hidden = !!this.itemCount; // Make sure all the requests are sorted and filtered. @@ -875,7 +843,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { // so this doesn't happen once per network event update). this.sortContents(); this.filterContents(); - this.refreshSummary(); + this.updateRequests(); this.refreshZebra(); // Rescale all the waterfalls so that everything is visible at once. @@ -1558,59 +1526,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { } }, - /** - * Gets the total number of bytes representing the cumulated content size of - * a set of requests. Returns 0 for an empty set. - * - * @param array itemsArray - * @return number - */ - _getTotalBytesOfRequests: function (itemsArray) { - if (!itemsArray.length) { - return 0; - } - - let result = 0; - itemsArray.forEach(item => { - let size = item.attachment.contentSize; - result += (typeof size == "number") ? size : 0; - }); - - return result; - }, - - /** - * Gets the oldest (first performed) request in a set. Returns null for an - * empty set. - * - * @param array itemsArray - * @return object - */ - _getOldestRequest: function (itemsArray) { - if (!itemsArray.length) { - return null; - } - return itemsArray.reduce((prev, curr) => - prev.attachment.startedMillis < curr.attachment.startedMillis ? - prev : curr); - }, - - /** - * Gets the newest (latest performed) request in a set. Returns null for an - * empty set. - * - * @param array itemsArray - * @return object - */ - _getNewestRequest: function (itemsArray) { - if (!itemsArray.length) { - return null; - } - return itemsArray.reduce((prev, curr) => - prev.attachment.startedMillis > curr.attachment.startedMillis ? - prev : curr); - }, - /** * Gets the available waterfall width in this container. * @return number -- cgit v1.2.3 From 644e9db1092df1477b1facc52cd3ee45ebd13040 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Thu, 1 Mar 2018 11:52:50 +0100 Subject: DevTools - network - implement the secureConnectionStart property for the PerformanceTiming https://github.com/MoonchildProductions/moebius/pull/116 ("/testing" and "/toolkit" in in the previous commit) --- devtools/client/netmonitor/requests-menu-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'devtools/client/netmonitor/requests-menu-view.js') diff --git a/devtools/client/netmonitor/requests-menu-view.js b/devtools/client/netmonitor/requests-menu-view.js index d8c66b05d..ea8ec52b1 100644 --- a/devtools/client/netmonitor/requests-menu-view.js +++ b/devtools/client/netmonitor/requests-menu-view.js @@ -1099,7 +1099,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { */ _createWaterfallView: function (item, timings, fromCache) { let { target } = item; - let sections = ["blocked", "dns", "connect", "send", "wait", "receive"]; + let sections = ["blocked", "dns", "connect", "ssl", "send", "wait", "receive"]; // Skipping "blocked" because it doesn't work yet. let timingsNode = $(".requests-menu-timings", target); -- cgit v1.2.3 From 6ee4e4436c1fc36f743c1ba9d5ef22ab988adb3d Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Thu, 1 Mar 2018 17:52:39 +0100 Subject: Show the Status Line (e.g. "HTTP/2.0 200 OK") in raw headers (response) https://github.com/MoonchildProductions/moebius/pull/323 --- devtools/client/netmonitor/requests-menu-view.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'devtools/client/netmonitor/requests-menu-view.js') diff --git a/devtools/client/netmonitor/requests-menu-view.js b/devtools/client/netmonitor/requests-menu-view.js index ea8ec52b1..4ee307145 100644 --- a/devtools/client/netmonitor/requests-menu-view.js +++ b/devtools/client/netmonitor/requests-menu-view.js @@ -399,9 +399,20 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, { if (rawHeadersHidden) { let selected = this.selectedItem.attachment; let selectedRequestHeaders = selected.requestHeaders.headers; - let selectedResponseHeaders = selected.responseHeaders.headers; + // display Status-Line above other response headers + let selectedStatusLine = selected.httpVersion + + " " + selected.status + + " " + selected.statusText + + "\n"; requestTextarea.value = writeHeaderText(selectedRequestHeaders); - responseTextare.value = writeHeaderText(selectedResponseHeaders); + // sometimes it's empty + if (selected.responseHeaders) { + let selectedResponseHeaders = selected.responseHeaders.headers; + responseTextare.value = selectedStatusLine + + writeHeaderText(selectedResponseHeaders); + } else { + responseTextare.value = selectedStatusLine; + } $("#raw-headers").hidden = false; } else { requestTextarea.value = null; -- cgit v1.2.3