Bug 1356869 - Add cookies and set cookies columns. r=ntim,rickychien

MozReview-Commit-ID: CtZAYTURypz

--HG--
extra : rebase_source : 93266d0089460c06815521d4ba6d8da77a2905db
extra : source : e75dd46fbe5f762590317280b8e6330615df5d5e

devtools/client/locales/en-US/netmonitor.properties

@@ -434,6 +434,14 @@ netmonitor.toolbar.cause=Cause
 # in the network table toolbar, above the "type" column.
 netmonitor.toolbar.type=Type
 
+# LOCALIZATION NOTE (netmonitor.toolbar.cookies): This is the label displayed
+# in the network table toolbar, above the "cookies" column.
+netmonitor.toolbar.cookies=Cookies
+
+# LOCALIZATION NOTE (netmonitor.toolbar.setCookies): This is the label displayed
+# in the network table toolbar, above the "set cookies" column.
+netmonitor.toolbar.setCookies=Set Cookies
+
 # LOCALIZATION NOTE (netmonitor.toolbar.transferred): This is the label displayed
 # in the network table toolbar, above the "transferred" column, which is the
 # compressed / encoded size.

devtools/client/netmonitor/index.js

@@ -23,7 +23,8 @@ EventEmitter.decorate(window);
 
 pref("devtools.netmonitor.enabled", true);
 pref("devtools.netmonitor.filters", "[\"all\"]");
-pref("devtools.netmonitor.hiddenColumns", "[]");
+pref("devtools.netmonitor.hiddenColumns",
+     "[\"cookies\",\"protocol\",\"remoteip\",\"setCookies\"]");
 pref("devtools.netmonitor.panes-network-details-width", 550);
 pref("devtools.netmonitor.panes-network-details-height", 450);
 pref("devtools.netmonitor.har.defaultLogDir", "");

devtools/client/netmonitor/src/assets/styles/netmonitor.css

@@ -435,6 +435,18 @@ body,
   width: 8%;
 }
 
+/* Cookies column */
+
+.requests-list-cookies {
+  width: 6%;
+}
+
+/* Set Cookies column */
+
+.requests-list-set-cookies {
+  width: 8%;
+}
+
 /* Domain column */
 
 .requests-list-domain {

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

@@ -14,11 +14,13 @@ DevToolsModules(
     'properties-view.js',
     'request-list-column-cause.js',
     'request-list-column-content-size.js',
+    'request-list-column-cookies.js',
     'request-list-column-domain.js',
     'request-list-column-file.js',
     'request-list-column-method.js',
     'request-list-column-protocol.js',
     'request-list-column-remote-ip.js',
+    'request-list-column-set-cookies.js',
     'request-list-column-status.js',
     'request-list-column-transferred-size.js',
     'request-list-column-type.js',

devtools/client/netmonitor/src/components/request-list-column-cookies.js

@@ -0,0 +1,43 @@
+/* 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 {
+  createClass,
+  DOM,
+  PropTypes,
+} = require("devtools/client/shared/vendor/react");
+
+const { div } = DOM;
+
+const RequestListColumnCookies = createClass({
+  displayName: "RequestListColumnCookies",
+
+  propTypes: {
+    item: PropTypes.object.isRequired,
+  },
+
+  shouldComponentUpdate(nextProps) {
+    let { requestCookies: currRequestCookies = { cookies: [] } } = this.props.item;
+    let { requestCookies: nextRequestCookies = { cookies: [] } } = nextProps.item;
+    currRequestCookies = currRequestCookies.cookies || currRequestCookies;
+    nextRequestCookies = nextRequestCookies.cookies || nextRequestCookies;
+    return currRequestCookies !== nextRequestCookies;
+  },
+
+  render() {
+    let { requestCookies = { cookies: [] } } = this.props.item;
+    requestCookies = requestCookies.cookies || requestCookies;
+    let requestCookiesLength = requestCookies.length > 0 ? requestCookies.length : "";
+    return (
+      div({
+        className: "requests-list-column requests-list-cookies",
+        title: requestCookiesLength
+      }, requestCookiesLength)
+    );
+  }
+});
+
+module.exports = RequestListColumnCookies;

devtools/client/netmonitor/src/components/request-list-column-set-cookies.js

@@ -0,0 +1,43 @@
+/* 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 {
+  createClass,
+  DOM,
+  PropTypes,
+} = require("devtools/client/shared/vendor/react");
+
+const { div } = DOM;
+
+const RequestListColumnSetCookies = createClass({
+  displayName: "RequestListColumnSetCookies",
+
+  propTypes: {
+    item: PropTypes.object.isRequired,
+  },
+
+  shouldComponentUpdate(nextProps) {
+    let { responseCookies: currResponseCookies = { cookies: [] } } = this.props.item;
+    let { responseCookies: nextResponseCookies = { cookies: [] } } = nextProps.item;
+    currResponseCookies = currResponseCookies.cookies || currResponseCookies;
+    nextResponseCookies = nextResponseCookies.cookies || nextResponseCookies;
+    return currResponseCookies !== nextResponseCookies;
+  },
+
+  render() {
+    let { responseCookies = { cookies: [] } } = this.props.item;
+    responseCookies = responseCookies.cookies || responseCookies;
+    let responseCookiesLength = responseCookies.length > 0 ? responseCookies.length : "";
+    return (
+      div({
+        className: "requests-list-column requests-list-set-cookies",
+        title: responseCookiesLength
+      }, responseCookiesLength)
+    );
+  }
+});
+
+module.exports = RequestListColumnSetCookies;

devtools/client/netmonitor/src/components/request-list-item.js

@@ -16,11 +16,13 @@ const { propertiesEqual } = require("../utils/request-utils");
 // Components
 const RequestListColumnCause = createFactory(require("./request-list-column-cause"));
 const RequestListColumnContentSize = createFactory(require("./request-list-column-content-size"));
+const RequestListColumnCookies = createFactory(require("./request-list-column-cookies"));
 const RequestListColumnDomain = createFactory(require("./request-list-column-domain"));
 const RequestListColumnFile = createFactory(require("./request-list-column-file"));
 const RequestListColumnMethod = createFactory(require("./request-list-column-method"));
 const RequestListColumnProtocol = createFactory(require("./request-list-column-protocol"));
 const RequestListColumnRemoteIP = createFactory(require("./request-list-column-remote-ip"));
+const RequestListColumnSetCookies = createFactory(require("./request-list-column-set-cookies"));
 const RequestListColumnStatus = createFactory(require("./request-list-column-status"));
 const RequestListColumnTransferredSize = createFactory(require("./request-list-column-transferred-size"));
 const RequestListColumnType = createFactory(require("./request-list-column-type"));
@@ -137,6 +139,8 @@ const RequestListItem = createClass({
         columns.get("remoteip") && RequestListColumnRemoteIP({ item }),
         columns.get("cause") && RequestListColumnCause({ item, onCauseBadgeClick }),
         columns.get("type") && RequestListColumnType({ item }),
+        columns.get("cookies") && RequestListColumnCookies({ item }),
+        columns.get("setCookies") && RequestListColumnSetCookies({ item }),
         columns.get("transferred") && RequestListColumnTransferredSize({ item }),
         columns.get("contentSize") && RequestListColumnContentSize({ item }),
         columns.get("waterfall") &&

devtools/client/netmonitor/src/constants.js

@@ -134,6 +134,15 @@ const HEADERS = [
     name: "type",
     canFilter: false,
   },
+  {
+    name: "cookies",
+    canFilter: false,
+  },
+  {
+    name: "setCookies",
+    boxName: "set-cookies",
+    canFilter: false,
+  },
   {
     name: "transferred",
     canFilter: true,

devtools/client/netmonitor/src/reducers/ui.js

@@ -27,6 +27,8 @@ const Columns = I.Record({
   remoteip: false,
   cause: true,
   type: true,
+  cookies: false,
+  setCookies: false,
   transferred: true,
   contentSize: true,
   waterfall: true,

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

@@ -77,6 +77,26 @@ function cause(first, second) {
   return result || waterfall(first, second);
 }
 
+function setCookies(first, second) {
+  let { responseCookies: firstResponseCookies = { cookies: [] } } = first;
+  let { responseCookies: secondResponseCookies = { cookies: [] } } = second;
+  firstResponseCookies = firstResponseCookies.cookies || firstResponseCookies;
+  secondResponseCookies = secondResponseCookies.cookies || secondResponseCookies;
+  const result =
+    compareValues(firstResponseCookies.length, secondResponseCookies.length);
+  return result || waterfall(first, second);
+}
+
+function cookies(first, second) {
+  let { requestCookies: firstRequestCookies = { cookies: [] } } = first;
+  let { requestCookies: secondRequestCookies = { cookies: [] } } = second;
+  firstRequestCookies = firstRequestCookies.cookies || firstRequestCookies;
+  secondRequestCookies = secondRequestCookies.cookies || secondRequestCookies;
+  const result =
+    compareValues(firstRequestCookies.length, secondRequestCookies.length);
+  return result || waterfall(first, second);
+}
+
 function type(first, second) {
   const firstType = getAbbreviatedMimeType(first.mimeType).toLowerCase();
   const secondType = getAbbreviatedMimeType(second.mimeType).toLowerCase();
@@ -99,6 +119,8 @@ exports.Sorters = {
   method,
   file,
   protocol,
+  cookies,
+  setCookies,
   domain,
   remoteip,
   cause,

devtools/client/preferences/devtools.js

@@ -150,7 +150,7 @@ pref("devtools.netmonitor.enabled", true);
 pref("devtools.netmonitor.panes-network-details-width", 550);
 pref("devtools.netmonitor.panes-network-details-height", 450);
 pref("devtools.netmonitor.filters", "[\"all\"]");
-pref("devtools.netmonitor.hiddenColumns", "[\"remoteip\",\"protocol\"]");
+pref("devtools.netmonitor.hiddenColumns", "[\"cookies\",\"protocol\",\"remoteip\",\"setCookies\"]");
 
 // The default Network monitor HAR export setting
 pref("devtools.netmonitor.har.defaultLogDir", "");