MozillaWiki

Firefox/Projects/New Theme: Difference between revisions

Page Discussion

Firefox/Projects/New Theme (view source)

Revision as of 01:46, 6 July 2010

3,363 bytes removed ,  6 July 2010
m
→‎Related Projects: wikilink Menu cleanup
m (→‎Related Projects: wikilink Menu cleanup)
 
(48 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:''' 2 weeks (beginning 2009/07/13)<br/>


'''Description:''' Exploring a revamp of the Windows theme in evolutionary phases. Identifying current issues and weaknesses. Focus on modernizing and streamlining.
= Current Theme Issues =
Now has its own page: [[Firefox/3.0 Windows Default Theme Issues|3.0 Windows Default Theme Issues]]
= Visually Appealing Windows Applications =
This is sometimes a hard area to explore. Windows applications are not known for their visual design savvy. There are however a few applications that rather nicely designed (visually if not functionally).
*'''Paint (Windows 7):''' A shocking selection perhaps. Relative merits of the Ribbon UI aside, Paint for Windows 7 does look good visually. There are few stand out elements:
**'''Tabs''' - Simple, smooth and they flow into the rest of the Ribbon.
**'''Smooth Gradient''' - There is a nice smooth unifying gradient from the top of the tab to the bottom of the Ribbon UI.
**'''Small Icons on Buttons''' - The smaller icons for "Tools" are nicely positioned in buttons that have a tactile feel.
[[Image:Paint-Example-001.png]]
*'''Postbox:''' Even though Postbox elected to keep the Menu Bar, it minimized the visual impact of the menu bar by having the line separator fade out. Also notable is that as a cross platform application it fits in with the native look and feel of both OS X and Windows.
[[Image:Postbox-Example-001.png]]
*'''Zune Player:''' The word "Zune" doesn't really evoke feelings of good design (industrial or visual). Yet the Zune Player application is quite attractive. Decidedly not native. It has a minimalist and streamlined look that fades into the background. The buttons look physical and pressable, but still soft. It has a simple back arrow, clear song controls and even a very nice subtle touch of a red glow on the bottom of the screen that gently pulses to the music.
[[Image:Zune-Example-001.png]]


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


= Design =
New theme implementation should be accomplished in two phases.


== Mockups ==
= Non-Goals =
*'''<span style="color: #69ab1f">(New)</span>''' 4.0 Mockups: [[Firefox/4.0 Windows Theme Mockups]]
* Alter tab behaviour
*3.7 Mockups: [[Firefox/3.7 Windows Theme Mockups]]
* Maintain compatibility with existing themes


== Short-Term (Firefox 3.7): ==
[[Image:(Windows)-(Firefox.next)-(3.5–3.7-Evolution)-Wireframe-(Ver-001).png]]


Lightweight changes. Mostly style and texture. Some element shift/removal.
= Status =
* Hiding of MenuBar
* '''IN FLIGHT'''
* Move "Home" button to Home Tab
** Started Implementation
* 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:'''
[[Image:(Windows)-(Firefox.next)-(3.7–4.0-Evolution)-Wireframe-(Ver-001).png]]
** <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}}
* Make use of Aero Glass
** <span style="color: #7e7e7e">'''[Mac]'''</span> {{bug|544821}}
* Combine Reload/Stop/Go
* Move Reload/Stop/Go to the LocationBar
* Remove StatusBar
* Combine Location and Search
* Addition of thin progress bar (tied to LocationBar)
* Move default tabs to top of window (above main toolbar)
* Remove the bookmarks bar(if never user altered)
* Addition of tab sidebar
* Even less system native styling
* Download notification overlay UI


= Platform Capabilities  =
* '''Project Lead:''' shorlander
* '''Project Members:''' Boriss, dao, faaborg, gavin, limi


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.
= Design =
 
* [[Firefox/Projects/New Theme/Windows|Windows]]
=== All Platforms: General ===
* [[Firefox/Projects/New Theme/Linux|Linux]]
 
* [[Firefox/Projects/New Theme/Mac|Mac]]
* {{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
= [[Firefox/Projects/New_Theme/Timeline|Timeline / Milestones]] =
**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)
= Delivery Requirements =
**Dao got started on doing this, it's a build time thing
* Requires an add-on compatibility changing application version increment
* Requires full alpha and beta testing  with over 50,000 users on all platforms


=== All Platforms: Customization ===


*Ability to have multiple instances of the same control in the customization palette
= Constraints =
**Not a problem, just need to actually do it
* 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


*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 ===
= 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}}


*Ability to package multiple themes (XP, Vista, 7) instead of relying on chrome overrides
= Testing =
**Showing both in the theme manager might be difficult, need to follow up on the
* <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


*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)
= Related Projects =
** Some interesting cases with personas {{bug|513170}} and also private browsing {{bug|513418}}
* App Button/App Menu + [[Menu cleanup]]
* [[Firefox/Projects/Home Tab|Home Tab + App Tabs]]
* [[Firefox/Projects/Places_UI|Places UI]]
* [[Firefox/Projects/Notification|Notifications]]
* [[Firefox/Projects/animation|Animation]]
* [[Firefox/Projects/Download_manager_improvements|Download Manager Improvements]]
* [[Firefox/Projects/Extension_Manager_Redesign|Extensions Manager Redesign]]
* browser.js cleanup
Broccauley
670

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/165739...236555"