Photon Engineering Newsletter #9

Well, here we go again with a big update for Newsletter #9! [Since the last update, I took a vacation and ever since have been getting caught up. So this update is terribly overdue. Sorry about that!]

Animations

Animations for toolbar icons are finally landing! Yaaaaay! :kermithands: The stop/reload and pin-to-overflow animations are in Nightly, and the Pocket, bookmarks, and downloads icons are next. I’d like to talk a little about the way these animations are implemented. The effect is simple, but there’s a lot of work behind the scenes.

As is often the case in engineering, we had a number of requirements that needed to be satisfied. The most important was performance – we’re making Firefox 57 blazing fast, and it wouldn’t do to have animations hurting that work. We worked closely with our Graphics and Platform teams to develop a technique (more on that in a second) that was efficient, and specifically could run entirely within the compositor process. This helps ensure the animation can smoothly run at 60fps without impacting (or being impacted by) all the other stuff running in the browser. The other big requirement was around UX. We wanted to minimize the platform technical constraints for our visual designers, so that their ideas were not bound by platform limitations. [For example, we had an old patch to convert the page-loading throbber from an APNG to a static image animated with a CSS transform (rotation). That’s nice, but then you’re limited to effects possible in pure CSS.] We also needed to use SVG in the animation, since the rest of Firefox’s icons are SVG now. This gives the best result when scaling to different display DPI settings, and allows us to dynamically adjust the icon colors based on system style.

The technique we’re using for Photon is based around an SVG “filmstrip” – each frame is pre-drawn separately within an SVG image. We then use CSS to crop it to a specific frame, and a CSS Animation to move the crop box for each frame. Since it’s all declarative, Gecko and the compositor process can handle the animation very efficiently.

filmstrip

A demo is worth 10,000 words, so check out Jared’s SVG Filmstrip Demo to see how this works in detail. (Since it’s all based on web technologies, you can view-source and see the same technique running in your browser that we use in chrome.)

Of course, nothing is ever simple! There’s a lot of work that goes into getting these assets ready. First, our visual designers prototype an animation in Adobe After Effects. It then goes through a process of design iteration and user testing. (Is is distracting? Does it communicate what we want? Too fast? Too slow?) The animation is then exported to an SVG file, but the markup from Adobe is usually not very good. So we use SVGO to optimize it, often further hand-tune the SVGO output, and finally tweak it to make use of the dynamic context-fill color specified from the browser’s CSS.

Phew! But thankfully, as a user, you can just enjoy the finished result. We’d like to refine the creation process, but overall it’s a pretty powerful and flexible technique that we’ll be using more and more.

Recent Changes

Menus/structure:

  • Lots of minor bugfixes to various aspects of the earlier changes we made. Thanks to contributors Jeongkyu Kim (bug 1376484) and Adolfo Jayme (bug 1376097) for their work!
  • Flexible spacers are now available in customize mode. This is the first step towards having the location field be centered in the navbar, as part of the Photon design.
  • Work on the Page Action panel is progressing. We gave a prototype sneak-peek at the All-Hands (see Photon Newsletter #8), but it’s not quite ready to land yet.
  • Made the Library button work correctly in the overflow panel.
  • Removed the Page Setup item from the hamburger menu, as it was a bit confusing and the functionality can be accessed elsewhere.

Animation:

  • The Pin to Overflow animation landed, try it now! Right-click on a toolbar button and use “Pin to Overflow Menu” to see the awesome animation!
    pintooverflow
  • The Stop/Reload animation also landed! We’ve got great feedback about speeding it up and making it less distracting, will be working on that soon. You may have noticed that, while animating, the icon looks thinner than the normal (static) icon… We’ll be updating all the toolbar icons to this new Photon style in a few weeks, which will make the transition between states feel smoother.
    stopreload
  • The Save to Pocket animation is going through review, once that’s landed we’ll start implementation of the new bookmarking animation.
  • The new arrow-panel animations landed… but bounced due to test failures. We’re working around the failures by disabling the animation in tests, which means we bumped up the priority of having the panel animations be controlled by the toolkit.cosmeticAnimations.enabled preference. Once this is all hooked up and tests are happy, the animation will reland.

Preferences:

  • The prefs reorg v2.0 has now landed! (Check out the design specs for the details of exactly what changed.) This had a rough time getting landed, as it encountered a string of tricky intermittent test failures and memory leaks. Kudos to the team for working through it all and getting it landed!
  • Improved display on small screens by fixing some wrapping issues that were causing scrolling.

Visual redesign:

  • On Windows 10, we will now use the system accent color in the title bar, when you’ve enabled this in your Windows settings.
    • You’ll first need to open the following OS dialog, by right-clicking on your Desktop, selecting Personalize, and then selecting the Colors section. Scroll down to “Show accent color on the following surfaces” and enable the “Title bars” checkbox.
      colorsUI
    • You can now select different colors here, and have them show up in Firefox. (Or use the setting at the top of that dialog to have Windows automatically pick a color that complements your desktop background)
      colors
  • Styling followups to the identity block (the leftmost button in the URL bar) when hovering/clicking it.
  • The UI Density control is now ordered by logical size, and we fixed an issue that made the text labels unreadable on Linux.
  • Search textbox widget styling has been updated to be common across the browser.
  • Slightly increased the size of the tab overflow indicator.
  • A number of followup bugfixes for the title bar on Windows 10.

Onboarding:

  • Turned off the compact newtab tiles. Originally we thought enabling the new style would be a good transition to the Activity Stream style, but on further reflection it felt too much like making 2 differing changes. So Firefox release users will continue to see the existing (old) newtab page in Firefox 56, until Activity Stream fully replaces it in 57. (Activity Stream is now enabled on Nightly, so all the changes here make it a little confusing to explain, sorry!)
  • The onboarding overlay will be hidden when browser is too narrow, as the current design/implementation requires a minimum width or else it overflows the window.
  • The tour notifications shown at the bottom of a new tabs and about:home are now suppressed for the first few minutes of using the browser, and will rotate to a different suggestion after a certain amount of time or number of impressions. Also, the slide-up animation was removed to make it less distracting.
  • The tour step to set your default browser will now show an alternative message if you’ve already made Firefox your default browser.
  • Our UITour support can now open the awesomebar with a search term pre-filled, which will be used for Firefox 57 Address Bar tour to demonstrate searching from the awesomebar.

Performance:

 

That’s all (!) for this update.

Photon Engineering Newsletter #8

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

San Francisco All-Hands

foxbot.jpg

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:

  • Built the prototype for adding the ability for the user to pin frequently-used items from the Page Action menu 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 Pocket and Screenshots (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).
    pageactionprotoi.png
  • The bookmark star has moved 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.
  • The sidebar button is now in the toolbar by default. 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.
  • Customize Mode got a few updates. Its general style has been refreshed for Photon, and we’ve removed 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 replaced with a Photon critter – the Dragondrop. I hope you can appreciate this delightfully terrible pun. 😉
    empty-overflow-panel@2x.png
  • The Library panel will now show Bookmarks and Downloads. (Bookmarks are already in Nightly, Downloads was built during the week but needs code review before landing).
  • We also fixed a number of random polish bugs here and there. “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.)

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:

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.)
    densityui
  • 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.
    tourbar

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!

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:

 

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:

 

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.)
    Screen Shot 2017-06-22 at 4.27.25 PM

 

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):

menus

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.)

overflows

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.
    search-prefs-demo

 

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:

 

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?

win10mock

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:
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:

That’s all for this week!

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.
    darktoolbar
    The dark purple has led to at least one interesting reaction. 😉
    Screen Shot 2017-05-30 at 3.14.49 PM
  • 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:

Visual redesign:
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:
    onboarding.gif
  • 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:

 

That’s it for now. More next time!