1382894 - Toolbar animations such as the 'Save to Pocket' and 'Stop / Reload' do not work properly outside of the nav-bar

Status: NEW

(Firefox :: Toolbars and Customization, enhancement, P4)

Description

[Jared Wein [:jaws] (please needinfo? me)]

Placing the Pocket, Library, or Stop/Reload buttons in the Tabs toolbar causes their associated animations to not run correctly.

The content inside of the buttons that is set to position:absolute does not leave the flow of the document causing the buttons to be wider than they should be. The overflow:hidden property also is not clipping the SVG sprite to the desired width, causing the full SVG sprite to be visible during the animation (the user can see the sprite sliding across the screen).

I compared the different CSS properties of the tabs toolbar and the navigation toolbar and couldn't find what was different and why we would get such a different outcome.

This bug is on file to figure out what is going wrong here, and eventually enable our animations to run outside of the navigation toolbar.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

This might get fixed by the work in bug 1384953.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

Correction, bug 1384953 is only handling bookmarks and pocket. But the same method could be applied here for stop/reload.

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Bug 1384953 should make this easier to fix for the library button animations, but there will still need to be some work to calculate the correct vertical offset.