791676 - [New Tab Page] don't start transition for dynamically created elements off a timeout

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect)

Description

[Tim Taubert [:ttaubert] (inactive)]

The new tab page updater uses setTimeout(0) to start transitions for dynamically created elements:

https://mxr.mozilla.org/mozilla-central/source/browser/base/content/newtab/updater.js#174

After doing some testing and looking at bug 701626 it seems that this method doesn't work in 95% of all cases - which I somehow didn't notice when implementing it like this.

Comment 1

[Tim Taubert [:ttaubert] (inactive)]

Attachment: use getComputedStyle() before setting the transitioned property to compute the element's current style

Comment 2

[Dão Gottwald [:dao]]

Comment on attachment 661777 [details] [diff] [review]
use getComputedStyle() before setting the transitioned property to compute the element's current style

>-      // Without the setTimeout() the node would just appear instead of fade in.
>-      setTimeout(function () {
>-        gTransformation.showSite(site, function () batch.pop());
>-      }, 0);
>+      // Compute the element's current style before showing it again.
>+      window.getComputedStyle(site.node).getPropertyValue("opacity");
>+      gTransformation.showSite(site, function () batch.pop());

This comment doesn't really tell what's going on... It should say that style changes are being flushed in order to make the fade-in transition work.

Comment 3

[Tim Taubert [:ttaubert] (inactive)]

Attachment: use getComputedStyle() to flush all style changes to make the transition work

(In reply to Dão Gottwald [:dao] from comment #2)
> This comment doesn't really tell what's going on... It should say that style
> changes are being flushed in order to make the fade-in transition work.

Yes, that comment was poorly chosen, sorry.

Comment 4

[Dão Gottwald [:dao]]

Comment on attachment 661799 [details] [diff] [review]
use getComputedStyle() to flush all style changes to make the transition work

>+      // Use getComputedStyle() to flush all style changes for the
>+      // dynamically inserted site to make the fade-in transition work.

"Use getComputedStyle() to" is redundant, just looking at the code you're commenting on makes this already clear.

>+      window.getComputedStyle(site.node).getPropertyValue("opacity");

window.getComputedStyle(site.node).opacity;

Comment 5

[Tim Taubert [:ttaubert] (inactive)]

Thank you!

https://hg.mozilla.org/integration/fx-team/rev/fff9c3a1028b

Comment 6

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/fff9c3a1028b