Bug 1916363 - [devtools] Adapt request list icons in High Contrast Mode. r=devtools-reviewers,ochameau.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Tue, 24 Sep 2024 05:45:45 +0000 (9 months ago)
changeset 755121 2a0022d78bca8c5f0d3ac4f01f1c35dd7b22d8c7
parent 755120 bfdd635fd836c0c891e72ab0ab6bea7bfda4cef4
child 755122 433cd6085ddec592cf202633427555683acce0eb
push id42175
push usernerli@mozilla.com
push dateTue, 24 Sep 2024 16:25:57 +0000 (9 months ago)
treeherdermozilla-central@bdee0d8e5018 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdevtools-reviewers, ochameau
bugs1916363
milestone132.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 1916363 - [devtools] Adapt request list icons in High Contrast Mode. r=devtools-reviewers,ochameau. This sets HCM variable for icon colors that weren't already overridden in HCM (error, warning). Since those colors are used for icons that are already distinct from each other, this doesn't cause any issues. The slow icon needed a bit more work as it's an absolutely positioned element that can overlap the text. In regular mode, a gradient is added on its left side so the icon has a solid background and the text slowly fades before the icon. In High Contrast Mode, the background image is removed, so the icon was fully overlapping the text, making it unreadable. To fix this, we set a plain solid color on the icon in HCM, which also needed some dimensions tweaks to make it look nice. Differential Revision: https://phabricator.services.mozilla.com/D222247
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/themes/variables.css
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -28,52 +28,73 @@
   vertical-align: middle;
 }
 
 .requests-list-perf-notice-button::before {
   background-image: url(chrome://devtools/skin/images/profiler-stopwatch.svg);
 }
 
 .requests-list-slow-button {
-  width: 12px;
-  height: 12px;
+  width: 22px;
   position: absolute;
   right: 0;
-  transform: translateY(-50%);
-  top: 50%;
+  inset-block: 0;
   cursor: pointer;
+    /* The slow icon is absolutely positioned and can can overlap the column text.
+       This background gradient is added on its left side so the icon
+       has a solid background and the text slowly fades before the icon. */
   background-image: linear-gradient(to right,transparent, var(--theme-body-background) 43%);
-  padding-inline-end: 30px;
-  padding-inline-start: 5px;
+  padding-inline: 5px 30px;
+
+  &::before {
+    content: "";
+    width: 12px;
+    height: 100%;
+    display: inline-block;
+    background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/turtle.svg);
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-inline-end: 14px;
+    fill: var(--theme-icon-dimmed-color);
+    -moz-context-properties: fill;
+  }
+
+  :root[forced-colors-active] & {
+    /* In High Contrast Mode, the background gradient is removed, so the icon would
+       overlap the text underneath, making it unreadable.
+       To fix this, we set a plain solid color on the icon in HCM, which also needed
+       some dimensions tweaks to make it look nice. */
+    background-color: Canvas;
+    padding-inline: 5px;
+
+    &::before {
+      color: CanvasText;
+      padding: 0;
+    }
+  }
 }
 
 .request-list-item:not(.selected).odd .requests-list-slow-button {
   background-image: linear-gradient(to right,transparent, var(--table-zebra-inline-icons-background) 43%);
 }
 
 .request-list-item:not(.selected):hover .requests-list-slow-button,
 .request-list-item:not(.selected).odd:hover .requests-list-slow-button {
   background-image: linear-gradient(to right,transparent, var(--table-selection-inline-icons-background-hover) 43%);
 }
 
 .request-list-item.selected .requests-list-slow-button {
   background-image: linear-gradient(to right,transparent, var(--theme-selection-background) 43%);
-}
 
-.requests-list-slow-button::before {
-  content: "";
-  width: 12px;
-  height: 16px;
-  display: inline-block;
-  background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/turtle.svg);
-  background-repeat: no-repeat;
-  background-position-x: right;
-  padding-inline-end: 14px;
-  fill: var(--grey-40);
-  -moz-context-properties: fill;
+  :root[forced-colors-active] & {
+    background-color: var(--theme-selection-background);
+    &::before {
+      color: var(--theme-selection-color);
+    }
+  }
 }
 
 .request-list-item.selected .requests-list-slow-button::before {
   fill: currentColor;
 }
 
 .requests-list-reload-notice-button {
   font-size: inherit;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -278,10 +278,12 @@
     --theme-body-color: CanvasText;
     --theme-focus-outline-color: CanvasText;
     --theme-focus-textinput-outline-color: SelectedItem;
     --theme-icon-color: ButtonText;
     --theme-icon-hover-color: SelectedItem;
     /* We don't want dimmed colors in high Contrast Mode, use the same colors as non-dimmed icons */
     --theme-icon-dimmed-color: var(--theme-icon-color);
     --theme-icon-disabled-color: GrayText;
+    --theme-icon-error-color: ButtonText;
+    --theme-icon-warning-color: ButtonText;
   }
 }