Firefox/Projects/New Theme

From MozillaWiki
Jump to navigation Jump to search

Overview

Sprint lead: shorlander
Sprinters: faaborg, limi, boriss
Timeframe: (beginning 2009/07/13)–(ending ?)

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 Footprint
  • Modernize Look and Feel
  • Retain Visual Integration While Still Being Attractive
  • Increased Cross Platform Consistency (Where Applicable)

Windows

Current 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

Visually Appealing Windows Applications: Some examples of Windows applications that are visually appealing and/or have good UI design.

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

Proposed Theme/UI Direction and Feedback

Direction and Feedback: In depth exploration of proposed ideas for Firefox 3.7 and 4.0.


Mac

Design:

The design for Mac is very similar to what has been 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

Mac Specific Visual Refresh

There are many stylistic changes that are addressed in depth in the Mac Specific Visual Refresh article.


Linux

Design:

The Linux design picks up many aspects from the ideas proposed for Windows. With specific emphasis on how to integrate with various system themes.

Mockups

Linux Specific Visual Refresh

There are some stylistic changes that are addressed in depth in the Linux Specific Visual Refresh article.


Theme/UI Implementation Bugs

  • bug 544815 - Allow for placing Tabs over the Navigation Bar with option for Tabs under the Navigation Bar
  • bug 544816 - Attach combined Stop/Go/Refresh button to the Location Bar
  • bug 544817 - Create Bookmarks Widget with placement dependent on Bookmarks Bar status
  • 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


Platform Capabilities

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

Required

Main Window

  • bug 513157 Ability to draw the title bar ourselves (used for tabs, weave, OS theme integration, personas, private browsing mode)
    • OS X: bug 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

Transparency

  • 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


Cursor changes

Possible Theme Re-factoring

  • 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
Retrieved from "https://wiki.allizom.org/index.php?title=Firefox/Projects/New_Theme&oldid=203153"