Bug 1387594 - Sprinkle -moz-font-smoothing-background-color declarations over the CSS. r=dao
authorMarkus Stange <mstange@themasta.com>
Wed, 13 Sep 2017 14:22:49 +0200
changeset 665358 3dcafbdc27cf956aaddf2a0997c8c2ac02829b28
parent 665357 b049c00f7a8f9310c4e9855a668c9d67fd9ebd49
child 665359 ca18e7c2cadce9c93ea3eb89cc129dc37ca4c091
push id80026
push userbmo:ralin@mozilla.com
push dateFri, 15 Sep 2017 10:04:21 +0000
reviewersdao
bugs1387594
milestone57.0a1
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
browser/themes/osx/browser.css
browser/themes/osx/places/organizer.css
browser/themes/osx/places/places.css
browser/themes/osx/syncedtabs/sidebar.css
toolkit/themes/osx/global/menu.css
toolkit/themes/osx/global/popup.css
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -797,16 +797,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;
 }
@@ -895,21 +896,26 @@ html|span.ac-emphasize-text-url {
 #TabsToolbar:not(:-moz-lwtheme) {
   color: #333;
   text-shadow: @loweredShadow@;
 }
 
 #main-window[tabsintitlebar] > #titlebar:not(:-moz-lwtheme),
 :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;
 }