Changes

Jump to: navigation, search

Firefox/Projects/New Theme

3,202 bytes removed, 16:58, 3 March 2010
no edit summary
= Overview 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''Sprint lead:''' shorlander<br/>'''Sprinters:''' faaborgs desktop, limiweb life, boriss<br/>'''Timeframe:''' (beginning 2009/07/13)–(ending ?)<br/>and task flow are key goals.
'''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 =
* Streamline UI Elements* Reduce Visual Footprintelements and reduce visual footprint * Modernize Look look and Feelfeel * Retain Visual Integration While Still Being Attractivevisual integration * Increased Cross Platform Consistency Maintain cross-platform consistency (Where Applicableapplicable)
= 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.
=Non-Goals = Visually Appealing Windows Applications ==[[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
=Status == Mockups ===* [[Firefox/4.0 Windows Theme Mockups]]'''IN FLIGHT'''** Started Implementation
* '''Tracking Bugs:'''** <span style="color: #7e7e7e">'''[Windows]'''</span> {{bug|544820}}** <span style= Proposed Theme"color: #7e7e7e">'''[Linux]'''</UI Direction and Feedback span>** <span style=="color: #7e7e7e">'''[[FirefoxMac]'''</Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedbackspan> {{bug|Direction and Feedback]]: In depth exploration of proposed ideas for Firefox 3.7 and 4.0.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
=Design == Mockups ===* [[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.
= Timeline / Milestones =* 2010/01 - <brspan 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.
=Delivery Requirements == Mockups ===* [[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 Ability to the Location Bar* {{bug|544817}} - Create Bookmarks draw in title bar of window on all operating systems (Core::Widget with placement dependent on Bookmarks Bar status* ) {{bug|544818513157}} - Progress "Line" indicator for background loading tabs* {{bug|544819}} Re- Create a basic Home Tab linking to the current Home Page* implement tab strip as toolbar (Toolkit::Tabbed Browser) {{bug|544823347930}} - [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 == === Main Window ==Related Projects = * {{bug|513157}} Ability to draw the title bar ourselves (used for tabs, weave, OS theme integration, personas, private browsing mode) App Button/App Menu + Menu Cleanup** OS X: {{bug[[Firefox/Projects/Home Tab|513158}} Josh will look into this more for OS X ** Windows: {{bug|513162}} talk to Jim or rstrong ** 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 tabsHome Tab]]**Animate toolbar elements while the user is customizing the toolbar {{bug|}} == Optional (but highly desired) == === Animation ===App Tabs*Platform capabilities for animation {{bug|}}Location Bar**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/IconRefactorDoorhanger notifications|Browser Notifications (Doorhangers)]] *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 statusbrowser.js cleanup
Shorlander
Canmove, confirm
455
edits
Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/205833"

Navigation menu