Bug 1380815 - Fade overflow menu icon to grey after item is pinned. r?sfoster
MozReview-Commit-ID: 2LQrWDxrTny
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -4255,17 +4255,16 @@ OverflowableToolbar.prototype = {
},
_onClickChevron(aEvent) {
if (this._chevron.open) {
this._panel.hidePopup();
this._chevron.open = false;
} else if (this._panel.state != "hiding") {
this.show();
- this._chevron.removeAttribute("animate");
}
},
_onPanelHiding(aEvent) {
this._chevron.open = false;
this._panel.removeEventListener("dragover", this);
this._panel.removeEventListener("dragend", this);
let doc = aEvent.target.ownerDocument;
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -814,16 +814,25 @@ CustomizeMode.prototype = {
if (!this._customizing) {
CustomizableUI.dispatchToolboxEvent("customizationchange");
}
if (AppConstants.MOZ_PHOTON_ANIMATIONS &&
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");
+ }
+ });
}
},
removeFromArea(aNode) {
aNode = this._getCustomizableChildForNode(aNode);
if (aNode.localName == "toolbarpaletteitem" && aNode.firstChild) {
aNode = aNode.firstChild;
}
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -348,16 +348,31 @@ toolbar:not([brighttext]) #bookmarks-men
fill: #30A3FF;
}
to {
transform: scaleX(-1) translateX(-1260px);
fill: #30A3FF;
}
}
+/* 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;
/* The height of the sprite is 24px, which is 8px taller than
the height of the icon. We need to move the sprite up 8px
higher to counter for this. */
margin-top: -8px;
/* Since .toolbarbutton-icon uses a different width than the animatable box,
@@ -377,16 +392,22 @@ toolbar:not([brighttext]) #bookmarks-men
animation-duration: 1.1s;
background-image: url("chrome://browser/skin/chevron-animation.svg");
width: 1278px;
}
#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@ {
list-style-image: url("chrome://browser/skin/mail.svg");
}
#sidebar-button@attributeSelectorForToolbar@ {
list-style-image: url("chrome://browser/skin/sidebars-right.svg");