Photon Engineering Newsletter #4

Welcome to Photon update #4! [Yes, another update this week. I’ve caught up with the backlog, so these updates should now reflect recent work over the last 7-10 days.]

Let’s first talk about a couple of projects that overlap with Photon and have led to some questions about how things fit together.

Quantum Flow and Photon

Quantum Flow is a project to find and prioritize fixing performance issues across the browser. We’ve found and/or fixed hundreds of bugs so far, tagged “[qf:p1]” in Bugzilla. Photon is a project to refresh Firefox’s UI, which also has a major performance component. Photon also has a big bug tree of front-end performance issues found and/or fixed.

So, hey, are these separate projects? Are we duplicating effort? The answer is “no” to both.

Quantum Flow started off with an emphasis on platform bugs, since web content performance is, y’know, a pretty important consideration for a web browser. The Photon project got rolling well after Quantum Flow had begun, and is simply the front-end complement to Quantum Flow’s performance investigations. The two projects are basically just different views into the same underlying work, and are coordinating very closely.

The Photon performance work is a little more structured than Quantum Flow as a whole, though. We’ve clustered the front-end performance bugs into about 10 areas of specific types of bugs or UX interactions. These are not the only areas of front-end performance, but are the ones  we want to focus on for around the Firefox 57 timeframe.

Photon Mobile

The main focus of Quantum and Photon is Desktop Firefox. However, the mobile team will be doing a visual refresh of Firefox on iOS and Android to fit in with the new Photon design. They’ll be updating iconography and colors, as well as making the page loading indicators, menus, toolbars, and tab tray more consistent across iOS and Android. It’s also worth noting that Firefox on Android will still benefit from some of the Quantum improvements, since it’s also built on top of Gecko (on iOS we use WebKit, due to Apple’s platform restrictions).

Recent Changes

Here’s what’s happened in Photon this week.

Menus/structure:

• Page action menu is taking shape – now has “Send to device” and bookmarking functionality. Pocket functionality is next on the list.
• Long overdue maintenance and performance improvement work on panels, panelmultiviews and their transitions is ongoing, getting better every day.
• Customization context menus and customize mode improvements have landed – customize mode is now more usable when the photon pref is toggled. We’re getting closer to toggling that pref on nightly.
• Sidebar switcher improvements have landed. You can now move the sidebar to the left or right side, WebExtension sidebars are now listed, and some styling improvements have been made. When the sidebar button has also been updated this part of the project will be nearly done.
• Initial patches for the new Library panel are awaiting review.

 

Animation:

• Work continues on animations for downloads toolbar button, stop/reload button, and page loading indicator – but these haven’t landed yet.
• Looked into SVG spritesheet production+optimization with SVGO plugins. This allows us to both to cleanup the SVG markup and optimize out some of the poor SVG generated by graphics editors.

Preferences:

• We’ve decided to hold back the preferences reorg until Firefox 56. As previously noted, we’re planning on making some further revisions to the preferences reorg that has already landed in Nightly. They’re not large in scope, but 55 goes to Beta in just a few weeks (June 12th), and we want to make sure we get things right before shipping it to Beta or Release.
• Updated the strings in the new performance page, added a search icon to the search field, and fixed a number of other small bugs.

Visual redesign:

• The title bar is now dark by default on Windows 10. It’s a pretty striking look, and we think you’ll like it. A similar change for OS X is coming.
  
  The dark purple has led to at least one interesting reaction. 😉
  
• The arrow in the back button got a bit smaller. This makes it consistent with the forward arrow – which is especially important for use in Compact Mode, where both are styled identically (i.e. no circle around the back button).
• Windows 7 no longer has a custom toolbar background color. It was bluish, and is now just a normal grey.
• Started to remove the “compact” from the “compact light/dark” themes that shipped in Firefox 53. Wait, wait. Hold your fury! With Photon, “compact” will simply be a mode independent of any particular theme. You’ll still be able to have a compact-dark theme. But can also have the default theme be compact, or have a non-compact dark theme. Or use a 3rd party theme in compact mode.
• Removed dropdown markers for bookmark folders and toolbar buttons.

Onboarding:

• Coordinating with the Activity Stream project to finalize automigration UI. Also discussing impact to the onboarding tour, as Activity Stream will only be doing a limited rollout (5% of users) in Firefox 56. Adapting the tour to the current (pre-Activity Stream) about:home and New Tab page introduces some complications and extra work.
• Completed a User Research study to better understand why users download Firefox and what their expectations are.

 

Performance:

• Even more sync reflow tests are being written, as well as a test to list files loaded early during startup. These help ensure we don’t regress the fantastic performance improvements that have been made so far.
• We got some nice contributions, especially a couple fixes from Dão for sync reflows in tab interactions.
• The last thing causing NSS initialization before first paint is captive portal detection, and should be fixed soon.
• Felipe Gomes is joining the Photon Performance team, and will focus initially on jank caused by code running off of timers. He’ll have an intern starting soon who we expect will start by fixing some main thread IO bugs. Also, the rest of the Photon team will be starting to use some of their time to begin working on other performance bugs.

 

End of transmission.

Photon Engineering Newsletter #3

Three! Time for update number three! Ah-ah-ah…

Let’s get straight to it.

Recent Changes

Menus/structure:

• Work on the new application menu is nearing completion. Edit controls and Firefox Account status have been added, along with keyboard navigation. The “exit” and “zoom” controls are the last remaining features to implement.
• The new overflow menu panel is done, except for polish and bug fixes.
• The above are still behind the browser.photon.structure.enabled while we finish initial development, but we expect to turn them on by default (in Nightly) in the next couple of weeks.
• The new sidebar switcher has landed. You can change what’s displayed in the sidebar (bookmarks, history, synced tabs) from at control at the top of the sidebar itself.
• Work on the new Library button is starting.

Animation:

•  Work continues on animations for downloads toolbar button, stop/reload button, and page loading indicator – but these haven’t landed yet.

Preferences:

•  Searching within preferences is taking shape on Nightly! It now comes with the right highlight color, and tooltips for sub-dialog search results.
• User testing of the updated reorg is under way.

Visual redesign:

• Toolbar changes included new toolbar button hover and active background styles, increased vertical padding, and a new back button design. Work on toolbar button and location bar style is nearly complete.
• CSS changes for compact and touch modes has landed (but needs more plumbing before it’s activated).
• Lots of small regression fixes.
• History sidebar style changes being worked on.

Onboarding:

• The skeleton of the onboarding overlay system add-on is under review. This will initially be used to introduce new Firefox users to some of the great features of Firefox they might not otherwise know about. Later, we’ll be using this same framework to help introduce existing Firefox users to the changes coming in Firefox 57. Here’s a short GIF from the prototype showing what the experience is like, starting from a badge on the new-tab page:
  
• Other improvements to the first-run experience are planned to ship in Firefox 55: a better download page, updated stub installer, removing the default-browser prompt, and a less intrusive data-privacy notice. We want to help new users start using Firefox without annoyances or hassle.

Performance:

• More rigorous reflow tests have landed for window opening, tab opening and tab closing. More tests coming up for windows and tabs, and the AwesomeBar.
• Mike Conley started his first The Joy of Profiling episode. (And if you’re interested in profiling, don’t miss Ehsan’s talk on Gecko and the Native Profiler!)
• A reduction of main thread IO during early startup, and yet more startup improvements.
• Upcoming work to delay NSS initialization until after first-paint.

 

That’s it for now. More next time!

Photon Engineering Newsletter #2

That’s right! Time for another Photon Engineering Newsletter! (As I gradually catch up with real-time, this update covers through about May 16th).

May got off to a busy start for the Photon team. As I mentioned in last week’s update, the team has largely shifted from the planning to implementation, so visible changes are starting to come quickly.

Work Week

A particularly big event was the Photon team gathering in Mozilla’s Toronto office for a work week. About 50 people from Engineering, UX, User Research, and Program Management gathered, from all over the world, with a focus on building Photon. Mozilla operates really well with distributed/remote teams, but periodically getting together to do things face-to-face is super useful to work through issues more quickly.

It was really terrific to see so many people coming together to hack on Photon. We got a lot done (more on that below), saw some great demos, and the energy was high. And of course, no workweek is complete without UX creating some fun posters:

One important milestone reached during the week was setting the initial scope for what’s going to be included in Photon (or, more bluntly, what’s NOT going to be part of Photon when it ships in Firefox 57). We’re still refining estimates, but it looks like all the major worked planned for Photon can be accomplished. Most things placed in the “reserve backlog” (meaning we’ll do it if there’s extra time left, but we’re not committing to do them) are minor or nice-to-have things.

This is probably a good spot to talk a little more about our schedule. Firefox 57 is the release that Quantum and Photon are targeting. It’s scheduled to ship on November 14th, but there are important milestones before then… September 22nd is when 57 enters Beta, after that point it’s increasingly hard to make changes (because we don’t want to destabilize Firefox right before it ships). August 7th is when Nightly becomes version 57. This is also our target date to be complete with “major work” for Photon. This might seem a little surprising, but it’s due to the recent process change that removed Aurora. Under the old release schedule, August 7th is when Nightly-57 uplifted to Aurora (beginning ~12 weeks of stabilization before release). We want to keep the same amount of stabilization time (for a project as big as Photon there is _always_ fallout and followup work), so we kept the same calendar date for Photon’s target. This doesn’t mean we’ll be “done” on August 7th, just that the focus will be shifting from implementing features to fixing bugs, improving quality, and final polish.

And now for the part you’ve all been waiting for, the recent changes!

Recent Changes

Menus/structure:

• The page action menu (aka the “…” button at the end of the URL bar) got the first menu items added to it, Copy URL and Email Link. More coming, as this becomes the standard place for “actions you can perform with this page” items.
  
• The new hamburger menu is coming along, although still disabled by default (via the browser.photon.structure.enabled pref). Items for character encoding, work offline, and the devtools submenu have been added to it.
• The new overflow menu (also disabled by default, same pref) is nearing completion with 2/3 of the bugs fixed. This menu is now shown in customize mode (instead of the old hamburger menu); so instead of only showing icons that couldn’t fit in the navbar (e.g. because you made your window too narrow), it’s the new place you can customize with buttons you want to be easily accessible without always taking up navbar space.

Animation:

• When rearranging tabs in the tabstrip, a snappier animation rate is now used.
• Work continues on animations for downloads toolbar button, stop/reload button, and page loading indicator – but these haven’t landed yet.

Preferences:

• The “Updates” section of preferences now shows the current Firefox version.
• Good progress at the workweek on fixing the first set of bugs needed to enable searching within preferences.
• UX is working on some further changes to the reorganization that we believe will improve it.

Visual redesign:

• The new styling for the location and search bars landed.
• The stop/reload button has been removed from the end (inside) of the location bar, and is now a normal toolbar button to the left of the location bar.
• The back/forward buttons have been detached from the location bar.
• URL that are longer than the location box can display now fade out at the end.
• Minor update to the about:privatebrowsing page (shown when opening a new private window).
• Upcoming work on compact/touch modes for the toolbar and more toolbar button style changes.

Onboarding:

• Running Funnelcake tests for the new tour notification.
• Built a prototype of the new tab page tour overlay at the workweek.
• Will be adding new automigration UI to the Activity Stream new tab page. Users trying Firefox for the first time will no longer immediately see the old data migration wizard (which makes for a pretty poor first impression). Instead, Firefox will automatically import from your previous browser, so you launch straight into Firefox and can see your data. There’s also a clear message indicating what happened, and giving you the choice to keep (or not) the data, or try importing from a different browser. This screencast shows the general flow:
  

Performance:

• Florian landed a massive series of patches (assisted by an automated code-rewriting tool) that switches use of Task.jsm/yield to ES7 async/await. The native ES7 code is more efficient, and we’ve often seen the older Task.jsm usage show in the profiler. This also helps with modernizing Firefox’s front end, which extensively uses JavaScript.
• The animation shown when opening a window is now suppressed for the first window to be opened.
• Tab navigation and restoring now cause less visual noise in the tab title, by skipping the display of unnecessary text (e.g. “Loading” and “New Tab”).
• A few things have been moved off the startup path, so that Firefox launches faster.
• Removed some synchronous reflows when adding and removing tabs and when interacting with the AwesomeBar.
• Working on adding tests to detect synchronous reflows, so that we can ensure they don’t sneak back in after we remove them.

 

This concludes update #2.

Photon Engineering Newsletter #1

Well, hello there. Let’s talk about the state of Photon, the upcoming Firefox UI refresh! You’ve likely seen Ehsan’s weekly Quantum Flow updates. 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.

Our story so far

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.

Photon is landing incrementally between now and Firefox 57. It’s enabled by default on Nightly, 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.

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.

The Photon work is split into 6 main areas (which is also how the teams implementing it are organized). These are, briefly:

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.

2. Animation – Adds animation to toolbar button actions, and improves animations/transitions of other UI elements (like tabs and menus).

3. Preferences – Reorganizes the Firefox preferences UI to improve organization and adds the ability to search.

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.

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.

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.

Recent Changes

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…

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 bug 1355331 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.

Animation: In bug 1352069 we consolidated some existing preferences into a single new toolkit.cosmeticAnimations.enabled preference, to make it easy to disable non-essential animations for performance or accessibility reasons. Bugs 1345315 and 1356655 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.

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 (bug 1324168). We’re now completing some final work, preparing for a second revision, and adding some new UI for performance settings. 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.

Visual redesign:  Bug 1347543 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 colors. 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 Photon icons later, for Firefox 57. Another big foundational piece of work landed in bug 1352364, which refactored our toolbar button CSS so that we can easily update it for Photon.

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.

Performance: As noted 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 closing tabs faster, and work to improve how favicons are stored improved performance on our Tp5 page-load benchmark by 30%! Other fixes 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 Performance Best Practices guide Mike Conley helped put together, as well as his Oh No! Reflow! add-on, which is a useful tool for finding synchronous reflows in Firefox UI (which cause jank).

That’s it for now! The next couple of these Photon updates will catch up with what’s currently underway.