Bug 1629875 - Style blocked network messages in console. r=nchevobbe

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

devtools/client/jar.mn

@@ -149,6 +149,7 @@ devtools.jar:
     skin/images/open-inspector.svg (themes/images/open-inspector.svg)
     skin/images/more.svg (themes/images/more.svg)
     skin/images/pause.svg (themes/images/pause.svg)
+    skin/images/blocked.svg (themes/images/blocked.svg)
     skin/images/pencil-icon.svg (themes/images/pencil-icon.svg)
     skin/images/play.svg (themes/images/play.svg)
     skin/images/rewind.svg (themes/images/rewind.svg)
@@ -236,7 +237,6 @@ devtools.jar:
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
     content/netmonitor/src/assets/icons/arrow-up.svg (netmonitor/src/assets/icons/arrow-up.svg)
     content/netmonitor/src/assets/icons/shield.svg (netmonitor/src/assets/icons/shield.svg)
-    content/netmonitor/src/assets/icons/blocked.svg (netmonitor/src/assets/icons/blocked.svg)
     content/netmonitor/index.html (netmonitor/index.html)
     content/netmonitor/src/assets/styles/StatusCode.css (netmonitor/src/assets/styles/StatusCode.css)
     content/netmonitor/src/assets/styles/messages.css (netmonitor/src/assets/styles/messages.css)

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

@@ -138,6 +138,10 @@ level.debug=Debug
 # Tooltip shown for logpoints sent from the debugger
 logpoint.title=Logpoints from the debugger
 
+# LOCALIZATION NOTE (blockedReason.title)
+# Tooltip shown for blocked network events sent from the network panel
+blockedrequest.label=Blocked by DevTools
+
 # LOCALIZATION NOTE (webconsole.find.key)
 # Key shortcut used to focus the search box on upper right of the console
 webconsole.find.key=CmdOrCtrl+F

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

@@ -54,7 +54,7 @@
 .status-code-blocked-icon {
   height: 12px;
   width: 12px;
-  background-image: url("chrome://devtools/content/netmonitor/src/assets/icons/blocked.svg");
+  background-image: url("chrome://devtools/skin/images/blocked.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }

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

@@ -40,7 +40,7 @@
 
 /* Request blocking button */
 .devtools-button.requests-list-blocking-button::before {
-  background-image: url("chrome://devtools/content/netmonitor/src/assets/icons/blocked.svg");
+  background-image: url("chrome://devtools/skin/images/blocked.svg");
 }
 
 .devtools-button.netmonitor-settings-menu-button::before {

devtools/client/themes/webconsole.css

@@ -269,6 +269,11 @@
   color: var(--theme-graphs-purple);
 }
 
+.message.network-message-blocked > .icon {
+  color: var(--theme-icon-error-color);
+  background-image: url(chrome://devtools/skin/images/blocked.svg);
+}
+
 .message > .message-body-wrapper {
   flex: auto;
   min-width: 0px;
@@ -706,6 +711,12 @@ a.learn-more-link.webconsole-learn-more-link {
 
 /* Network Messages */
 
+.webconsole-app .message.network.network-message-blocked .method,
+.webconsole-app .message.network.network-message-blocked .message-flex-body .message-body .url,
+.webconsole-app .message.network.network-message-blocked .status {
+  color: var(--timing-blocked-color);
+}
+
 .webconsole-app .message.network .method {
   margin-inline-end: 1ch;
 }
@@ -885,7 +896,7 @@ a.learn-more-link.webconsole-learn-more-link {
 }
 
 /* Hide the icon, so that we can use the collapse-button in its place */
-.message.network > .icon,
+.message.network:not(.network-message-blocked) > .icon,
 .message.startGroup > .icon,
 .message.startGroupCollapsed > .icon {
   display: none;

devtools/client/webconsole/components/Output/Message.js

@@ -58,6 +58,7 @@ class Message extends Component {
       level: PropTypes.string.isRequired,
       indent: PropTypes.number.isRequired,
       inWarningGroup: PropTypes.bool,
+      isBlockedNetworkMessage: PropTypes.bool,
       topLevelClasses: PropTypes.array.isRequired,
       messageBody: PropTypes.any.isRequired,
       repeat: PropTypes.any,
@@ -172,12 +173,16 @@ class Message extends Component {
   }
 
   renderIcon() {
-    const { level, inWarningGroup, type } = this.props;
+    const { level, inWarningGroup, isBlockedNetworkMessage, type } = this.props;
 
     if (inWarningGroup) {
       return undefined;
     }
 
+    if (isBlockedNetworkMessage) {
+      return MessageIcon({ type: "blockedReason" });
+    }
+
     return MessageIcon({
       level,
       type,

devtools/client/webconsole/components/Output/MessageIcon.js

@@ -35,6 +35,10 @@ function getIconElement(level, type) {
     classnames.push("logpoint");
   }
 
+  if (type && type === "blockedReason") {
+    title = l10n.getStr("blockedrequest.label");
+  }
+
   {
     return dom.span({
       className: classnames.join(" "),

devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js

@@ -28,6 +28,13 @@ loader.lazyRequireGetter(
 const {
   getHTTPStatusCodeURL,
 } = require("devtools/client/netmonitor/src/utils/mdn-utils");
+loader.lazyRequireGetter(
+  this,
+  "BLOCKED_REASON_MESSAGES",
+  "devtools/client/netmonitor/src/constants",
+  true
+);
+
 const LEARN_MORE = l10n.getStr("webConsoleMoreInfoLabel");
 
 const Services = require("Services");
@@ -76,6 +83,7 @@ function NetworkEventMessage({
     request,
     isXHR,
     timeStamp,
+    blockedReason,
   } = message;
 
   const { response = {}, totalTime } = networkMessageUpdate;
@@ -120,6 +128,14 @@ function NetworkEventMessage({
     );
   }
 
+  if (blockedReason) {
+    statusInfo = dom.span(
+      { className: "status-info" },
+      BLOCKED_REASON_MESSAGES[blockedReason]
+    );
+    topLevelClasses.push("network-message-blocked");
+  }
+
   const onToggle = (messageId, e) => {
     const shouldOpenLink = (isMacOS && e.metaKey) || (!isMacOS && e.ctrlKey);
     if (shouldOpenLink) {
@@ -212,6 +228,7 @@ function NetworkEventMessage({
     serviceContainer,
     request,
     timestampsVisible,
+    isBlockedNetworkMessage: !!blockedReason,
     message,
   });
 }

devtools/client/webconsole/types.js

@@ -85,6 +85,7 @@ exports.NetworkEventMessage = function(props) {
       securityInfo: null,
       requestHeadersFromUploadStream: null,
       private: false,
+      blockedReason: null,
     },
     props
   );

devtools/client/webconsole/utils/messages.js

@@ -367,6 +367,7 @@ function transformNetworkEventResource(networkEventResource) {
     private: networkEventResource.private,
     securityState: networkEventResource.securityState,
     chromeContext: networkEventResource.chromeContext,
+    blockedReason: networkEventResource.blockedReason,
   });
 }