Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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.</p> <p>Excerpted from Firefox's main pages browser.xul we have</p> <pre><code>&lt;vbox id="appcontent" flex="1"&gt; &lt;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);" /&gt; &lt;/vbox&gt; </code></pre> <p>and excerpted from a previous version of Firebug file browserOverlay.xul we have</p> <pre><code>&lt;vbox id="appcontent"&gt; &lt;splitter id="fbContentSplitter" collapsed="true"/&gt; &lt;vbox id="fbContentBox" collapsed="true" persist="height"&gt; &lt;toolbox id="fbToolbox"&gt; &lt;toolbar id="fbToolbar"&gt; &lt;toolbarbutton id="fbFirebugMenu" type="menu"&gt; &lt;menupopup onpopupshowing="return FirebugChrome.onOptionsShowing(this);"&gt; &lt;menuitem label="&amp;firebug.DisableFirebug;" type="checkbox" oncommand="FirebugChrome.onToggleOption(this)" option="disabledAlways"/&gt; &lt;menuitem type="checkbox" oncommand="FirebugChrome.onToggleOption(this)" option="disabledForSite"/&gt; &lt;menuitem label="&amp;firebug.AllowedSites;" command="cmd_openFirebugPermissions"/&gt; &lt;menuseparator/&gt; &lt;menu label="&amp;firebug.TextSize;"&gt; &lt;menupopup&gt; &lt;menuitem label="&amp;firebug.IncreaseTextSize;" oncommand="Firebug.increaseTextSize(1)"/&gt; &lt;menuitem label="&amp;firebug.DecreaseTextSize;" oncommand="Firebug.increaseTextSize(-1)"/&gt; &lt;menuitem label="&amp;firebug.NormalTextSize;" oncommand="Firebug.setTextSize(0)"/&gt; &lt;/menupopup&gt; &lt;/menu&gt; &lt;menu label="&amp;firebug.Options;"&gt; &lt;menupopup onpopupshowing="return FirebugChrome.onOptionsShowing(this);"&gt; &lt;menuitem type="checkbox" label="&amp;firebug.AlwaysOpenInWindow;" oncommand="FirebugChrome.onToggleOption(this)" option="openInWindow"/&gt; &lt;menuitem type="checkbox" label="&amp;firebug.ShowTooltips;" oncommand="FirebugChrome.onToggleOption(this)" option="showInfoTips"/&gt; &lt;menuitem type="checkbox" label="&amp;firebug.ShadeBoxModel;" oncommand="FirebugChrome.onToggleOption(this)" option="shadeBoxModel"/&gt; &lt;/menupopup&gt; &lt;/menu&gt; &lt;menuseparator/&gt; &lt;menuitem label="&amp;firebug.Website;" oncommand="Firebug.visitWebsite('main')"/&gt; &lt;menuitem label="&amp;firebug.Documentation;" oncommand="Firebug.visitWebsite('docs')"/&gt; &lt;menuitem label="&amp;firebug.Forums;" oncommand="Firebug.visitWebsite('discuss')"/&gt; &lt;menuseparator/&gt; &lt;menuitem label="&amp;firebug.Donate;" oncommand="Firebug.visitWebsite('donate')"/&gt; &lt;/menupopup&gt; &lt;/toolbarbutton&gt; &lt;toolbarbutton id="fbDetachButton" class="toolbarbutton-iconic" tooltiptext="&amp;firebug.DetachFirebug;" command="cmd_detachFirebug"/&gt; &lt;toolbarbutton id="fbCloseButton" class="toolbarbutton-iconic" tooltiptext="&amp;firebug.CloseFirebug;" command="cmd_toggleFirebug"/&gt; &lt;/toolbar&gt; &lt;/toolbox&gt; &lt;hbox id="fbPanelBox" flex="1"/&gt; &lt;hbox id="fbCommandBox"/&gt; &lt;/vbox&gt; &lt;/vbox&gt; </code></pre> <p>Notice that both blocks of XUL markup start with </p> <pre><code>&lt;vbox id="appcontent".../&gt; </code></pre> <p>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 <code>commandset, statusbar</code>, etc.</p> <p>For more information refer to the <a href="http://developer.mozilla.org/En" rel="noreferrer">Mozilla Developer Center</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload