Bug 1591781 - Port bug 1587135: Replace the position and :after hack on top of the classic title bar with a simpler gradient. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Sun, 27 Oct 2019 12:30:12 +0100
changeset 36495 37638cf21b5671fc5d2aeb7a4da7f6acbacc42e3
parent 36494 450ec65c9b9fb5660aeacaf577425cc3369d3b16
child 36496 c6454775a43361a051100864556d44354dd4380e
push id2534
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:52:51 +0000
treeherdercomm-beta@055c50840778 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1591781, 1587135
Bug 1591781 - Port bug 1587135: Replace the position and :after hack on top of the classic title bar with a simpler gradient. r=jorgk
mail/themes/windows/mail/primaryToolbar.css
--- a/mail/themes/windows/mail/primaryToolbar.css
+++ b/mail/themes/windows/mail/primaryToolbar.css
@@ -54,91 +54,59 @@
   }
 
   #menubar-items > #mail-menubar >
     menu:not([disabled="true"])[_moz-menuactive="true"]:-moz-lwtheme-brighttext {
     background-color: hsla(0, 0%, 100%, .2);
   }
 }
 
-/**
- * In the classic themes, the titlebar has a horizontal gradient, which is
- * problematic for reading the text of background tabs when they're in the
- * titlebar. We side-step this issue by layering our own background underneath
- * the tabs. Unfortunately, this requires a bunch of positioning in order to
- * get text and icons to not appear fuzzy.
- */
 @media (-moz-windows-classic) {
-  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
-  #tabmail-tabs:not(:-moz-lwtheme) {
-    position: relative;
-    z-index: 2;
-  }
-
-  #messengerWindow[tabsintitlebar] #tabs-toolbar:not(:-moz-lwtheme) {
-    position: relative;
+  /**
+   * In the classic themes, the titlebar has a horizontal gradient, which is
+   * problematic for reading the text of background tabs when they're in the
+   * titlebar. We side-step this issue by layering our own background underneath
+   * the tabs.
+   */
+  :root[tabsintitlebar] #tabs-toolbar:not(:-moz-lwtheme) {
+    background-image: linear-gradient(transparent, ActiveCaption);
+    background-size: auto 200%;
   }
 
-  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
-  #tabs-toolbar:not(:-moz-lwtheme)::after {
-    /* Because we use placeholders for window controls etc. in the tabstrip,
-     * and position those with ordinal attributes, and because our layout code
-     * expects :before/:after nodes to come first/last in the frame list,
-     * we have to reorder this element to come last, hence the
-     * ordinal group value (see bug 853415). */
-    -moz-box-ordinal-group: 1001;
-    content: "";
-    display: -moz-box;
-    height: 0;
-    margin: 0 50px;
-    position: absolute;
-    pointer-events: none;
-    top: 100%;
-    width: -moz-available;
-  }
-
-  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
-  #tabmail-container:not(:-moz-lwtheme) {
-    position: relative;
-    z-index: 2;
+  :root[tabsintitlebar] #tabs-toolbar:not(:-moz-lwtheme):-moz-window-inactive {
+    background-image: linear-gradient(transparent, InactiveCaption);
   }
 
   /**
    * With the tabbrowser-tabs element z-index'd above the nav-bar, we now get the
    * scrollbox button borders leaking over the nav-bar highlight. This transparent bottom
    * border forces the scrollbox button borders to terminate a pixel early, working
    * around the issue.
    */
-  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
-  .tabmail-arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-up),
-  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
-  .tabmail-arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-down) {
+  :root[tabsintitlebar] .tabmail-arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-up),
+  :root[tabsintitlebar] .tabmail-arrowscrollbox:not(:-moz-lwtheme)::part(scrollbutton-down) {
     border-bottom: 1px solid transparent;
   }
 
-  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
-  .mail-toolbox:not(:-moz-lwtheme),
-  #messengerWindow[tabsintitlebar]:not([sizemode=fullscreen])
-  .contentTabToolbox:not(:-moz-lwtheme) {
+  :root[tabsintitlebar] .mail-toolbox:not(:-moz-lwtheme),
+  :root[tabsintitlebar] .contentTabToolbox:not(:-moz-lwtheme) {
     box-shadow: none;
   }
 
-  #messengerWindow[tabsintitlebar][sizemode="normal"]
-  #titlebar-content:-moz-lwtheme {
-    /* Render a window top border: */
+  /* Add a window top border for webextension themes */
+  :root[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
     background-image: linear-gradient(to bottom, ThreeDLightShadow 0,
                                       ThreeDLightShadow 1px, ThreeDHighlight 1px,
                                       ThreeDHighlight 2px, ActiveBorder 2px,
                                       ActiveBorder 4px, transparent 4px);
   }
 
   /* End classic titlebar gradient */
 
-  #messengerWindow[tabsintitlebar]:not([inFullscreen])
-  :-moz-any(#tabs-toolbar, #mail-toolbar-menubar2)
+  :root[tabsintitlebar] :-moz-any(#tabs-toolbar, #mail-toolbar-menubar2)
   toolbarbutton:not(:-moz-lwtheme) {
     color: inherit;
   }
 }
 
 .mail-toolbox,
 .contentTabToolbox {
   -moz-appearance: none;