Bug 1387594 - Sprinkle -moz-font-smoothing-background-color declarations over the CSS. r?dao
There's only one interesting case here: the active tab. When rendering the label
of an overflowing active tab into the fadeout mask surface, text rendering must
not use the font smoothing background color for dark vibrancy. Instead, it needs
to use the color of the tab itself for best results.
Alternatively, we could set the font smoothing background color of the active
tab to "transparent", because this text is not on top of a vibrant background.
However, doing so would lose the subpixel AA and would not look as crisp.
MozReview-Commit-ID: 28MKCz1vmb9
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -794,16 +794,17 @@ html|span.ac-emphasize-text-url {
/* ----- SIDEBAR ELEMENTS ----- */
%include ../shared/sidebar.inc.css
#sidebar-box {
-moz-appearance: -moz-mac-source-list;
+ -moz-font-smoothing-background-color: -moz-mac-source-list;
}
#sidebar-header {
/* system font size is a bit smaller in mac, so need more ems. */
font-size: 1.4545em;
border-bottom: 1px solid hsla(240, 5%, 5%, .1);
background-color: transparent;
}
@@ -891,21 +892,26 @@ html|span.ac-emphasize-text-url {
#TabsToolbar:not(:-moz-lwtheme) {
color: #333;
text-shadow: @loweredShadow@;
}
:root:-moz-any([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
-moz-appearance: -moz-mac-vibrancy-dark;
+ -moz-font-smoothing-background-color: -moz-mac-vibrancy-dark;
background-color: #232323;
color: hsl(240, 9%, 98%);
text-shadow: none;
}
+.tabbrowser-tab[visuallyselected=true] {
+ -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
+}
+
#tabbrowser-tabs {
-moz-box-align: stretch;
}
/**
* Tab Drag and Drop
*/
--- a/browser/themes/osx/places/organizer.css
+++ b/browser/themes/osx/places/organizer.css
@@ -13,20 +13,22 @@
#placesList > treechildren::-moz-tree-cell-text {
font-size: 12px;
margin-inline-end: 6px;
}
#placesList > treechildren::-moz-tree-row(selected) {
-moz-appearance: -moz-mac-source-list-selection;
+ -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
}
#placesList > treechildren::-moz-tree-row(selected,focus) {
-moz-appearance: -moz-mac-active-source-list-selection;
+ -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
}
#placesList > treechildren::-moz-tree-row(History),
#placesList > treechildren::-moz-tree-row(history) {
background-color: blue;
}
#placesList > treechildren::-moz-tree-cell(separator) {
--- a/browser/themes/osx/places/places.css
+++ b/browser/themes/osx/places/places.css
@@ -16,33 +16,36 @@
margin: 0;
height: 24px;
/* Default font size is 11px on mac, so this is 12px */
font-size: 1.0909rem;
}
.sidebar-placesTree {
-moz-appearance: -moz-mac-source-list;
+ -moz-font-smoothing-background-color: -moz-mac-source-list;
}
.sidebar-placesTreechildren::-moz-tree-separator {
border-top: 1px solid #505d6d;
margin: 0 10px;
}
.sidebar-placesTreechildren::-moz-tree-row {
background-color: transparent;
}
.sidebar-placesTreechildren::-moz-tree-row(selected) {
-moz-appearance: -moz-mac-source-list-selection;
+ -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
}
.sidebar-placesTreechildren::-moz-tree-row(selected,focus) {
-moz-appearance: -moz-mac-active-source-list-selection;
+ -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
}
.sidebar-placesTreechildren::-moz-tree-cell-text {
margin-inline-end: 6px;
}
.sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
color: #fff;
--- a/browser/themes/osx/syncedtabs/sidebar.css
+++ b/browser/themes/osx/syncedtabs/sidebar.css
@@ -3,16 +3,17 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/syncedtabs/sidebar.inc.css
/* These styles are intended to mimic XUL trees and the XUL search box. */
.content-container {
-moz-appearance: -moz-mac-source-list;
+ -moz-font-smoothing-background-color: -moz-mac-source-list;
}
.item {
color: -moz-DialogText;
}
.item-title-container {
box-sizing: border-box;
@@ -23,20 +24,22 @@
.item.selected > .item-title-container {
color: HighlightText;
font-weight: bold;
}
.item.selected > .item-title-container {
-moz-appearance: -moz-mac-source-list-selection;
+ -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
}
.item.selected:focus > .item-title-container {
-moz-appearance: -moz-mac-active-source-list-selection;
+ -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
}
.item.client .item-twisty-container {
min-width: 16px;
height: 16px;
background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
}
--- a/toolkit/themes/osx/global/menu.css
+++ b/toolkit/themes/osx/global/menu.css
@@ -101,16 +101,17 @@ menubar > menu {
menubar > menu[_moz-menuactive="true"] {
color: inherit;
background-color: transparent;
}
menubar > menu[_moz-menuactive="true"][open="true"] {
-moz-appearance: menuitem;
+ -moz-font-smoothing-background-color: -moz-mac-active-menuitem;
color: -moz-mac-menutextselect;
}
/* ..... internal content .... */
.menubar-left {
margin: 0 2px;
color: inherit;
@@ -126,16 +127,17 @@ menubar > menu[_moz-menuactive="true"][o
menupopup > menu,
menupopup > menuitem,
menupopup > menucaption {
max-width: 42em;
}
menu[_moz-menuactive="true"],
menuitem[_moz-menuactive="true"] {
+ -moz-font-smoothing-background-color: -moz-mac-active-menuitem;
color: -moz-mac-menutextselect;
background-color: Highlight;
}
menuitem[customoptionstyling="true"] {
-moz-appearance: none;
padding-top: 0;
padding-bottom: 0;
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@@ -2,16 +2,17 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
menupopup,
panel {
-moz-appearance: menupopup;
+ -moz-font-smoothing-background-color: -moz-mac-menupopup;
background-color: Menu;
}
menupopup > menu > menupopup {
margin-top: -4px;
}
.popup-internal-box {
@@ -97,16 +98,17 @@ panel[type="arrow"][side="right"] {
height: 18px;
}
}
/* ::::: tooltip ::::: */
tooltip {
-moz-appearance: tooltip;
+ -moz-font-smoothing-background-color: -moz-mac-tooltip;
margin-top: 18px;
padding: 2px 3px;
max-width: 40em;
color: InfoText;
font: message-box;
cursor: default;
}