Bug 1380815 - Fade overflow menu icon to grey after item is pinned. r=sfoster
authorJared Wein <jwein@mozilla.com>
Thu, 20 Jul 2017 10:53:45 -0400
changeset 418819 571f64d55017da40ee05e0beafdb6bcc4e46fa2a
parent 418818 84a5ef89a71fa1fc54763e513e7636906d11b0a3
child 418820 0db83e6e2fac5ddc35df68b83583bda33abbce26
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster
bugs1380815
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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");