Bug 1901545 - Move panelview and related rules from browser/base/content/browser.css to panelUI-shared.css. r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D213071

browser/base/content/browser.css

@@ -4,56 +4,6 @@
 
 @namespace html url("http://www.w3.org/1999/xhtml");
 
-panelmultiview {
-  align-items: flex-start;
-  min-width: 0;
-  min-height: 0;
-}
-
-panelmultiview[transitioning] {
-  pointer-events: none;
-}
-
-panelview {
-  flex-direction: column;
-}
-
-panelview:not([visible]) {
-  visibility: collapse;
-}
-
-.panel-viewcontainer {
-  overflow: hidden;
-  flex-shrink: 0;
-  min-width: 0;
-  min-height: 0;
-  max-height: 100%;
-}
-
-.panel-viewcontainer[panelopen] {
-  transition-property: height;
-  transition-timing-function: var(--animation-easing-function);
-  transition-duration: var(--panelui-subview-transition-duration);
-  will-change: height;
-}
-
-.panel-viewcontainer.offscreen {
-  display: block;
-}
-
-.panel-viewstack {
-  overflow: visible;
-  transition: height var(--panelui-subview-transition-duration);
-}
-
-/* The ids are ugly, but this should be reasonably performant, and
- * using a tagname as the last item would be less so.
- */
-#widget-overflow-list:empty + #widget-overflow-fixed-separator,
-#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
-  display: none;
-}
-
 /* Rules to help integrate WebExtension buttons */
 
 .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {

browser/themes/shared/browser-shared.css

@@ -69,8 +69,6 @@ body {
   --tabs-navbar-separator-color: ThreeDShadow;
   --tabs-navbar-separator-style: solid;
 
-  --panelui-subview-transition-duration: 150ms;
-
   --short-notification-background: #0250BB;
   --short-notification-gradient: #9059FF;
 

browser/themes/shared/customizableui/panelUI-shared.css

@@ -3,6 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
+  --panelui-subview-transition-duration: 150ms;
+
   --panel-item-hover-bgcolor: var(--button-hover-bgcolor);
   --panel-item-active-bgcolor: var(--button-active-bgcolor);
   --panel-banner-item-color: var(--button-color);
@@ -170,10 +172,24 @@ menupopup {
   font: menu;
 }
 
+panelmultiview {
+  align-items: flex-start;
+  min-width: 0;
+  min-height: 0;
+
+  &[transitioning] {
+    pointer-events: none;
+  }
+}
+
 panelview {
   flex-direction: column;
   padding: 0;
 
+  &:not([visible]) {
+    visibility: collapse;
+  }
+
   /* Prevent a scrollbar from appearing while the animation for transitioning from
     one view to another runs, which would otherwise happen if the new view has
     more height than the old one because that would mean that during the
@@ -183,6 +199,30 @@ panelview {
   }
 }
 
+.panel-viewcontainer {
+  overflow: hidden;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+  max-height: 100%;
+
+  &[panelopen] {
+    transition-property: height;
+    transition-timing-function: var(--animation-easing-function);
+    transition-duration: var(--panelui-subview-transition-duration);
+    will-change: height;
+  }
+
+  &.offscreen {
+    display: block;
+  }
+}
+
+.panel-viewstack {
+  overflow: visible;
+  transition: height var(--panelui-subview-transition-duration);
+}
+
 .panel-subview-body {
   overflow-y: auto;
   overflow-x: hidden;
@@ -235,6 +275,11 @@ panelview {
   }
 }
 
+#widget-overflow-list:empty + #widget-overflow-fixed-separator,
+#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
+  display: none;
+}
+
 #wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls,
 #wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls,
 :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {