Oh boy! Do I have some great updates for Newsletter #8! But seriously, this is a huge update…

San Francisco All-Hands

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.

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 improving as much general front-end performance as we can.

Recent (and Upcoming) Changes

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.

Menus/structure:

Animation:

A major focus area at the all-hands was resolving the remaining performance regressions 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.

The team is working on getting 5 animations landed. (And for demonstration purposes, we put together a build with all of them, as shown in the video below.) The stop/reload button animates when transitioning between states (i.e. a page finishes or starts loading) The downloads button progressbar is now functional. This work also consolidated a bunch of CSS into a single shared location, which makes development easier. The Pin To Overflow menu command animates the overflow menu icon, to better indicate where you can now find the pinned item. Saving an item to Pocket similarly displays an animation on the Library button, which is where you can later access those items. Menu opening will have a different animation effect. (Previously these menus had an obvious growing/zoomy effect, now it’s a snappy downward motion.)



Preferences:

Updated the tracking protection section in preferences. (This landed separately from the main pref reorg, which is still pending.)

The search field is now focused by default when opening preferences. Just type and go!

Visual redesign:

Added a dropdown in Customization mode to select between different UI density settings. (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.)



Chrome context menus now automatically get touch-optimized density when triggered from a touch event (as demonstrated in the video below). Soon, the hamburger menu will also get this treatment.

Onboarding:

Reached a major milestone! At this point the MVP 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.

Added “Mark all as complete” checkbox, so users can hide the tour without going through each step.

Added Sync to the tour.

Tour notifications are now on the bottom about:home and about:newtab, these give users an easy starting point into the full tour.

The new-tab page now has compact page thumbnails. 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 Activity Stream uses.



Performance:

Assisted the Animations team with performance regressions.

Completed an audit of browser startup/init code and filed bugs.

Finished removal of Task.jsm and Promise.jsm, in favor of modern and faster ES6 promises and ES7 async/await.

Removed a synchronous layout flush for scrollboxes.

Phew! So much exciting stuff happening in Photon it’s hard to keep track of it all!