How can I create a Firebug-like bottom window Firefox extension

Question

Several extensions offer a "bottom window" for viewing their content. Firebug and ScribeFire are good examples where the main content appears at the bottom of the browser. This appears to be very similar to the sidebar functionality in the browser.

Is there a best practice/method to create a bottom window in an extension, since there is no "sidebar for the bottom" of the browser?

Answer 1

You would create your extensions UI using an Overlay. In the overlay you specify the insertion point of your UI with regards to the main browser page, browser.xul.

Excerpted from Firefox's main pages browser.xul we have

<vbox id="appcontent" flex="1">
    <tabbrowser id="content" disablehistory="true"
                flex="1" contenttooltip="aHTMLTooltip"
                contentcontextmenu="contentAreaContextMenu"
                onnewtab="BrowserOpenTab();"
                autocompletepopup="PopupAutoComplete"
                ondragdrop="nsDragAndDrop.drop(event, contentAreaDNDObserver);"
                onclick="return contentAreaClick(event, false);"
                />
  </vbox>

and excerpted from a previous version of Firebug file browserOverlay.xul we have

<vbox id="appcontent">
    <splitter id="fbContentSplitter" collapsed="true"/>
    <vbox id="fbContentBox" collapsed="true" persist="height">
        <toolbox id="fbToolbox">
            <toolbar id="fbToolbar">
                <toolbarbutton id="fbFirebugMenu" type="menu">
                    <menupopup onpopupshowing="return FirebugChrome.onOptionsShowing(this);">
                        <menuitem label="&firebug.DisableFirebug;" type="checkbox"
                                  oncommand="FirebugChrome.onToggleOption(this)" option="disabledAlways"/>
                        <menuitem type="checkbox"
                                  oncommand="FirebugChrome.onToggleOption(this)" option="disabledForSite"/>
                        <menuitem label="&firebug.AllowedSites;" command="cmd_openFirebugPermissions"/>
                        <menuseparator/>

                        <menu label="&firebug.TextSize;">
                            <menupopup>
                                <menuitem label="&firebug.IncreaseTextSize;"
                                          oncommand="Firebug.increaseTextSize(1)"/>
                                <menuitem label="&firebug.DecreaseTextSize;"
                                          oncommand="Firebug.increaseTextSize(-1)"/>
                                <menuitem label="&firebug.NormalTextSize;" oncommand="Firebug.setTextSize(0)"/>
                            </menupopup>
                        </menu>

                        <menu label="&firebug.Options;">
                            <menupopup onpopupshowing="return FirebugChrome.onOptionsShowing(this);">
                                <menuitem type="checkbox" label="&firebug.AlwaysOpenInWindow;"
                                           oncommand="FirebugChrome.onToggleOption(this)"
                                           option="openInWindow"/>

                                <menuitem type="checkbox" label="&firebug.ShowTooltips;"
                                           oncommand="FirebugChrome.onToggleOption(this)"
                                           option="showInfoTips"/>

                                <menuitem type="checkbox" label="&firebug.ShadeBoxModel;"
                                          oncommand="FirebugChrome.onToggleOption(this)"
                                          option="shadeBoxModel"/>
                            </menupopup>
                        </menu>
                        <menuseparator/>

                        <menuitem label="&firebug.Website;" oncommand="Firebug.visitWebsite('main')"/>
                        <menuitem label="&firebug.Documentation;" oncommand="Firebug.visitWebsite('docs')"/>
                        <menuitem label="&firebug.Forums;" oncommand="Firebug.visitWebsite('discuss')"/>
                        <menuseparator/>
                        <menuitem label="&firebug.Donate;" oncommand="Firebug.visitWebsite('donate')"/>
                    </menupopup>
                </toolbarbutton>

                <toolbarbutton id="fbDetachButton" class="toolbarbutton-iconic"
                               tooltiptext="&firebug.DetachFirebug;" command="cmd_detachFirebug"/>

                <toolbarbutton id="fbCloseButton" class="toolbarbutton-iconic"
                               tooltiptext="&firebug.CloseFirebug;" command="cmd_toggleFirebug"/>
            </toolbar>
        </toolbox>

        <hbox id="fbPanelBox" flex="1"/>
        <hbox id="fbCommandBox"/>
    </vbox>
</vbox>

Notice that both blocks of XUL markup start with

<vbox id="appcontent".../>

This is what the Gecko engine uses to determine how an overlay fits together with the page being overlayed. If you look at browserOverlay.xul you'll also see other insertion points for commandset, statusbar, etc.

For more information refer to the Mozilla Developer Center.