PhotonUpdate, PlanetMozilla

Photon Engineering Newsletter #8

15 Comments

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!

15 thoughts on “Photon Engineering Newsletter #8”

  1. We started with rectangular tabs, switched to curvy tabs (they were apparently better), and now we are going back to rectangular tabs.

    Minus the need for change, what’s the usability win from reverting to the previous design aesthetic? Is this going to mean a chance to the Android and iOS browsers too? Is drawing the curves still too expensive?

    What was old is new again, I guess.

    1. Curvy tabs are 3+ years old, our goal is not to freeze the browser in the past. In particular, modern UI design has since shifted to a flatter, simpler, squared motif (Windows 10 Modern, Google Material Design, iOS/macOS, etc.). We’ve also had great feedback on the rectangular tabs use in the Firefox Devtools theme. And so it makes sense to update the design to feel fresh and current. Ditto for the use of a revised color palette, updated iconography, animations, etc. We want Firefox to look and feel modern. Same reason older Firefox UX that looked great in Windows XP or the with OS X Aqua/candy now looks extremely dated.

      1. Hey Justin – this makes sense. Thanks for sharing the rationale behind the change (fresh is always good), and for keeping the pedal to the metal vis-a-vis UX improvements.

        I really like the way you organize fixes in high-level buckets to which Firefox users can relate. This makes the fixes (and the impact to their day-to-day) easier to process.

        Keep up the great work!

  3. Very much for the rectangular tabs! The curvy tabs are definitely an eyesore at this point. This announcement was very timely for me, just this week I was actually considering contacting the appropriate channels at Mozilla about this very topic. Also please consider getting rid of the extra space above the tabs! I’d much rather have that space for the viewport (tiny as it is). Slimming down the space around the url text field wouldn’t be a bad idea either. 🙂

    Many thanks for you work and consideration!

    1. This isn’t related to Photon, but we are engaged with the Payment Request API standard, to make payments in the browser safer and easier.

  5. I don’t know if this is the right place to ask this, but have you ever considered placing the page title in the Awesomebar? The extension “Page Title in URL Bar” does this* and I think it works very elegantly, making it much easier to see long titles that would get cut off before showing anything useful in tabs. It’s not a WebExtension yet and I’d hate to lose it, but I also think it’s a good enough idea to pitch for mainline Firefox.

    * although it’s currently a little broken, with the Go button getting stretched out across the entire length of the Awesomebar.

  6. I really don’t mean to undervalue anyone’s work but the shift to a flatter, simpler, square motif didn’t happen for everyone. I believe if we make a research among end users most of them wouldn’t know what that is. And of those who know some just don’t espouse the movement to make every tab and button rectangular. As for me, I don’t care and I really like the rounded tabs of Firefox more any other tabs. It is one of the reasons that I like Firefox the most. Even in Windows or any rectangular environment, Firefox is lovely.

    I am not saying that you shouldn’t use rectangular tabs. I am saying that you should do it only if you, the peoples who design and make Firefox, like them better. Not to follow up with fashion. Not to mimic Microsoft, Apple and Google; we chose you, not them (I like them but really no-one has to do what they do). Not just for the shake of change; Firefox is not in the past anyway.

    I will of course still be using Firefox with the rectangular tabs (I love Firefox and a haircut is not enough to change that). I just would be sad to to see Firefox becoming like Chrome or Safari.

    1. In fact, we do _lots_ of user research and user testing (in addition to having a sizable team of user experience professionals) and are quite comfortable with the changes Photon is making. We don’t make change just for change’s sake, to chase “fashion” or copy other browsers. But any product with hundreds of millions of users will have some users who disagree with any particular change, fail to understand how UX works, or just make up reasons so they have something to rant about.

  7. I’ve idea about firefox improvement, add an option to block a tab like for the sound but for all the data (script, network, etc) it can be useful when i want have a webpage easily from tabs, but sometime webpage reload too frequenty or use network for nothing when i don’t use it. And for webextension, why not add an api to use already built in firefox function like “save a page” with the option to save as html, text, etc. Same thing for the bookmark, an api to open the dialog to add/change/delete bookmarks with list of bookmarks, folder, etc ?

    1. Neither of these ideas is currently being pursued for Firefox. If you’re interested in implementing these as WebExtensions, I’d direct you to our add-ons team to discuss what APIs you would need and if they would be accepted.

  8. Fantastic work! Feels like a breath of fresh air to see these developments with photon. I am particularly grateful for dumping the rounded tabs, the nice new animations and making Firefox fit in better on macOS (an area where Chrome has done much better IMO).

    I’m switched to nightly to be able to see the the improvements as they develop and am liking it so far!

Comments are closed.