How to manually customize Firebug 1.5.0 for widescreen use

There’s a customized version of Firebug available called Widerbug that changes the Firebug layout to look like this:

Unfortunately Widerbug is not updated as frequently as Firebug, so if you want to use the most recent versions of Firebug you’re out of luck.

To solve this issue I used FileMerge to compare Widerbug with a stock release of Firebug, and came up with the following list of required changes: (UPDATE: It turns out that in the Widerbug xpi there’s a text file “instructions.txt” that details these steps as well… ha! Note that the steps described in the Widerbug “instructions.txt” are slightly more complex than mine, as they involve changing some Firebug artwork, the update URL, and signing the XPI.)

Anyway, here are my changes for Firebug 1.5.0. We edit the relevant files in-place, after Firebug has been installed. First you need to open the Firefox “Profiles” directory, which on OS X is located at ~/Library/Application Support/Firefox/Profiles - open the appropriate profile, then look for the “extensions” directory, and inside that is the “firebug@software.joehewitt.com” directory. Make the following edits:

1) content/firebug/browserOverlay.xul

Replace this:

    <vbox id="appcontent">
        <splitter id="fbContentSplitter" collapsed="true"/>
        <vbox id="fbContentBox" collapsed="true" persist="height"></vbox>
    </vbox>

With this:

    <hbox id="browser">
        <splitter id="fbContentSplitter"/>
        <vbox id="fbContentBox" flex="1" collapsed="true" persist="width"/>
    </hbox>

2) content/firebug/firebugOverlay.xul

Change line 141 from

    <box id="fbPanelPane" flex="1" persist="orient">

to

    <vbox id="fbPanelPane" flex="1" persist="orient">

and change line 276, the corresponding closing tag, from

    </box>

to

    </vbox>

3) content/firebug/firebug.css

Insert this:

    #fbToolbox {
        border-top-width: 0px;
        border-top-style: none;
    }

Before this:

    /************************************************************************************************/
    panelTabMenu {
        -moz-binding: url("chrome://firebug/content/bindings.xml#panelTabMenu");
    }

4) skin/classic/mac/firebug.css

Replace this:

    #fbContentSplitter {
        border-top: 1px solid #BBB9BA;
        border-bottom: none;
        background: #f3f3f3 !important;
        min-height: 3px;
        max-height: 3px;
    }

With this:

    #fbContentSplitter {
        border-left: 1px solid #BBB9BA;
        border-right: 1px solid #BBB9BA;
        background: #f3f3f3 !important;
        min-width: 5px;
        max-width: 5px;
    }

4) skin/classic/win/firebug.css

Replace this:

    #fbContentSplitter {
        border-top: 1px solid !important;
        -moz-border-top-colors: threedShadow !important;
        border-bottom: 1px solid !important;
        -moz-border-bottom-colors: #EEEEEE !important;
        min-height: 3px;
        max-height: 3px;
        background-color: #FFFFFF;
    }

With this:

    #fbContentSplitter {
        border-left: 1px solid !important;
        -moz-border-left-colors: threedShadow !important;
        border-right: 1px solid !important;
        -moz-border-right-colors: threedShadow !important;
        min-width: 3px;
        max-width: 3px;
        background-color: #d4d0c8;
    }

NOTE: The next time you update Firebug these changes will - of course - be overridden by the new version. So it’s pretty ugly, but it works.