зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1380815 - Fade overflow menu icon to grey after item is pinned. r=sfoster
MozReview-Commit-ID: 2LQrWDxrTny --HG-- extra : rebase_source : 6e0ccf341e84970d7897b2d27c23e0ea7a7361bf
This commit is contained in:
Родитель
161f78bcb9
Коммит
716e6429c4
|
@ -4260,7 +4260,6 @@ OverflowableToolbar.prototype = {
|
|||
this._chevron.open = false;
|
||||
} else if (this._panel.state != "hiding") {
|
||||
this.show();
|
||||
this._chevron.removeAttribute("animate");
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -819,6 +819,15 @@ CustomizeMode.prototype = {
|
|||
Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled")) {
|
||||
let overflowButton = this.document.getElementById("nav-bar-overflow-button");
|
||||
overflowButton.setAttribute("animate", "true");
|
||||
overflowButton.addEventListener("animationend", function onAnimationEnd(event) {
|
||||
if (event.animationName.startsWith("overflow-animation")) {
|
||||
this.setAttribute("fade", "true");
|
||||
} else if (event.animationName == "overflow-fade") {
|
||||
this.removeEventListener("animationend", onAnimationEnd);
|
||||
this.removeAttribute("animate");
|
||||
this.removeAttribute("fade");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -353,6 +353,21 @@ toolbar:not([brighttext]) #bookmarks-menu-button@attributeSelectorForToolbar@[st
|
|||
}
|
||||
}
|
||||
|
||||
/* The animation is supposed to show the blue fill color for 520ms, then the
|
||||
fade to the toolbarbutton-fill color for the remaining 210ms. Thus with an
|
||||
animation-duration of 730ms, 71% is the point where we start the fade out. */
|
||||
@keyframes overflow-fade {
|
||||
from {
|
||||
fill: #30A3FF;
|
||||
}
|
||||
71% {
|
||||
fill: #30A3FF;
|
||||
}
|
||||
to {
|
||||
fill: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-bar-overflow-button > .toolbarbutton-animatable-box {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
@ -382,6 +397,12 @@ toolbar:not([brighttext]) #bookmarks-menu-button@attributeSelectorForToolbar@[st
|
|||
#nav-bar-overflow-button[animate]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
||||
animation-name: overflow-animation-rtl;
|
||||
}
|
||||
|
||||
#nav-bar-overflow-button[animate][fade] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
|
||||
animation-name: overflow-fade;
|
||||
animation-timing-function: ease-out;
|
||||
animation-duration: 730ms;
|
||||
}
|
||||
%endif
|
||||
|
||||
#email-link-button@attributeSelectorForToolbar@ {
|
||||
|
|
Загрузка…
Ссылка в новой задаче