Page last modified 14:39, 3 Dec 2008 by stevel

Songbird Wiki > Developer Center > Articles > Maintaining Add-Ons > Updating Feathers for Songbird 1.0

Updating Feathers for Songbird 1.0

1. 1.1. Version Update
2. 1.2. Display Panes
  1. 1. 1.2.1.1. Maximise/Restore Button
    2. 1.2.1.2. Tab Headers
    3. 1.2.1.3. Button Headers
    4. 1.2.1.4. New Display Pane Add-on Picker Button
    5. 1.2.1.5. Message Classes
    6. 1.2.1.6. Show/hide display pane buttons
3. 1.3. Album Art
4. 1.4. Buffering State
5. 1.5. Service pane toggle button
6. 1.6. Text-link class
7. 1.7. Generic Success/Error Icons
8. 1.8. HTML-Follows-Feathers Styling
2. Addendum 1 (2008 November 24)
1. 2.1. Mac titlebars
2. 2.2. <scale/> Images & Styling
3. Addendum 2 (2008 December 3)

Yay! Songbird 1.0! As with any new release of Songbird, we've got some new changes that went into Gonzo that Featherers (a.k.a. you) will want to be aware of in order to update accordingly. Most of the changes this release were in support of display pane add-ons.

To aid Featherers, we've put together a .zip file of all the new graphics, and a second .zip file containing *just* the changes to the necessary CSS files so that you can just drop in the changes. We do encourage you to read the rest of this guide in order to have some context as to what the changes entail though.

new-images.zip
- This contains all the new and renamed images. Extract this into your chrome/skin directory and it should create the necessary sub-directories.
affected-css.zip
- This contains the CSS files in chrome/skin that were changed. This contains the CSS files in their entirety. We provide these in case people aren't familiar with diffs and would rather browse the new changes in the CSS files.
affected-css.patch
- This contains a GNU diff patch of the CSS changes from 0.7 to 0.8. This will almost certainly not apply cleanly to your tree if you've changed your Feathers (and if you didn't, then you probably should just start anew :)), but are provided in case people just want to see the changes only. (Note: this doesn't include the html.css or scales.css referenced in the last topics below, you should grab those from affected-css.zip)

Version Update

(Gotta start with the easy stuff ;-)) First off, go ahead and bump your maxVersion in your extension's install.rdf to 1.0.*:

<em:targetApplication>
	<Description>
		<em:id>songbird@songbirdnest.com</em:id>
		<em:minVersion>0.7.0</em:minVersion>
		<em:maxVersion>1.0.*</em:maxVersion>
	</Description>
</em:targetApplication>

Display Panes

Maximise/Restore Button

At the moment, this is used only by mashTape. We'll be seeing how many people find it useful, and might move the functionality into the main Songbird application later. This is the button in the top-right corner of the Content Pane Bottom display pane that allows the user to maximise the display pane to fill the full Songbird window (thus collapsing the media view). The button is shown here:

There are two buttons, one to maximise and one to restore. Both should go into
chrome/skin/display-pane in your Feather's XPI.

Tab Headers

This is a change to enable display pane authors to utilise some empty space (the display pane header) to place tab navigation. Currently this is also only used by mashTape, but can be easily used by any other add-on as well. These tabs can be seen in the screenshot above as well (displaying the Artist Info, News, Photos, and Videos tabs).

While no CSS changes went in to for this feature specifically, you should still be aware when styling the tab elements that they will affect the tabs in the display pane header as well.

Button Headers

This is a change to allow display pane headers to become buttons that toggle state. Currently this is only used by the Album Art display pane in order to toggle between "Now Playing" and "Selected Item" states.

While no CSS changes went in to for this feature specifically, you should still be aware of this change.

New Display Pane Add-on Picker Button

Other changes that went in were the CSSs rule for the sb-displaypane-menubutton class, and a new add-on picker button. The exact line removed is viewable in our source browser.

The new add-on picker button can be downloaded here.

Message Classes

New CSS classes were added to allow add-ons to uniformly display informative messages. This is currently used by both Album Art & mashTape for its "Nothing playing" or "No artist information found" messages.

You can see the new "empty-message" class in the source browser.

Show/hide display pane buttons

Following the lead set by Atreiu's Display Pane Buttons add-on, we integrated similar functionality into the app to allow users one-click access to toggle and expose/hide display panes. These buttons are in the bottom right statusbar (for the Content Pane Bottom & Right Sidebar display panes) and in the service pane statusbar (for the Service Pane Bottom display pane), and are seen in this screenshot here:

You can download the new display pane buttons in our source browser:

These should go into the chrome/skin/display-pane directory in your Feather's XPI.

Album Art

There is now an image in chrome/skin/album-art called drop-target.png that frames the droppable area (for allowing artwork to be drag-and-dropped onto the album art display pane). There is also now a drop-message CSS class that has to be defined in your feathers.css.

.drop-message {
color:rgb(120,120,120);
}

Buffering State

For streaming or remote media, we now reflect buffering state in the faceplate. This requires some CSS changes in images.css, as well as the corresponding images in the chrome/skin/media-control-pane directory:

Service pane toggle button

We changed from having two separate buttons to one button with different states. The new service pane toggle button can be found here and the CSS changes can be seen in our source browser.

Text-link class

We now include and define the text-link CSS class for add-ons ported over from Firefox.

Generic Success/Error Icons

We've added generic success & alert/error icons for add-on authors to use. Currently, the only add-on using them is LyricMaster. They can be found in chrome/skin/base-elements as icon-error.png and icon-success.png.

HTML-Follows-Feathers Styling

More and more add-ons are constructing their output in HTML iframes (LyricsMaster, mashTape, and Concerts are three examples). Prior to Songbird 1.0, Featherers had no way to style the content of these HTML iframes. Thanks to Keisuke's fixes for bug 4103, we've added a new html.css to the chrome/skin directory for add-on developers to include in their iframes. Featherers can then style this html.css to allow the iframes to follow the Feather style.

Addendum 1 (2008 November 24)

Mac titlebars

If you created Feathers during the 0.8/1.0 development period, it's possible your Feather derived from a Mac OS X overrides.css that is missing a couple of rules that ended up being changed for the Mac titlebar going native.

If you apply the patch for bug 13789 to your own os-specific/mac/overrides.css, you should be all set.

<scale/> Images & Styling

~~bug 12347~~ caused <scale/> XUL elements to be missing crucial images and styles. We've updated the CSS & image files at the top of this document with the requisite images/CSS changes now.

Addendum 2 (2008 December 3)

The os-specific/mac/overrides.css has changed enough that it's probably easiest to just take the new file and patch in your local changes.

Also, the clear searchbar button class name changed. You'll want to make sure you change the rule in images.css to look like this rule.

Retrieved from "http://wiki.songbirdnest.com/Developer/Articles/Maintaining_Add-Ons/Updating_Feathers_for_Songbird_1.0"

Tag page
What links here

Files 3

Attach file or image

	Size	Date	Attached by
affected-css.patch No description	8.09 kB	10:25, 17 Oct 2008	stevel	Actions
affected-css (2).zip No description	17.72 kB	15:54, 24 Nov 2008	stevel	Actions
new-images (1).zip No description	40.61 kB	15:54, 24 Nov 2008	stevel	Actions