Commit ac1ba867 authored by Florens Verschelde's avatar Florens Verschelde
Browse files

Bug 1585725 - Use white blocked icon in selected rows; r=Honza 

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

--HG--
extra : moz-landing-system : lando
parent 2ac6343c

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

+24 −11
Original line number Diff line number Diff line
@@ -27,21 +27,34 @@ 
  background-color: var(--status-code-color-4xx);

}



.status-code[data-code^="5"], .status-code[data-code^="6"], .status-code[data-code^="7"],

.status-code[data-code^="8"], .status-code[data-code^="9"] {

.status-code[data-code^="5"],

.status-code[data-code^="6"],

.status-code[data-code^="7"],

.status-code[data-code^="8"],

.status-code[data-code^="9"] {

  background-color: var(--status-code-color-5xx);

}



.status-code img.blocked {

  display: inline-block;

.status-code:not([data-code^="3"]):not(.status-code-blocked) {

  color: var(--theme-body-background);

}



.status-code-blocked {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 24px;

  width: 24px;

  color: var(--theme-icon-error-color);

}



.request-list-item.selected .status-code-blocked {

  color: var(--theme-selection-color);

}



.status-code-blocked img {

  height: 12px;

  width: 12px;

  vertical-align: text-bottom;

  margin-inline-start: 4px;

  -moz-context-properties: fill;

  fill: var(--timing-blocked-color);

}



.status-code:not([data-code^="3"]) {

  color: var(--theme-body-background);

  fill: currentColor;

}

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

+15 −9
Original line number Diff line number Diff line
@@ -19,6 +19,9 @@ const UPDATED_STATUS_PROPS = [ 
  "statusText",

];



const BLOCKED_ICON =

  "chrome://devtools/content/netmonitor/src/assets/icons/blocked.svg";



/**

 * Status code component

 * Displays HTTP status code icon
@@ -48,7 +51,6 @@ class StatusCode extends Component { 
      statusText,

      blockedReason,

    } = item;

    let statusContent = status;

    let code;



    if (status) {
@@ -62,13 +64,17 @@ class StatusCode extends Component { 
    }



    if (blockedReason) {

      statusContent = img({

        src:

          "chrome://devtools/content/netmonitor/src/assets/icons/blocked.svg",

        alt: L10N.getStr("networkMenu.blocked"),

      return div(

        {

          className:

            "requests-list-status-code status-code status-code-blocked",

          title: L10N.getStr("networkMenu.blocked"),

        className: "blocked",

      });

        },

        img({

          src: BLOCKED_ICON,

          alt: L10N.getStr("networkMenu.blocked"),

        })

      );

    }



    // `data-code` refers to the status-code
@@ -87,7 +93,7 @@ class StatusCode extends Component { 
        "data-status-code": code,

        "data-code": status,

      },

      statusContent

      status

    );

  }

}