Bug 1345489 - Introduce a new column for protocol version. r?Honza draft
authorVangelis Katsikaros <vkatsikaros@gmail.com>
Mon, 10 Apr 2017 22:09:57 +0300
changeset 562232 edbba4e203f43eda789c43f2b8b8b7e1fe83d4d0
parent 561911 819a666afddc804b6099ee1b3cff3a0fdf35ec15
child 624212 c49c876f21eaf93326a423c75eb2f1638c2076e8
push id53997
push uservkatsikaros@gmail.com
push dateThu, 13 Apr 2017 18:04:55 +0000
reviewersHonza
bugs1345489
milestone55.0a1
Bug 1345489 - Introduce a new column for protocol version. r?Honza MozReview-Commit-ID: IKfGHiaacv8
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/netmonitor/src/components/request-list-item.js
devtools/client/netmonitor/src/constants.js
devtools/client/netmonitor/src/reducers/ui.js
devtools/client/netmonitor/src/utils/filter-text-utils.js
devtools/client/netmonitor/src/utils/sort-predicates.js
devtools/client/preferences/devtools.js
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -402,16 +402,20 @@ netmonitor.toolbar.status3=Status
 # LOCALIZATION NOTE (netmonitor.toolbar.method): This is the label displayed
 # in the network table toolbar, above the "method" column.
 netmonitor.toolbar.method=Method
 
 # LOCALIZATION NOTE (netmonitor.toolbar.file): This is the label displayed
 # in the network table toolbar, above the "file" column.
 netmonitor.toolbar.file=File
 
+# LOCALIZATION NOTE (netmonitor.toolbar.protocol): This is the label displayed
+# in the network table toolbar, above the "protocol" column.
+netmonitor.toolbar.protocol=Protocol
+
 # LOCALIZATION NOTE (netmonitor.toolbar.domain): This is the label displayed
 # in the network table toolbar, above the "domain" column.
 netmonitor.toolbar.domain=Domain
 
 # LOCALIZATION NOTE (netmonitor.toolbar.remoteip): This is the label displayed
 # in the network table toolbar, above the "remoteip" column.
 netmonitor.toolbar.remoteip=Remote IP
 
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -356,16 +356,20 @@ body,
 .requests-list-security-and-domain {
   width: 14vw;
 }
 
 .requests-list-remoteip {
   width: 8vw;
 }
 
+.requests-list-protocol {
+  width: 7vw;
+}
+
 .requests-security-state-icon {
   flex: none;
   width: 16px;
   height: 16px;
   margin-inline-end: 4px;
 }
 
 .request-list-item.selected .requests-security-state-icon {
--- a/devtools/client/netmonitor/src/components/request-list-item.js
+++ b/devtools/client/netmonitor/src/components/request-list-item.js
@@ -129,16 +129,17 @@ const RequestListItem = createClass({
         "data-id": item.id,
         tabIndex: 0,
         onContextMenu,
         onMouseDown,
       },
         columns.get("status") && StatusColumn({ item }),
         columns.get("method") && MethodColumn({ item }),
         columns.get("file") && FileColumn({ item }),
+        columns.get("protocol") && ProtocolColumn({ item }),
         columns.get("domain") && DomainColumn({ item, onSecurityIconClick }),
         columns.get("remoteip") && RemoteIPColumn({ item }),
         columns.get("cause") && CauseColumn({ item, onCauseBadgeClick }),
         columns.get("type") && TypeColumn({ item }),
         columns.get("transferred") && TransferredSizeColumn({ item }),
         columns.get("contentSize") && ContentSizeColumn({ item }),
         columns.get("waterfall") && WaterfallColumn({ item, firstRequestStartedMillis }),
       )
@@ -252,16 +253,37 @@ const FileColumn = createFactory(createC
         },
           urlDetails.baseNameWithQuery,
         ),
       )
     );
   }
 }));
 
+const ProtocolColumn = createFactory(createClass({
+  displayName: "Protocol",
+
+  propTypes: {
+    item: PropTypes.object.isRequired,
+  },
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.httpVersion !== nextProps.item.httpVersion;
+  },
+
+  render() {
+    const { httpVersion } = this.props.item;
+    return (
+      div({ className: "requests-list-subitem requests-list-protocol" },
+        span({ className: "subitem-label", title: httpVersion }, httpVersion),
+      )
+    );
+  }
+}));
+
 const UPDATED_DOMAIN_PROPS = [
   "urlDetails",
   "remoteAddress",
   "securityState",
 ];
 
 const DomainColumn = createFactory(createClass({
   displayName: "DomainColumn",
--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@@ -122,16 +122,20 @@ const HEADERS = [
     canFilter: true,
   },
   {
     name: "file",
     boxName: "icon-and-file",
     canFilter: false,
   },
   {
+    name: "protocol",
+    canFilter: true,
+  },
+  {
     name: "domain",
     boxName: "security-and-domain",
     canFilter: true,
   },
   {
     name: "remoteip",
     canFilter: true,
     filterKey: "remote-ip",
--- a/devtools/client/netmonitor/src/reducers/ui.js
+++ b/devtools/client/netmonitor/src/reducers/ui.js
@@ -17,16 +17,17 @@ const {
   TOGGLE_COLUMN,
   WATERFALL_RESIZE,
 } = require("../constants");
 
 const Columns = I.Record({
   status: true,
   method: true,
   file: true,
+  protocol: false,
   domain: true,
   remoteip: false,
   cause: true,
   type: true,
   transferred: true,
   contentSize: true,
   waterfall: true,
 });
--- a/devtools/client/netmonitor/src/utils/filter-text-utils.js
+++ b/devtools/client/netmonitor/src/utils/filter-text-utils.js
@@ -117,16 +117,21 @@ function isFlagFilterMatch(item, { type,
   let match = true;
   switch (type) {
     case "status-code":
       match = item.status === value;
       break;
     case "method":
       match = item.method.toLowerCase() === value;
       break;
+    case "protocol":
+      let protocol = item.httpVersion;
+      match = typeof protocol === "string" ?
+                protocol.toLowerCase().includes(value) : false;
+      break;
     case "domain":
       match = item.urlDetails.host.toLowerCase().includes(value);
       break;
     case "remote-ip":
       match = `${item.remoteAddress}:${item.remotePort}`.toLowerCase().includes(value);
       break;
     case "cause":
       let causeType = item.cause.type;
--- a/devtools/client/netmonitor/src/utils/sort-predicates.js
+++ b/devtools/client/netmonitor/src/utils/sort-predicates.js
@@ -46,16 +46,21 @@ function method(first, second) {
 
 function file(first, second) {
   const firstUrl = first.urlDetails.baseNameWithQuery.toLowerCase();
   const secondUrl = second.urlDetails.baseNameWithQuery.toLowerCase();
   const result = compareValues(firstUrl, secondUrl);
   return result || waterfall(first, second);
 }
 
+function protocol(first, second) {
+  const result = compareValues(first.httpVersion, second.httpVersion);
+  return result || waterfall(first, second);
+}
+
 function domain(first, second) {
   const firstDomain = first.urlDetails.host.toLowerCase();
   const secondDomain = second.urlDetails.host.toLowerCase();
   const result = compareValues(firstDomain, secondDomain);
   return result || waterfall(first, second);
 }
 
 function remoteip(first, second) {
@@ -88,16 +93,17 @@ function contentSize(first, second) {
   const result = compareValues(first.contentSize, second.contentSize);
   return result || waterfall(first, second);
 }
 
 exports.Sorters = {
   status,
   method,
   file,
+  protocol,
   domain,
   remoteip,
   cause,
   type,
   transferred,
   contentSize,
   waterfall,
 };
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -145,17 +145,17 @@ pref("devtools.serviceWorkers.testing.en
 
 // Enable the Network Monitor
 pref("devtools.netmonitor.enabled", true);
 
 // The default Network Monitor UI settings
 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\"]");
+pref("devtools.netmonitor.hiddenColumns", "[\"remoteip\",\"protocol\"]");
 
 // The default Network monitor HAR export setting
 pref("devtools.netmonitor.har.defaultLogDir", "");
 pref("devtools.netmonitor.har.defaultFileName", "Archive %date");
 pref("devtools.netmonitor.har.jsonp", false);
 pref("devtools.netmonitor.har.jsonpCallback", "");
 pref("devtools.netmonitor.har.includeResponseBodies", true);
 pref("devtools.netmonitor.har.compress", false);