<div dir="ltr"><div>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.</div><div><br></div><div>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).</div><div><br></div><div>Cheers,</div><div>Jared<br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Tue, Dec 5, 2017 at 11:11 AM, Florian Quèze <span dir="ltr"><<a href="mailto:florian@queze.net" target="_blank">florian@queze.net</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">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.<br><br>To identify bugs, we <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1372518#c0" target="_blank">looked frame by frame at video recordings</a>.
 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.<br><br>I'm happy to announce that these two 
interactions are now covered by automated flickering tests that will 
catch any regression there:<br><a href="https://searchfox.org/mozilla-central/source/browser/base/content/test/performance/browser_startup_flicker.js" target="_blank">https://searchfox.org/mozilla-<wbr>central/source/browser/base/co<wbr>ntent/test/performance/browser<wbr>_startup_flicker.js</a><br><a href="https://searchfox.org/mozilla-central/source/browser/base/content/test/performance/browser_windowopen_flicker.js" target="_blank">https://searchfox.org/mozilla-<wbr>central/source/browser/base/co<wbr>ntent/test/performance/browser<wbr>_windowopen_flicker.js</a><br><br>These tests currently contain whitelists of known bugs (blocking <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1421456" target="_blank">bug 1421456</a>).<br><div><br></div><div><br></div>Here is how these tests work:<br><br>- as soon as the window we care about is created, we add a MozAfterPaint event listener to it.<br><br>- for each received MozAfterPaint event, we capture a screenshot of the window using <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawWindow" target="_blank">CanvasRenderingContext2D.drawW<wbr>indow()</a>.<br><br>- remove the event listener after the window is done loading and after several Services.tm.idleDispatchToMain<wbr>Thread callbacks to ensure that the window has settled.<br><br>- compare the pixel data of each of the captured frames to identify areas that have changed.<br><br>-
 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.<br><br><br>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.<br><br>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! :-)<span class="HOEnZb"><font color="#888888"><br clear="all"><br>-- <br><div class="m_6952179253835161023gmail_signature">Florian Quèze</div>
</font></span></div>
<br>______________________________<wbr>_________________<br>
firefox-dev mailing list<br>
<a href="mailto:firefox-dev@mozilla.org">firefox-dev@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/firefox-dev" rel="noreferrer" target="_blank">https://mail.mozilla.org/<wbr>listinfo/firefox-dev</a><br>
<br></blockquote></div><br></div>