Bug 1722405 - Use image-set() for accessiblecaret. r=TYLin

This makes the UA sheet much simpler.

Differential Revision: https://phabricator.services.mozilla.com/D120905
This commit is contained in:
Emilio Cobos Álvarez 2021-07-27 11:51:49 +00:00
Родитель e5fc71cc00
Коммит 49fb5261a4
1 изменённых файлов: 33 добавлений и 89 удалений

Просмотреть файл

@ -446,7 +446,12 @@ div:-moz-native-anonymous.moz-accessiblecaret > #image {
}
div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
background-image: url("resource://gre-resources/accessiblecaret-normal@1x.png");
background-image: image-set(
url("resource://gre-resources/accessiblecaret-normal@1x.png"),
url("resource://gre-resources/accessiblecaret-normal@1.5x.png") 1.5x,
url("resource://gre-resources/accessiblecaret-normal@2x.png") 2x,
url("resource://gre-resources/accessiblecaret-normal@2.25x.png") 2.25x
);
}
div:-moz-native-anonymous.moz-accessiblecaret.left > :is(#text-overlay, #image) {
@ -454,7 +459,12 @@ div:-moz-native-anonymous.moz-accessiblecaret.left > :is(#text-overlay, #image)
}
div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
background-image: url("resource://gre-resources/accessiblecaret-tilt-left@1x.png");
background-image: image-set(
url("resource://gre-resources/accessiblecaret-tilt-left@1x.png"),
url("resource://gre-resources/accessiblecaret-tilt-left@1.5x.png") 1.5x,
url("resource://gre-resources/accessiblecaret-tilt-left@2x.png") 2x,
url("resource://gre-resources/accessiblecaret-tilt-left@2.25x.png") 2.25x
);
}
div:-moz-native-anonymous.moz-accessiblecaret.right > :is(#text-overlay, #image) {
@ -462,7 +472,12 @@ div:-moz-native-anonymous.moz-accessiblecaret.right > :is(#text-overlay, #image)
}
div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
background-image: url("resource://gre-resources/accessiblecaret-tilt-right@1x.png");
background-image: image-set(
url("resource://gre-resources/accessiblecaret-tilt-right@1x.png"),
url("resource://gre-resources/accessiblecaret-tilt-right@1.5x.png") 1.5x,
url("resource://gre-resources/accessiblecaret-tilt-right@2x.png") 2x,
url("resource://gre-resources/accessiblecaret-tilt-right@2.25x.png") 2.25x
);
}
div:-moz-native-anonymous.moz-accessiblecaret.none {
@ -473,48 +488,6 @@ div:-moz-native-anonymous.moz-accessiblecaret.hidden {
visibility: hidden;
}
@media (min-resolution: 1.5dppx) {
div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
background-image: url("resource://gre-resources/accessiblecaret-normal@1.5x.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
background-image: url("resource://gre-resources/accessiblecaret-tilt-left@1.5x.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
background-image: url("resource://gre-resources/accessiblecaret-tilt-right@1.5x.png");
}
}
@media (min-resolution: 2dppx) {
div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
background-image: url("resource://gre-resources/accessiblecaret-normal@2x.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
background-image: url("resource://gre-resources/accessiblecaret-tilt-left@2x.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
background-image: url("resource://gre-resources/accessiblecaret-tilt-right@2x.png");
}
}
@media (min-resolution: 2.25dppx) {
div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
background-image: url("resource://gre-resources/accessiblecaret-normal@2.25x.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
background-image: url("resource://gre-resources/accessiblecaret-tilt-left@2.25x.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
background-image: url("resource://gre-resources/accessiblecaret-tilt-right@2.25x.png");
}
}
%ifdef ANDROID
div:-moz-native-anonymous.moz-accessiblecaret > :is(#text-overlay, #image) {
/* border: 0.1px solid red; */ /* Uncomment border to see the touch target. */
@ -528,7 +501,11 @@ div:-moz-native-anonymous.moz-accessiblecaret > #image {
}
div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-normal-hdpi.png");
background-image: image-set(
url("chrome://geckoview/skin/images/accessiblecaret-normal-hdpi.png"),
url("chrome://geckoview/skin/images/accessiblecaret-normal-xhdpi.png") 2x,
url("chrome://geckoview/skin/images/accessiblecaret-normal-xxhdpi.png") 2.25x
);
}
div:-moz-native-anonymous.moz-accessiblecaret.left > :is(#text-overlay, #image) {
@ -536,7 +513,11 @@ div:-moz-native-anonymous.moz-accessiblecaret.left > :is(#text-overlay, #image)
}
div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-tilt-left-hdpi.png");
background-image: image-set(
url("chrome://geckoview/skin/images/accessiblecaret-tilt-left-hdpi.png"),
url("chrome://geckoview/skin/images/accessiblecaret-tilt-left-xhdpi.png") 2x,
url("chrome://geckoview/skin/images/accessiblecaret-tilt-left-xxhdpi.png") 2.25x
);
}
div:-moz-native-anonymous.moz-accessiblecaret.right > :is(#text-overlay, #image) {
@ -544,50 +525,13 @@ div:-moz-native-anonymous.moz-accessiblecaret.right > :is(#text-overlay, #image)
}
div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-tilt-right-hdpi.png");
background-image: image-set(
url("chrome://geckoview/skin/images/accessiblecaret-tilt-right-hdpi.png"),
url("chrome://geckoview/skin/images/accessiblecaret-tilt-right-xhdpi.png") 2x,
url("chrome://geckoview/skin/images/accessiblecaret-tilt-right-xxhdpi.png") 2.25x
);
}
@media (min-resolution: 1.5dppx) {
div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-normal-hdpi.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-tilt-left-hdpi.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-tilt-right-hdpi.png");
}
}
@media (min-resolution: 2dppx) {
div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-normal-xhdpi.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-tilt-left-xhdpi.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-tilt-right-xhdpi.png");
}
}
@media (min-resolution: 2.25dppx) {
div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-normal-xxhdpi.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-tilt-left-xxhdpi.png");
}
div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
background-image: url("chrome://geckoview/skin/images/accessiblecaret-tilt-right-xxhdpi.png");
}
}
%endif
/* Custom content container in the CanvasFrame, positioned on top of everything