Firefox/Projects/New Theme: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
Line 1: Line 1:
= Overview =
= Pitch =
'''Sprint lead:''' shorlander<br/>
The new theme for Firefox will modernize the web browser interface, reflecting the power, simplicity and customizability of the world's most popular browser. Ensuring that the application feels like a natural part of the user's desktop, web life, and task flow are key goals.
'''Sprinters:''' faaborg, limi, boriss<br/>
'''Timeframe:''' (beginning 2009/07/13)–(ending ?)<br/>


'''Description:''' Exploring a revamp of the Firefox Theme/UI. Identifying current issues and weaknesses. Focus on modernizing and streamlining. Specific emphasis on appearance and behavior on Windows Vista/7. Increased cross-platform cohesiveness.


= Goals =
= Goals =
* Streamline UI Elements
* Streamline UI elements and reduce visual footprint
* Reduce Visual Footprint
* Modernize look and feel
* Modernize Look and Feel
* Retain visual integration
* Retain Visual Integration While Still Being Attractive
* Maintain cross-platform consistency (Where applicable)
* Increased Cross Platform Consistency (Where Applicable)


= Windows =
== Current Theme Issues ==
[[Firefox/3.0 Windows Default Theme Issues|3.0 Windows Default Theme Issues]]: This is a good starting point that identifies problems and shortcomings with the current Theme/UI on Windows. Focus on Windows Vista and 7.


== Visually Appealing Windows Applications ==
= Non-Goals =
[[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Visually_Appealing_Windows_Applications|Visually Appealing Windows Applications]]: Some examples of Windows applications that are visually appealing and/or have good UI design.
* Alter tab behaviour
* Maintain compatibility with existing themes


== Design: ==
* Make use of Aero Glass on Windows 7 and Vista
* Move to tabs-on-top by default (option to move back underneath navigation bar and possibly left or right as well)
* Combine Reload/Stop/Go (Separate Stop and Reload buttons in Customization dialog)
* Move Reload/Stop/Go to the LocationBar
* Addition of thin progress bar (tied to LocationBar in active tab and top of tab for background tabs)
* Sort and Trim Menu Items
* Hide the MenuBar and create replacement AppMenu. ("Firefox" Button)
* Remove the bookmarks bar(if never user altered)
* Addition of a Bookmarks Widget on the main toolbar that replicates the Bookmarks Menu
* Move "Home" button to Home Tab
* Changes to the TabBar to make it more streamlined
* Shift towards more unified look across Windows variations(while still retaining platform look & feel "spirit")
** Less "bright and colorful" icons
** More tangible button appearance
** Perhaps more glyphs
* General icon cleanup/polish


=== Mockups ===
= Status =
* [[Firefox/4.0 Windows Theme Mockups]]
* '''IN FLIGHT'''
** Started Implementation


== Proposed Theme/UI Direction and Feedback ==
* '''Tracking Bugs:'''
[[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|Direction and Feedback]]: In depth exploration of proposed ideas for Firefox 3.7 and 4.0.
** <span style="color: #7e7e7e">'''[Windows]'''</span> {{bug|544820}}
** <span style="color: #7e7e7e">'''[Linux]'''</span>
** <span style="color: #7e7e7e">'''[Mac]'''</span> {{bug|544821}}


<br>
* '''Project Lead:''' shorlander
* '''Project Members:''' Boriss, dao, faaborg, gavin, limi


= Mac =
== Design: ==
The design for Mac is very similar to what has been [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|proposed for Windows]]. With some exceptions:
* The Menubar, being a system wide element, will stay
* The absence of the App Button and App Menu


=== Mockups ===
= Design =
* [[Firefox/4.0 Mac Theme Mockups]]


== Mac Specific Visual Refresh ==
There are many stylistic changes that are addressed in depth in the [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Mac_Specific_Visual_Refresh|Mac Specific Visual Refresh]] article.


<br>
= Timeline / Milestones =
* 2010/01 - <span style="color: #7e7e7e">'''[Complete]'''</span> Mockups for main browser window interface with N tabs
* 2010/02 - <span style="color: #7e7e7e">'''[Complete]'''</span> Begin implementation work on graphic elements and code changes
* 2010/03 - <span style="color: #568a12">'''[A1]'''</span> Alpha quality implementation of new theme on mozilla-central
* 2010/03 - <span style="color: #567da8">'''[DCP]'''</span> Review with product drivers for feedback/plan alteration
* 2010/05 - <span style="color: #567da8">'''[A2]'''</span> All graphic collateral (icons, image files) complete and reviewed
* 2010/?? - <span style="color: #567da8">'''[B1]'''</span> Beta quality implementation of new theme on mozilla-central
* 2010/?? - <span style="color: #567da8">'''[FINAL]'''</span> All work complete


= Linux =
== Design: ==
The Linux design picks up many aspects from the ideas [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|proposed for Windows]]. With specific emphasis on how to integrate with various system themes.


=== Mockups ===
= Delivery Requirements =
* [[Firefox/4.0 Linux Theme Mockups]]
* Requires an add-on compatibility changing application version increment
* Requires full alpha and beta testing  with over 50,000 users on all platforms


== Linux Specific Visual Refresh ==
There are some stylistic changes that are addressed in depth in the [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Linux_Specific_Visual_Refresh|Linux Specific Visual Refresh]] article.


<br>
= Constraints =
* Designs completed and accepted for Windows (XP, Vista and Windows 7, in Classic and with Windows themes applied), OSX (10.5 and later) and Linux (Ubuntu 9.10 and later)
* No impact to Ts or TXul metrics


= Theme/UI Implementation Bugs  =


* {{bug|544815}} - Allow for placing Tabs over the Navigation Bar with option for Tabs under the Navigation Bar
= Dependencies =
* {{bug|544816}} - Attach combined Stop/Go/Refresh button to the Location Bar
* Ability to draw in title bar of window on all operating systems (Core::Widget) {{bug|513157}}
* {{bug|544817}} - Create Bookmarks Widget with placement dependent on Bookmarks Bar status
* Re-implement tab strip as toolbar (Toolkit::Tabbed Browser) {{bug|347930}}
* {{bug|544818}} - Progress "Line" indicator for background loading tabs
* {{bug|544819}} - Create a basic Home Tab linking to the current Home Page
* {{bug|544823}} - [Meta] Theme Visual Refresh
** {{bug|544820}} - [Windows] Theme Visual Refresh
** {{bug|544821}} - [OS X] Theme Visual Refresh


<br>


= Platform Capabilities  =
= Testing =
* <span style="color: #7e7e7e">'''[Perf]'''</span> Ts and TXUL should be monitored closely as code lands
* <span style="color: #7e7e7e">'''[Compatibility]'''</span> Test with OS alternate themes (ie: Classic, Tan, Aqua)
* <span style="color: #7e7e7e">'''[Security]'''</span> No security review required


These are all things that we would need to be able to do to create the theme changes that have been mocked up.&nbsp; As new limitations emerge I'll add them to this list as well.


== Required ==
= Related Projects =
 
* App Button/App Menu + Menu Cleanup
=== Main Window ===
* [[Firefox/Projects/Home Tab|Home Tab]]
 
* App Tabs
* {{bug|513157}} Ability to draw the title bar ourselves (used for tabs, weave, OS theme integration, personas, private browsing mode)
* Location Bar
** OS X: {{bug|513158}} Josh will look into this more for OS X
* [[Firefox/Projects/Doorhanger notifications|Browser Notifications (Doorhangers)]]
** Windows: {{bug|513162}}  talk to Jim or rstrong
* browser.js cleanup
** Linux: {{bug|513159}}  only gnome for overlaying the title bar? need to talk to karl tomlinson, zwol
 
* {{bug|546822}} OS Theme detection
** OS X: (not applicable)
** Windows: {{bug|543910}}
** Linux: {{bug|546816}}
 
=== Transparency ===
 
*Windows: {{bug|506124}} Aero Glass support
** Glass support and personas {{bug|513170}}
** Glass support and private browsing {{bug|513418}}
 
*Linux: Transparent Windows {{bug|408284}}
 
*Ability to draw persistent translucent areas over content {{bug|546844}}
 
=== Customization ===
 
*Platform capabilities for UI customization {{bug|}}
**Ability to have multiple instances of the same control {{bug|}}
**Ability to change the appearance of a control based on its location relative to other controls on the toolbar {{bug|}}
**Animate toolbar elements while the user is customizing the toolbar {{bug|}}
 
=== Animation ===
 
**Animating tabs
**Animate toolbar elements while the user is customizing the toolbar {{bug|}}
 
== Optional (but highly desired) ==
 
=== Animation ===
 
*Platform capabilities for animation {{bug|}}
**Widget animation {{bug|}}
***Windows {{bug|392644}}
***OS X
***Linux
**Animating panels
 
 
=== Cursor changes ===
 
 
 
= Possible Theme Re-factoring =
 
*Icons: refactor how the mozilla platform deals with icons
**proposed approach for feedback: [[Firefox/Projects/IconRefactor]]
 
*Colors: about:colors, single file with all hard coded colors, new primitives (moz-red)
**Dao got started on doing this, need to check on the current status

Revision as of 16:58, 3 March 2010

Pitch

The new theme for Firefox will modernize the web browser interface, reflecting the power, simplicity and customizability of the world's most popular browser. Ensuring that the application feels like a natural part of the user's desktop, web life, and task flow are key goals.


Goals

  • Streamline UI elements and reduce visual footprint
  • Modernize look and feel
  • Retain visual integration
  • Maintain cross-platform consistency (Where applicable)


Non-Goals

  • Alter tab behaviour
  • Maintain compatibility with existing themes


Status

  • IN FLIGHT
    • Started Implementation
  • Project Lead: shorlander
  • Project Members: Boriss, dao, faaborg, gavin, limi


Design

Timeline / Milestones

  • 2010/01 - [Complete] Mockups for main browser window interface with N tabs
  • 2010/02 - [Complete] Begin implementation work on graphic elements and code changes
  • 2010/03 - [A1] Alpha quality implementation of new theme on mozilla-central
  • 2010/03 - [DCP] Review with product drivers for feedback/plan alteration
  • 2010/05 - [A2] All graphic collateral (icons, image files) complete and reviewed
  • 2010/?? - [B1] Beta quality implementation of new theme on mozilla-central
  • 2010/?? - [FINAL] All work complete


Delivery Requirements

  • Requires an add-on compatibility changing application version increment
  • Requires full alpha and beta testing with over 50,000 users on all platforms


Constraints

  • Designs completed and accepted for Windows (XP, Vista and Windows 7, in Classic and with Windows themes applied), OSX (10.5 and later) and Linux (Ubuntu 9.10 and later)
  • No impact to Ts or TXul metrics


Dependencies

  • Ability to draw in title bar of window on all operating systems (Core::Widget) bug 513157
  • Re-implement tab strip as toolbar (Toolkit::Tabbed Browser) bug 347930


Testing

  • [Perf] Ts and TXUL should be monitored closely as code lands
  • [Compatibility] Test with OS alternate themes (ie: Classic, Tan, Aqua)
  • [Security] No security review required


Related Projects

Retrieved from "https://wiki.mozilla.org/index.php?title=Firefox/Projects/New_Theme&oldid=205833"