Как я могу создать Firebug-подобное расширение нижнего окна Firefox - PullRequest
Новая
       14

Как я могу создать Firebug-подобное расширение нижнего окна Firefox

6 голосов
/ 06 октября 2008

Несколько расширений предлагают «нижнее окно» для просмотра своего контента. Firebug и ScribeFire являются хорошими примерами, когда основное содержимое отображается внизу браузера. Похоже, это очень похоже на функциональность боковой панели в браузере.

Есть ли лучший метод / метод для создания нижнего окна в расширении, поскольку в браузере нет "боковой панели для нижнего"?

1 Ответ

8 голосов
/ 06 октября 2008

Вы бы создали свой пользовательский интерфейс расширений, используя наложение. В оверлее вы указываете точку вставки вашего интерфейса относительно главной страницы браузера browser.xul.

Выдержки из основных страниц 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>

и взято из предыдущей версии файла 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>

Обратите внимание, что оба блока разметки XUL начинаются с 

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

Это то, что движок Gecko использует для определения того, как наложение совмещается с наложенной страницей. Если вы посмотрите на browserOverlay.xul, вы также увидите другие точки вставки для commandset, statusbar и т. Д.

Для получения дополнительной информации см. Центр разработчиков Mozilla .

...