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 559889 2ed8dce476a14adf744614b8b820e1b6c3409822
parent 559608 731639fccc709a4dd95fed7e9dda88efb2227906
child 623549 fff9bbe244b3f5bd4049e78336f1a42b87928da0
push id53258
push uservkatsikaros@gmail.com
push dateMon, 10 Apr 2017 19:11:19 +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/sort-predicates.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.remoteip): 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.cause): This is the label displayed
 # in the network table toolbar, above the "cause" column.
 netmonitor.toolbar.cause=Cause
 
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -350,16 +350,20 @@ body,
 .requests-list-icon {
   outline: 1px solid var(--table-splitter-color);
 }
 
 .requests-list-security-and-domain {
   width: 14vw;
 }
 
+.requests-list-protocol {
+  width: 8vw;
+}
+
 .requests-security-state-icon {
   flex: none;
   width: 16px;
   height: 16px;
   margin-inline-end: 4px;
 }
 
 .request-list-item.selected .requests-security-state-icon {
@@ -1317,16 +1321,20 @@ body,
   .requests-list-icon-and-file {
     width: 22vw;
   }
 
   .requests-list-security-and-domain {
     width: 16vw;
   }
 
+  .requests-list-protocol {
+    width: 8vw;
+  }
+
   .requests-list-cause,
   .requests-list-type,
   .requests-list-transferred,
   .requests-list-size {
     max-width: none;
     width: 10vw;
   }
 
--- 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("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 }),
       )
     );
@@ -251,16 +252,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: "cause",
     canFilter: true,
   },
--- 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: true,
   domain: true,
   cause: true,
   type: true,
   transferred: true,
   contentSize: true,
   waterfall: true,
 });
 
--- a/devtools/client/netmonitor/src/utils/sort-predicates.js
+++ b/devtools/client/netmonitor/src/utils/sort-predicates.js
@@ -45,16 +45,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.protocol, second.protocol);
+  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 cause(first, second) {
@@ -80,15 +85,16 @@ function contentSize(first, second) {
   const result = compareValues(first.contentSize, second.contentSize);
   return result || waterfall(first, second);
 }
 
 exports.Sorters = {
   status,
   method,
   file,
+  protocol,
   domain,
   cause,
   type,
   transferred,
   contentSize,
   waterfall,
 };