Category Archives: PhotonUpdate

Photon Engineering Newsletter #16

Time to get your groove on! It’s Photon Newsletter #16!

But first. Do you remember the 21st night of September? As of today (September 21st) Firefox 57 has passed its penultimate milestone by entering Beta. This is a pretty big deal, as it means many millions of users on Beta will soon experience all the awesomeness that’s packed into 57. Note that Beta builds won’t actually go out until next week, on the 26th. But if you’re running Developer Edition, we’ve already pushed out an early sneak-peek!

Did I mention that Developer Edition also got a snazzy new Firefox icon? It’s nice. And blue.

firefox-logo-developer-edition

The past week has been very busy as we’ve been doing a major burst of bug triage, just to make sure we’re not missing any already-reported critical issues. The front-end teams went through nearly 600 untriaged bugs in just a few days! The good news is that we didn’t find anything alarming, which matches up with our general impression that 57 is shaping up to be a really solid release.

Recent Changes

Menus/structure:
Animation:
  • Investigation is ongoing into bug 1397092, where a user has reported an interesting case of high cpu usage possibly caused by the new tab loading indicator
  • The tab loading indicators are now synchronized, so when multiple tabs are loading the “bouncing balls” move left and right in unison.
    sync
  • The Animation team is shifting focus to help with polish bugs in the Visual Redesign and Menus/structure areas, as most remaining animation bugs are lower priority.
Preferences:
  • All P1 bugs landed – MVP feature-complete!
  • Added a setting to bring back the search box. With 57 it won’t be added to newly created profiles, but can be restored through Customize Mode. By adding additional preferences UI we hope to make is as easy as possible to get it back for anyone wondering where it went.
    searchprefs
  • Did a UI review, and landed a batch of polish fixes to address a number of minor issues found.
  • Deferred the loading of some information to improve the amount of time it takes to open the main Preferences page.
Visual redesign:
Onboarding:
Performance:
  • Fixed a white flash in the content area when opening new tabs and new windows, which made things look janky.
  • Separately, fixed a flickering in the awesomebar results when updating search suggestions.
  • We had to disable tab warming when hovering tabs, because it caused more regressions than we are comfortable fixing for 57. We are now planning to ship this significant perf improvement in 58.
  • Our dashboards show very good wins on all things we measure when comparing 55 to 57. Eg. startup is about 50% faster in 57 than it was in 55!
  • Not planning any further significant performance work for 57, to avoid risk of causing regressions. We are starting to look at what improvements can go into 58/59, and where we should put performance efforts in the longer term.

That’s all for now. There are only a few more weeks for us to do more polish work in 57 Beta, so there will probably only be a few more Engineering Newsletters as well. (But fear not, there’s been such positive response to these newsletters that we’ll likely continue them post-Photon in some form.)

Advertisements

Photon Engineering Newsletter #15

I’m back from a vacation to see the eclipse, so it’s time for Newsletter #15! (It’s taking me some time to get caught up, so this update covers the last 2 or so weeks.)

As noted in my previous update, Mike and Jared took over Newsletter duties while I was out. If you somehow missed their excellent updates – Newsletter #13 and Newsletter #14 – please check them out. (Go ahead, I’ll wait.)

We’re getting very close to Firefox 57 entering Beta! Code merges to the Beta on September 20th, and the first Beta release should come on the 26th. The Photon project is targeting the 15th to be ready for Beta, just to make sure there’s a bit of time to spare. We’ll be continuing to fix bugs and improve polish during the Beta, but the type of fixes we make will begin to scale back, as we focus on making sure 57 is a rock-solid release. This means becoming increasingly risk-adverse – there will always be bugs (and more releases to fix them in), so we very much want to avoid causing new regressions shortly before 57 ships to everybody. Last-minute firedrills are no fun for anyone. But we’re in really great shape right now – we’re done with feature development, are already shifting to more minor fixes, and there isn’t anything really scary waiting to be fixed.

Recent Changes

Menus/structure:

Animation:

Preferences:

  • Once last P1 bug to feature complete!
  • Team to move to help out Onboarding once all P1 and important P3s are fixed.

Visual redesign:

Onboarding:

Performance:

Photon Engineering Newsletter #12

Let’s get straight into update #12!

Oh, hey, anyone notice any icon chances recently? Yeah, they’re pretty wonderful. Or maybe I should say funderful? Looking forward to where they end up!

about-logo@2x

Speaking of looking forward, I’m going to be on vacation for the next two weeks. But fear not! Jared and Mike will be covering Photon updates, so you’ll still be able to get your Photon phix.

Recent Changes

Menus/structure:

Animation:

Preferences:

Visual redesign:

  • Updated the button positions in the navbar, and made them more customizable. (This was a contributor patch – thanks!)
  • Close buttons updated across the UI (also a contributor patch!)
  • The “Compact Light” and “Compact Dark” themes have been renamed to simply “Light” and “Dark”. (The UI density setting is already independent of the theme.)

Onboarding:

Performance:

 

Photon Engineering Newsletter #11

H*ck yeah, it’s time for another Photon newsletter! They now go to #11!

It’s Hip To Be Square

So… Perhaps you noticed something ever so slightly different in yesterday’s Nightly. Something less curvy, and more rectangular. Look closely, right there at the tabs. That’s right. No more curvy tabs!

austphoton

Behold, rectangular tabs! This is one of the last few major Photon features to be implemented.

tabs

We think most people will like the new tab shape. Some people won’t like them. That’s ok. We’ve done a lot of user testing, and have seen a lot of positive feedback on the Photon mockups since they first came out. And, of course, the Firefox Compact Light/Dark née DevTools themes have had square tabs for a long time. So while it’s a big change to a very prominent piece of UI, it’s also a change that’s a bit familiar, and really helps to make Firefox look clean and modern.

(There’s a little bit more change still to come with the tabs – we’re going to make them a little bit taller by default. This is being handled as a separate follow-up fix, because we discovered that this surprisingly breaks some of our automated tests. So while we’re fixing the tests, we wanted to get the bulk of this change landed.)

R.I.P., curvy tabs.

tabeol

Oh, and you may have also noticed – we updated all the navigation toolbar icons to the new Photon style. They’re lighter-weight than the old icons. We had been holding off on landing this until the start of Nightly-57, simply because it wasn’t worth the effort to add extra code to allow both the old and new icon sets to co-exist (since Nightly-56 would need to disable those icons when it became Beta-56). But now that Nightly is on the 57 train, which will be shipping Photon, we don’t need to worry about that.

Recent Changes

Menus/structure:

Animation:

  • Spent a good chunk of time tracking down a really weird layout issue with OSX 10.9 and Photon.
  • Made the overflow arrows point to the left in RTL builds.
  • Fixed a problem (by backing out the offending patch) where the hamburger menu and other arrow panels would fail to open with some Linux window managers.

Preferences:

Visual redesign:

Onboarding:

  • Made the speech bubble of the onboarding icon clickable.
  • Improved focus styling of the buttons in the tour.
    focusring
  • Working on adding illustrations for 57 tour.

Performance:

One More Thing

You see, something’s going to happen. Something wonderful…

We’ve got one more major visual change coming, which a small team has quietly been working on for quite some time. Even within Mozilla, most people haven’t seen it yet. It looks awesome, and I can’t wait for it to land! I think you’re really going to like it.

More soon. 😉

Photon Engineering Newsletter #10

Woo yeah! Time for Photon newsletter #10!

Nightly-57 this week

Way back in newsletter #2, I talked about the Photon program schedule. Briefly, to save you a click: Photon is shipping with Firefox 57, and to allow time for bugfixes, quality, and polish we’ve been targeting August 7th as the date when we’ll be done with “major work.” That gives us 6 weeks of Nightly-57 to do that bugfixing (and another 6 weeks of Beta-57 for any further critical or low-risk improvements).

I’m pleased to report that we’re still solidly on track. Most of the big-ticket features for Photon have already landed, and the last few (notably: rectangular tabs, pinning Page Action items to the URL bar) are in good shape to land soon. That’s not to say Photon is “done” – just that the biggest and riskiest work will largely be behind us, and upcoming work will start to be more about finishing off rough edges.

Recent Changes

Menus/structure:

Animation:

  • The Stop/Reload animation has been tweaked to run faster.
  • Animations have been fixed to be positioned correctly regardless of display font size. [1] [2]
  • The Save to Bookmarks animation has landed in Nightly. (Add the Library button to the toolbar for the full effect!)
    star
    bookmark-animation
  • The Save to Pocket animation has also landed  (Again, you’ll want to ensure the Library button is in the toolbar to see all of the animation.)
    pocket-animation

Preferences:

  • Fixed Performance section regression around number of processes and uplifted it to Beta-55.
  • Started working on visual refresh but are holding off landing until after the uplift. This allows QA to finish verifying the changes (in Nightly) that will ship with Firefox 56, without these 57-only changes getting in the way.

Visual redesign:

Onboarding:

  • The first uncompleted tour is now shown by default (instead of just the first tour).
  • Updated the stub installer tagline to “Built for people, not for profit.
  • Made the “Learn More” button not wrap.
  • The Sync tour will be automatically marked as completed when you sign in with a Firefox account.
  • When refreshing a profile, don’t migrate a user’s session (tabs) unless the refresh was invoked by the user. This allows the reset triggered by the stub installer (e.g. for users coming back to Firefox after a long absence) to have a fresh experience, instead of seeing old tabs from months ago.
  • Made the onboarding UI look better in high-contrast mode.

Performance:

 

That’s it for now!

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!