Bug 1345489 - Introduce a new column for protocol version. r?Honza
MozReview-Commit-ID: IKfGHiaacv8
--- 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);