The overflow button is visible when the toolbar is too narrow to fit all of the buttons. This animation will only occur when a user right-clicks on a button and chooses to "Send to overflow menu" (verbage not final). If an item is moved to the overflow menu as part of resizing the window or through any other non-mouse-based activity, then the animation will not occur. See bug 1367142 for the specs.

Comment on attachment 8881995 [details] Bug 1375152 - Implement animation for pinning items to the overflow menu. https://reviewboard.mozilla.org/r/153070/#review158566 ::: browser/themes/shared/icons/chevron-animation.svg:6 (Diff revision 1) > +<!-- This Source Code Form is subject to the terms of the Mozilla Public > + - License, v. 2.0. If a copy of the MPL was not distributed with this > + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> > +<svg xmlns="http://www.w3.org/2000/svg" width="1278" height="24"> > + <svg width="18" height="24"> > + <path fill="context-fill" d="M9.707 7.293l-5 -5a1 1 0 1 0 -1.414 1.414l4.293 4.293 -4.293 4.293a1 1 0 0 0 -0.025 1.414 1 1 0 0 0 1.414 0.025l0.025 -0.025 5 -5a1 1 0 0 0 0 -1.414zm6 0l-5 -5a1 1 0 1 0 -1.414 1.414l4.293 4.293 -4.293 4.293a1 1 0 0 0 -0.025 1.414 1 1 0 0 0 1.414 0.025l0.025 -0.025 5 -5a1 1 0 0 0 0 -1.414z"/> Please move fill="context-fill" to the root svg node. Paths that need a different fill can still specify that. ::: browser/themes/shared/toolbarbutton-icons.inc.css:222 (Diff revision 1) > +} > + > +#nav-bar-overflow-button > .toolbarbutton-animatable-box { > + position: absolute; > + overflow: hidden; > + top: calc(50% - 7px); /* Vertically center the 24px tall image. */ There's a similar problem as what I described in bug 1355924 comment 31 (second part). ::: browser/themes/shared/toolbarbutton-icons.inc.css:222 (Diff revision 1) > +} > + > +#nav-bar-overflow-button > .toolbarbutton-animatable-box { > + position: absolute; > + overflow: hidden; > + top: calc(50% - 7px); /* Vertically center the 24px tall image. */ Please document how you arrived at 7px. Shouldn't this be 12px, i.e. half of the height?

Comment on attachment 8881995 [details] Bug 1375152 - Implement animation for pinning items to the overflow menu. https://reviewboard.mozilla.org/r/153070/#review158630 ::: browser/themes/shared/toolbarbutton-icons.inc.css:223 (Diff revisions 1 - 2) > > #nav-bar-overflow-button > .toolbarbutton-animatable-box { > position: absolute; > overflow: hidden; > - top: calc(50% - 7px); /* Vertically center the 24px tall image. */ > + /* Due to bug 1363730, position:absolute; doesn't position the box > + correctly relative to the closest non-staticly positioned ancestor. Oh, does position:fixed work?

Comment on attachment 8881995 [details] Bug 1375152 - Implement animation for pinning items to the overflow menu. https://reviewboard.mozilla.org/r/153070/#review158766 ::: browser/themes/shared/icons/chevron-animation.svg:72 (Diff revision 3) > + </svg> > + <svg width="18" height="24" x="378"> > + <path d="M9.707 13.957l5 -5a1 1 0 1 0 -1.414 -1.414l-4.293 4.293 -4.293 -4.293a1 1 0 0 0 -1.414 -0.025 1 1 0 0 0 -0.025 1.414l0.025 0.025 5 5a1 1 0 0 0 1.414 0zm0 6l5 -5a1 1 0 1 0 -1.414 -1.414l-4.293 4.293 -4.293 -4.293a1 1 0 0 0 -1.414 -0.025 1 1 0 0 0 -0.025 1.414l0.025 0.025 5 5a1 1 0 0 0 1.414 0z"/> > + </svg> > + <svg width="18" height="24" x="396"> > + <path fill="#39454F" d="M9.707 13.957l5 -5a1 1 0 1 0 -1.414 -1.414l-4.293 4.293 -4.293 -4.293a1 1 0 0 0 -1.414 -0.025 1 1 0 0 0 -0.025 1.414l0.025 0.025 5 5a1 1 0 0 0 1.414 0zm0 6l5 -5a1 1 0 1 0 -1.414 -1.414l-4.293 4.293 -4.293 -4.293a1 1 0 0 0 -1.414 -0.025 1 1 0 0 0 -0.025 1.414l0.025 0.025 5 5a1 1 0 0 0 1.414 0z"/> These fill colors don't look right with inverted icons (i.e. dark themes), as they assume that we're transitioning from black to blue. Is it possible to mix context-fill with blue in the SVG? The easiest way would probably be to set fill: #30A3FF; in the @keyframes 'to { }' rule. This is theoretically more expensive since the SVG needs to be updated every time the context-fill changes, but perf concerns don't seem too critical for this particular animation. Might be worth testing on a slow machine though.

Comment on attachment 8881995 [details] Bug 1375152 - Implement animation for pinning items to the overflow menu. https://reviewboard.mozilla.org/r/153070/#review158904

(In reply to Dão Gottwald [::dao] from comment #6) > The easiest way would probably be to set fill: #30A3FF; in the @keyframes > 'to { }' rule. This is theoretically more expensive since the SVG needs to > be updated every time the context-fill changes, but perf concerns don't seem > too critical for this particular animation. Might be worth testing on a slow > machine though. I tested with the reference laptop and this animation didn't look bad or stutter.

Pushed by jwein@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/2998d8a55394 Implement animation for pinning items to the overflow menu. r=dao

I have reproduced this bug with Nightly 56.0a1 (2017-06-21) on Windows 10 , 64 Bit ! This bug's fix is Verified with latest Nightly 56.0a1 ! Build ID 20170705030206 User Agent Mozilla/5.0 (Windows NT 10.0; WOW64; rv:56.0) Gecko/20100101 Firefox/56.0 [bugday-20170705]

I have verified this fix on today's nightly.