Bug 1398522 - Sort 'Request-Headers' and 'Response-Headers' in 'Headers' tab. r=Honza

MozReview-Commit-ID: AbRboDl5ADU

--HG--
extra : rebase_source : d942754fc5002902fe91ab012e4c5a1bb868288f

devtools/client/netmonitor/src/components/headers-panel.js

@@ -66,12 +66,16 @@ const HeadersPanel = createClass({
 
   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;
@@ -124,6 +128,16 @@ const HeadersPanel = createClass({
     );
   },
 
+  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,

devtools/client/netmonitor/test/browser.ini

@@ -116,6 +116,7 @@ skip-if = (os == 'linux' && debug && bits == 32) # Bug 1303439
 [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]

devtools/client/netmonitor/test/browser_net_headers_sorted.js

@@ -0,0 +1,42 @@
+/* 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 expectedLabelValues = ["Response headers (330 B)", "cache-control", "connection",
+                             "content-length", "content-type", "date", "expires",
+                             "foo-bar", "pragma", "server", "set-cookie",
+                             "Request headers (466 B)", "Accept", "Accept-Encoding",
+                             "Accept-Language", "Cache-Control", "Connection", "Cookie",
+                             "Host", "Pragma", "Upgrade-Insecure-Requests", "User-Agent"];
+  let labelCells = document.querySelectorAll(".treeLabelCell");
+  labelCells.forEach(function (val, index) {
+    is(val.innerText, expectedLabelValues[index],
+    "Actual label value " + val.innerText + " not equal to expected label value "
+    + expectedLabelValues[index]);
+  });
+  yield teardown(monitor);
+});