Nothing Playing

Songbird has CSS classes for presenting informational messages to the user in a consistent and uniform manner.  Currently these are used by add-ons mostly to express a 'not playing' state, since most interesting Songbird add-ons are media related and present information based on a playing vs. 'not-playing' state.  You can see examples of this with mashTape and the Album Art display panes.

There are two CSS classes of interest.  The first one, empty,  defines the background of the tab (e.g., the hash you see in the screenshot) and can be found in displayPane.css:168. The second one, empty-message, defines the look of the text-label sitting on top of the background and can be found in feathers.css:698.  Both of these are defined by the Feather, thus allowing your add-on to seamlessly blend into the app if the Featherer has done their job right. :)

To use this in your XUL, it's as simple as defining something like:

<deck id="my-deck" flex="1">
    <vbox class="empty" flex="1">
        <label class="empty-message"
               value="albumart.displaypane.not_playing_message" />
    </vbox>
    <hbox>
        <!-- put your normal XUL here -->
    </hbox>
</deck

The albumart.displaypane.not_playing_message entity is defined by Songbird's DTD, and is the string "Nothing Playing".  Obviously, feel free to replace it with any string of your choosing - but you get free localisation if you use the Songbird DTD's string.

You then hook up a listener to the sbIMediacoreManager service to listen and switch the .selectedIndex of my-deck appropriately based on whether a track is playing or not.  For more background and information on how to add a listener to the Mediacore Manager, see our Media Playback recipe.

Some sample code for doing this:

var myDeck = document.getElementById("my-deck");
var myListener = {
    onMediacoreEvent: function(ev) {
        switch (ev.type) {
            case Ci.sbIMediacoreEvent.TRACK_CHANGE:
                myDeck.selectedIndex = 1;
                // do something neat
                break;
            case Ci.sbIMediacoreEvent.STREAM_STOP:
            case Ci.sbIMediacoreEvent.STREAM_END:
                myDeck.selectedIndex = 0;
                // do something neat
                break;
            default:
                break;
        }
    }
}
gMM.addListener(myListener);