Firefox/Projects/New Theme: Difference between revisions

Jump to navigation Jump to search

Firefox/Projects/New Theme (view source)

Revision as of 16:58, 3 March 2010

3,202 bytes removed ,  3 March 2010
no edit summary
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
Shorlander
canmove, Confirmed users
455

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/205833"

Navigation menu