Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 12:51:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1916700 - [devtools] Adapt pressed devtools-button in High Contrast Mode. r=devtools-reviewers,ochameau

Browse Source 
The pressed style was reusing --toolbarbutton-hover-background, instead of using the more
semantically appropriate --toolbarbutton-checked-background.
The latter was having a very distinct style (blue background), which didn't match the
style we wanted. But, I don't think the style as used anywhere and seemed more like
a relic of a previous design, so I updated the variable to mimic what we currently
have in regular themes, and adapted the colors for High Contrast.

This way we can extract some selectors into their own rules so we have a more fine-grained
way to style those.

We take this as an opportunity to remove the --toolbarbutton-focus* variables and
the declarations using them as we now have proper focus indicator on the buttons.

Differential Revision: https://phabricator.services.mozilla.com/D227840
This commit is contained in:
Nicolas Chevobbe 2024-11-13 22:28:42 +00:00
parent 7839d1a7d1
commit b257bda79f
2 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
devtools/client/themes/common.css
View File

@ -397,8 +397,17 @@ iframe {
}
}
.devtools-button:empty:not([aria-expanded="true"]):hover {
.devtools-button:empty:not(
[aria-expanded="true"],
[aria-pressed="true"],
.checked
):hover {
background: var(--toolbarbutton-hover-background);
color: var(--toolbarbutton-hover-color);
&::before {
color: var(--theme-icon-hover-color);
}
}
/* Standalone buttons */
@ -416,18 +425,16 @@ iframe {
/* Selectable button which is unchecked. */
.devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover,
.devtools-button:empty:is(:hover:active,.checked, [aria-pressed="true"]),
.devtools-button[aria-haspopup="menu"][aria-expanded="true"] {
background-color: var(--toolbarbutton-hover-background);
}
.devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover:active {
background-color: var(--theme-selection-background-hover);
.devtools-button:empty:is(.checked, [aria-pressed="true"]) {
background-color: var(--toolbarbutton-checked-background);
}
.devtools-button:not(:empty, .checked, [aria-pressed="true"]):focus {
background-color: var(--toolbarbutton-focus-background);
color: var(--toolbarbutton-focus-color);
.devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover:active {
background-color: var(--theme-selection-background-hover);
}
.devtools-togglebutton:not([aria-pressed="true"]) {
@ -444,10 +451,6 @@ iframe {
.devtools-button:not(:empty):is(.checked, [aria-pressed="true"]) {
background: var(--toolbarbutton-checked-background);
color: var(--toolbarbutton-checked-color);
&:focus {
background-color: var(--toolbarbutton-checked-focus-background);
}
}
.devtools-togglebutton[aria-pressed="true"] {

16
devtools/client/themes/variables.css
View File

@ -161,11 +161,9 @@
/* Toolbar buttons */
--toolbarbutton-background: light-dark(var(--grey-10), var(--grey-70));
--toolbarbutton-hover-background: light-dark(var(--grey-20), var(--grey-70));
--toolbarbutton-focus-background: light-dark(var(--grey-20), var(--grey-60));
--toolbarbutton-focus-color: light-dark(var(--grey-70), var(--grey-30));
--toolbarbutton-checked-background: light-dark(var(--blue-55), #204e8a);
--toolbarbutton-checked-focus-background: var(--blue-60);
--toolbarbutton-checked-color: #ffffff;
--toolbarbutton-hover-color: inherit;
--toolbarbutton-checked-background: var(--toolbarbutton-hover-background);
--toolbarbutton-checked-color: var(--theme-icon-checked-color);
/* Buttons */
--theme-button-background: light-dark(rgba(12, 12, 13, 0.05), rgba(249, 249, 250, 0.1));
@ -321,6 +319,13 @@
--theme-accordion-header-hover-background: ButtonFace;
--theme-accordion-header-hover-color: SelectedItem;
/* Toolbar buttons */
--toolbarbutton-background: ButtonFace;
--toolbarbutton-hover-background: ButtonFace;
--toolbarbutton-hover-color: SelectedItem;
--toolbarbutton-checked-background: SelectedItem;
--toolbarbutton-checked-color: SelectedItemText;
/* Text color */
--theme-selection-background: SelectedItem;
--theme-selection-color: SelectedItemText;
@ -344,6 +349,7 @@
--theme-icon-disabled-color: GrayText;
--theme-icon-error-color: ButtonText;
--theme-icon-warning-color: ButtonText;
--theme-icon-checked-color: SelectedItemText;
--theme-search-results-background: Mark;
--theme-search-results-color: MarkText;