Bug 1629875 - Style blocked network messages in console. r=nchevobbe
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Wed, 10 Jun 2020 08:31:42 +0000
changeset 534843 45bd893da14fd0d14fdab88867a07e47335d4e5f
parent 534842 a7cf4676f6d164ea37c94d711248cbe2a6609199
child 534844 08d6c0a0f381c844a4ef488a6fe48d14a40f4024
push id118572
push usernchevobbe@mozilla.com
push dateWed, 10 Jun 2020 08:32:50 +0000
treeherderautoland@45bd893da14f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1629875
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1629875 - Style blocked network messages in console. r=nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D71912
devtools/client/jar.mn
devtools/client/locales/en-US/webconsole.properties
devtools/client/netmonitor/src/assets/icons/blocked.svg
devtools/client/netmonitor/src/assets/styles/StatusCode.css
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/themes/images/blocked.svg
devtools/client/themes/webconsole.css
devtools/client/webconsole/components/Output/Message.js
devtools/client/webconsole/components/Output/MessageIcon.js
devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js
devtools/client/webconsole/types.js
devtools/client/webconsole/utils/messages.js
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -144,16 +144,17 @@ devtools.jar:
     skin/images/item-arrow-ltr.svg (themes/images/item-arrow-ltr.svg)
     skin/images/dropmarker.svg (themes/images/dropmarker.svg)
     skin/boxmodel.css (themes/boxmodel.css)
     skin/images/eye.svg (themes/images/eye.svg)
     skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
     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)
     skin/images/dock-bottom.svg (themes/images/dock-bottom.svg)
     skin/images/dock-side-left.svg (themes/images/dock-side-left.svg)
     skin/images/dock-side-right.svg (themes/images/dock-side-right.svg)
     skin/images/dock-undock.svg (themes/images/dock-undock.svg)
     skin/floating-scrollbars-responsive-design.css (themes/floating-scrollbars-responsive-design.css)
@@ -231,17 +232,16 @@ devtools.jar:
     content/netmonitor/src/assets/styles/RequestList.css (netmonitor/src/assets/styles/RequestList.css)
     content/netmonitor/src/assets/styles/StatisticsPanel.css (netmonitor/src/assets/styles/StatisticsPanel.css)
     content/netmonitor/src/assets/styles/StatusBar.css (netmonitor/src/assets/styles/StatusBar.css)
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     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)
     content/netmonitor/src/assets/styles/search.css (netmonitor/src/assets/styles/search.css)
     content/netmonitor/src/assets/styles/UrlPreview.css (netmonitor/src/assets/styles/UrlPreview.css)
     content/netmonitor/src/assets/styles/HeadersPanel.css (netmonitor/src/assets/styles/HeadersPanel.css)
 
     # Application panel
--- a/devtools/client/locales/en-US/webconsole.properties
+++ b/devtools/client/locales/en-US/webconsole.properties
@@ -133,16 +133,20 @@ level.warn=Warning
 level.info=Info
 level.log=Log
 level.debug=Debug
 
 # LOCALIZATION NOTE (logpoint.title)
 # 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
 
 # LOCALIZATION NOTE (webconsole.close.key)
 # Key shortcut used to close the Browser console (doesn't work in regular web console)
 webconsole.close.key=CmdOrCtrl+W
 
--- a/devtools/client/netmonitor/src/assets/styles/StatusCode.css
+++ b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
@@ -49,17 +49,17 @@
 
 .status-code-blocked {
   color: var(--theme-icon-error-color);
 }
 
 .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;
 }
 
 
 /* Status codes for the headers side panel */
 
 .headers-overview .summary .status .status-code {
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -35,17 +35,17 @@
 /* Search button */
 .devtools-button.devtools-search-icon::before {
   background-image: url("chrome://devtools/skin/images/search.svg");
   background-size: 13px;
 }
 
 /* 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 {
   background-image: url("chrome://devtools/skin/images/settings.svg");
 }
 
 .devtools-button.requests-list-blocking-button:empty::before {
   fill: var(--theme-body-color);
rename from devtools/client/netmonitor/src/assets/icons/blocked.svg
rename to devtools/client/themes/images/blocked.svg
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -264,16 +264,21 @@
   background-image: url(chrome://devtools/skin/images/webconsole/navigation.svg);
 }
 
 .message > .icon.logpoint {
   background-image: url(resource://devtools/client/debugger/images/webconsole-logpoint.svg);
   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;
   margin: var(--console-output-vertical-padding) 0;
 }
 
 .message-body-wrapper .table-widget-body {
   overflow: visible;
@@ -701,16 +706,22 @@ a.learn-more-link.webconsole-learn-more-
 
 /* Prefix text that can be set by ConsoleAPI option */
 .webconsole-app .console-message-prefix {
   color: var(--theme-comment);
 }
 
 /* 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;
 }
 
 .webconsole-app .message.network .xhr {
   background-color: var(--theme-comment);
   color: white;
   border-radius: 2px;
@@ -880,17 +891,17 @@ a.learn-more-link.webconsole-learn-more-
   transform: rotate(0);
 }
 
 .collapse-button::-moz-focus-inner {
   border: none;
 }
 
 /* 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;
 }
 
 /* Center the collapse button in the left gutter (first-level only) */
 .message.network > .collapse-button,
 .message.startGroup > .indent[data-indent="0"] ~ .collapse-button,
--- a/devtools/client/webconsole/components/Output/Message.js
+++ b/devtools/client/webconsole/components/Output/Message.js
@@ -53,16 +53,17 @@ class Message extends Component {
       collapsible: PropTypes.bool,
       collapseTitle: PropTypes.string,
       onToggle: PropTypes.func,
       source: PropTypes.string.isRequired,
       type: PropTypes.string.isRequired,
       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,
       frame: PropTypes.any,
       attachment: PropTypes.any,
       stacktrace: PropTypes.any,
       messageId: PropTypes.string,
       scrollToMessage: PropTypes.bool,
@@ -167,22 +168,26 @@ class Message extends Component {
       messageId,
     };
     serviceContainer.openContextMenu(e, messageInfo);
     e.stopPropagation();
     e.preventDefault();
   }
 
   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,
     });
   }
 
   renderTimestamp() {
     if (!this.props.timestampsVisible) {
--- a/devtools/client/webconsole/components/Output/MessageIcon.js
+++ b/devtools/client/webconsole/components/Output/MessageIcon.js
@@ -30,16 +30,20 @@ function getIconElement(level, type) {
   let title = l10n.getStr(l10nLevels[level] || level);
   const classnames = ["icon"];
 
   if (type && type === "logPoint") {
     title = l10n.getStr("logpoint.title");
     classnames.push("logpoint");
   }
 
+  if (type && type === "blockedReason") {
+    title = l10n.getStr("blockedrequest.label");
+  }
+
   {
     return dom.span({
       className: classnames.join(" "),
       title,
       "aria-live": "off",
     });
   }
 }
--- a/devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js
+++ b/devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js
@@ -23,16 +23,23 @@ const {
 loader.lazyRequireGetter(
   this,
   "TabboxPanel",
   "devtools/client/netmonitor/src/components/TabboxPanel"
 );
 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");
 const isMacOS = Services.appinfo.OS === "Darwin";
 
 NetworkEventMessage.displayName = "NetworkEventMessage";
 
 NetworkEventMessage.propTypes = {
@@ -71,16 +78,17 @@ function NetworkEventMessage({
     id,
     indent,
     source,
     type,
     level,
     request,
     isXHR,
     timeStamp,
+    blockedReason,
   } = message;
 
   const { response = {}, totalTime } = networkMessageUpdate;
 
   const { httpVersion, status, statusText } = response;
 
   const topLevelClasses = ["cm-s-mozilla"];
   if (isMessageNetworkError(message)) {
@@ -115,16 +123,24 @@ function NetworkEventMessage({
     statusInfo = dom.span(
       { className: "status-info" },
       `[${httpVersion} `,
       statusCode,
       ` ${statusText} ${totalTime}ms]`
     );
   }
 
+  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) {
       serviceContainer.openLink(request.url, e);
       e.stopPropagation();
     } else if (open) {
       dispatch(actions.messageClose(messageId));
     } else {
@@ -207,13 +223,14 @@ function NetworkEventMessage({
     onToggle,
     attachment,
     topLevelClasses,
     timeStamp,
     messageBody,
     serviceContainer,
     request,
     timestampsVisible,
+    isBlockedNetworkMessage: !!blockedReason,
     message,
   });
 }
 
 module.exports = NetworkEventMessage;
--- a/devtools/client/webconsole/types.js
+++ b/devtools/client/webconsole/types.js
@@ -80,12 +80,13 @@ exports.NetworkEventMessage = function(p
       totalTime: null,
       indent: 0,
       updates: null,
       openedOnce: false,
       securityState: null,
       securityInfo: null,
       requestHeadersFromUploadStream: null,
       private: false,
+      blockedReason: null,
     },
     props
   );
 };
--- a/devtools/client/webconsole/utils/messages.js
+++ b/devtools/client/webconsole/utils/messages.js
@@ -362,16 +362,17 @@ function transformNetworkEventResource(n
     url: networkEventResource.request.url,
     urlDetails: getUrlDetails(networkEventResource.request.url),
     method: networkEventResource.request.method,
     updates: networkEventResource.updates,
     cause: networkEventResource.cause,
     private: networkEventResource.private,
     securityState: networkEventResource.securityState,
     chromeContext: networkEventResource.chromeContext,
+    blockedReason: networkEventResource.blockedReason,
   });
 }
 
 function transformEvaluationResultPacket(packet) {
   let {
     exceptionMessage,
     errorMessageName,
     exceptionDocURL,