Bug 1384554 - Use list-style-image style for images to support high contrast mode. draft
authorEvan Tseng <evan@tseng.io>
Thu, 27 Jul 2017 18:14:04 +0800
changeset 616673 ed66218d9c5ffa9f0daccaf1c13aa7772d126563
parent 616205 f1693d664f8e8ee4c79801630c181c28095cad56
child 639557 6342ba9a46370d6d84b8e071f4df11a381d3cb73
push id70774
push userbmo:evan@tseng.io
push dateThu, 27 Jul 2017 10:57:57 +0000
bugs1384554
milestone56.0a1
Bug 1384554 - Use list-style-image style for images to support high contrast mode. 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,