Catching flickering regressions

Jared Wein jaws at mozilla.com
Tue Dec 5 17:11:03 UTC 2017


This is so cool and uses a pretty novel technique of
CanvasRenderingContext2D.drawWindow(). It's ideas like these that I wish we
had done years back, but so cool to have done them now and not later.

I'm thinking we could do similar tests for the opening of the awesome bar
dropdown (I don't currently see flickering there but it would be good to be
preventative), as well as opening a new tab (with exceptions for the tab
area and expected parts of the navigation toolbar).

Cheers,
Jared

On Tue, Dec 5, 2017 at 11:11 AM, Florian Quèze <florian at queze.net> wrote:

> For Firefox 57, as part of the Photon Performance project, one of the
> things we worked on was dramatically reducing flickering in the main
> browser window. We focused especially on what happens when opening the
> first browser window during startup, and when opening new browser windows.
>
> To identify bugs, we looked frame by frame at video recordings
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1372518#c0>. This was good
> enough to file bugs for an initial exploration, but was time consuming, and
> won't help us to keep these interactions flicker free going forward.
>
> I'm happy to announce that these two interactions are now covered by
> automated flickering tests that will catch any regression there:
> https://searchfox.org/mozilla-central/source/browser/base/co
> ntent/test/performance/browser_startup_flicker.js
> https://searchfox.org/mozilla-central/source/browser/base/co
> ntent/test/performance/browser_windowopen_flicker.js
>
> These tests currently contain whitelists of known bugs (blocking bug
> 1421456 <https://bugzilla.mozilla.org/show_bug.cgi?id=1421456>).
>
>
> Here is how these tests work:
>
> - as soon as the window we care about is created, we add a MozAfterPaint
> event listener to it.
>
> - for each received MozAfterPaint event, we capture a screenshot of the
> window using CanvasRenderingContext2D.drawWindow()
> <https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawWindow>
> .
>
> - remove the event listener after the window is done loading and after
> several Services.tm.idleDispatchToMainThread callbacks to ensure that the
> window has settled.
>
> - compare the pixel data of each of the captured frames to identify areas
> that have changed.
>
> - for changed areas, see if they are whitelisted, if not make the test
> fail and dump base64 encoded data urls of the before/after screenshots, so
> that the test failure can be visually debugged.
>
>
> We currently cover only the startup and window opening cases, but I expect
> us to add similar tests to more areas in the future. Each time we spend
> effort reducing flickering in some area of our UI, we should add tests for
> it to prevent regression.
>
> Feel free to ask me questions here or in Austin about how this works, or
> to suggest new areas we should cover. Thanks for reading! :-)
>
> --
> Florian Quèze
>
> _______________________________________________
> firefox-dev mailing list
> firefox-dev at mozilla.org
> https://mail.mozilla.org/listinfo/firefox-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20171205/04650d0d/attachment-0001.html>


More information about the firefox-dev mailing list