How to add a new toolbar with buttons for my extenstion

dooleyk · December 18, 2014, 8:00pm

Can you point me to a good example of how to add a toolbar for an extension?

I have already created an overlay that adds my menu to the Tools menu and which uses a commandset to alias my various menuitem commands.

I’d like to create a toolbar with buttons that duplicate some of the menuitem commands using the same commandset.

BTW, I’ve been trying to follow the Mozilla article…

Adding Toolbars and Toolbar Buttons

Here’s an abbreviated version of what I’m trying. The menu part works and the error console doesn’t show any errors, but there is no toolbar.

<overlay>...

<commandset>
    <commandset id="cmd_isapg6" commandupdater="true" events="*" oncommandupdate="IsAPg6();"/>
    <command id="cmd_qpl_menu_new" label="&qpl_menu_new.label;" accesskey="&qpl_menu_new.accesskey;"  oncommand="qplBuildDialog(ko, 'qpl_menu_new');"/>
    <command id="cmd_qpl_menu_svn_checkout" label="&qpl_menu_svn_checkout.label;"

...
</commandset>

<menupopup id="popup_tools">

    <menu id="qpl_menu" label="&qpl_menu.label;" accesskey="&qpl_menu.accesskey;" insertafter="menu_tools_separator"> 
        <menupopup>

        <menuitem id="qpl_menu_new" command="cmd_qpl_menu_new"/>
        <menuitem id="qpl_menu_svn_checkout" command="cmd_qpl_menu_svn_checkout"/>
...
    </menupopup>
    </menu>

</menupopup>



<toolbarpalette id="qpl_toolbar_pallette">
    <toolbarbutton id="qpl_button_new"
      class="toolbarbutton-1 chromeclass-toolbar-additional" 
      label="Create new project"
      tooltiptext="C"
      command="cmd_qpl_menu_new" />
    <toolbarbutton id="qpl_button_svn_checkout"
      class="toolbarbutton-1 chromeclass-toolbar-additional" 
      label="Create new project"
      tooltiptext="C"
      command="qpl_button_svn_checkout" />

    <!-- More buttons here. -->

</toolbarpalette>

<toolbox id="qpl_toolbox">
  <toolbar id="qpl-toolbar" toolbarname="QPL Toolbar"
    accesskey="K"
    customizable="true" mode="icons" context="toolbar-context-menu" 
    defaultset="qpl_button_new,qpl_button_svn_checkout"
    insertbefore="standardToolbar" />
</toolbox>

...

</overlay>

Defman · December 18, 2014, 8:11pm

Please show full version and your chrome.manifest (you can simply replace the name of your extension with “test” if you don’t want to make your add-on developing more public). This bug can be in your add-on due bad overlaying in XUL or in chrome.manifest.

dooleyk · December 18, 2014, 8:18pm

chrome.manifest

content    qplwrapper    content/  
locale    qplwrapper    en-US    locale/en-US/
skin    qplwrapper    classic/1.0    skin/
overlay chrome://komodo/content/komodo.xul chrome://qplwrapper/content/overlay.xul
style    chrome://global/content/customizeToolbar.xul    chrome://qplwrapper/skin/overlay.css

overlay.xul

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://qplwrapper/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://qplwrapper/locale/overlay.dtd">
<overlay id="qplwrapper-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<stringbundleset id="stringbundleset">
    <stringbundle id="qplwrapper-strings" src="chrome://qplwrapper/locale/qplwrapper.properties"/>
</stringbundleset>


<commandset>
    <commandset id="cmd_isapg6" commandupdater="true" events="*" oncommandupdate="IsAPg6();"/>
    <command id="cmd_qpl_menu_new" label="&qpl_menu_new.label;" accesskey="&qpl_menu_new.accesskey;"  oncommand="qplBuildDialog(ko, 'qpl_menu_new');"/>
    <command id="cmd_qpl_menu_svn_checkout" label="&qpl_menu_svn_checkout.label;" accesskey="&qpl_menu_svn_checkout.accesskey;"  oncommand="qplBuildDialog(ko, 'qpl_menu_svn_checkout');"/>
    <command id="cmd_qpl_menu_svn_commit" label="&qpl_menu_svn_commit.label;" accesskey="&qpl_menu_svn_commit.accesskey;"  oncommand="qplBuildDialog(ko, 'qpl_menu_svn_commit');"/>
    <command id="cmd_qpl_menu_svn_info" label="&qpl_menu_svn_info.label;" accesskey="&qpl_menu_svn_info.accesskey;"  oncommand="svnProjectInfo(ko);"/>
    
    <command id="cmd_qpl_menu_build" label="&qpl_menu_build.label;" accesskey="&qpl_menu_build.accesskey;"/>

    <command id="cmd_qpl_menu_build_html" label="&qpl_menu_build_html.label;" accesskey="&qpl_menu_build_html.accesskey;" oncommand="qplBuildDialog(ko, 'qpl_menu_build_html');" />
    <command id="cmd_qpl_menu_build_php" label="&qpl_menu_build_php.label;" accesskey="&qpl_menu_build_php.accesskey;" oncommand="qplBuildDialog(ko, 'qpl_menu_build_php');"/>
    <command id="cmd_qpl_menu_build_stat" label="&qpl_menu_build_stat.label;" accesskey="&qpl_menu_build_stat.accesskey;" oncommand="qplBuildDialog(ko, 'qpl_menu_build_stat');"/>
    <command id="cmd_qpl_menu_build_qlist" label="&qpl_menu_build_qlist.label;" accesskey="&qpl_menu_build_qlist.accesskey;" oncommand="qplBuildDialog(ko, 'qpl_menu_build_qlist');"/>
    <command id="cmd_qpl_menu_build_esup" label="&qpl_menu_build_esup.label;" accesskey="&qpl_menu_build_esup.accesskey;" oncommand="qplBuildDialog(ko, 'qpl_menu_build_esup');"/>
    <command id="cmd_qpl_menu_build_custom" label="&qpl_menu_build_custom.label;" accesskey="&qpl_menu_build_custom.accesskey;" oncommand="qplBuildDialog(ko, 'qpl_menu_build_custom');"/>

    <command id="cmd_qpl_menu_wizard_mult" label="&qpl_menu_wizard_mult.label;" accesskey="&qpl_menu_wizard_default_phrases.accesskey;" oncommand="qplBuildDialog(ko, 'qpl_menu_wizard_mult');"/>    
    <command id="cmd_qpl_menu_wizard_default_phrases" label="&qpl_menu_wizard_default_phrases.label;" accesskey="&qpl_menu_wizard_default_phrases.accesskey;" oncommand="qplBuild('qpl_menu_wizard_default_phrases');"/>

    <command id="cmd_qpl_menu_escape" label="&qpl_menu_escape.label;" accesskey="&qpl_menu_escape.accesskey;" oncommand="qplEscapeChars(ko);" />
    <command id="cmd_qpl_menu_refresh" label="&qpl_menu_refresh.label;" accesskey="&qpl_menu_refresh.accesskey;" oncommand="qplRefreshProject(ko);" />
    <command id="cmd_qpl_menu_help" label="&qpl_menu_help.label;" accesskey="&qpl_menu_help.accesskey;" oncommand="qplBuildHelpDialog(ko, 'qpl_menu_help.htm');"/>
    <command id="cmd_qpl_menu_qpl6ref" label="&qpl_menu_qpl6ref.label;" accesskey="&qpl_menu_qpl6ref.accesskey;" oncommand="qplBuildHelpDialog(ko, 'http://qpl.gao.gov/qpl6ref/index.php');"/>
    <command id="cmd_qpl_menu_about" label="&qpl_menu_about.label;" accesskey="&qpl_menu_about.accesskey;" oncommand="qplBuildHelpDialog(ko, 'qpl_menu_about.htm');"/>
</commandset>

<menupopup id="popup_tools">

    <menu id="qpl_menu" label="&qpl_menu.label;" accesskey="&qpl_menu.accesskey;" insertafter="menu_tools_separator"> 
        <menupopup>

        <menuitem id="qpl_menu_new" command="cmd_qpl_menu_new"/>
        <menuitem id="qpl_menu_svn_checkout" command="cmd_qpl_menu_svn_checkout"/>
        <menuitem id="qpl_menu_svn_commit" command="cmd_qpl_menu_svn_commit"/>
        <menuitem id="qpl_menu_svn_info" command="cmd_qpl_menu_svn_info"/>

        <menu id="qpl_menu_build_options" command="cmd_qpl_menu_build" >
        <menupopup>
            <menuitem id="qpl_menu_build_html" command="cmd_qpl_menu_build_html" />
            <menuitem id="qpl_menu_build_php" command="cmd_qpl_menu_build_php" />
            <menuitem id="qpl_menu_build_stat" command="cmd_qpl_menu_build_stat" />
            <menuitem id="qpl_menu_build_qlist" command="cmd_qpl_menu_build_qlist" />
            <menuitem id="qpl_menu_build_esup" command="cmd_qpl_menu_build_esup" />
            <menuitem id="qpl_menu_build_custom" command="cmd_qpl_menu_build_custom" />
        </menupopup>
        </menu>

        <menu id="qpl_menu_wizard" label="&qpl_menu_wizard.label;" accesskey="&qpl_menu_wizard.accesskey;">
        <menupopup>
            <menuitem id="qpl_menu_wizard_mult" command="cmd_qpl_menu_wizard_mult" />    
            <menuitem id="qpl_menu_wizard_default_phrases" command="cmd_qpl_menu_wizard_default_phrases" />
        </menupopup>
        </menu>

        <menuitem id="qpl_menu_escape" command="cmd_qpl_menu_escape" />
        <menuitem id="qpl_menu_refresh" command="cmd_qpl_menu_refresh"/>
        <menuitem id="qpl_menu_qpl6ref" command="cmd_qpl_menu_qpl6ref" />
        <menuitem id="qpl_menu_help" command="cmd_qpl_menu_help" />
        <menuitem id="qpl_menu_about" command="cmd_qpl_menu_about" />

    </menupopup>
    </menu>

</menupopup>


<toolbarpalette id="qpl_toolbar_pallette">
    <toolbarbutton id="qpl_button_new"
      class="toolbarbutton-1 chromeclass-toolbar-additional" 
      label="Create new project"
      tooltiptext="C"
      command="cmd_qpl_menu_new" />
    <toolbarbutton id="qpl_button_svn_checkout"
      class="toolbarbutton-1 chromeclass-toolbar-additional" 
      label="Create new project"
      tooltiptext="C"
      command="qpl_button_svn_checkout" />

    <!-- More buttons here. -->

</toolbarpalette>

<toolbox id="qpl_toolbox">
  <toolbar id="qpl-toolbar" toolbarname="QPL Toolbar"
    accesskey="Q"
    customizable="true" mode="icons" context="toolbar-context-menu" 
    defaultset="qpl_button_new,qpl_button_svn_checkout"
    insertbefore="standardToolbar" />
</toolbox>

<script type="application/x-javascript" src="chrome://qplwrapper/content/overlay.js"/> 
<script type="application/x-javascript" src="chrome://qplwrapper/content/qplwrapper-helper.js"/> 

<script type="application/x-javascript">
function IsAPg6() {
    
    if(/\.pg6/.test(ko.views.manager.currentView.koDoc.displayPath)) {
        document.getElementById("cmd_qpl_menu_build").removeAttribute("disabled");
        document.getElementById("cmd_qpl_menu_refresh").removeAttribute("disabled");
        document.getElementById("cmd_qpl_menu_svn_commit").removeAttribute("disabled");
        document.getElementById("cmd_qpl_menu_svn_info").removeAttribute("disabled");
    } else {
        document.getElementById("cmd_qpl_menu_build").setAttribute("disabled", "true");
        document.getElementById("cmd_qpl_menu_refresh").setAttribute("disabled", "true");
        document.getElementById("cmd_qpl_menu_svn_commit").setAttribute("disabled", "true");
        document.getElementById("cmd_qpl_menu_svn_info").setAttribute("disabled", "true");
    };
}
</script>
</overlay>

dooleyk · December 19, 2014, 7:08pm

I have had a little success adding my two sample buttons in a group to the “Standard Toolbar” with this in my overaly.xul file…

<toolbar id="standardToolbar">
	<toolbaritem>
	<toolbarbutton id="qpl_button_new"
		class="toolbarbutton-1 chromeclass-toolbar-additional" 
		tooltiptext="Create an exciting new QPL Project"
		command="cmd_qpl_menu_new" />
	<toolbarbutton id="qpl_button_svn_checkout"
		class="toolbarbutton-1 chromeclass-toolbar-additional" 
		tooltiptext="Get a project from version control"
		command="cmd_qpl_menu_svn_checkout" />

    <!-- More buttons here. -->
    </toolbaritem>
</toolbar>

And the button graphics defined in my overlay.css file…

toolbar[iconsize="small"] #qpl_button_new {
  list-style-image: url("chrome://qplwrapper/skin/newproject.png");
}

#qpl_button_new {
  list-style-image: url("chrome://qplwrapper/skin/newprojectlarge.png");
}

toolbar[iconsize="small"] #qpl_button_svn_checkout {
  list-style-image: url("chrome://qplwrapper/skin/getproject.png");
}

#qpl_button_svn_checkout {
  list-style-image: url("chrome://qplwrapper/skin/getprojectlarge.png");
}

Where the smalls are 16x16 and larges are 24x24 pixels.

Interestingly, my buttons are also added to the Standard Toolbar in the “Customize Toolbars” dialog where I can toggle them on and off. This is nice, though not how it seems to work in Firefox.

One of my problems with my previous version seems to be that my ID needed to be the same as existing Komodo object ID. So here I just made it the same as the Standard Toolbar, which added my buttons as additional toolbaritem.

So, would you recommend this strategy?

dooleyk · December 19, 2014, 7:51pm

And I found that It overlay the toolboxrow, and give my toolbar its own ID (and using the DOM Inspector to steal the options from another toolbar), then I get my own toolbar listing in the Custom Toolbars dialog, which was what I was going for…

<toolboxrow id="main-toolboxrow">
    <toolbar id="qplToolbar"
        customizable="true"
        mode="icons"
        context="toolbar-context-menu" 
        defaultset="qpl_button_new,qpl_button_svn_checkout"
        insertafter="standardToolbar"
        class="chromeclass-toolbar"
        toolboxid="toolbox_main"
        align="center"
        persist="kohidden collapsed buttonstyle mode"
        buttonstyle="pictures"
        grippyhidden="true"
        tooltiptext="QPL Toolbar"
        kohidden=""
        can-drag="true" >
        <toolbaritem>
            <toolbarbutton id="qpl_button_new"
                class="toolbarbutton-1 chromeclass-toolbar-additional" 
                tooltiptext="Create an exciting new QPL Project"
                command="cmd_qpl_menu_new" />
            <toolbarbutton id="qpl_button_svn_checkout"
                class="toolbarbutton-1 chromeclass-toolbar-additional" 
                tooltiptext="Get a project from version control"
                command="cmd_qpl_menu_svn_checkout" />
    
            <!-- More buttons here. -->
        </toolbaritem>
    </toolbar>
</toolboxrow>

Now I am encouraged!