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:

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:

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