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 663848 5c27acf805069646110cbb7fae06a5b0d6b4b742
parent 663847 e7160c055cb391fee4b77e0aac6240bcaa045c8d
child 731299 d67b833a72d9c085956dba6dc5e65a6c301f134b
push id79540
push userbmo:mstange@themasta.com
push dateWed, 13 Sep 2017 12:47:31 +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;
 }