Bug 1385713 - Library icon direction on the main toolbar is inconsistent with the one on the menu on RTL builds r?jaws
MozReview-Commit-ID: G62Bg9jGkN
--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -118,27 +118,27 @@
to {
transform: translateX(-1056px);
fill: #ef4056;
}
}
@keyframes library-pocket-animation-rtl {
from {
- transform: scaleX(-1) translateX(0);
+ transform: translateX(1056px);
fill: inherit;
}
25% {
fill: inherit;
}
50% {
fill: #ef4056;
}
to {
- transform: scaleX(-1) translateX(-1056px);
+ transform: translateX(0);
fill: #ef4056;
}
}
/* We need to use an animation here instead of a transition
to guarantee that the animation succeeds. With transitions
if the starting value is already equal to the end value
then no transition will occur and thus no transitionend event. */
@@ -186,17 +186,16 @@
width: 1078px;
animation-name: library-pocket-animation;
animation-duration: 800ms;
animation-timing-function: steps(48);
}
.toolbarbutton-animatable-box[animate="pocket"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-image {
animation-name: library-pocket-animation-rtl;
- transform: scaleX(-1);
}
.toolbarbutton-animatable-box[animate="pocket"][fade] > .toolbarbutton-animatable-image {
animation-name: library-pocket-fade;
animation-duration: 2s;
animation-timing-function: ease-out;
}
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -15,17 +15,16 @@ toolbar[brighttext] {
.toolbarbutton-animatable-box[brighttext],
toolbar[brighttext] .toolbarbutton-1 {
fill: #fff;
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
-#library-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#PlacesChevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
transform: scaleX(-1);
}
#back-button {
list-style-image: url("chrome://browser/skin/back.svg");
@@ -429,27 +428,27 @@ toolbar[brighttext] .toolbarbutton-1 {
to {
transform: translateX(-1056px);
fill: var(--toolbarbutton-icon-fill-attention);
}
}
@keyframes library-bookmark-animation-rtl {
from {
- transform: scaleX(-1) translateX(0);
+ transform: translateX(1056px);
fill: inherit;
}
25% {
fill: inherit;
}
50% {
fill: var(--toolbarbutton-icon-fill-attention);
}
to {
- transform: scaleX(-1) translateX(-1056px);
+ transform: translateX(0);
fill: var(--toolbarbutton-icon-fill-attention);
}
}
@keyframes library-bookmark-fade {
from {
fill: var(--toolbarbutton-icon-fill-attention);
}
@@ -491,16 +490,15 @@ toolbar[brighttext] .toolbarbutton-1 {
animation-duration: 800ms;
animation-timing-function: steps(48);
-moz-context-properties: fill, stroke;
stroke: var(--toolbarbutton-icon-fill-attention);
}
.toolbarbutton-animatable-box[animate="bookmark"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-image {
animation-name: library-bookmark-animation-rtl;
- transform: scaleX(-1);
}
.toolbarbutton-animatable-box[animate="bookmark"][fade] > .toolbarbutton-animatable-image {
animation-name: library-bookmark-fade;
animation-duration: 2s;
animation-timing-function: ease-out;
}