1896012 - Urlbar zoom button erroneously animates when changing zoom level under certain conditions

Status: NEW

(Firefox :: Toolbars and Customization, defect, P3)

Description

[Shane Hughes [:aminomancer]]

The urlbar zoom button has an animation that is supposed to play when it becomes visible. Rather than simply appearing, it briefly explodes into existence with a "pulse" that modulates its scale. The animation visually makes sense when the zoom button goes from hidden to visible.

However, under some conditions, the animation will also play when the zoom button was already visible. So the zoom button is already present, at 110% zoom for example, and then changing to 120% zoom will cause the zoom button to briefly disappear (scale: 0) and pulse back (scale: 1.5).

Steps

1. Make sure zoom prefs are not modified, like browser.zoom.full and browser.zoom.siteSpecific
2. Duplicate this tab (since you're reading this, I assume you have a tab with this bug open in it) so there are 2 bugzilla tabs.
3. In one of them, use the zoom shortcut to increase zoom. Observe that the urlbar zoom button's animation plays when you do that.
4. Now, click the other bugzilla tab. It should also have the same zoom level as the other tab, since zoom levels are mapped to domains. So, the zoom button should be already visible on this other tab.
5. Use the zoom shortcut to increase the zoom level further. Observe that the urlbar zoom button's animation plays when you do that, even though the zoom button was already visible.
6. You can get it to repeat indefinitely as long as you switch between these 2 tabs each time you change the zoom level.

Edit: I realized another way you can encounter this in the wild is simply by changing the zoom level on a site that already had a zoom level saved in a previous session. So let's say for example you set your zoom level for wikipedia.org to 120% several months ago. Now today, you visit wikipedia.org and there's a tiny picture of a map and you can't make out the details, so you zoom in to 150%. That's gonna trigger the animation as well. Basically, the animation always plays the first time you change the zoom level in a given tab, and this resets when you switch tabs.

Expected

The zoom button pulse animation only plays when the zoom button becomes visible after having been hidden

Actual

The zoom button pulse animation plays regardless of the button's visibility, as long as the button did not have the animate attribute when the zoom level was changed. Since the animate attribute can be removed by a variety of actions (see callers of updateZoomUI), including switching tabs, this can easily happen in the course of normal browser use.

This looks janky because the pulse does not merely increase the size of the button; it assumes the button is initially hidden, as the scale starts at 0 before growing to 1.5 and then shrinking back to 1.0. This works well when the button really was hidden, but if the button was visible, then it visually disappears as its scale instantly drops to 0, before the rest of the animation plays.

I suggest only adding the animate attribute if the button was hidden:

async function updateZoomUI(aBrowser, aAnimate = false) {
  // ...

  let wasHidden = urlbarZoomButton.hidden;

  urlbarZoomButton.hidden =
    // ...

  if (!urlbarZoomButton.hidden) {
    if (aAnimate && wasHidden && !win.gReduceMotion) {
      urlbarZoomButton.setAttribute("animate", "true");
    } else {
      urlbarZoomButton.removeAttribute("animate");
    }
    urlbarZoomButton.setAttribute("label", label);
  }

  win.FullZoom.updateCommands();
}

Comment 1

[:Gijs (he/him)]

Would you mind just putting up a patch, as you already worked out how to fix this? :-)

Comment 2

[Shane Hughes [:aminomancer]]

No problem! I'll submit a patch tomorrow.