Photon Engineering Newsletter #7

Lucky you, here’s Photon update #7!

Let’s start off with a fresh new video that gives an overview of what we’re doing with the Quantum and Photon projects. If you’re not already running Nightly, but are willing to live on the cutting-edge, this would be a great time to give it a spin! Get involved to help us test out everything that’s new, and experience some of these great improvements first-hand!

 

Mozilla All-Hands

Next week, everyone at Mozilla will be gathering in San Francisco for our biannual All-Hands meeting. The Photon team will be using it as a repeat of our Toronto Work Week (as covered in Photon Update #2). So we’re going to be super-busy hacking on Photon. We’ve got even more great stuff coming up, and I can’t wait to talk about it in Photon Update #8. But… The intense focus means that I might not get that update out until the following week. I think the wait will be worth it. 🙂

 

Recent Changes

Menus/structure:

• As mentioned in the last update, the Photon menus/structure pref has been enabled by default on Nightly. We’ve had a number of issues filed by Nightly users (thanks for the bug reports!), and fortunately the were no huge surprises. As a bonus, Talos reported performance wins from the new menus.
• The library panel now has a “View Pocket List” item and looks more polished. The synced tabs view also got a small update.
• Subviews in menu panels now scroll correctly when necessary. (You can see this, for example, in the History view when you have lots of history entries.)
• Coming soon: more updates to the library panel, page action panel, and moving the bookmarks star (back) to the URL bar.

 

Animation:

• Updated arrow-panel animations are going through review this week.
• Users on macOS will notice that panel open/close animations are much smoother, as a result of a platform fix. (You’ll see more improvements soon, from the item above, as well as another platform fix to add a beautiful background blur to the panel).
• Work continues on animations for the downloads toolbar button, stop/reload button, and page loading indicator.

 

Preferences:

• The revised reorganization is actively being worked on, and is undergoing review this week.
• Search in preferences was enabled by default in Nightly.
• Searching now highlights matching menuitems with an arrow, and works inside subdialogs.

 

Visual redesign:

• Another community contribution: Oriol removed an small, unexpected line that was appearing at the top of some windows. Thanks for the patch!
• Firefox will now automatically enable its touch mode (which increases the size of various UI to make it more touch-friendly) when used in Windows 10 Tablet mode.
• The dark toolbar that previously landed for Windows 10 is now coming to macOS. (This just landed, and if it sticks will be in Friday’s Nightly build.)
  

 

Onboarding:

• The onboarding tour content has landed and been polished to match the UI spec. You can click the Fox icon in about:home to give it a try! Currently it has 5 tours for existing (non-Photon) features — Private Browsing, Add-ons, Customization, Searching, and setting your Default Browser. These are planned to ship in Firefox 56 (for users installing Firefox for the first time). Additional tours will next be implemented for Firefox 57, to introduce new Photon features to existing Firefox users.
  
• The onboarding tour now has UI to allow hiding it (so users who don’t want to go through each tour step can just make it go away).
• The Mozilla logo and onboarding icon are now shown on the correct sides for RTL languages.
• A Sync tour and tour notifications will be landing soon.

 

Performance:

• Places (our bookmarks and history storage system) is now initialized after first paint on startup. This helps make Firefox feel faster to launch, because the window will be shown sooner.
• More giant patches up for review for removal of Task.jsm calls, and fixed the last blocker to starting work on removing Promise.jsm usage.
• More awesome work on improving Talos measurements and figuring out regressions. (Particularly some issues that have been holding up animations.)
• Florian posted in firefox-dev about the browser_startup.js test, and asked everybody to have a look at the generated list to identify low hanging fruit. This test helps us find code that is loading too early, and prevents things from regressing once we fix it.

 

Thus concludes Photon update #7. As noted above, next week is going to be a little busy, so it may be a couple of weeks until the next update.

Photon Engineering Newsletter #6

More exciting progress this week! Here’s Photon update #6!

New Menus

Work on the new Photon menus has reached the point where we’re ready to turn them on by default (for Nightly). Bug 1372309 is tracking the last remaining work (mostly test fixes), and you should see this happen in tomorrow’s Nightly. Up until now you’ve needed to manually enable the “browser.photon.structure.enabled” pref to play with the new menus – you’ll no longer need to flip that pref as it will already be enabled.

The biggest change you’ll notice is that the application menu (a.k.a. the “hamburger menu”) contents look different. Instead of a grid of icons, it’s a linear list of commands. Opening the menu and entering submenus is much snappier than before. Here’s the new look on Windows 10 (left) and macOS (right):

The overflow menu (under the “>>” icon) has existed for a long time now, normally it’s only shown when the window is so narrow that we run out of space to show all the toolbar icons. You can now pin items to it permanently, as the new destination for commands you want easily accessible without taking up toolbar space. (Previously you could do this by adding items to the hamburger menu. That’s no longer customizable.)

There are also some minor related changes to Customization Mode, which now shows the overflow menu as a customization target instead of the old hamburger menu.

Recent changes

Menus/structure:

• Enabling the new menus, as mentioned above.
• The sidebar toolbar button no longer has a panel dropdown, instead it just toggles the display of the sidebar (you can change which sidebar is shown from inside the sidebar itself).
• Various smaller styling/polish fixes to the different panels and toolbar items have landed and will continue to land this week.
• WebExtension browser actions will now be pinned to the overflow panel instead of the hamburger menu (though we are aware of at least one remaining issue with this).

 

Animation:

• The Photon-themed download icon landed, this was spun out of the main download animation bug to start landing pieces as they’re ready.
• Work continues on animations for downloads toolbar button, stop/reload button, and page loading indicator. We’re working through some performance issues with the latter two — these animations are triggered during our performance test suites, and we see some impact to the measurements.
• New arrow-panel animations are underway. We’re updating the way panels and menus animate when they’re opened and closed. On macOS we’re temporarily removing the current animation entirely, while we await platform improvements that allow us to get the effect we want in a way that performs well.

 

Preferences:

• QA-sign off received for the old preferences shipping in Firefox 55 (which have not been the default on Nightly since landing the new preference reorg).
• Search followups are largely complete, and we are enabling the search feature this week.
  

 

Visual redesign:

• We got some good contributions from community member UK92! Thanks!
  • Updated two of our in-content pages (about:about and about:rights) to use the new Photon style.
  • With maximized windows on Windows 10, the window control buttons now span the entire height of the tabstrip, eliminating a small gap.
• Landing updates to the sidebar styling (header and search box)
• Updated the Synced Tabs button icon in the toolbar.
• Starting work on changing the color of the titlebar on macOS (making it darker, similar to Windows 10).

 

Onboarding:

• Lots of discussion and decisions, finalized scope and content for Firefox 56 tour.
• De-scoped automigration, and are instead moving ahead with a manual import option accessible from the new Activity Stream page.
• Simplified tour and notification logic
• Outstanding technical issues resolved and a few 56 tour contents are ready to land this week. No more blank tour overlay in Nightly!

 

Performance:

• Startup improvements:
  • Captive portal initialization has been delayed so that NSS initialization now usually happens after first paint (except when creating a new profile)
  • The sidebar browser is now created lazily when the sidebar is first opened, instead of before first paint
  • The search service is started after first paint, and the one-off-buttons are constructed when a search panel is first opened
  • We are in the process of delaying places initialization
• Assisting the animation team with understanding and reducing the impact of the new animations on Talos benchmarks
• It’s now very easy to add test coverage for ensuring a JS module, JS component, or an XPCOM service isn’t started too early during startup. See browser_startup.js.

 

Stay tuned for more updates next week!

Photon Engineering Newsletter #5

Time for a solid update #5! So far the Photon project appears to be well on track — our work is scoped to what we think is achievable for Firefox 57, and we’re generally fixing bugs at a good rate.

Search Box?

If you’ve been paying attention to any of the Photon mockups and design specs floating around, you may have noticed the conspicuous absence of the search box in the toolbar (i.e. there’s just a location field and buttons). What’s up with that?

For some time now, we’ve been working on improving searching directly from the location field. You can already search from there by simply entering your search term, see search suggestions as you type, and click the icons of other search engines to do a one-off search with them instead of your default. [The one-off search feature has been in Nightly for a while, and will start shipping in Firefox 55.] The location bar now can do everything the search box can, and more. So at this point the search box is a vestigial leftover from how browsers worked 10+ years ago, and we’d like to remove it to reclaim precious UI space. Today, no other major browser ships with both a location field and search box.

That said, we’re being careful about understanding the impact of removing the search box, since it’s been such a long-standing feature. We’re currently running a series of user studies to make sure we understand how users search, and that the unified search/location bar meets their needs. And since Mozilla works closely with our search engine partners, we also want to make sure any changes to how users search is not a surprise.

Finally, I should note that this is about removing the search box as the default for _new_ Firefox users. Photon won’t be removing the search box entirely, you’ll still be able to add it back through Customize Mode if you so desire. (Please put down your pitchforks and torches. Thank you.) We’re still discussing what to do for existing users… There’s a trade-off between proving a fresh, clean, and modern experience as part of the upgrade to Photon (especially for users who haven’t been using the search box), and removing a UI element that some people have come to expect and use.

Recent Changes

Menus/structure:

• Hamburger panel is now feature complete!
  • An exit/quit menu item was added (except on macOS, as the native menubar handles this).
  • A restyled zoom control was added.
  • One small feature-not-yet-complete: the library subview is reusing the same content as the library panel, and so won’t be complete until the library panel itself is complete.
  • A number of smaller bugs and regressions fixed.
• Initial version of the new Library panel has landed
  • It still needs a lot of work, items are missing, and the styling isn’t done. Landing this early allows us to unblock work in other areas of Photon (notably animations) that need to interact with this button.
  • We haven’t placed it into the toolbar by default yet. Until we do so, if you want to play with it you’ll need to manually add it from Customization mode.
• We’re getting ready to enable the Photon structure pref by default on Nightly, and are just fixing the last tests so that everything is green on our CI infrastructure. Soon!

Animation:

• Landed a patch that allows us to move more of our animations to the compositor and off of the main thread. Previously, this optimization was only allowed when the item’s width was narrower than the window, now it’s based on available area. (Our animations are using very wide sprite sheet “filmstrips” which required this — more about this in a future update).
• Work continues on animations for downloads toolbar button, stop/reload button, and page loading indicator. The first two have gone up for review, and unfortunately we found some issues with the plan for the downloads button which requires further work.

Preferences:

• Finalized spec for the preferences reorg version 2. The team will now begin implementation of the changes.
• The team is working on improving search highlighting in about:preferences to include sub-dialogs and fixing some highlight/tooltip glitches.
• The spec for Search behavior is also being finalized.

Visual redesign:

• One of the most obvious changes this week was the removal of the window drag space above the tabs. The tabs are now flush with the top of the window. To allow for dragging the window, we’ve increased the space to the left of the first tab.
• Fixed some bugs with the appearance of the back button, permission icons, and bookmark items.

Onboarding:

• Enabled the basic onboarding overlay on about:newtab and about:home. Now you can see a little fox icon on the top-left corner on about:newtab and about:home on Nightly! (Here’s the full spec for what will eventually be implemented. We’re working on getting the first version ready for Firefox 56.)
• Finished creating the message architecture so that the Auto-migration code can talk with Activity Stream

Performance:

• Even more tests for sync reflows, covering the Photon menu and its subview transitions.
• We now have a test checking which JS components and modules are loaded at which phase of startup, and started taking things off app-startup. These tests help ensure we don’t accidentally regress improvements to Firefox startup… We’ve already made some fixes where code that was supposed to load lazily was being loaded during startup, and these tests will catch that.

That’s all for this week!