Bug 1398524 - Sort Request-Cookies,Response-Cookies in 'Cookies' tab and Query-String,Form-Params,JSON in Params tab. r=Honza

MozReview-Commit-ID: KE2plx3j9Qr

--HG--
extra : rebase_source : 219ba067da783e4d9bb000f14631929cb05b7478

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

@@ -10,6 +10,7 @@ const {
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { L10N } = require("../utils/l10n");
+const { sortObjectKeys } = require("../utils/sort-utils");
 
 // Component
 const PropertiesView = createFactory(require("./properties-view"));
@@ -50,11 +51,11 @@ function CookiesPanel({
   let object = {};
 
   if (responseCookies.length) {
-    object[RESPONSE_COOKIES] = getProperties(responseCookies);
+    object[RESPONSE_COOKIES] = sortObjectKeys(getProperties(responseCookies));
   }
 
   if (requestCookies.length) {
-    object[REQUEST_COOKIES] = getProperties(requestCookies);
+    object[REQUEST_COOKIES] = sortObjectKeys(getProperties(requestCookies));
   }
 
   return (

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

@@ -20,6 +20,7 @@ const {
   getHTTPStatusCodeURL,
 } = require("../utils/mdn-utils");
 const { writeHeaderText } = require("../utils/request-utils");
+const { sortObjectKeys } = require("../utils/sort-utils");
 
 // Components
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
@@ -74,7 +75,7 @@ const HeadersPanel = createClass({
           , {})
       };
 
-      propertiesResult[headerKey] = this.sortByKey(propertiesResult[headerKey]);
+      propertiesResult[headerKey] = sortObjectKeys(propertiesResult[headerKey]);
       return propertiesResult;
     }
 
@@ -128,16 +129,6 @@ 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/src/components/params-panel.js

@@ -11,6 +11,7 @@ const {
 } = require("devtools/client/shared/vendor/react");
 const { L10N } = require("../utils/l10n");
 const { getUrlQuery, parseQueryString, parseFormData } = require("../utils/request-utils");
+const { sortObjectKeys } = require("../utils/sort-utils");
 
 // Components
 const PropertiesView = createFactory(require("./properties-view"));
@@ -76,7 +77,7 @@ function ParamsPanel({
     }
 
     if (json) {
-      object[JSON_SCOPE_NAME] = json;
+      object[JSON_SCOPE_NAME] = sortObjectKeys(json);
     } else {
       object[PARAMS_POST_PAYLOAD] = {
         EDITOR_CONFIG: {
@@ -118,7 +119,7 @@ ParamsPanel.propTypes = {
  * @returns {Object} Rep compatible object
  */
 function getProperties(arr) {
-  return arr.reduce((map, obj) => {
+  return sortObjectKeys(arr.reduce((map, obj) => {
     let value = map[obj.name];
     if (value) {
       if (typeof value !== "object") {
@@ -129,7 +130,7 @@ function getProperties(arr) {
       map[obj.name] = obj.value;
     }
     return map;
-  }, {});
+  }, {}));
 }
 
 module.exports = ParamsPanel;

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

@@ -15,4 +15,5 @@ DevToolsModules(
     'prefs.js',
     'request-utils.js',
     'sort-predicates.js',
+    'sort-utils.js'
 )

devtools/client/netmonitor/src/utils/sort-utils.js

@@ -0,0 +1,30 @@
+/* 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";
+
+/**
+ * Sorts object by keys in alphabetical order
+ * If object has nested children, it sorts the child-elements also by keys
+ * @param {object} which should be sorted by keys in alphabetical order
+ */
+function sortObjectKeys(object) {
+  if (object == null) {
+    return null;
+  }
+  return Object.keys(object).sort(function (left, right) {
+    return left.toLowerCase().localeCompare(right.toLowerCase());
+  }).reduce((acc, key) => {
+    if (typeof object[key] === "object") {
+      acc[key] = sortObjectKeys(object[key]);
+    } else {
+      acc[key] = object[key];
+    }
+    return acc;
+  }, {});
+}
+
+module.exports = {
+  sortObjectKeys
+};

devtools/client/netmonitor/test/browser.ini

@@ -44,6 +44,7 @@ support-files =
   sjs_hsts-test-server.sjs
   sjs_json-test-server.sjs
   sjs_simple-test-server.sjs
+  sjs_simple-unsorted-cookies-test-server.sjs
   sjs_sorting-test-server.sjs
   sjs_status-codes-test-server.sjs
   sjs_truncate-test-server.sjs
@@ -99,6 +100,7 @@ skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32
 [browser_net_copy_headers.js]
 subsuite = clipboard
 skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32 debug devtools for timeouts
+[browser_net_cookies_sorted.js]
 [browser_net_copy_as_curl.js]
 subsuite = clipboard
 skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32 debug devtools for timeouts
@@ -133,6 +135,7 @@ skip-if = (os == 'linux' && debug && bits == 32) # Bug 1303439
 [browser_net_open_request_in_tab.js]
 [browser_net_pane-collapse.js]
 [browser_net_pane-toggle.js]
+[browser_net_params_sorted.js]
 [browser_net_persistent_logs.js]
 [browser_net_post-data-01.js]
 [browser_net_post-data-02.js]

devtools/client/netmonitor/test/browser_net_cookies_sorted.js

@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if Request-Cookies and Response-Cookies are sorted in Cookies tab.
+ */
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_UNSORTED_COOKIES_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;
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll(".request-list-item")[0]);
+  EventUtils.sendMouseEvent({ type: "click" },
+    document.querySelector("#cookies-tab"));
+
+  info("Check if Request-Cookies and Response-Cookies are sorted");
+  let expectedLabelValues = ["Response cookies", "bob", "httpOnly", "value",
+                             "foo", "httpOnly", "value", "tom", "httpOnly", "value",
+                             "Request cookies", "bob", "foo", "tom"];
+  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);
+});

devtools/client/netmonitor/test/browser_net_params_sorted.js

@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests whether keys in Params panel are sorted.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
+  info("Starting test... ");
+
+  let { document, store, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  let wait = waitForNetworkEvents(monitor, 0, 2);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  wait = waitForDOM(document, ".headers-overview");
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll(".request-list-item")[0]);
+  yield wait;
+
+  EventUtils.sendMouseEvent({ type: "click" },
+    document.querySelector("#params-tab"));
+
+  let actualKeys = document.querySelectorAll(".treeLabel");
+  let expectedKeys = ["Query string", "baz", "foo", "type",
+                      "Form data", "baz", "foo"];
+
+  for (let i = 0; i < actualKeys.length; i++) {
+    is(actualKeys[i].innerText, expectedKeys[i],
+      "Actual value " + actualKeys[i].innerText + " is equal to the " +
+      "expected value " + expectedKeys[i]);
+  }
+});

devtools/client/netmonitor/test/browser_net_post-data-01.js

@@ -112,20 +112,20 @@ add_task(function* () {
     let values = tabpanel
       .querySelectorAll("tr:not(.tree-section) .treeValueCell .objectBox");
 
-    is(labels[0].textContent, "foo", "The first query param name was incorrect.");
+    is(labels[0].textContent, "baz", "The first query param name was incorrect.");
-    is(values[0].textContent, "bar", "The first query param value was incorrect.");
+    is(values[0].textContent, "42", "The first query param value was incorrect.");
-    is(labels[1].textContent, "baz", "The second query param name was incorrect.");
+    is(labels[1].textContent, "foo", "The second query param name was incorrect.");
-    is(values[1].textContent, "42", "The second query param value was incorrect.");
+    is(values[1].textContent, "bar", "The second query param value was incorrect.");
     is(labels[2].textContent, "type", "The third query param name was incorrect.");
     is(values[2].textContent, type, "The third query param value was incorrect.");
 
     if (type == "urlencoded") {
       checkVisibility("params");
       is(labels.length, 5, "There should be 5 param values displayed in this tabpanel.");
-      is(labels[3].textContent, "foo", "The first post param name was incorrect.");
+      is(labels[3].textContent, "baz", "The first post param name was incorrect.");
-      is(values[3].textContent, "bar", "The first post param value was incorrect.");
+      is(values[3].textContent, "123", "The first post param value was incorrect.");
-      is(labels[4].textContent, "baz", "The second post param name was incorrect.");
+      is(labels[4].textContent, "foo", "The second post param name was incorrect.");
-      is(values[4].textContent, "123", "The second post param value was incorrect.");
+      is(values[4].textContent, "bar", "The second post param value was incorrect.");
     } else {
       checkVisibility("params editor");
 

devtools/client/netmonitor/test/browser_net_post-data-02.js

@@ -54,10 +54,10 @@ add_task(function* () {
   let values = tabpanel
     .querySelectorAll("tr:not(.tree-section) .treeValueCell .objectBox");
 
-  is(labels[0].textContent, "foo", "The first query param name was incorrect.");
+  is(labels[0].textContent, "baz", "The first query param name was incorrect.");
-  is(values[0].textContent, "bar", "The first query param value was incorrect.");
+  is(values[0].textContent, "123", "The first query param value was incorrect.");
-  is(labels[1].textContent, "baz", "The second query param name was incorrect.");
+  is(labels[1].textContent, "foo", "The second query param name was incorrect.");
-  is(values[1].textContent, "123", "The second query param value was incorrect.");
+  is(values[1].textContent, "bar", "The second query param value was incorrect.");
 
   return teardown(monitor);
 });

devtools/client/netmonitor/test/browser_net_post-data-03.js

@@ -79,10 +79,10 @@ add_task(function* () {
   values = tabpanel
     .querySelectorAll("tr:not(.tree-section) .treeValueCell .objectBox");
 
-  is(labels[0].textContent, "foo", "The first payload param name was incorrect.");
+  is(labels[0].textContent, "baz", "The first payload param name was incorrect.");
-  is(values[0].textContent, "bar", "The first payload param value was incorrect.");
+  is(values[0].textContent, "123", "The first payload param value was incorrect.");
-  is(labels[1].textContent, "baz", "The second payload param name was incorrect.");
+  is(labels[1].textContent, "foo", "The second payload param name was incorrect.");
-  is(values[1].textContent, "123", "The second payload param value was incorrect.");
+  is(values[1].textContent, "bar", "The second payload param value was incorrect.");
 
   return teardown(monitor);
 });

devtools/client/netmonitor/test/head.js

@@ -62,6 +62,7 @@ const SEND_BEACON_URL = EXAMPLE_URL + "html_send-beacon.html";
 const CORS_URL = EXAMPLE_URL + "html_cors-test-page.html";
 
 const SIMPLE_SJS = EXAMPLE_URL + "sjs_simple-test-server.sjs";
+const SIMPLE_UNSORTED_COOKIES_SJS = EXAMPLE_URL + "sjs_simple-unsorted-cookies-test-server.sjs";
 const CONTENT_TYPE_SJS = EXAMPLE_URL + "sjs_content-type-test-server.sjs";
 const HTTPS_CONTENT_TYPE_SJS = HTTPS_EXAMPLE_URL + "sjs_content-type-test-server.sjs";
 const STATUS_CODES_SJS = EXAMPLE_URL + "sjs_status-codes-test-server.sjs";

devtools/client/netmonitor/test/sjs_simple-unsorted-cookies-test-server.sjs

@@ -0,0 +1,18 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  response.setStatusLine(request.httpVersion, 200, "Och Aye");
+
+  response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  response.setHeader("Pragma", "no-cache");
+  response.setHeader("Expires", "0");
+
+  response.setHeader("Set-Cookie", "tom=cool; Max-Age=10; HttpOnly", true);
+  response.setHeader("Set-Cookie", "bob=true; Max-Age=10; HttpOnly", true);
+  response.setHeader("Set-Cookie", "foo=bar; Max-Age=10; HttpOnly", true);
+
+  response.setHeader("Content-Type", "text/plain; charset=utf-8", false);
+  response.setHeader("Foo-Bar", "baz", false);
+  response.write("Hello world!");
+}