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