UI and Layout Redesign

High-level Feature Goals

• Redesign Songbird to maximize learnability, usability, and engagement for our target users - who are pro-choice music-nuts with a high risk tolerance and who may or may not be developers.
• Keep it simple - Fewer things users can click on without sacrificing functionality.
• Contrast and visual grouping that communicates the order of importance of individual or a grouping of UI elements.
• Minimize confusion between UI elements that expose media player functionality and elements that expose browser functionality (eg:the back button and the previous track button).
• Increase UI feedback and responsiveness to offset perception of any poor system performance.
• Communicate that we know what we are doing through a polished UI while being honest about the state of experimental/incomplete features.
• Communicate product identity through layout and style that is unique from competitive media players while following best practices.
• Songbird looks like Songbird - not a clone of another media player.
  
• Media player first, media web player second, web browser third.
• Anticipate UI solutions for features in the roadmap that are scheduled for future releases so that the UI can adapt in a smooth/evolutionary manner in accordance to our own timeline.
• Continue to be an effective component of the Songbird platform by acting as an API for add-ons that enhance application functionality and appearance at the UI-level.
  

Planning Timeline

Filed Bugs

All bugs are dependencies of bug 10134

Prioritized list of UI changes

!!!The following costing is a rough estimation!!!

Must do
[  ] Button in the tab bar area to support showing and hiding the service pane
  [2d] display translucent pane on hover after short timeout
    └ when the cursor is not over the button and not over the service pane then hide it after a
      short delay
      └ display translucent pane when media items are dragged on top after delay
  [1d] toggle between show/hide when clicked - when in webpage mode only
    └ if the user wants to always show the pane even when viewing webpages then they can click 
      the button to toggle it to always show for all web tabs
    └ when the real service pane is being displayed then hover and dragging on top of the button 
      does nothing
  [  ] drag and drop behavior
    └ media items dropped on top of the button should behave the same as when media items are
      dropped on the main library node
    └ when media items are dragged and held on top of a node that is a drop target then the media tab
      should show the node
      └ once the media items are dropped then the user should be taken back to where they started 
        the drag operation
[7d] Dedicated tab to display all content accessible from the service pane
  [4d] clean up tab browser code
  [2d] create media tab
    └ tab is at the far left all the time
    └ rm close button
    └ tab can not be reordered
    └ may not size like other tabbs, need investigation
    └ shortcut key to give focus to the tab
  [1d] put correct content in correct tabs
    └ if the content is at a chrome URL and a node with that URL is int he service pane then 
      display the content in the media tab
[14] New layout
  [5] redo title bar
    └ starting from the left: menus, title, buttons - win/linux
    └ rm feather button
    └ the only draggable area is the title bar
      └ add faux-title-bar to all dialogs and windows
      └ the mini player can be moved by dragging anywhere in the window
    └ right click to change layout
  [ ] new main player
  [ ] redo media controls + faceplate
    └ [1] new volume widget with mute button, max volume button, slider
    └ new faceplate
      └ [2] add ratings widget
      └ [1] add album art
      └ [1] add overlayable area for buttons that trigger actions on currently playing media item      
      └ [1] better support for buffering state  
  [1] enhance navigation bar - need to media tab to start
    └ media mode - only show back, forward, media view, tools, search
      └ the user is in media mode when the media tab is selected
    └ we also need some API for add-on developers so they can say when they want their element to 
      show - CSS
  [] new mini player
    └ [1] add contextual menu
    └ [2] faceplate changes
[1] A button in the navigation bar for adding webpages/feeds/bookmarks to the service pane
[1] Ability to move the media controls to the top/bottom of the window using a contextual menu
  └ have a single element and move it to the top and bottom depending on user pref seems to work
  └ hook for CSS
[2] Simplify display pane menu for displaying/choosing add-ons
[  ] Documentation telling add-on developers what changes we made and what changes they need to 
    make to support the new layout (Stevel)
================================================================================
[10d] Implement new feather - assume design is complete
  └ Resize elements in the main player window as needed
  [3d] Redo all graphics for buttons, icons, background images
  [2d] Apply new graphics (somewhat blocked by layout)
  [3d] Apply new colors, borders, states (somewhat blocked by layout)
  [2d] Minimal fixes to moz apps (blocked by above - this is one of the last steps)
[1d] Write graphic asses spec for external contractor use


Better if we can do
[1] move around display panes
  └ needs investigation
    └ the right sidebar is currently not part of any binding so I assumed we will be ok. also,
      the service pane can stay as is more or less. the one that needs investigation is the one 
      that at the bottom of the content pane, I think.
[  ] System-wide status display
    └ toaster-style display of statuses in the service pane area
    └ enhance the status bar with better media list summary
[3] Simplify how users can define the tree col spec for media lists
    └ rm column picker button
    └ add contextual menu
[3] CSS hook for adding styles to the column that is used to sort the list - needs investigation
[2] Zoom the album art displayed in the faceplate on click - need the album art in the faceplate first
[  ] Fix up dialogs
    └ add correct dialog type attribute
    └ rm close button
    └ better OS-specific button locations
[  ] Ability to move the media controls to the top/bottom of the window using drag and drop
[2] Ability to replace the media controls with a mini version while in the main layout via 
    contextual menu
[  ] Show/hide web playlist
[  ] Animation where applicable
    └ identify what our capabilities are
[  ] Add button in the tab strip to create new tabs
[  ] Add button in the tab strip to access all tabs in a menu
[  ] Rounded corners to all windows and dialogs
[  ] Simplify search service switching logic and menu
[  ] Title for device nodes in the service pane should be in the form of a bread crumb
[  ] Enahnce button in the tab bar area to support showing and hiding the service pane
     └ if the user wants to always hide the pane when viewing media content then they can click 
       the button to toggle it to always be hidden
[  ] Don't spring load some nodes - eg: device summary page
[2] New media page button - needs more design thought
[2] Command+L dialog for openeing new tabs from the media tab with url autocomplete  - need to 
    media tab to start
[2] New tools button for media list actions
================================================================================
[  ] Clean up preferences and other moz apps
[  ] Publish graphic asset templates
[  ] Implement support/migration for legacy feathers to work in future app versions
[  ] Package current default feather as an add-on and publish it on the add-on site


Nice to do
[  ] Awesome bar integration
    └ consolidate media and web auto complete
    └ add [+] button to inside the text field
    └ port Firefox UI for auto complete
[  ] Auto complete search query using metadata
[  ] Developer-facing APIs
    └ showing/hiding buttons in the navigation bar depending on the mode
    └ display pane content being able to see what mode the navigation bar is in
    └ the content being able to tell the navigation bar if the url field should or should not 
       be displayed
[  ] Ask Francis to enhance and finish up the display pane switcher add-on
[  ] Add contextual menu so that everything in the main player except the media controls and a 
    display pane is hidden
================================================================================
[  ] Clean up feather API - eg: global, bindings
[  ] Create and alternate feather so we launch with 2 feathers for the new layout