Bug 1590990 - Prevent blocked icon from being draggable in Network Monitor r=Harald,Honza
authorKriyszig <lelouch.cpp@gmail.com>
Tue, 24 Mar 2020 21:19:56 +0000
changeset 520327 64e1f15e54321ab0fd66eae40055bda59ccab4ec
parent 520326 8e62447674010cc192739c4c5f8d4fc5537274ae
child 520328 2abd352490a4bf2e3a9118b154c0e351c0bad314
push id37247
push userbtara@mozilla.com
push dateWed, 25 Mar 2020 09:34:57 +0000
treeherdermozilla-central@2abd352490a4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHarald, Honza
bugs1590990
milestone76.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 1590990 - Prevent blocked icon from being draggable in Network Monitor r=Harald,Honza The bocked.svg used as img in Network Monitor is draggable that isn't consistent with the rest of the UI. This problem doesn't exist for the icon used to toggle Network Blocking Panel. Taking cue from the same implementation, converted the image to a CSS background property. Differential Revision: https://phabricator.services.mozilla.com/D67909
devtools/client/netmonitor/src/assets/styles/StatusCode.css
devtools/client/netmonitor/src/components/StatusCode.js
--- a/devtools/client/netmonitor/src/assets/styles/StatusCode.css
+++ b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
@@ -46,15 +46,15 @@
 .status-code:not([data-code^="3"]):not(.status-code-blocked) {
   color: var(--theme-body-background);
 }
 
 .status-code-blocked {
   color: var(--theme-icon-error-color);
 }
 
-.status-code-blocked img {
+.status-code-blocked-icon {
   height: 12px;
   width: 12px;
-  vertical-align: -2px;
+  background-image: url("chrome://devtools/content/netmonitor/src/assets/icons/blocked.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
--- a/devtools/client/netmonitor/src/components/StatusCode.js
+++ b/devtools/client/netmonitor/src/components/StatusCode.js
@@ -7,28 +7,25 @@
 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 { L10N } = require("devtools/client/netmonitor/src/utils/l10n");
 const {
   propertiesEqual,
 } = require("devtools/client/netmonitor/src/utils/request-utils");
 
-const { div, img } = dom;
+const { div } = dom;
 
 const UPDATED_STATUS_PROPS = [
   "fromCache",
   "fromServiceWorker",
   "status",
   "statusText",
 ];
 
-const BLOCKED_ICON =
-  "chrome://devtools/content/netmonitor/src/assets/icons/blocked.svg";
-
 /**
  * Status code component
  * Displays HTTP status code icon
  * Used in RequestListColumnStatus and HeadersPanel
  */
 class StatusCode extends Component {
   static get propTypes() {
     return {
@@ -67,19 +64,18 @@ class StatusCode extends Component {
 
     if (blockedReason) {
       return div(
         {
           className:
             "requests-list-status-code status-code status-code-blocked",
           title: L10N.getStr("networkMenu.blockedTooltip"),
         },
-        img({
-          src: BLOCKED_ICON,
-          alt: L10N.getStr("networkMenu.blockedTooltip"),
+        div({
+          className: "status-code-blocked-icon",
         })
       );
     }
 
     // `data-code` refers to the status-code
     // `data-status-code` can be one of "cached", "service worker"
     // or the status-code itself
     // For example - if a resource is cached, `data-code` would be 200