Bug 1384554 - Use list-style-image style for images to support high contrast mode.
MozReview-Commit-ID: HDLa8eg9LRr
--- 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,