Bug 1384554 - Use list-style-image style for images to support high contrast mode. r=mconley
authorEvan Tseng <evan@tseng.io>
Thu, 27 Jul 2017 18:14:04 +0800
changeset 420257 18525ab193663e4564d96d61b69dd9fc8220d4a3
parent 420256 eaaaa3adbe3ca3b13cdffa833da49dfd6eb4bcdd
child 420258 bbcec17958a9f17a7bd9fb5a581c4a51a29803de
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1384554
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1384554 - Use list-style-image style for images to support high contrast mode. r=mconley MozReview-Commit-ID: HDLa8eg9LRr
browser/components/preferences/in-content-new/sync.xul
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/windows/preferences/in-content-new/preferences.css
--- a/browser/components/preferences/in-content-new/sync.xul
+++ b/browser/components/preferences/in-content-new/sync.xul
@@ -65,22 +65,22 @@
         </groupbox>
       </vbox>
       <vbox>
         <html:img class="fxaSyncIllustration" src="chrome://browser/skin/fxa/sync-illustration.svg"/>
       </vbox>
     </hbox>
     <label class="fxaMobilePromo">
         &mobilePromo3.start;<!-- We put these comments to avoid inserting white spaces
-        --><label id="fxaMobilePromo-android"
-                  class="androidLink text-link"><!--
+        --><image class="androidLink"></image><label id="fxaMobilePromo-android"
+                  class="text-link"><!--
         -->&mobilePromo3.androidLink;</label><!--
         -->&mobilePromo3.iOSBefore;<!--
-        --><label id="fxaMobilePromo-ios"
-                  class="iOSLink text-link"><!--
+        --><image class="iOSLink"></image><label id="fxaMobilePromo-ios"
+                  class="text-link"><!--
         -->&mobilePromo3.iOSLink;</label><!--
         -->&mobilePromo3.end;
     </label>
   </vbox>
 
   <vbox id="hasFxaAccount">
     <hbox>
       <vbox id="fxaContentWrapper">
@@ -213,20 +213,20 @@
                   label="&saveChangeSyncDeviceName.label;"
                   accesskey="&saveChangeSyncDeviceName.accesskey;"
                   hidden="true"/>
         </hbox>
       </hbox>
     </groupbox>
     <label class="fxaMobilePromo">
         &mobilePromo3.start;<!-- We put these comments to avoid inserting white spaces
-        --><label class="androidLink text-link" id="fxaMobilePromo-android-hasFxaAccount"><!--
+        --><image class="androidLink"></image><label class="text-link" id="fxaMobilePromo-android-hasFxaAccount"><!--
         -->&mobilePromo3.androidLink;</label><!--
         -->&mobilePromo3.iOSBefore;<!--
-        --><label class="iOSLink text-link" id="fxaMobilePromo-ios-hasFxaAccount"><!--
+        --><image class="iOSLink"></image><label class="text-link" id="fxaMobilePromo-ios-hasFxaAccount"><!--
         -->&mobilePromo3.iOSLink;</label><!--
         -->&mobilePromo3.end;
     </label>
     <vbox id="tosPP-small" align="start">
       <label id="tosPP-small-ToS" class="text-link">
         &prefs.tosLink.label;
       </label>
       <label id="tosPP-small-PP" class="text-link">
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -545,59 +545,57 @@ groupbox {
 .fxaFirefoxLogo {
   list-style-image: url(chrome://browser/skin/fxa/logo.png);
   width: 64px;
   height: 64px;
   margin-inline-end: 14px;
 }
 
 .fxaMobilePromo {
+  line-height: 28px;
   margin-bottom: 20px;
   margin-top: 25px;
 }
 
 #fxaLoginRejectedWarning {
   list-style-image: url(chrome://browser/skin/warning.svg);
   filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
   margin: 4px 8px 0px 0px;
 }
 
 #syncOptions {
   margin-bottom: 27.5px;
 }
 
 .androidLink {
-  background-image: url("chrome://browser/skin/fxa/android.png");
+  list-style-image: url("chrome://browser/skin/fxa/android.png");
 }
 
 .iOSLink {
-  background-image: url("chrome://browser/skin/fxa/ios.png");
+  list-style-image: url("chrome://browser/skin/fxa/ios.png");
 }
 
 .androidLink,
 .iOSLink {
-  margin: 0 0 0 2px;
-  padding-left: 28px;
-  padding-top: 6px;
+  vertical-align: bottom;
+  padding: 0 5px;
   height: 28px;
-  background-repeat: no-repeat;
-  background-size: 24px 28px;
 }
 
 #tosPP-small {
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .androidLink {
-    background-image: url("chrome://browser/skin/fxa/android@2x.png");
+    list-style-image: url("chrome://browser/skin/fxa/android@2x.png");
   }
   .iOSLink {
-    background-image: url("chrome://browser/skin/fxa/ios@2x.png");
+    list-style-image: url("chrome://browser/skin/fxa/ios@2x.png");
   }
   .fxaFirefoxLogo {
     list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
   }
 }
 
 #updateDeck > hbox > label {
   margin-inline-end: 5px ! important;
--- a/browser/themes/windows/preferences/in-content-new/preferences.css
+++ b/browser/themes/windows/preferences/in-content-new/preferences.css
@@ -4,34 +4,26 @@
 
 %include ../../../shared/incontentprefs/preferences.inc.css
 
 @media (-moz-windows-default-theme: 0) {
   #category-general > .category-icon {
     list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#general-native");
   }
 
-  #category-application > .category-icon {
-    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#applications-native");
-  }
-
   #category-privacy > .category-icon {
-    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#privacy-native");
+    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#security-native");
   }
 
   #category-sync > .category-icon {
     list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#sync-native");
   }
 
-  #category-advanced > .category-icon {
-    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#advanced-native");
-  }
-
-  #category-search-results > .category-icon {
-    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#searchResults-native");
+  #category-search > .category-icon {
+    list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#search-native");
   }
 }
 
 .actionsMenu > .menulist-label-box > .menulist-icon {
   margin-inline-end: 9px;
 }
 
 textbox + button,