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
--- 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 {