This document lists important Rubberducky changes that you may want to copy in your feathers. The code listings shown are styled such that ~~this represents removed lines~~, while

this represents added lines. For details see the complete patches to Rubberducky and the Basic Layouts package

If you run into problems, come to irc.mozilla.org#songbird.

install.rdf changes

Really the only thing preventing 0.4 compatibility is the version target in your install.rdf. The Extension Manager reads the min and max version when you try to install an .XPI, and decides whether or not to proceed.

The first thing you should do is change your minVersion to 0.4pre and your max version to 0.5pre.

install.rdf

<em:targetApplication>
	<Description>
		<em:id>songbird@songbirdnest.com</em:id>
		<em:minVersion>0.2</em:minVersion>
		<em:maxVersion>0.3</em:maxVersion>
		<em:minVersion>0.4pre</em:minVersion>
		<em:maxVersion>0.5pre</em:maxVersion>
	</Description>
</em:targetApplication>

A new onTop option has been added to the feathers section of install.rdf files. If this attribute is set, and the operating system supports it, the player window will appear on top of all other windows.

install.rdf

<Description>
	<songbird:internalName>rubberducky/0.2</songbird:internalName>
	<songbird:showChrome>false</songbird:showChrome>
	<songbird:onTop>false</songbird:onTop>
</Description>

colors.css

Changes

The playlist element has been renamed to sb-playlist. You'll need to make this change in the Window Chrome and Playlist section. Be careful with find and replace though, as the .sb-playlist-tree class hasn't changed.

colors.css

playlist,
sb-playlist,

New Styles

The most important addition in 0.4 is the display pane functionality. Add rules similar to those below to make sure display panes look good in your feathers.

colors.css

listheader,
tree treecol
tree treecol,
.sb-displaypane-header
{
     background-color: #313131 !important;
     border-right: 1px solid #202220 !important; /** Button Shadow */

	 .
	 .
	 .

treecolpicker
treecolpicker,
.sb-displaypane-menubutton
{
     border-top: 1px solid #474948; /** Rubber Highlight */
     background-color: #313131 !important; /* same as the main window */
  
	 .
	 .
	 .

/*********************************************************************************
 DISPLAY PANE
 ********************************************************************************/
  
  .sb-displaypane-header,
  .sb-displaypane-menubutton
  {
	  border-bottom: 1px solid #202220; /** Button Shadow */
  }
  
  #displaypane_right_sidebar
  {
	  border-top: 1px solid #0f100f; /** Groove */
	  border-left: 1px solid #202220; /** Button Shadow */
	  border-right: 1px solid #202220; /** Button Shadow */
	  border-bottom: 1px solid #474948; /** Rubber Highlight */
  }

We've also added some popup blocker styles that you may want to copy.

colors.css

/* popup blocker icon in the status bar */
#page-report-button[blocked] > image {
	border:1px solid transparent;
	-moz-border-radius:2px;
}
#page-report-button[blocked]:hover > image {
	border-top:1px solid #797f76; /** Button Highlight */
	border-right:1px solid #202220; /** Button Shadow */
	border-bottom:1px solid #202220; /** Button Shadow */
	border-left:1px solid #202220; /** Button Shadow */
}
#page-report-button[blocked]:active > image {
	border-top:1px solid #202220; /** Button Shadow */
	border-right:1px solid #797f76; /** Button Highlight */
	border-bottom:1px solid #797f76; /** Button Highlight */
	border-left:1px solid #797f76; /** Button Highlight */
}

As well as some new rules to make bottom tabs look decent.

colors.css

/** Bottom tabs **/
.tab-bottom {
	border-top: 1px solid #313131 !important;
	border-right: 1px solid #474948 !important; /** Rubber Highlight */
	border-bottom: 1px solid #474948 !important; /** Rubber Highlight */
	border-left: 1px solid #474948 !important; /** Rubber Highlight */
	background-color: #313131;
}
.tab-bottom:not([selected="true"]) {
	border-top: 1px solid #313131 !important;
	border-right: 1px solid #474948 !important; /** Rubber Highlight */
	border-bottom: 1px solid #474948 !important; /** Rubber Highlight */
	border-left: 1px solid #474948 !important; /** Rubber Highlight */
	background-color: #313131;
}
.tab-bottom:hover:not([selected="true"]) {
	border-top: 1px solid #313131 !important;
	border-right: 1px solid #202220 !important; /** Button Shadow */
	border-bottom: 1px solid #202220 !important; /** Button Shadow */
	border-left: 1px solid #202220 !important; /** Button Shadow */
	background-color: #313131;
}
.tab-bottom[selected="true"] {
	border-top: 1px solid #313131 !important;
	border-right: 1px solid #797f76 !important; /** Button Highlight */
	border-bottom: 1px solid #474948 !important; /** Rubber Highlight */
	border-left: 1px solid #797f76 !important; /** Button Highlight */
	background-color: #313131;
}

/** General tab styles **/

Keisuke added some new rules to better style the preferences window. You don't have to copy them, but if you are unhappy with the way the prefs look give it a try.

colors.css

#viewGroup
#viewGroup,
#progressBox
{
	background-color: #0f100f !important; /** Groove */
	border: 1px solid !important;
	.
	.
	.
}
  
#viewGroup radio:hover {
	background-color: #B3BAAC !important; /** Light Color 1 */
	background:transparent !important;
}
   
#viewGroup radio:hover > label {
	color: #feffff !important;
}

#viewGroup radio[selected="true"] {
	background-color: #8A8F84 !important; /** Light Color 2 */
	color: #B3BAAC !important; 
}

#viewGroup radio[selected="true"] > label /** In Preferences this inverts the selected label color under Add-ons */
{
	color: #0f100f !important; /** Groove */
}

.
.
.

/* Pane Selector */

prefwindow > .paneSelector,
#viewGroup
{
	background-color: #1b1d1b; /** Rubber Shadow*/
	border-bottom: 2px solid !important;
	-moz-border-bottom-colors: #474948 /** Rubber Highlight */
					#1b1d1b /** Rubber Shadow */
					!important;
}
prefwindow > .paneSelector > radio,
#viewGroup > radio
{
	border-top:1px solid #1b1d1b !important; /** Rubber Shadow */
}
prefwindow > .paneSelector > radio[selected="true"],
#viewGroup > radio[selected="true"]
{
	background-color:#313131 !important; /** color of the Main Window*/
	border-top:1px solid #474948 !important;  /** Rubber Highlight */
}
prefwindow > .paneSelector > radio > .paneButtonLabel,
#viewGroup > radio > .viewButtonLabel
{
	color: #B3BAAC !important; /** Light Color 1 */
}
prefwindow > .paneSelector > radio[selected="true"] > .paneButtonLabel,
#viewGroup > radio[selected="true"] > .viewButtonLabel
{
	color: #feffff !important; /** Light Color Brightest */
}

formsImport.css

Mook has figured out how to style the selection color within text boxes. If you'd like to do this, copy formsImport.css into your chrome/skin/ folder and tweak the color rules.

Images

Koshi and Keisuke updated quite a few images during 0.4 development. To get the new images you can:

Create a new feathers project with 0.4
Download the images from http://publicsvn.songbirdnest.com/browser/trunk/feathers/rubberducky/skin
Unzip songbird-0.4-new-images.zip into your /chrome/skin/ directory

See the Files section in the publicsvn change list for details.

chrome.manifest

These optional lines override the display pane icons when run on Mac OS X. Menus on Mac are white, so the standard light icons don't show up very well.

chrome.manifest

override chrome://songbird/skin/icons/displaypane-contentpane-bottom.png chrome://songbird/skin/icons/mac/displaypane-contentpane-bottom.png os=darwin
override chrome://songbird/skin/icons/displaypane-servicepane-bottom.png chrome://songbird/skin/icons/mac/displaypane-servicepane-bottom.png os=darwin
override chrome://songbird/skin/icons/displaypane-right-sidebar.png chrome://songbird/skin/icons/mac/displaypane-right-sidebar.png os=darwin

Layouts

If you were adventurous and made your own window layout (mainplayer.xul or miniplayer.xul), there are a few more changes you need to be aware of:

[Optional] We've added a toolbar to the right of the faceplate in the top of the main window.
Window size/location is now stored using XUL "persists" attributes. You'll need to add:
```
persist="screenX screenY width height"
```
and
```
onload="windowPlacementSanityChecks();"
```
to your window tag.
The servicepane tag has been renamed to sb-servicepane. Until you make this change in the XUL your service pane will not show up.
[Optional] We've added a sidebar display pane to our main layout. You don't have to copy it over, but users may appreciate it.

See the complete diff for details.

Additional Resources

Retrieved from "http://wiki.songbirdnest.com/Developer/Articles/Maintaining_Add-Ons/Updating_0.3_Feathers_to_be_0.4_Compatible"

Tags:

Attach file or image

Files (0)

Images (0)

Comments (0)

You must login to post a comment.

Updating 0.3 Feathers to be 0.4 Compatible

From $1

Table of contents

Introduction

install.rdf changes

colors.css

Changes

New Styles

formsImport.css

Images

chrome.manifest

Layouts

Additional Resources

Table of contents