Bug 1151368 - Display blocked requests in Network Monitor. r=ochameau,Honza

This updates the request list to indicate a request was blocked by marking the
entire request item and also replaces transferred size column with "blocked by
DevTools". In the future, we may show other reasons for blocking in this way,
such as CORS, etc.

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

--HG--
extra : moz-landing-system : lando

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

@@ -230,6 +230,11 @@ networkMenu.sizeCached=cached
 # by a service worker.
 networkMenu.sizeServiceWorker=service worker
 
+# LOCALIZATION NOTE (networkMenu.sizeServiceWorker): This is the label displayed
+# in the network menu specifying the request was blocked by something.
+# %S is replaced by the blocked reason, which could be "DevTools", "CORS", etc.
+networkMenu.blockedBy=blocked by %S
+
 # LOCALIZATION NOTE (networkMenu.totalMS2): This is the label displayed
 # in the network menu specifying the time for a request to finish (in milliseconds).
 networkMenu.totalMS2=%S ms

devtools/client/netmonitor/src/assets/styles/RequestList.css

@@ -490,6 +490,10 @@
   opacity: 0.7;
 }
 
+.request-list-item.blocked {
+  color: var(--timing-blocked-color);
+}
+
 /* Responsive web design support */
 
 @media (max-width: 700px) {

devtools/client/netmonitor/src/components/RequestListColumnTransferredSize.js

@@ -33,10 +33,18 @@ class RequestListColumnTransferredSize extends Component {
   }
 
   render() {
-    const { fromCache, fromServiceWorker, status, transferredSize } = this.props.item;
+    const {
+      blockedReason,
+      fromCache,
+      fromServiceWorker,
+      status,
+      transferredSize,
+    } = this.props.item;
     let text;
 
-    if (fromCache || status === "304") {
+    if (blockedReason) {
+      text = L10N.getFormatStr("networkMenu.blockedBy", blockedReason);
+    } else if (fromCache || status === "304") {
       text = SIZE_CACHED;
     } else if (fromServiceWorker) {
       text = SIZE_SERVICE_WORKER;

devtools/client/netmonitor/src/components/RequestListContent.js

@@ -325,6 +325,7 @@ class RequestListContent extends Component {
             style: { "--timings-scale": scale, "--timings-rev-scale": 1 / scale },
           },
             displayedRequests.map((item, index) => RequestListItem({
+              blocked: !!item.blockedReason,
               firstRequestStartedMillis,
               fromCache: item.status === "304" || item.fromCache,
               connector,

devtools/client/netmonitor/src/components/RequestListItem.js

@@ -124,6 +124,7 @@ const UPDATED_REQ_PROPS = [
 class RequestListItem extends Component {
   static get propTypes() {
     return {
+      blocked: PropTypes.bool,
       connector: PropTypes.object.isRequired,
       columns: PropTypes.object.isRequired,
       item: PropTypes.object.isRequired,
@@ -186,6 +187,7 @@ class RequestListItem extends Component {
 
   render() {
     const {
+      blocked,
       connector,
       columns,
       item,
@@ -204,6 +206,7 @@ class RequestListItem extends Component {
     const classList = ["request-list-item", index % 2 ? "odd" : "even"];
     isSelected && classList.push("selected");
     fromCache && classList.push("fromCache");
+    blocked && classList.push("blocked");
 
     return (
       dom.tr({

devtools/client/netmonitor/src/connector/firefox-data-provider.js

@@ -73,8 +73,15 @@ class FirefoxDataProvider {
       fromServiceWorker,
       isThirdPartyTrackingResource,
       referrerPolicy,
+      blockedReason,
     } = data;
 
+    // Insert blocked reason in the payload queue as well, as we'll need it later
+    // when deciding if the request is complete.
+    this.pushRequestToQueue(id, {
+      blockedReason,
+    });
+
     if (this.actionsEnabled && this.actions.addRequest) {
       await this.actions.addRequest(id, {
         // Convert the received date/time string to a unix timestamp.
@@ -93,6 +100,7 @@ class FirefoxDataProvider {
         fromServiceWorker,
         isThirdPartyTrackingResource,
         referrerPolicy,
+        blockedReason,
       }, true);
     }
 
@@ -329,6 +337,7 @@ class FirefoxDataProvider {
       startedDateTime,
       isThirdPartyTrackingResource,
       referrerPolicy,
+      blockedReason,
     } = networkInfo;
 
     await this.addRequest(actor, {
@@ -341,6 +350,7 @@ class FirefoxDataProvider {
       url,
       isThirdPartyTrackingResource,
       referrerPolicy,
+      blockedReason,
     });
 
     this.emit(EVENTS.NETWORK_EVENT, actor);
@@ -411,8 +421,16 @@ class FirefoxDataProvider {
   async onPayloadDataReceived(actor) {
     const payload = this.payloadQueue.get(actor) || {};
 
-    if (!payload.requestHeadersAvailable || !payload.requestCookiesAvailable ||
-        !payload.eventTimingsAvailable || !payload.responseContentAvailable) {
+    // For blocked requests, we should only expect the request portions and not
+    // the response portions to be available.
+    if (!payload.requestHeadersAvailable || !payload.requestCookiesAvailable) {
+      return;
+    }
+    // For unblocked requests, we should wait for all major portions to be available.
+    if (
+      !payload.blockedReason &&
+      (!payload.eventTimingsAvailable || !payload.responseContentAvailable)
+    ) {
       return;
     }
 

devtools/client/netmonitor/src/constants.js

@@ -149,6 +149,7 @@ const UPDATE_PROPS = [
   "stacktrace",
   "isThirdPartyTrackingResource",
   "referrerPolicy",
+  "blockedReason",
 ];
 
 const PANELS = {

devtools/server/actors/network-event.js

@@ -67,6 +67,7 @@ const NetworkEventActor = protocol.ActorClassWithSpec(networkEventSpec, {
       private: this._private,
       isThirdPartyTrackingResource: this._isThirdPartyTrackingResource,
       referrerPolicy: this._referrerPolicy,
+      blockedReason: this._blockedReason,
     };
   },
 
@@ -127,6 +128,8 @@ const NetworkEventActor = protocol.ActorClassWithSpec(networkEventSpec, {
     this._discardRequestBody = !!networkEvent.discardRequestBody;
     this._discardResponseBody = !!networkEvent.discardResponseBody;
 
+    this._blockedReason = networkEvent.blockedReason;
+
     this._truncated = false;
     this._private = networkEvent.private;
   },

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

@@ -558,9 +558,18 @@ NetworkObserver.prototype = {
       cookies = NetworkHelper.parseCookieHeader(cookieHeader);
     }
 
+    // Check the request URL with ones manually blocked by the user in DevTools.
+    // If it's meant to be blocked, we cancel the request and annotate the event.
+    if (this.blockedURLs.has(httpActivity.url)) {
+      channel.cancel(Cr.NS_BINDING_ABORTED);
+      event.blockedReason = "DevTools";
+    }
+
     httpActivity.owner = this.owner.onNetworkEvent(event);
 
-    this._setupResponseListener(httpActivity, fromCache);
+    if (!event.blockedReason) {
+      this._setupResponseListener(httpActivity, fromCache);
+    }
 
     httpActivity.owner.addRequestHeaders(headers, extraStringData);
     httpActivity.owner.addRequestCookies(cookies);
@@ -673,11 +682,6 @@ NetworkObserver.prototype = {
     const channel = httpActivity.channel;
     channel.QueryInterface(Ci.nsITraceableChannel);
 
-    if (this.blockedURLs.has(httpActivity.url)) {
-      channel.cancel(Cr.NS_BINDING_ABORTED);
-      return;
-    }
-
     if (!fromCache) {
       const throttler = this._getThrottler();
       if (throttler) {

devtools/shared/fronts/webconsole.js

@@ -96,6 +96,7 @@ class WebConsoleFront extends FrontClassWithSpec(webconsoleSpec) {
       fromServiceWorker: actor.fromServiceWorker,
       isThirdPartyTrackingResource: actor.isThirdPartyTrackingResource,
       referrerPolicy: actor.referrerPolicy,
+      blockedReason: actor.blockedReason,
     };
     this._networkRequests.set(actor.actor, networkInfo);