Wie kann ich eine Firebug-like unteren Fenster Firefox-Erweiterung erstellen

Question

Mehrere Erweiterungen bieten ein „unteren Fenster“ für ihre Inhalte. Firebug und ScribeFire sind gute Beispiele, bei denen der Hauptinhalt am unteren Rand des Browsers angezeigt wird. Dies scheint die Sidebar Funktionalität im Browser sehr ähnlich zu sein.

Gibt es ein bewährte Methode / Verfahren ein unteres Fenster in einer Erweiterung zu erstellen, da es keine „Seitenleiste für den Boden“ des Browsers ist?

Answer 1

Sie würden Ihre Erweiterungen UI mit einem Overlay erstellen. Im Overlay geben Sie die Einfügemarke der Benutzeroberfläche in Bezug auf die Haupt-Browser-Seite, browser.xul.

Auszug aus Firefox Hauptseite browser.xul wir haben

<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>

und Auszug aus einer früheren Version von Firebug Datei browserOverlay.xul wir haben

<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>

Beachten Sie, dass beiden Blöcke von XUL-Markup mit

starten

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

Dies ist, was die Gecko-Engine, um zu bestimmen verwendet, wie ein Overlay paßt zusammen mit der Seite überschichtet wird. Wenn Sie bei browserOverlay.xul aussehen werden Sie auch andere Einfügepunkten für commandset, statusbar sehen, etc.

Weitere Informationen finden Sie im Mozilla Developer Center .