Bug 1354054 - [devtools] Network panel could display request priority r=Honza

Differential Revision: https://phabricator.services.mozilla.com/D144524

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

@@ -580,6 +580,10 @@ netmonitor.toolbar.status3=Status
 # in the network table toolbar, above the "method" column.
 netmonitor.toolbar.method=Method
 
+# LOCALIZATION NOTE (netmonitor.toolbar.priority): This is the label displayed
+# in the network table toolbar, above the "priority" column.
+netmonitor.toolbar.priority=Priority
+
 # LOCALIZATION NOTE (netmonitor.toolbar.file): This is the label displayed
 # in the network table toolbar, above the "file" column.
 netmonitor.toolbar.file=File
@@ -1082,6 +1086,10 @@ netmonitor.headers.referrerPolicy=Referrer Policy
 # in the network details headers tab identifying the content blocking mode.
 netmonitor.headers.contentBlocking=Blocking
 
+# LOCALIZATION NOTE (netmonitor.headers.requestPriority): This is the label displayed
+# in the network details headers tab identifying the request priority.
+netmonitor.headers.requestPriority=Request Priority
+
 # LOCALIZATION NOTE (netmonitor.summary.editAndResend): This is the label displayed
 # on the button in the headers tab that opens a form to edit and resend the currently
 # displayed request

devtools/client/netmonitor/src/components/request-details/HeadersPanel.js

@@ -18,6 +18,7 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const {
   getFormattedIPAndPort,
   getFormattedSize,
+  getRequestPriorityAsText,
 } = require("devtools/client/netmonitor/src/utils/format-utils");
 const { L10N } = require("devtools/client/netmonitor/src/utils/l10n");
 const {
@@ -105,6 +106,7 @@ const HEADERS_CONTENT_BLOCKING = L10N.getStr(
 const HEADERS_ETP = L10N.getStr(
   "netmonitor.trackingResource.enhancedTrackingProtection"
 );
+const HEADERS_PRIORITY = L10N.getStr("netmonitor.headers.requestPriority");
 
 /**
  * Headers panel component
@@ -541,6 +543,7 @@ class HeadersPanel extends Component {
         statusText,
         urlDetails,
         referrerPolicy,
+        priority,
         isThirdPartyTrackingResource,
         contentSize,
         transferredSize,
@@ -739,11 +742,16 @@ class HeadersPanel extends Component {
       ? this.renderSummary(HEADERS_REFERRER, referrerPolicy)
       : null;
 
+    const summaryPriority = priority
+      ? this.renderSummary(HEADERS_PRIORITY, getRequestPriorityAsText(priority))
+      : null;
+
     const summaryItems = [
       summaryStatus,
       summaryVersion,
       summarySize,
       summaryReferrerPolicy,
+      summaryPriority,
       trackingProtectionStatus,
       trackingProtectionDetails,
     ].filter(summaryItem => summaryItem !== null);

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

@@ -0,0 +1,34 @@
+/* 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 { Component } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const {
+  getRequestPriorityAsText,
+} = require("devtools/client/netmonitor/src/utils/format-utils");
+
+class RequestListColumnPriority extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.method !== nextProps.item.method;
+  }
+
+  render() {
+    const { priority } = this.props.item;
+    return dom.td(
+      { className: "requests-list-column" },
+      getRequestPriorityAsText(priority)
+    );
+  }
+}
+
+module.exports = RequestListColumnPriority;

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

@@ -37,7 +37,8 @@ const {
   RequestListColumnTransferredSize,
   RequestListColumnType,
   RequestListColumnUrl,
-  RequestListColumnWaterfall
+  RequestListColumnWaterfall,
+  RequestListColumnPriority
 */
 loader.lazyGetter(this, "RequestListColumnInitiator", function() {
   return createFactory(
@@ -124,6 +125,11 @@ loader.lazyGetter(this, "RequestListColumnWaterfall", function() {
     require("devtools/client/netmonitor/src/components/request-list/RequestListColumnWaterfall")
   );
 });
+loader.lazyGetter(this, "RequestListColumnPriority", function() {
+  return createFactory(
+    require("devtools/client/netmonitor/src/components/request-list/RequestListColumnPriority")
+  );
+});
 
 /**
  * Used by shouldComponentUpdate: compare two items, and compare only properties
@@ -154,6 +160,7 @@ const UPDATED_REQ_ITEM_PROPS = [
   "responseHeaders",
   "waitingTime",
   "isEventStream",
+  "priority",
 ];
 
 const UPDATED_REQ_PROPS = [
@@ -210,6 +217,7 @@ const COLUMN_COMPONENTS = [
   },
   { column: "transferred", ColumnComponent: RequestListColumnTransferredSize },
   { column: "contentSize", ColumnComponent: RequestListColumnContentSize },
+  { column: "priority", ColumnComponent: RequestListColumnPriority },
   {
     column: "startTime",
     ColumnComponent: RequestListColumnTime,

devtools/client/netmonitor/src/components/request-list/moz.build

@@ -10,6 +10,7 @@ DevToolsModules(
     "RequestListColumnFile.js",
     "RequestListColumnInitiator.js",
     "RequestListColumnMethod.js",
+    "RequestListColumnPriority.js",
     "RequestListColumnProtocol.js",
     "RequestListColumnRemoteIP.js",
     "RequestListColumnResponseHeader.js",

devtools/client/netmonitor/src/constants.js

@@ -227,6 +227,7 @@ const UPDATE_PROPS = [
   "stacktrace",
   "isThirdPartyTrackingResource",
   "referrerPolicy",
+  "priority",
   "blockedReason",
   "blockingExtension",
   "channelId",
@@ -327,6 +328,11 @@ const HEADERS = [
     filterKey: "size",
     canFilter: true,
   },
+  {
+    name: "priority",
+    boxName: "priority",
+    canFilter: true,
+  },
   {
     name: "startTime",
     boxName: "start-time",

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

@@ -43,6 +43,7 @@ const cols = {
   setCookies: false,
   transferred: true,
   contentSize: true,
+  priority: false,
   startTime: false,
   endTime: false,
   responseTime: false,

devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js

@@ -9,6 +9,10 @@ const {
   SUPPORTED_HTTP_CODES,
 } = require("devtools/client/netmonitor/src/constants");
 
+const {
+  getRequestPriorityAsText,
+} = require("devtools/client/netmonitor/src/utils/format-utils");
+
 /**
  * Generates a value for the given filter
  * ie. if flag = status-code, will generate "200" from the given request item.
@@ -50,6 +54,9 @@ function getAutocompleteValuesForFlag(flag, request) {
     case "set-cookie-value":
       values = responseCookies.map(c => c.value);
       break;
+    case "priority":
+      values.push(getRequestPriorityAsText(request.priority));
+      break;
     case "set-cookie-domain":
       values = responseCookies.map(c =>
         c.hasOwnProperty("domain") ? c.domain : request.urlDetails.host

devtools/client/netmonitor/src/utils/filter-text-utils.js

@@ -36,6 +36,7 @@ const {
 } = require("devtools/client/netmonitor/src/constants");
 const {
   getFormattedIPAndPort,
+  getRequestPriorityAsText,
 } = require("devtools/client/netmonitor/src/utils/format-utils");
 const { getUnicodeUrl } = require("devtools/client/shared/unicode-url");
 const {
@@ -218,6 +219,8 @@ function isFlagFilterMatch(item, { type, value, negative }) {
         return false;
       }
     },
+    priority: () =>
+      getRequestPriorityAsText(item.priority).toLowerCase() == value,
     "set-cookie-domain": () => {
       if (responseCookies.length > 0) {
         const { host } = item.urlDetails;

devtools/client/netmonitor/src/utils/format-utils.js

@@ -20,6 +20,11 @@ const MAX_SECOND = 60 * MAX_MILLISECOND;
 
 const REQUEST_DECIMALS = 2;
 
+// Constants for formatting the priority, derived from nsISupportsPriority.idl
+const PRIORITY_HIGH = -10;
+const PRIORITY_NORMAL = 0;
+const PRIORITY_LOW = 10;
+
 function getSizeWithDecimals(size, decimals = REQUEST_DECIMALS) {
   return L10N.numberWithDecimals(size, decimals);
 }
@@ -97,10 +102,31 @@ function getFormattedIPAndPort(ip, port) {
   return ip.match(/:+/) ? `[${ip}]:${port}` : `${ip}:${port}`;
 }
 
+/**
+ * Formats the priority of a request
+ * Based on unix conventions
+ * See xpcom/threads/nsISupportsPriority.idl
+ *
+ * @param {Number} priority - request priority
+ */
+function getRequestPriorityAsText(priority) {
+  if (priority < PRIORITY_HIGH) {
+    return "Highest";
+  } else if (priority >= PRIORITY_HIGH && priority < PRIORITY_NORMAL) {
+    return "High";
+  } else if (priority === PRIORITY_NORMAL) {
+    return "Normal";
+  } else if (priority > PRIORITY_NORMAL && priority <= PRIORITY_LOW) {
+    return "Low";
+  }
+  return "Lowest";
+}
+
 module.exports = {
   getFormattedIPAndPort,
   getFormattedSize,
   getFormattedTime,
   getSizeWithDecimals,
   getTimeWithDecimals,
+  getRequestPriorityAsText,
 };

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

@@ -44,6 +44,11 @@ function waterfall(first, second) {
   return result || compareValues(first.id, second.id);
 }
 
+function priority(first, second) {
+  const result = compareValues(first.priority, second.priority);
+  return result || waterfall(first, second);
+}
+
 function status(first, second) {
   const result = compareValues(getStatusValue(first), getStatusValue(second));
   return result || waterfall(first, second);
@@ -309,5 +314,6 @@ const sorters = {
   latency,
   waterfall,
   url,
+  priority,
 };
 exports.Sorters = Object.assign(sorters, responseHeaders);

devtools/client/netmonitor/test/browser.ini

@@ -178,6 +178,7 @@ skip-if = true # Bug 1479782
 skip-if = verify # Bug 1607678
 [browser_net_footer-summary.js]
 [browser_net_header-ref-policy.js]
+[browser_net_header-request-priority.js]
 [browser_net_decode-url.js]
 [browser_net_details_copy.js]
 [browser_net_decode-params.js]

devtools/client/netmonitor/test/browser_net_details_copy.js

@@ -106,6 +106,7 @@ add_task(async function() {
       Status: "200OK",
       Version: "HTTP/1.1",
       Transferred: "650 B (465 B size)",
+      "Request Priority": "Highest",
     },
     null,
     "\t"

devtools/client/netmonitor/test/browser_net_filter-autocomplete.js

@@ -136,7 +136,7 @@ add_task(async function() {
 
   // Space separated tokens
   // The last token where autocomplete is available shall generate the popup
-  EventUtils.sendString(" p");
+  EventUtils.sendString(" pro");
   testAutocompleteContents(["protocol:"], document);
 
   // The new value of the text box should be previousTokens + latest value selected
@@ -180,6 +180,7 @@ add_task(async function() {
       "-larger-than:",
       "-method:",
       "-mime-type:",
+      "-priority:",
       "-protocol:",
       "-regexp:",
       "-remote-ip:",

devtools/client/netmonitor/test/browser_net_header-request-priority.js

@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if "Request Priority" is displayed in the header panel.
+ */
+add_task(async function() {
+  const { monitor } = await initNetMonitor(POST_RAW_URL, {
+    requestCount: 1,
+  });
+
+  const { document } = monitor.panelWin;
+
+  const waitReq = waitForNetworkEvents(monitor, 1);
+  EventUtils.sendMouseEvent(
+    { type: "click" },
+    document.querySelector(".requests-list-reload-notice-button")
+  );
+  await waitReq;
+
+  // Wait until the tab panel summary is displayed
+  const wait = waitUntil(
+    () => document.querySelectorAll(".tabpanel-summary-label")[0]
+  );
+  EventUtils.sendMouseEvent(
+    { type: "mousedown" },
+    document.querySelectorAll(".request-list-item")[0]
+  );
+  await wait;
+
+  const requestPriorityHeaderExists = Array.from(
+    document.querySelectorAll(".tabpanel-summary-label")
+  ).some(header => header.textContent === "Request Priority");
+  is(
+    requestPriorityHeaderExists,
+    true,
+    '"Request Priority" header is displayed in the header panel.'
+  );
+
+  return teardown(monitor);
+});

devtools/server/actors/network-monitor/network-event-actor.js

@@ -86,6 +86,7 @@ const NetworkEventActor = protocol.ActorClassWithSpec(networkEventSpec, {
     this._isThirdPartyTrackingResource =
       networkEvent.isThirdPartyTrackingResource;
     this._referrerPolicy = networkEvent.referrerPolicy;
+    this._priority = networkEvent.priority;
     this._channelId = networkEvent.channelId;
     this._browsingContextID = networkEvent.browsingContextID;
     this.innerWindowId = networkEvent.innerWindowId;
@@ -139,6 +140,7 @@ const NetworkEventActor = protocol.ActorClassWithSpec(networkEventSpec, {
       private: this._private,
       isThirdPartyTrackingResource: this._isThirdPartyTrackingResource,
       referrerPolicy: this._referrerPolicy,
+      priority: this._priority,
       blockedReason: this._blockedReason,
       blockingExtension: this._blockingExtension,
       // For websocket requests the serial is used instead of the channel id.

devtools/server/actors/network-monitor/network-event.js

@@ -69,6 +69,7 @@ const NetworkEventActor = protocol.ActorClassWithSpec(networkEventSpec, {
       private: this._private,
       isThirdPartyTrackingResource: this._isThirdPartyTrackingResource,
       referrerPolicy: this._referrerPolicy,
+      priority: this._priority,
       blockedReason: this._blockedReason,
       blockingExtension: this._blockingExtension,
       channelId: this._channelId,
@@ -113,6 +114,7 @@ const NetworkEventActor = protocol.ActorClassWithSpec(networkEventSpec, {
     this._isThirdPartyTrackingResource =
       networkEvent.isThirdPartyTrackingResource;
     this._referrerPolicy = networkEvent.referrerPolicy;
+    this._priority = networkEvent.priority;
     this._channelId = networkEvent.channelId;
 
     // Stack trace info isn't sent automatically. The client

devtools/server/actors/network-monitor/utils/network-utils.js

@@ -186,6 +186,10 @@ exports.createNetworkEvent = function(
     ? referrerInfo.getReferrerPolicyString()
     : "";
 
+  if (channel instanceof Ci.nsISupportsPriority) {
+    event.priority = channel.priority;
+  }
+
   // Determine the cause and if this is an XHR request.
   let causeType = Ci.nsIContentPolicy.TYPE_OTHER;
   let causeUri = null;