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
Loading
Loading
Loading
Loading
+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;
}
+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
    );
  }
}