Toolbar——制作Firebug插件2

本节新内容有2部分：1，为前面Helloworld面板创建一个按钮；2，在现有面板上追加一个新按钮

文件HelloWorld.xul

<?xml version="1.0"?><overlay xmlns="">
    <script src="chrome://helloworld/content/helloWorld.js" type="application/x-javascript"/>
   
    <commandset id="mainCommandSet">

       
        <command id="cmd_hwMyButton" oncommand="Firebug.HelloWorldModel.onMyButton(FirebugContext)"/>

        id="cmd_hwDisableNetMonitoring"
            oncommand="Firebug.HelloWorldModel.onDisableNetMonitoring(FirebugContext)"/>
    </commandset>
    

   
    <toolbar id="fbToolbar" align="center">

       
        <hbox id="fbToolbarInner" insertbefore="fbDetachButton" flex="1" align="center">

            

            id="fbNetButtons">
                />

                
                id="hwDisableNetMonitor"
                    label="Disable Net Monitoring" class="toolbar-text-button" type="checkbox"
                    tooltiptext="Press To Disable Network Monitoring"
                    command="cmd_hwDisableNetMonitoring"/>
           > 

          
           <hbox id="fbHelloWorldButtons" insertafter="fbNetButtons">
                <toolbarseparator/>
                <toolbarbutton id="hwMyButton"
                    label="Say Hello" class="toolbar-text-button"
                    tooltiptext="Push to say hello" command="cmd_hwMyButton"/>
           </hbox>
       </hbox>
    </toolbar>
</overlay>

文件HelloWorld.js

FBL.ns(function() { with (FBL) {
var panelName = "HelloWorld";
Firebug.HelloWorldModel = extend(Firebug.Module,
{
    showPanel: function(browser, panel) {
        var isHwPanel = panel && panel.name == panelName;
        var hwButtons = browser.chrome.$("fbHelloWorldButtons");
        collapse(hwButtons, !isHwPanel);

        //alert("showPanel!");
    },

    onMyButton: function(context) {
        alert("Hello World!");
    },

    onDisableNetMonitoring: function(context) {
        alert("OK, the click is handled");
    }
});

function HelloWorldPanel() {}
HelloWorldPanel.prototype = extend(Firebug.Panel,
{
    name: panelName,
    title: "Hello World!",

    initialize: function() {
        Firebug.Panel.initialize.apply(this, arguments);

        //alert("panel init");
    }
});

Firebug.registerModule(Firebug.HelloWorldModel);
Firebug.registerPanel(HelloWorldPanel);
}})

下面是新增的Hello world面板的效果：

这是hwDisableNetMonitor的样子：

Model, Panel, Context

下面是3着的关系与区别：

The Model object should be used for data shared among pages within the same browser window.

The Context object should be used for data associated with a web page.

The Panel object should be used to store presentation data (i.e. HTML)

我的另外一些理解：

1. Similarly to the Panel, the Model has to be registered within a global Firebug object.

Model和Panel通过register之后，在Firebug中都是全局可见的。也就是说，在Firebug中，只能有一个实例，不同的插件必须使用自己独有的名称，否则，后者会覆盖前者。

2. This method(showPanel) is executed by Firebug's framework whenever a panel is displayed.

showPanel在点击任何一个面板时都会调用，从代码也可以看出一个Model并没有跟任何一个panel关联起来。假如有10个插件，每个插件只有1个Model，那么每次点击面板时，都会有10个model的showPanel接口被调用。可以通过在showPanel中添加alert("showPanel!");来检验以上想法。

3. HelloWorldPanel的initialize方法只在启动firebug时会被调用。