Bug 1870803 - Add a transition on window activeness changes. r=dao,desktop-theme-reviewers

Now that we transition opacity and background-color, both of which are
accelerated in the compositor, we could do this, which makes activeness
changes a bit less jarring IMO.

Happy to just not take this if you think it's not worth it.

Differential Revision: https://phabricator.services.mozilla.com/D196827
This commit is contained in:
Emilio Cobos Álvarez 2023-12-20 21:30:55 +00:00
parent a59f6db8d7
commit e1c143f384

View File

@ -83,6 +83,7 @@
--lwt-background-tiling: no-repeat;
--ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
--inactive-window-transition: 0.2s ease;
&:where([tabsintitlebar]) {
--toolbox-non-lwt-bgcolor: ActiveCaption;
@ -123,6 +124,10 @@
--urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent);
}
@media (prefers-reduced-motion) {
--inactive-window-transition: 0s;
}
@media (min-resolution: 1.5dppx) {
--tabs-navbar-shadow-size: 0.5px;
}
@ -141,6 +146,9 @@
background-color: var(--toolbox-non-lwt-bgcolor);
color: var(--toolbox-non-lwt-textcolor);
will-change: background-color;
transition: background-color var(--inactive-window-transition);
&:-moz-window-inactive {
background-color: var(--toolbox-non-lwt-bgcolor-inactive);
color: var(--toolbox-non-lwt-textcolor-inactive);
@ -183,8 +191,13 @@
}
}
:root[tabsintitlebar] #titlebar:-moz-window-inactive {
opacity: .6;
:root[tabsintitlebar] #titlebar {
will-change: opacity;
transition: opacity var(--inactive-window-transition);
&:-moz-window-inactive {
opacity: .6;
}
}
/* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */