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

Question

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

Existe-t-il une meilleure pratique/méthode pour créer une fenêtre inférieure dans une extension, puisqu'il n'y a pas de "barre latérale pour le bas" du navigateur?

Answer 1

Vous créez 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 de pages principales de Firefox browser.xul nous avons

<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 à partir d'une version antérieure de fichier Firebug browserOverlay.xul nous avons

<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 début de balisage XUL avec

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

C'est ce que le moteur Gecko utilise pour déterminer comment une superposition s'accorde avec la page à superposer. Si vous regardez browserOverlay.xul, vous verrez également d'autres points d'insertion pour commandset, statusbar, etc.

Pour plus d'informations, reportez-vous au Mozilla Developer Center.