Firefox 3.7 and 4.0 theme and UI revamp - Mac specific visual refresh

[+Frank B. Subscriber²]

Mac Theme/UI Refresh for Firefox 3.7

The overall design changes for Firefox 3.7 on Mac are mostly the same as what is being proposed for Windows. Structurally they are very similar with a notable exception:

• The Menu Bar: The Menubar on Mac is different from its counterpart on Windows. There is no system wide push to phase it out and it is an integral platform UI element.
  
• Page and Tools Buttons: Since the Menubar is not being changed these buttons will not be on by default. They can be added from the Customization sheet if desired.
  

In addition to the structural changes already proposed the Mac theme is primarily focusing on visual design changes.

[...]

Mac Theme/UI Refresh for Firefox 4.0

Visual Styling

Style changes from 3.7 to 4.0 are fairly minimal except for new elements that must be styled:

• Extensions Area: Proposed idea is to be stylistically different from the rest of the toolbar. Lighter and slightly raised.
  
• Identity Button: The Identity button can be seen in the upper right of the mockup. The idea is to be attached to the window, much like a label or a tag.
  
• Search Selector Style: This area is still not fully developed. An idea is to have the search selector change color based on which search is being used.
  

News source and full article: MozillaWiki

[Jase]

Oh it looks amazing!! Love the loading bar!! anyone going to port this theme to 3.5?

[Phantom Helix]

Tabs on TOP!!!! :drool: :drool: :drool: :drool: :drool:

Tabs on TOP!!!! :drool: :drool: :drool: :drool: :drool:

Tabs on TOP!!!! :drool: :drool: :drool: :drool: :drool:

Tabs on TOP!!!! :drool: :drool: :drool: :drool: :drool:

Tabs on TOP!!!! :drool: :drool: :drool: :drool: :drool:

[Stetson]

One thing that I don't like about the tabs-on-top style with OSX compared to Windows (When using Google Chrome) is that under Windows when you maximize the window the extra title bar space goes away and the tabs become flush with the top of the window. With OSX that doesn't happen and it seems a bit awkward.

[what]

Well, 3.7 certainly looks terrible. 4.0 ain't bad though. Can't help but think Chrome for Mac will be pretty decent itself by the time 4.0 comes out though.

[WigglesTheFish]

I absolutely love the 4.0 mockup. I have been using Safari 4 exclusively for a while now, but I'll definitely install Firefox 4.0 with that theme... I loved the tabs over the location bar in the Safari 4 beta and the load bars are wonderful in both designs!

[MrFuji]

Waits for the first 3.5 theme based on this mockup :)

[.Neo]

What a mess, way too much going on. They should really stick with the default toolbar button style.

[Chasethebase Veteran]

Very nice, looks like they took some notes from iTunes by using some gloss :)

[Explore]

I like it :)

[Elliott]

I like the Firefox 4.0 style. Firefox 3.7...eh. :/

[KoL Veteran]

They are ok but I still prefer GrApple themes - http://www.takebacktheweb.org/

[bjoswald]

Not bad. I didn't think I'd like the tabs being up top, but after seeing them in action, I think I'm sold. Wish there was a way to get that feature now.

[suspiria]

The main window chrome may look good, but the whole thing still feels like a shoddy port.

[Elliott]

The main window chrome may look good, but the whole thing still feels like a shoddy port.

That's the biggest problem I have with Firefox. It just doesn't have the fluidity and behavior of a normal Mac application.

[Rudy]

The 4.0 mockup looks great :)

[Kirkburn]

They are ok but I still prefer GrApple themes - http://www.takebacktheweb.org/

Just a personal opinion, but I really find that scheme soul-destroyingly boring. Beige, beige and more beige. Apart from the built in OSX colours, there's no variety at all.

But! at least Delicious and Luscious have the tabs the right way around. :)

[Elliott]

Just a personal opinion, but I really find that scheme soul-destroyingly boring. Beige, beige and more beige. Apart from the built in OSX colours, there's no variety at all.

But! at least Delicious and Luscious have the tabs the right way around. :)

Beige? You might wanna check the colors on your monitor. :p

[undu]

The progress bar looks really out of place. In the 4.0 mockup it should be at the bottom of the tab, not at the top of it, and be stretched to cover all the tab on length.

The rest looks really smooth, I really like it, I'm waiting to see what are they going to do with the bookmark bar and how it will blend with the "extension buttons" backround.

[Kirkburn]

Beige? You might wanna check the colors on your monitor. :p

Yes, beige: http://en.wikipedia.org/wiki/Beige

So it's darker than beige. But it's that area of the spectrum. Ecru, maybe.

[Elliott]

Yes, beige: http://en.wikipedia.org/wiki/Beige

So it's darker than beige. But it's that area of the spectrum. Ecru, maybe.

I don't really wanna start something here (because this would kind of be a stupid thing to argue), but where's the beige?

I see shades of gray and some blue in the Bookmarks sidebar. I even just analyzed it with xScope and everything is definitely a shade of gray (which is what Leopard's standard metal look is). There's nothing even remotely beige or ecru in there.

[Kirkburn]

I don't really wanna start something here (because this would kind of be a stupid thing to argue), but where's the beige?

I see shades of gray and some blue in the Bookmarks sidebar. I even just analyzed it with xScope and everything is definitely a shade of gray (which is what Leopard's standard metal look is). There's nothing even remotely beige or ecru in there.

Soooo ... I was using Firefox in Windows to view it.

I went ahead and saved one of the images to disk, and opened it in Windows Photo Gallery (default image viewer in Windows Vista) ... definite brown tinge.

Then I open it in Fireworks: totally gray. IE8: totally gray. Chrome: totally gray.

That's really odd. Somewhere along the way for Firefox, the color correction is messed up.

Anyone else got a Windows PC to test? Try it on Firefox 3.5 :) I know Firefox has more advanced colour controls than IE, so wondering whose fault it is :p

[Kirkburn]

Bugger: it's my Firefox colour management profile. If I switch it off as described on https://developer.mozilla.org/En/ICC_color_...olor_correction ... boom! Silver!

So now I either blame my monitor's colour profile, or Firefox's handling of it. Weird that I've not noticed this issue before.

/me is getting new monitor drivers

Update: I give up. I believe it's the ICC profile for my 2208WFP (problem also noted at http://forums.techguy.org/digital-photogra...rey-brown.html), but for now, I don't seem to be able to fix/remove it. I'll probably just wait until I install Windows 7 later this month, and avoid downloading the monitor update from Windows Update. What fun!

Apologies for the deviation from the topic, hope it was interesting at least :)

Edited October 7, 2009 by Kirkburn

[osirisX]

Why can't they stick to properly shaped OS X toolbar buttons?! :/

[ThisSiteHasLostItsCharm]

why the mac theme? I prefer the standard theme.