Bug 1399498 - Make chrome background show in tabs on Windows 7 and remove glass fog on default theme. r=dao
authorJohann Hofmann <jhofmann@mozilla.com>
Mon, 18 Sep 2017 12:37:34 +0200
changeset 381934 ab1e0e06445226d0cadf3a1f12fac576c770584d
parent 381933 0a26b0e8ffeb6a26e0c2149091a6942e6920fb58
child 381935 1d37fb0f952be71f2f45522365be62c14bcd5993
push id51678
push userjhofmann@mozilla.com
push dateWed, 20 Sep 2017 14:57:14 +0000
treeherderautoland@ab1e0e064452 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1399498
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1399498 - Make chrome background show in tabs on Windows 7 and remove glass fog on default theme. r=dao This change is part of the original Photon spec for Windows 7. MozReview-Commit-ID: JsI9ZXLU1oM
browser/themes/shared/compacttheme.inc.css
browser/themes/windows/browser-aero.css
browser/themes/windows/browser.css
browser/themes/windows/compacttheme.css
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -82,20 +82,18 @@ toolbar[brighttext] .toolbarbutton-1 {
 }
 
 /* Default findbar text color doesn't look good - Bug 1125677 */
 .browserContainer > findbar .findbar-find-status,
 .browserContainer > findbar .found-matches {
   color: inherit;
 }
 
-#navigator-toolbox .toolbarbutton-1,
 .browserContainer > findbar .findbar-button,
 #PlacesToolbar toolbarbutton.bookmark-item {
-  color: var(--chrome-color);
   text-shadow: none;
 }
 
 #TabsToolbar {
   text-shadow: none !important;
 }
 
 /* URL bar and search bar*/
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -321,21 +321,16 @@
 }
 
 @media (-moz-windows-glass) {
   #main-window[sizemode=normal] #nav-bar {
     border-top-left-radius: 2.5px;
     border-top-right-radius: 2.5px;
   }
 
-  #main-window[sizemode=fullscreen]:not(:-moz-lwtheme) {
-    -moz-appearance: none;
-    background-color: #556;
-  }
-
   #toolbar-menubar:not(:-moz-lwtheme) {
     text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
   }
 
   #main-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
     background-color: rgba(255,255,255,.5);
     color: black;
     border-radius: 4px;
@@ -346,52 +341,16 @@
   #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme {
     border-top: 2px solid;
     -moz-border-top-colors: @glassActiveBorderColor@ rgba(255,255,255,.6);
   }
 
   #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive {
     -moz-border-top-colors: @glassInactiveBorderColor@ rgba(255,255,255,.6);
   }
-
-  /* Glass Fog */
-
-  #TabsToolbar:not(:-moz-lwtheme) {
-    position: relative;
-  }
-
-  #TabsToolbar: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;
-    box-shadow: 0 0 30px 30px rgba(174,189,204,0.85);
-    content: "";
-    display: -moz-box;
-    height: 0;
-    margin: 0 60px; /* (30px + 30px) from box-shadow */
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    width: -moz-available;
-    z-index: -1;
-  }
-
-  /* Need to constrain the glass fog to avoid overlapping layers, see bug 886281. */
-  #navigator-toolbox:not(:-moz-lwtheme) {
-    overflow: -moz-hidden-unscrollable;
-  }
-
-  #main-window[sizemode=normal] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) {
-    position: relative;
-  }
-
-  /* End Glass Fog */
 }
 
 /* Aero Basic */
 @media (-moz-windows-compositor: 0) {
   @media (-moz-windows-default-theme) {
     #main-window {
       background-color: rgb(185,209,234);
     }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -98,16 +98,47 @@
   color: var(--toolbar-color, inherit);
 }
 
 #toolbar-menubar,
 #TabsToolbar {
   color: var(--titlebar-text-color);
 }
 
+/*
+ * Windows 7 draws the chrome background color as the tab background
+ * instead of in the tabs toolbar.
+ */
+@media (-moz-os-version: windows-win7) {
+  @media (-moz-windows-default-theme) {
+    :root:not(:-moz-lwtheme) {
+      --tabs-border: #4A4A4F;
+    }
+
+    #TabsToolbar:not(:-moz-lwtheme) {
+      color: hsl(240,9%,98%);
+    }
+
+    /* Always show full-height tab separators on tabs with borders. */
+    .tabbrowser-tab:not(:-moz-lwtheme)::before {
+      border-image: none !important;
+    }
+
+    /* Show the tabs toolbar background color inside tabs on Win 7. */
+    .tab-background:not(:-moz-lwtheme):not([selected=true]) {
+      background-color: hsl(235,33%,19%) !important;
+    }
+
+    /* Show border on tabs with background colors in Windows 7. */
+    .tab-background:not(:-moz-lwtheme) {
+      border-top: 1px solid var(--tabs-border);
+    }
+  }
+}
+
 @media (-moz-windows-compositor: 0),
        (-moz-windows-default-theme: 0) {
   /* Please keep the menu text colors in this media block in sync with
    * compacttheme.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
    */
   :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme) {
     --titlebar-text-color: CaptionText;
   }
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -13,88 +13,80 @@
    theme. It can't be changed to transparent when there is no compositor
    (Win 7 in classic / basic theme), or else dragging and focus become
    broken. So instead just show the normal titlebar in that case, and override
    the window color as transparent when the compositor is available. */
 @media (-moz-windows-compositor: 0) {
   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
     visibility: visible;
   }
-
-  #main-window {
-    background: var(--chrome-background-color) !important;
-  }
 }
 
 @media (-moz-windows-compositor) {
   #main-window {
     background: transparent !important;
   }
 }
 
 #toolbar-menubar {
   text-shadow: none !important;
 }
 
 @media (-moz-windows-glass) {
+  /* Always show light toolbar elements on aero glass surface. */
+  #TabsToolbar {
+    color: hsl(240,9%,98%);
+  }
+
+  /* Keep showing the correct color inside the tabs. */
   .tabbrowser-tab {
-    background-color: var(--chrome-background-color);
+    color: var(--chrome-color) !important;
+  }
+
+  /* Make the menubar text readable on aero glass (copied from browser-aero.css). */
+  #toolbar-menubar {
+    text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
+  }
+
+  #main-menubar:not(:-moz-window-inactive) {
+    background-color: rgba(255,255,255,.5);
+    color: black;
+    border-radius: 4px;
+  }
+}
+
+/* Windows 7 specific tab styles that apply to default, dark and light themes
+ * (the default theme counterpart lives in browser.css) */
+@media (-moz-os-version: windows-win7) {
+  /* Always show full-height tab separators on tabs with borders. */
+  .tabbrowser-tab::before {
+    border-image: none !important;
+  }
+
+  /* Show the tabs toolbar background color inside tabs on Win 7. */
+  .tab-background:not([selected=true]) {
+    background-color: var(--chrome-background-color) !important;
+  }
+
+  /* Show border on tabs with background colors in Windows 7. */
+  .tab-background {
+    border-top: 1px solid var(--tabs-border);
   }
 }
 
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
-  /* It'd be nice if there was an element in the scrollbox's inner content
-     that collapsed to the current width of the tabs. Since there isn't we
-     need to handle overflowing and non-overflowing tabs separately.
-
-     In the case of overflowing tabs, set a border-top on the entire container,
-     otherwise we need to set it on each element individually */
-  #main-window[sizemode=normal] .tabbrowser-tabs[overflow="true"] {
-    background-clip: padding-box;
-    border-top: 1px solid var(--chrome-nav-bar-separator-color);
-    border-inline-end: 1px solid var(--chrome-nav-bar-separator-color);
-  }
-
-  /* Add a border to the left of the first tab (or scroll arrow).  Using .tabbrowser-tabs
-     instead of #TabsToolbar because it will work even in customize mode. */
-  #main-window[sizemode=normal] .tabbrowser-tabs {
-    background-clip: padding-box;
-    border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
-    border-inline-end: 1px solid transparent;
-  }
-
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .closing-tabs-spacer {
-    background-clip: padding-box;
-    border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
-  }
-
   /* Use default window colors when in non-maximized mode */
   #tabbrowser-tabs,
   #TabsToolbar,
   #browser-panel,
   #titlebar-content {
     background: transparent;
   }
 
-  /* Ensure that the entire background is styled when maximized/fullscreen */
-  #main-window:not([sizemode="normal"]):not([customizing]) #browser-panel {
-    background: var(--chrome-background-color) !important;
-  }
-
-  /* The menu items need to be visible when the entire background is styled */
-  #main-window:not([sizemode="normal"]) #main-menubar {
-    color: var(--chrome-color);
-    background-color: transparent;
-  }
-
-  #main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) {
-    color: inherit;
-  }
-
   /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */
   @media (-moz-windows-compositor: 0),
          (-moz-windows-default-theme: 0) {
     :root[tabsintitlebar]:not([inFullscreen]) {
       --titlebar-text-color: CaptionText;
     }
 
     :root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {