Bug 1380815 - Fade overflow menu icon to grey after item is pinned. r=sfoster

MozReview-Commit-ID: 2LQrWDxrTny

--HG--
extra : rebase_source : 6e0ccf341e84970d7897b2d27c23e0ea7a7361bf

browser/components/customizableui/CustomizableUI.jsm

@@ -4260,7 +4260,6 @@ OverflowableToolbar.prototype = {
       this._chevron.open = false;
     } else if (this._panel.state != "hiding") {
       this.show();
-      this._chevron.removeAttribute("animate");
     }
   },
 

browser/components/customizableui/CustomizeMode.jsm

@@ -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");
+        }
+      });
     }
   },
 

browser/themes/shared/toolbarbutton-icons.inc.css

@@ -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@ {