Bug 1387594 - Sprinkle -moz-font-smoothing-background-color declarations over the CSS. r?dao draft
authorMarkus Stange <mstange@themasta.com>
Wed, 13 Sep 2017 14:22:49 +0200
changeset 664807 d6539a441104e6fc8efdfe1675beb86b86f13e15
parent 664806 6878653dbea15bcfd7811c42ca2bc3c041b39d5c
child 731552 ca926a937c6eef618fa22a0f0e95cfdaac44d99e
push id79812
push userbmo:mstange@themasta.com
push dateThu, 14 Sep 2017 12:15:40 +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
@@ -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;
 }