= Mac Theme/UI Refresh for Firefox 3.7 ={{Restricted}}
= Mac Theme/UI Refresh = [[FileImage:FxFirefox-3.74-Mockup-Mac-i03i05-Tabs(OSX)-Hanging(TabsTop)-Large(Default)-Back(Small).png]]
The overall design changes for Firefox 3.7 on Mac are mostly the same as what is being [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|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 ButtonsApp Button''': Since the Menubar is not being changed these buttons this button will not be on by default. They can be added from the Customization sheet if desiredavailable at all.
In addition to the structural changes [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|already proposed]] the Mac theme is primarily focusing on visual design changes.
Proposed changes from the current Mac theme:
*'''Button Shape''': Using rounded rectangles instead of the curved-end buttons found in 3.0–3.6. This will match the native button shape as well as the shape planned for Windows.
*'''Button Texture''': Deviation Slight deviation from the current bright and flat gradient to a slightly darker gradienttexture. Also added Adding a slight gloss and edge highlight for some added dimension/depth.
*'''Removal of Bookmark Bar Texture''': Removal of the glossy bookmarks bar texture for less visual complexity and more streamlined look.
*'''Tab Shape''': Slightly more defined tabs. Also rounded edges connecting to the toolbar.
*'''LocationBar Shape''': Use a rounded rectangle LocationBar instead of a curved-edge. This creates a visual distinction between the LocationBar and the SearchBar even though the LocationBar is still technically a search field.
*'''Hiding the Tab Overflow Icon''': Hide the tab overflow icon unless there is actually overflow.
Differences from the Windows theme:
=== Small Version ===
[[FileImage:FxFirefox-3.74-Mockup-Maci05-i03(OSX)-Tabs(TabsTop)-Hanging(Small-SmallIcons)-Back(Default).png|300px790px|left|thumb|Small Back Button Version]]
A version to illustrate how it would look with Small Icons enabled.
<br style="clear:both" />
== Other Tab Ideas and Experiments ==
There are other ideas that have been explored in regards to how to handle tabs visually.
'''''Note that these ideas are not being proposed but could be useful as a discussion spring board.'''''
'''Page Attached Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-No-Strip.png]]
In addition to the hanging tabs idea there was also some exploration with having page-attached tabs. This approach would match other platforms more closely as well giving a direct visual link between the webpage and the tab containing it. However it is less clean visually as well as feeling foreign on the system.
'''Page Integrated Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-Integrated.png]]
A more experimental idea are tabs that actually acquire attributes from the webpage. Such as approximating background color. This gives a direction visual link between the page and the tab and could help to quickly identify tabs.
'''Rectangular Button Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-Angled.png]]
An experiment with tabs that are not attached to the toolbar or the page but are more like tab buttons.
== Personas/Lightweight Themes ==
[[File:Fx-3.7-Mockup-Mac-i03-Personas.png]]
This is an example of how the proposed changes could work with Personas or Lightweight Themes.
= Mac Theme/UI Refresh for Firefox 4.0 =
[[File:Fx-4.0-Mockup-Mac-i03.png]]
== 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.
=== Small Version ===
[[File:Fx-4.0-Mockup-Mac-i03-Small.png]]
A version to illustrate how it would look with Small Icons enabled.
== Darker Background Versions ==
[[File:Fx-4.0-Mockup-Mac-i03-Darker.png]]
An alternate version with a darker background. This would make active tabs stand out more.
== Identity Buttons Variations ==
[[File:Fx-4.0-Mockup-Mac-i03-Identity-Button-Variations.png|left|thumb|Identity Buttons Variations]]
A few variations on the profile identity button:
*'''Light Rounded Background Version''': Slight background to imply that it is a button. Might be odd because that kind of background usually implies "selected".
*'''Attached/Label Version''': Attached to the window. Visually much like an identity label or a tag. This is branded as your browser.
*'''No Background Version''': No background. Could have a background on hover/active. Fits in with other applications with elements in titlebar (e.g. iCal's timezone switcher).
<br style="clear:both" />
== App-Tab Example ==
[[File:Fx-4.0-Mockup-Mac-i03-App-Tab.png]]
How an App-Tab could look. No toolbars for navigation since all navigation is self-contained in the web app.
== Potential Styling for Various Search Types ==
[[File:Fx-4.0-Mockup-Mac-i03-Colored-Search-Selector.png]]
This is an area that conceptually is not yet fully developed. Potential styling for search selectors in the combined location+search bar could change color based on which search engine you are using.
