Comment puis-je créer une extension Firefox pour la fenêtre inférieure semblable à Firebug

Question

Plusieurs extensions offrent une "fenêtre inférieure". pour voir leur contenu. Firebug et ScribeFire sont de bons exemples où le contenu principal apparaît en bas du navigateur. Cela semble être très similaire à la fonctionnalité de la barre latérale dans le navigateur.

Existe-t-il une méthode / méthode recommandée pour créer une fenêtre inférieure dans une extension, dans la mesure où il n'y a pas de "barre latérale pour le bas"? du navigateur?

Answer 1

Vous créerez l'interface utilisateur de vos extensions à l'aide d'une superposition. Dans la superposition, vous spécifiez le point d'insertion de votre interface utilisateur par rapport à la page principale du navigateur, browser.xul.

Extrait des pages principales de Firefox: browser.xul

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

et extrait d'une version précédente du fichier firebug browserOverlay.xul

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

Notez que les deux blocs de balisage XUL commencent par

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

C’est ce que le moteur Gecko utilise pour déterminer le rapport entre une superposition et la page en cours de superposition. Si vous consultez browserOverlay.xul, vous verrez également d'autres points d'insertion pour jeu de commandes, barre d'état , etc.

Pour plus d'informations, consultez le Centre de développement Mozilla .