<div dir="ltr"><div>(via <a href="https://dolske.wordpress.com/2017/05/18/photon-engineering-newsletter-1/">https://dolske.wordpress.com/2017/05/18/photon-engineering-newsletter-1/</a>)</div><div><br></div><div><p>Well, hello there. Let’s talk about the state of Photon, the upcoming Firefox UI refresh! You’ve likely seen <a href="https://ehsanakhgari.org/tag/quantumflow">Ehsan’s weekly Quantum Flow updates</a>.
 They’re a great summary of the Quantum Flow work, so I’m just going to 
copy the format for Photon too. In this update I’ll briefly cover some 
of the notable work that’s happened up through the beginning of May. I 
hope to do future updates on a weekly basis.</p>
<h2>Our story so far</h2>
<p>Up until recently, the Photon work hasn’t been very user-visible. 
It’s been lots of planning, discussion, research, prototypes, and 
foundational work. But now we’re at the point where we’re getting into 
full-speed implementation, and you’ll start to see things changing.</p>
<p>Photon is landing incrementally between now and Firefox 57. It’s enabled by default on <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Nightly</a>,
 so you won’t need to enable any special settings. (Some pieces may be 
temporarily disabled-by-default until we get them up to a Nightly level 
of quality, but we’ll enable them when they’re ready for testing.) This 
allows us to get as much testing as possible, even in versions that 
ultimately won’t ship with Photon. But it does mean that Nightly users 
will only gradually see Photon changes arriving, instead of a big splash
 with everything arriving at once.</p>
<p>For Photon work that lands on Nightly-55 or Nightly-56, we’ll be 
disabling almost all Photon-specific changes once those versions are out
 of Nightly. In other words, Beta-55 and Beta-56 (and of course the 
final release versions, Firefox-55 and Firefox-56). That’s not where 
we’re actively developing or fixing bugs – so if you want to try out 
Photon as it’s being built, you should stick with Nightly. Users on Beta
 or Release won’t see Photon until 57 starts to ship on those channels 
later this year.</p>
<p>The Photon work is split into 6 main areas (which is also how the teams implementing it are organized). These are, briefly:</p>
<p>1. Menus and structure – Replaces the existing application menu 
(“Hamburger button”) with a simplified linear menu, adds a “page action”
 menu, changes the bookmarks split-button to be a more general-purpose 
“library menu”, updates sidebars, and more.</p>
<p>2. Animation – Adds animation to toolbar button actions, and improves
 animations/transitions of other UI elements (like tabs and menus).</p>
<p>3. Preferences – Reorganizes the Firefox preferences UI to improve organization and adds the ability to search.</p>
<p>4. Visual redesign – This is a collection of other visual changes for
 Photon. Updating icons, changing toolbar buttons, adapting UI size when
 using touchscreens, and many other general UI refinements.</p>
<p>5. Onboarding – An important part of the Photon experience is helping
 new users understand what’s great about Firefox, and showing existing 
users what’s new and different in 57.</p>
<p>6. Performance – Performance is a key piece throughout Photon, but 
the Performance team is helping us to identify what areas of Firefox 
have issues. Some of this work overlaps with Quantum Flow, other work is
 improve specific areas of Firefox UI jank.</p>
<h2>Recent Changes</h2>
<p>These updates are going to focus more on the work that’s landing and 
less on the process that got it there. To start getting caught up, 
here’s a summary of what’s happened so far in each of the project areas 
though early May…</p>
<p>Menus/structure: Work is underway to implement the new menus. It’s 
currently behind a pref until we have enough implemented to turn them on
 without making Nightly awkward to use. In <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355331">bug 1355331</a>
 we briefly moved the sidebar to the right side of the window instead of
 the left. But we’ve since decided that we’re only going to provide a 
preference to allow putting it on the right, and it will remain on the 
left by default.</p>
<p>Animation: In <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1352069">bug 1352069</a> we consolidated some existing preferences into a single new <span id="gmail-summary_alias_container"><span id="gmail-short_desc_nonedit_display">toolkit.cosmeticAnimations.enabled</span></span> preference, to make it easy to disable non-essential animations for performance or accessibility reasons. Bugs <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1345315">1345315</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1356655">1356655</a>
 reduced jank in the tab opening/closing animations. The UX team is 
finalizing the new animations that will be used in Photon, and the 
engineering team has build prototypes for how to implement them in a way
 that performs well.</p>
<p>Preferences: Earlier in the year, we worked with a group of students 
at Michigan State University to reorganize Firefox’s preferences and add
 a search function (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1324168">bug 1324168</a>). We’re now completing some final work, preparing for a second revision, and adding some new UI for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1354473">performance settings</a>.
 While this is now considered part of Photon, it was originally 
scheduled to land in Firefox 55 or 56, and so will ship before the rest 
of Photon.</p>
<p>Visual redesign:  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1347543">Bug 1347543</a>
 landed a major change to the icons in Firefox’s UI. Previously the 
icons were simple PNG bitmaps, with different versions for OS variations
 and display scaling factors. Now they’re a vector format (SVG), 
allowing a single source file to be be rendered within Firefox at 
different sizes or with different <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1058040">colors</a>.
 You won’t notice this change, because we’re currently using SVG 
versions of the current pre-Photon icons. We’ll switch to the final <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355455">Photon icons</a> later, for Firefox 57. Another big foundational piece of work landed in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1352364">bug 1352364</a>, which refactored our toolbar button CSS so that we can easily update it for Photon.</p>
<p>Onboarding: The onboarding work got started later than other parts of
 Photon. So while some prototyping has started, most of the work up to 
May was spent finalizing the scope and design of project.</p>
<p>Performance: As <a href="https://ehsanakhgari.org/blog/2017-05-05/quantum-flow-engineering-newsletter-8">noted</a>
 in Ehsan’s Quantum updates, the Photon performance work has already 
resulted in a significant improvement to Firefox startup time. Other 
notable fixes have made <a href="https://mikeconley.ca/blog/2017/05/01/making-tabs-close-faster-in-multi-process-firefox/">closing tabs faster</a>, and work to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977177">improve how favicons</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1356220">are stored</a> improved performance on our Tp5 page-load benchmark by 30%! <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1353563">Other</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1312999">fixes</a>
 have reduced awesomebar jank. While a number of performance bugs have 
been fixed (of which these are just a subset), most of the focus so far 
has been on profiling Firefox to identify lots of other things to fix. 
And it’s also worth noting the great <a href="https://developer.mozilla.org/en-US/Firefox/Performance_best_practices_for_Firefox_fe_engineers">Performance Best Practices</a> guide Mike Conley helped put together, as well as his <a href="https://mikeconley.github.io/ohnoreflow/">Oh No! Reflow! add-on</a>, which is a useful tool for finding synchronous reflows in Firefox UI (which cause jank).</p>
<p>That’s it for now! The next couple of these Photon updates will catch up with what’s currently underway.</p><p>Justin<br></p></div></div>