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!

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:

• When users first open Firefox 57, we will now move items they added to the old hamburger panel into the new overflow panel
  • As part of this work, the photon structure pref was removed, and we made a start with removing some of the old code we were lugging around until now. This removed over 2500 lines of code!
• Pocket was added to the  page action menu.
• You can now removed pinned page actions from the URL bar via a context menu on the icons (in addition to the menu items in the page action menu itself).
• The favicon for customize mode now matches the icon used elsewhere.
• We broke, and then fixed, the history button. Oops. Sorry about that!
• Fixed a bunch of styling and behavior issues.

Animation:

• New panel animations have landed.
• More of the new download animation has landed. When a download starts, and arrow zooms into the download icon, and when it finishes the download icon expands/pulses a couple times.
  • Also made the download progressbar fill in the opposite direction in RTL locales.
• Made adjustments to the stop-reload animation to stop playing the animation if pages load fast, also not playing the animation while tabs are opening or closing.

Preferences:

• Completed a general facelift of preferences (font & size & colors) to match Photon style. New icons, too.
• Removed all colons from subdialog headers.
• Nearing completion of the Photon preferences MVP work!

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:

• Added the opt-out auto-refresh checkbox into the stub installer. When it finds you’re (re)installing Firefox on top of an already-installed Firefox that’s 2+ versions out of date, it will offer to perform a profile refresh. This helps avoid problems with people who once tried Firefox, but then stopped using it (sometimes due to problems caused by an add-on or setting).
  
• Updated the UITour highlight style to the Photon style.
• Added UITour support for the Page Action panel, so the Onboarding can later use it to introduce the Screenshot feature located there.
• Addressed a couple of accessibility issues.

Performance:

• The tab strip now uses CSS smooth-scroll, which avoids janky synchronous reflows while scrolling through tabs.
• When closing a tab, the next tab is now selected faster.
• Replaced various timers with idle callbacks to avoid jank soon after startup.

 

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!

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

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.

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:

• Page action items can now be added to (and removed from) the location bar!
  
• The History view in the Library button has been updated to show Recently Closed Tabs, Recently Closed Windows, and a “Recent History” label.
  
• The overflow panel now has a footer to access Customization Mode.
• Various smaller issues got fixed:
  • The search bar now responds correctly to its keyboard shortcut when inside the overflow panel
  • The Share button and other ‘unusual’ buttons now work better in the overflow panel
  • Fixed a mistake in context menus for the new flexible spaces
  • Page action panel now hides when switching tabs
  • Fixed styling issues with the sync item in the hamburger panel when not signed in

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:

• The Performance section in Preferences was found to have confusing behavior because of how the E10S rollout changes user defaults.
• Improved the performance of loading the preferences page.
• Preferences now consistently refers to “websites” instead of “sites”.
• Made the search box float at the top of the page (and persist as you scroll).
• Made the checkbox + label clickable area wider.
• Section names were invisible in Windows 7 high-contrast mode.
• Fixed a variety of minor bugs in preferences.

Visual redesign:

• New sidebar tree icons landed
• The colors in the Firefox dark theme have been tweaked.
• Mac title bar vibrancy just relanded. “Vibrancy” is a macOS effect where areas can be shown with a blurred, semi-transparent effect that allows colors behind the window to subtly bleed through. For example, in this screenshot, notice how the titlebar picks up the blue and red tones of the image under the window. Previously, it was just a solid black color.
  
• As noted at the top of this update, tabs are now rectangular and the toolbar icons have been updated.

Onboarding:

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

Performance:

• Added a test for AwesomeBar reflows.
• Speculatively connect to the current search engine (in some cases) to speed loading of AwesomeBar searches and search suggestions.

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:

• Added a history view to the Library button
• New overflow panel styling landed. This makes the overflow panel look much better in both customize mode and when opened from the toolbar.
• Patches landed in github to have a Screenshots entry in the Library. (This won’t be user-visible until the next Screenshots-to-mozilla-central uplift.)
• Added a customize footer to the overflow panel.

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

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:

• Fix for disappearing minimize button on Win 10.
• Made the tab title text’s color better match the system text color.
• Increase the size of main menu items when accessed through touch.
• The titlebar on macOS is now colored in customize mode too.
• Tweaked toolbar button and the location / search bar styling on Linux.
• New tab strip icons for the New Tab and List All Tabs buttons.

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:

• Landed an epic set of patches to gain a ~4% win on ts_paint! This work makes us lazily load a bunch of JS that was previously being loaded from <script> tags in browser.xul (and similar).
• The stop button is no longer shown when doing local about: pageload for some nice Talos wins. There’s no expected network delay, so the flickering of the stop/reload button is useless overhead.
• Updated our reflow tests to be more reliable

 

That’s it for now!