Firefox/Projects/New Theme: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
m (→‎Related Projects: wikilink Menu cleanup)
 
(24 intermediate revisions by 4 users not shown)
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, (martell)<br/>
'''Timeframe:''' (beginning 2009/07/13)–(ending ?)<br/>


'''Description:''' Exploring a revamp of the Firefox Theme/UI in evolutionary phases for 3.7 and 4.0. Identifying current issues and weaknesses. Focus on modernizing and streamlining. Specific emphasis on apperance 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: ==
New theme implementation should be accomplished in two(or more) evolutionary phases.


=== Short-Term (Firefox 3.7): ===
= Status =
[[File:(Windows)-(Firefox.next)-(3.5–3.7-Evolution)-Wireframe-(Ver-001).png|200px|right|thumb|3.7 Evolution Wireframe (Rev 02)]]
* '''IN FLIGHT'''
Style and texture changes. Removal of menubar. Some element shifting.
** Started Implementation
* Make use of Aero Glass
* Combine Stop and Reload (Separate Stop and Reload buttons in Customization dialog)
* Hiding of MenuBar
* Sort and Trim Menu Items
* Make use of Page and Tools buttons
* 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


=== Long-Term (Firefox 4.0): ===
* '''Tracking Bugs:'''
[[File:(Windows)-(Firefox.next)-(3.7–4.0-Evolution)-Wireframe-(Ver-001).png|200px|right|thumb|4.0 Evolution Wireframe (Rev 02)]]
** <span style="color: #7e7e7e">'''[Windows]'''</span> {{bug|544820}}
Major changes. New UI elements, removal and/or relocation of traditional elements.
** <span style="color: #7e7e7e">'''[Linux]'''</span> {{bug|572482}}
* Combine Reload/Stop/Go
** <span style="color: #7e7e7e">'''[Mac]'''</span> {{bug|544821}}
* Move Reload/Stop/Go to the LocationBar
* Remove StatusBar
* Relocate StatusBar Content
* Combine Location and Search
* Addition of thin progress bar (tied to LocationBar in active tab and top of tab for background tabs)
* Possibly move tabs on top, above main toolbar. (option to move back underneath navigation bar and possibly left or right as well)
* Remove the bookmarks bar(if never user altered)
* Addition of tab sidebar
* Even less system native styling
* Download notification overlay UI


=== Mockups ===
* '''Project Lead:''' shorlander
* [[Firefox/3.7 Windows Theme Mockups]]
* '''Project Members:''' Boriss, dao, faaborg, gavin, limi
* [[Firefox/4.0 Windows Theme Mockups]]


= Design =
* [[Firefox/Projects/New Theme/Windows|Windows]]
* [[Firefox/Projects/New Theme/Linux|Linux]]
* [[Firefox/Projects/New Theme/Mac|Mac]]


= 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 Page and Tools buttons will be hidden by default.


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.
= [[Firefox/Projects/New_Theme/Timeline|Timeline / Milestones]] =


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




= Linux =
= Constraints =
== Design: ==
* 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)
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.
* No impact to Ts or TXul metrics


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.


=== Mockups ===
= Dependencies =
* [[Firefox/3.7 Linux Theme Mockups]]
* Ability to draw in title bar of window on all operating systems (Core::Widget) {{bug|513157}}
* [[Firefox/4.0 Linux Theme Mockups]]
* Re-implement tab strip as toolbar (Toolkit::Tabbed Browser) {{bug|347930}}
* Enable Aero Glass for Main Window {{bug|546259}}


= 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


= Proposed Theme/UI Direction and Feedback =
== Direction and Feedback ==
[[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.


== Mac Specific Visual Refresh ==
= Related Projects =
[[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Mac_Specific_Visual_Refresh|Mac Specific Visual Refresh]]: Proposed Mac specific visual refresh.
* App Button/App Menu + [[Menu cleanup]]
 
* [[Firefox/Projects/Home Tab|Home Tab + App Tabs]]
 
* [[Firefox/Projects/Places_UI|Places UI]]
= Platform Capabilities  =
* [[Firefox/Projects/Notification|Notifications]]
 
* [[Firefox/Projects/animation|Animation]]
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.
* [[Firefox/Projects/Download_manager_improvements|Download Manager Improvements]]
 
* [[Firefox/Projects/Extension_Manager_Redesign|Extensions Manager Redesign]]
== All Platforms: General ==
* browser.js cleanup
 
* {{bug|513157}} Ability to draw the title bar ourselves (possibly tabs, weave, OS theme integration, personas)
** {{bug|513158}} Josh will look into this more for OS X
** {{bug|513162}} Windows: talk to Jim or rstrong
** {{bug|513159}} Linux: only gnome for overlaying the title bar? perhaps consider dropping, need to talk to karl tomlinson, zwol
 
*Additional OS theme resource extraction (are there things we should expose to the platform from the new OS themes?)
**Nothing comes to mind right now on things that are available
 
*Full OS theme detection (reduce our reliance on extraction)
**Not a problem, just need to actually do it
 
*Icons: all icons are in toolkit, about:icons, icon protocol
**Every agrees we should do it, just need to get it done
 
*Colors: about:colors, single file with all hard coded colors, new primitives (moz-red)
**Dao got started on doing this, it's a build time thing
 
== All Platforms: Customization ==
 
*Ability to have multiple instances of the same control in the customization palette
**Not a problem, just need to actually do it
 
*Ability to change the appearance of a control based on its location relative to other controls on the toolbar
**Possible, but a lot easier to just do it based off of the immediate right and left items. We can go farther than that but it starts to get intractably complex.
 
== Windows ==
 
*Ability to package multiple themes (XP, Vista, 7) instead of relying on chrome overrides
**Showing both in the theme manager might be difficult, need to follow up on the
 
*Ability to package different .ico files for different versions of Windows
**First icon embedded in the firefox.exe, so we would have to have different exe files.
**However, we can control the icon used for shortcuts (start menu, quick launch, desktop) so that very well could be good enough, especially if we are drawing our own title bar so can use whatever
 
*{{bug|506124}} Glass support (already well discussed and on track, but a platform capability nonetheless)
** Some interesting cases with personas {{bug|513170}} and also private browsing {{bug|513418}}

Latest revision as of 01:46, 6 July 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

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
  • Enable Aero Glass for Main Window bug 546259

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=236555"