<div dir="ltr"><div>(via <a href="https://dolske.wordpress.com/2017/07/05/photon-engineering-newsletter-8/">https://dolske.wordpress.com/2017/07/05/photon-engineering-newsletter-8/</a>)</div><div><br></div><div><p><a href="https://youtu.be/gbt-xpwTE3k?t=16">Oh boy</a>! Do I have some great updates for Newsletter <a href="https://www.youtube.com/watch?v=-uLe2VcUCJw">#8</a>! But seriously, this is a huge update…</p>
<h2>San Francisco All-Hands</h2>
<p><img class="gmail-wp-image-2380 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/06/foxbot.jpg?w=300&h=385" alt="foxbot.jpg" width="300" height="385"></p>
<p>This past week Mozilla brought together nearly 1300 employees and
contributors to San Francisco for an “All-Hands” – 4 days of intense
hacking on improving Firefox. We’re a globally-distributed organization
(and that works really well for us), but periodically bringing people
together physically is a great way to get a burst of focused
productivity, take advantage a high-bandwidth / low-latency
communication medium (talking!), and build stronger sense of community,
team-work, and excitement. There is some crazy-good stuff coming for
Firefox 57 – of which Photon is just one part.</p>
<p>The Photon team is small by comparison (about 15 engineers), but we
made some huge progress towards getting Photon implemented. Our goal is
to be “feature-complete” by August 7th, and we are solidly on track.
That should allow us to spend most of the time between then and the
Firefox 57 release (November 11th) fixing bugs, applying a high-degree
of polish, and as much general front-end performance improvements as we
can.</p>
<p> </p>
<div class="gmail-tiled-gallery gmail-type-rectangular"> <div class="gmail-gallery-row" style="width:474px;height:209px"> <div class="gmail-gallery-group gmail-images-1" style="width:319px;height:209px"> <div class="gmail-tiled-gallery-item gmail-tiled-gallery-item-large"> <a href="https://dolske.wordpress.com/2017/07/05/photon-engineering-newsletter-8/mayostage/" border="0"> <img src="https://i1.wp.com/dolske.files.wordpress.com/2017/07/mayostage.jpg?w=315&h=205&crop&ssl=1" title="mayostage" alt="mayostage" style="width: 315px; height: 205px;" width="315" height="205"><br></a></div> </div> <div class="gmail-gallery-group gmail-images-2" style="width:155px;height:209px"> <div class="gmail-tiled-gallery-item gmail-tiled-gallery-item-small"> <a href="https://dolske.wordpress.com/2017/07/05/photon-engineering-newsletter-8/photonhacking1/" border="0"> <img src="https://i0.wp.com/dolske.files.wordpress.com/2017/07/photonhacking1.jpg?w=151&h=101&crop&ssl=1" title="photonhacking1" alt="photonhacking1" style="width: 151px; height: 101px;" width="151" height="101"> </a> </div> <div class="gmail-tiled-gallery-item gmail-tiled-gallery-item-small"> <a href="https://dolske.wordpress.com/2017/07/05/photon-engineering-newsletter-8/photonhacking2/" border="0"> <img src="https://i0.wp.com/dolske.files.wordpress.com/2017/06/photonhacking2.jpg?w=151&h=100&crop&ssl=1" title="photonhacking2" alt="photonhacking2" style="width: 151px; height: 100px;" width="151" height="100"> </a> </div> </div> </div> </div>
<h2>Recent (and Upcoming) Changes</h2>
<p>In these updates I usually focus exclusively on work that has
_landed_ in Nightly. Stuff that’s real and you can play with today. This
week I’m going to include all of the work that happened at the
All-Hands, even though some of it hasn’t landed just yet. Consider it a
taste of what’s to come in the next few weeks.</p>
<p>Menus/structure:</p>
<ul><li>Built the prototype for adding the ability for the user to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1363188">pin frequently-used items from the Page Action menu</a>
into the URL bar. This work adds a context menu to items in the action
menu to control this. The prototype also added Page Action menu entries
for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1367927">Pocket</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1366041">Screenshots</a>
(and as a next step, their existing buttons in the navbar will be
removed). Eventually there will be an WebExtensions API so that Addons
can extend this menu (but that work may not make 57).<br>
<img class="gmail-size-full gmail-wp-image-2459 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/pageactionprotoi.png?w=474" alt="pageactionprotoi.png"></li><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1352120">bookmark star has moved</a>
into the URL bar. This (as with Pocket and Screenshots, mentioned
above) is part of our work to consolidate actions you perform with the
page into the (wait for it) Page Action menu.</li><li>The sidebar button is now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1364238">in the toolbar by default</a>.
This gives easy one-click access to toggle the sidebar. We’ve found a
surprising number of people use the sidebar – and it’s a great place for
addons to expose things – so Photon makes it a first-class citizen in
browser UI.</li><li>Customize Mode got a few updates. Its general style has been <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1354145">refreshed for Photon</a>, and we’ve <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1354123">removed</a>
the “grid” style around the edges and shrinking-animation when opened.
Also, the info panel that’s shown the first time a user enters
customization mode (which helps explain that you can drag’n’drop items
to move them around) has been <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1373016">replaced</a> with a Photon critter – the Dragondrop. I hope you can appreciate this delightfully terrible pun. 😉<br>
<img class="gmail-size-full gmail-wp-image-2435 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/empty-overflow-panel2x.png?w=474" alt="empty-overflow-panel@2x.png"></li><li>The Library panel will now show <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1354159">Bookmarks</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1354532">Downloads</a>. (Bookmarks are already in Nightly, Downloads was built during the week but needs code review before landing).</li><li>We also <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374694">fixed</a> a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1365705">number</a> of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1371236">random</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374603">polish</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1373972">bugs</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1354159">here</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1370083">and</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1373968">there</a>.
“Polish” bugs are changes that are not implementing new features, but
are just fixing smaller issues with new or existing features. We’ll be
seeing an increasing amount of these as we get closer to shipping, and
focus on improving polish and quality overall.)</li></ul>
<p>Animation:</p>
<ul><li>A major focus area at the all-hands was resolving the remaining <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1357093">performance regressions</a>
encountered by some of the animations. At this point it looks like
we’ve addressed almost all of them, through a combination of fixing
actual problems and updating incorrect tests.</li><li> The team is working on getting 5 animations landed. (And for
demonstration purposes, we together a build with all of them, as shown
in the video below.)
<ul><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355924">stop/reload button</a> animates when transitioning between states (i.e. a page finishes or starts loading)</li><li>The downloads button progressbar is now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1375309">functional</a>. This work also <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1376515">consolidated</a> a bunch of CSS into a single shared location, which makes development easier.</li><li>The <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1375152">Pin To Overflow</a> menu command animates the overflow menu icon, to better indicate where you can now find the pinned item.</li><li>Saving an item to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355922">Pocket</a> similarly displays an animation on the Library button, which is where you can later access those items.</li><li>Menu opening will have a different <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1352075">animation effect</a>. (Previously these menus had an obvious growing/zoomy effect, now it’s a snappy downward motion.</li></ul><br><div>Video: <a href="https://www.youtube.com/watch?v=7MiKf8Rqf5w">https://www.youtube.com/watch?v=7MiKf8Rqf5w </a><br></div>
</li></ul>
<p><span class="embed-youtube" style="text-align:center;display:block"></span></p>
<p>Preferences:</p>
<ul><li>Updated the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1370190">tracking protection section</a> in preferences. (This landed separately from the main pref reorg, which is still pending.)</li><li>The search field is now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374852">focused by default</a> when opening preferences. Just type and go!</li></ul>
<p>Visual redesign:</p>
<ul><li>Added a dropdown in Customization mode to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1350210">select between different UI density settings</a>.
(The previously added browser.uidensity preference is controlled here.)
This allows you to select a more compact Firefox UI, or an expanded
version that’s touch-friendly. This also controls the automatic usage of
the touch-friendly density when using Windows 10 Tablet Mode… We
automatically change density in Tablet Mode because it’s already
assuming / optimizing for touch usage, whereas outside of Tablet Mode we
don’t assume you want bigger UI just because you have a touch-capable
screen (e.g. for people that have the hardware but don’t make use of
it.)<br>
<img class="gmail-wp-image-2568 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/densityui.png?w=260&h=267" alt="densityui" width="260" height="267"></li><li>Chrome <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1364896">context menus now automatically get touch-optimized density</a> when triggered from a touch event (as demonstrated in the video below). Soon, the hamburger menu will also get this treatment. Video: <a href="https://www.youtube.com/watch?v=3Y5ecNeOagQ">https://www.youtube.com/watch?v=3Y5ecNeOagQ </a><br></li></ul>
<p><span class="embed-youtube" style="text-align:center;display:block"></span></p>
<ul><li>We now have platform support for detecting if Windows 10 is configured to use an <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1344917">accent color in the titlebar</a>, and to access that <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1344910">color via CSS</a>. Upcoming work will use this support to make Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1196266">actually show the accent color</a> in the titlebar.</li><li>Updated the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1375893">pinned tab highlight glow</a>; pinned tabs now have a small blue dot when their title changes (e.g. when you have new Gmail or tweets).<br>
<img class="gmail-wp-image-2600 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/pinnedglow.png?w=536&h=118" alt="pinnedglow" width="536" height="118"></li><li>Prototyped new styling for the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355328">bookmarks sidebar</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1355326">history sidebar</a>, and updated the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377011">sidebar icons</a>. Coming soon to Nightly!<br>
<img class="gmail-wp-image-2613 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/bmsidebar.png?w=215&h=253" alt="bmsidebar" width="215" height="253"></li><li>Started prototyping <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1349555">rectangular tabs</a> (no more curvy tabs!), but didn’t get far enough yet to demo.<br>
<img class="gmail-wp-image-2519 gmail-aligncenter" src="https://dolske.files.wordpress.com/2017/07/nocurves.png?w=318&h=179" alt="nocurves" width="318" height="179"></li><li>A couple <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1376109">bugfixes</a> for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1375973">unreadable text</a> in some situations.</li></ul>
<p>Onboarding:</p>
<ul><li>Reached a major milestone! At this point the <a href="https://en.wikipedia.org/wiki/Minimum_viable_product">MVP</a>
for the new-user tour in Firefox 56 is complete, and work is shifting
to the Firefox 57 what’s-new-in-Photon upgrade tour. Bugfixing and
testing will, of course, continue.</li><li>Added <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1357021">“Mark all as complete” checkbox</a>, so users can hide the tour without going through each step.</li><li>Added <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1357023">Sync</a> to the tour.</li><li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1357641">Tour notifications</a> are now on the bottom about:home and about:newtab, these give users an easy starting point into the full tour.</li><li>The new-tab page now has <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1369287">compact page thumbnails</a>.
We changed the size so new users can see more of their familiar
(imported) top-sites, to make space for tour notifications, and as a
simple transition toward the new page layout <a href="https://wiki.mozilla.org/Firefox/Activity_Stream">Activity Stream</a> uses.<br>
<img class="gmail-alignnone gmail-wp-image-2639" src="https://dolske.files.wordpress.com/2017/07/tourbar.png?w=639&h=441" alt="tourbar" width="639" height="441"></li></ul>
<p>Performance:</p>
<ul><li>Assisted the Animations team with performance regressions.</li><li>Completed an audit of browser startup/init code and filed bugs.</li><li>Finished removal of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1374282">Task.jsm</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1368456">Promise.jsm</a>, in favor of modern and faster ES6 promises and ES7 async/await.</li><li>Removed a synchronous layout flush for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1368208">scrollboxes</a>.</li></ul>
<p> </p>
<p>Phew! So much exciting stuff happening in Photon it’s hard to keep track of it all!</p></div></div>