author | Nicolas 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 id | 42175 |
push user | nerli@mozilla.com |
push date | Tue, 24 Sep 2024 16:25:57 +0000 (9 months ago) |
treeherder | mozilla-central@bdee0d8e5018 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | devtools-reviewers, ochameau |
bugs | 1916363 |
milestone | 132.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
|
devtools/client/netmonitor/src/assets/styles/RequestList.css | file | annotate | diff | comparison | revisions | |
devtools/client/themes/variables.css | file | annotate | diff | comparison | revisions |
--- 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; } }