Bug 1398522 - Sort 'Request-Headers' and 'Response-Headers' in 'Headers' tab. r=Honza draft
authorabhinav <abhinav.koppula@gmail.com>
Sun, 17 Sep 2017 12:24:06 +0530
changeset 667696 5c19364ea8c2986777442c42d357c06d07eb01d5
parent 665623 7aceaf8bcb9f582db0f93488b48ef7019e348dba
child 732489 0eb7671f5a74ca839ec06d70a39c6043ce69edbb
push id80825
push userbmo:abhinav.koppula@gmail.com
push dateWed, 20 Sep 2017 17:17:06 +0000
reviewersHonza
bugs1398522
milestone57.0a1
Bug 1398522 - Sort 'Request-Headers' and 'Response-Headers' in 'Headers' tab. r=Honza MozReview-Commit-ID: AbRboDl5ADU
devtools/client/netmonitor/src/components/headers-panel.js
devtools/client/netmonitor/test/browser.ini
devtools/client/netmonitor/test/browser_net_headers_sorted.js
--- a/devtools/client/netmonitor/src/components/headers-panel.js
+++ b/devtools/client/netmonitor/src/components/headers-panel.js
@@ -61,22 +61,26 @@ const HeadersPanel = createClass({
   getInitialState() {
     return {
       rawHeadersOpened: false,
     };
   },
 
   getProperties(headers, title) {
     if (headers && headers.headers.length) {
-      return {
-        [`${title} (${getFormattedSize(headers.headersSize, 3)})`]:
+      let headerKey = `${title} (${getFormattedSize(headers.headersSize, 3)})`;
+      let propertiesResult = {
+        [headerKey]:
           headers.headers.reduce((acc, { name, value }) =>
             name ? Object.assign(acc, { [name]: value }) : acc
           , {})
       };
+
+      propertiesResult[headerKey] = this.sortByKey(propertiesResult[headerKey]);
+      return propertiesResult;
     }
 
     return null;
   },
 
   toggleRawHeaders() {
     this.setState({
       rawHeadersOpened: !this.state.rawHeadersOpened,
@@ -119,16 +123,26 @@ const HeadersPanel = createClass({
         })),
         headerDocURL ? MDNLink({
           url: headerDocURL,
         }) : null
       )
     );
   },
 
+  sortByKey: function (object) {
+    let result = {};
+    Object.keys(object).sort(function (left, right) {
+      return left.toLowerCase().localeCompare(right.toLowerCase());
+    }).forEach(function (key) {
+      result[key] = object[key];
+    });
+    return result;
+  },
+
   render() {
     const {
       openLink,
       cloneSelectedRequest,
       request: {
         fromCache,
         fromServiceWorker,
         httpVersion,
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -111,16 +111,17 @@ skip-if = (os == 'linux' && debug && bit
 [browser_net_filter-01.js]
 skip-if = (os == 'linux' && debug && bits == 32) # Bug 1303439
 [browser_net_filter-02.js]
 [browser_net_filter-03.js]
 [browser_net_filter-04.js]
 [browser_net_filter-autocomplete.js]
 [browser_net_filter-flags.js]
 [browser_net_footer-summary.js]
+[browser_net_headers_sorted.js]
 [browser_net_icon-preview.js]
 [browser_net_image-tooltip.js]
 [browser_net_json-b64.js]
 [browser_net_json-null.js]
 [browser_net_json-long.js]
 [browser_net_json-malformed.js]
 [browser_net_json_custom_mime.js]
 [browser_net_json_text_mime.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_headers_sorted.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if Request-Headers and Response-Headers are sorted in Headers tab.
+ */
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_SJS);
+  info("Starting test... ");
+
+  let { document, store, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  tab.linkedBrowser.reload();
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield wait;
+
+  wait = waitForDOM(document, ".headers-overview");
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll(".request-list-item")[0]);
+  yield wait;
+
+  info("Check if Request-Headers and Response-Headers are sorted");
+  let expectedResponseHeaders = ["cache-control", "connection", "content-length",
+                                 "content-type", "date", "expires", "foo-bar",
+                                 "pragma", "server", "set-cookie"];
+  let expectedRequestHeaders = ["Accept", "Accept-Encoding", "Accept-Language",
+                                "Cache-Control", "Connection", "Cookie", "Host",
+                                "Pragma", "Upgrade-Insecure-Requests", "User-Agent"];
+
+  let labelCells = document.querySelectorAll(".treeLabelCell");
+  let actualResponseHeaders = [];
+  let actualRequestHeaders = [];
+
+  for (let i = 1; i < 11; i++) {
+    actualResponseHeaders.push(labelCells[i].innerText);
+  }
+
+  for (let i = 12; i < labelCells.length; i++) {
+    actualRequestHeaders.push(labelCells[i].innerText);
+  }
+
+  is(actualResponseHeaders.toString(), expectedResponseHeaders.toString(),
+    "Response Headers are sorted");
+
+  is(actualRequestHeaders.toString(), expectedRequestHeaders.toString(),
+    "Request Headers are sorted");
+
+  yield teardown(monitor);
+});