Bug 1380815 - Fade overflow menu icon to grey after item is pinned. r?sfoster draft
authorJared Wein <jwein@mozilla.com>
Thu, 20 Jul 2017 10:53:45 -0400
changeset 612754 f306a6ec9bd873d984ca1454a4322ffe0398101d
parent 612709 b4a15299733145a8bc1d01bd2cb4fe0010d65803
child 612916 e2a732a7e01144ad02531d307da2b9b7d9a5b0a9
push id69603
push userbmo:jaws@mozilla.com
push dateFri, 21 Jul 2017 03:09:25 +0000
reviewerssfoster
bugs1380815
milestone56.0a1
Bug 1380815 - Fade overflow menu icon to grey after item is pinned. r?sfoster MozReview-Commit-ID: 2LQrWDxrTny
browser/components/customizableui/CustomizableUI.jsm
browser/components/customizableui/CustomizeMode.jsm
browser/themes/shared/toolbarbutton-icons.inc.css
--- 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");