<div dir="ltr"><div>(via <a href="https://dolske.wordpress.com/2017/07/24/photon-engineering-newsletter-9/">https://dolske.wordpress.com/2017/07/24/photon-engineering-newsletter-9/</a>)</div><div><br></div><div><p>Well, here we go again with a big update for Newsletter <a href="https://www.youtube.com/watch?v=TINfzxSnnIE">#9</a>!
 [Since the last update, I took a vacation and ever since have been 
getting caught up. So this update is terribly overdue. Sorry about 
that!]</p>
<h2>Animations</h2>
<p>Animations for toolbar icons are finally landing! Yaaaaay! 
:kermithands: The stop/reload and pin-to-overflow animations are in 
Nightly, and the Pocket, bookmarks, and downloads icons are next. I’d 
like to talk a little about the way these animations are implemented. 
The effect is simple, but there’s a lot of work behind the scenes.</p>
<p>As is often the case in engineering, we had a number of requirements 
that needed to be satisfied. The most important was performance – we’re 
making Firefox 57 blazing fast, and it wouldn’t do to have animations 
hurting that work. We worked closely with our Graphics and Platform 
teams to develop a technique (more on that in a second) that was 
efficient, and specifically could run entirely within the <a href="https://hacks.mozilla.org/2017/04/firefox-53-quantum-compositor-compact-themes-css-masks-and-more/">compositor process</a>.
 This helps ensure the animation can smoothly run at 60fps without 
impacting (or being impacted by) all the other stuff running in the 
browser. The other big requirement was around UX. We wanted to minimize 
the platform technical constraints for our visual designers, so that 
their ideas were not bound by platform limitations. [For example, we had
 an <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=759252">old patch</a> to convert the <a href="http://searchfox.org/mozilla-central/source/toolkit/themes/shared/icons/loading@2x.png">page-loading throbber</a> from an <a href="https://en.wikipedia.org/wiki/APNG">APNG</a>
 to a static image animated with a CSS transform (rotation). That’s 
nice, but then you’re limited to effects possible in pure CSS.] We also 
needed to use SVG in the animation, since the rest of Firefox’s icons 
are SVG now. This gives the best result when scaling to different 
display DPI settings, and allows us to dynamically adjust the icon 
colors based on system style.</p>
<p>The technique we’re using for Photon is based around an SVG 
“filmstrip” – each frame is pre-drawn separately within an SVG image. We
 then use CSS to crop it to a specific frame, and a CSS Animation to 
move the crop box for each frame. Since it’s all declarative, Gecko and 
the compositor process can handle the animation very efficiently.</p>
<p><img class="gmail-alignnone gmail-size-full gmail-wp-image-2860" src="https://dolske.files.wordpress.com/2017/07/filmstrip.png?w=474" alt="filmstrip"></p>
<p>A demo is worth 10,000 words, so check out <a href="http://msuja.ws/svg.html">Jared’s SVG Filmstrip Demo</a>
 to see how this works in detail. (Since it’s all based on web 
technologies, you can view-source and see the same technique running in 
your browser that we use in chrome.)</p>
<p>Of course, nothing is ever simple! There’s a lot of work that goes 
into getting these assets ready. First, our visual designers prototype 
an animation in Adobe After Effects. It then goes through a process of 
design iteration and user testing. (Is is distracting? Does it 
communicate what we want? Too fast? Too slow?) The animation is then 
exported to an SVG file, but the markup from Adobe is usually not very 
good. So we use <a href="https://github.com/svg/svgo">SVGO</a> to optimize it, often further hand-tune the SVGO output, and finally tweak it to make use of the dynamic <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1058040">context-fill</a> color specified from the browser’s CSS.</p>
<p>Phew! But thankfully, as a user, you can just enjoy the finished 
result. We’d like to refine the creation process, but overall it’s a 
pretty powerful and flexible technique that we’ll be using more and 
more.</p>
<h2>Recent Changes</h2>
<p>Menus/structure:</p>
<ul><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1369729">Lots</a> of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1370967">minor</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1373969">bugfixes</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1376097">to</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1376484">various</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377139">aspects</a> of the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377165">earlier</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1378790">changes</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1378794">we made</a>. Thanks to contributors Jeongkyu Kim (bug 1376484) and Adolfo Jayme (bug 1376097) for their work!</li><li>Flexible spacers are now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1366813">available in customize mode</a>. This is the first step towards having the location field be centered in the navbar, as part of the Photon design.</li><li>Work on the Page Action panel is <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374477">progressing</a>. We gave a prototype sneak-peek at the All-Hands (see Photon Newsletter #8), but it’s not quite ready to land yet.</li><li>Made the Library button work correctly <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1380084">in the overflow panel</a>.</li><li>Removed the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1376098">Page Setup</a> item from the hamburger menu, as it was a bit confusing and the functionality can be accessed elsewhere.</li></ul>
<p>Animation:</p>
<ul><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1375152">Pin to Overflow animation</a> landed, try it now! Right-click on a toolbar button and use “Pin to Overflow Menu” to see the awesome animation!<br>
<img class="gmail-alignnone gmail-size-full gmail-wp-image-2806 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/pintooverflow.gif?w=908" alt="pintooverflow"></li><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355924">Stop/Reload animation</a>
 also landed! We’ve got great feedback about speeding it up and making 
it less distracting, will be working on that soon. You may have noticed 
that, while animating, the icon looks thinner than the normal (static) 
icon… We’ll be updating all the toolbar icons to this new Photon style 
in a few weeks, which will make the transition between states feel 
smoother.<br>
<img class="gmail-alignnone gmail-size-full gmail-wp-image-2807" src="https://dolske.files.wordpress.com/2017/07/stopreload.gif?w=908" alt="stopreload"></li><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355922">Save to Pocket animation</a> is going through review, once that’s landed we’ll start implementation of the new bookmarking animation.</li><li>The new <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1352075">arrow-panel animations</a>
 landed… but bounced due to test failures. We’re working around the 
failures by disabling the animation in tests, which means we bumped up 
the priority of having the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1380065">panel animations be controlled by the toolkit.cosmeticAnimations.enabled preference</a>. Once this is all hooked up and tests are happy, the animation will reland.</li></ul>
<p>Preferences:</p>
<ul><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1365133">prefs reorg v2.0</a> has now landed! (Check out the <a href="https://mozilla.invisionapp.com/share/P4ACQT1E3#/screens/217167547">design specs</a>
 for the details of exactly what changed.) This had a rough time getting
 landed, as it encountered a string of tricky intermittent test failures
 and memory leaks. Kudos to the team for working through it all and 
getting it landed!</li><li>Improved display on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1363960">small screens</a> by fixing some wrapping issues that were causing scrolling.</li></ul>
<p>Visual redesign:</p>
<ul><li>On Windows 10, we will now use the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1196266">system accent color in the title bar</a>, when you’ve enabled this in your Windows settings.
<ul><li>You’ll first need to open the following OS dialog, by right-clicking
 on your Desktop, selecting Personalize, and then selecting the Colors 
section. Scroll down to “Show accent color on the following surfaces” 
and enable the “Title bars” checkbox.<br>
<img class="gmail-wp-image-2791 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/colorsui.png?w=236&h=233" alt="colorsUI" width="236" height="233"></li><li>You can now select different colors here, and have them show up in 
Firefox. (Or use the setting at the top of that dialog to have Windows 
automatically pick a color that complements your desktop background)<br>
<img class="gmail-wp-image-2794 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/colors.gif?w=868&h=506" alt="colors" width="579" height="337"></li></ul>
</li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377794">Styling</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1381117">followups</a> to the identity block (the leftmost button in the URL bar) when hovering/clicking it.</li><li>The UI Density control is now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1379123">ordered by logical size</a>, and we fixed an issue that made the text labels <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1379122">unreadable</a> on Linux.</li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1380268">Search textbox widget styling</a> has been updated to be common across the browser.</li><li>Slightly increased the size of the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1380966">tab overflow indicator</a>.</li><li>A number of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1379268">followup</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1379269">bugfixes</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1379266">for</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1379173">the title bar</a> on Windows 10.</li></ul>
<p>Onboarding:</p>
<ul><li>Turned <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1379860">off</a>
 the compact newtab tiles. Originally we thought enabling the new style 
would be a good transition to the Activity Stream style, but on further 
reflection it felt too much like making 2 differing changes. So Firefox 
release users will continue to see the existing (old) newtab page in 
Firefox 56, until Activity Stream fully replaces it in 57. (Activity 
Stream is now enabled on Nightly, so all the changes here make it a 
little confusing to explain, sorry!)</li><li>The onboarding overlay will be <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1358970">hidden when browser is too narrow</a>, as the current design/implementation requires a minimum width or else it overflows the window.</li><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1372067">tour notifications</a>
 shown at the bottom of a new tabs and about:home are now suppressed for
 the first few minutes of using the browser, and will rotate to a 
different suggestion after a certain amount of time or number of 
impressions. Also, the slide-up animation was <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377433">removed</a> to make it less distracting.</li><li>The tour step to set your default browser will <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374717">now show an alternative message</a> if you’ve already made Firefox your default browser.</li><li>Our UITour support can now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1371542">open the awesomebar with a search term pre-filled</a>, which will be used for Firefox 57 Address Bar tour to demonstrate searching from the awesomebar.</li></ul>
<p>Performance:</p>
<ul><li>We’ll now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348275">speculatively connect to autocompleted hostnames</a> in the awesomebar, which will make pages load faster.</li><li>Addressed a mysterious <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1372261">performance test regression</a> that ended up being caused by clock skew across processes.</li><li>Improved our performance testing infrastructure to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374333">allow gathering profiler data</a> from tests. This is really big for helping to understand regressions and improve things that are slow.</li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1380011">browser_startup.js is now more reliable</a>
 and the blacklists more scripts. Tests like this help ensure that the 
performance improvements we make don’t accidentally get regressed down 
the road. (We’re not just making Firefox faster, we’re ensuring it stays
 that way!)</li><li>Deferred <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355492">yet more things</a> from executing right at startup.</li></ul>
<p> </p>
<p>That’s all (!) for this update.</p></div><br></div>