Bug 1345489 - Introduce a new column for protocol version. r=Honza
authorVangelis Katsikaros <vkatsikaros@gmail.com>
Mon, 10 Apr 2017 22:09:57 +0300
changeset 353054 1e267643be305b0e1fd872a2fff7ac6ec84ef5c1
parent 353053 17180b888f7c88363ec52e1d68727ab43f6b884c
child 353055 7fda04f46791e733f3ebcd0a511199007fc27e2f
push id31656
push userihsiao@mozilla.com
push dateFri, 14 Apr 2017 09:10:41 +0000
treeherdermozilla-central@cda24082bff8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1345489
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
@@ -359,16 +359,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);