1804726 - Reimplement the about:welcome progress bar animation with a different technique

Status: RESOLVED FIXED

(Firefox :: Messaging System, task, P1)

Description

[Shane Hughes [:aminomancer]]

In bug 1804098, we encountered a problem with subpixel rounding of transformed elements. Each step in the progress bar is adjacent to another and there are no margins or borders, so there should be no visible space between them. And normally this layout works perfectly. But when using transform the potential arises for tiny discrepancies in (CS) subpixel rounding to result in visible layout differences, like a 1 device pixel space between two steps. We worked around this issue by giving each step a -1px inline margin, so they overlap. This works because the layout discrepancies cannot be more than 1px, as they result from subpixel rounding discrepancies. But it's still a kind of hacky solution.

Instead of having a separate element for each step, I think we should have one element for the "filled" space and one element for the "unfilled" space, and then just increment the flex value from 0 to 1 by multiples of 1/n (where n = # of steps). This would be analogous to the flexy behavior in the tabstrip. Getting rid of transform wherever possible is nice anyway, since it causes some anti-aliasing artifacts even if we didn't have this subpixel rounding issue.

Comment 1

[Shane Hughes [:aminomancer]]

I discovered that this will also allow us to animate the progress bar movement when navigating about:welcome via history (e.g. back/forward buttons)

Comment 2

[Shane Hughes [:aminomancer]]

Attachment: Bug 1804726 - Refactor about:welcome transitions. r=emcminn,negin

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5d55a5accdeb
Refactor about:welcome transitions. r=emcminn

Comment 4

[Cristian Tuns]

Backed out for causing mochitest failures on browser_aboutwelcome_configurable_ui.js

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | browser/components/newtab/test/browser/browser_aboutwelcome_configurable_ui.js | Test timed out -

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9456d5162051
Refactor about:welcome transitions. r=emcminn

Comment 6

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/9456d5162051