Bug 1870803 - Add a transition on window activeness changes. r=dao,de…

…sktop-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

browser/themes/shared/browser-shared.css

@@ -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> */