Toolbar Buttons and Addon SDK

[Tobias Redmann]

Hey,

in the Jetpack Wiki I found a toolbarbutton library - but without any word about the usage.

var toolbar = require("toolbarbutton");

var button = toolbar.ToolbarButton({
    'id':'myButton',
    'label' : 'myButton'
   
    });

I tried this and for now, there were no errors - but also no button.

I guess this is common intereset, so Erik can you please drop a line about the usage.

-- Tobias

[Erik Vold]

Hey Tobias,

Thanks for trying it out, https://github.com/erikvold/restartless-restart-ffext/blob/jetpack/lib/main.js is the only example atm, I will write docs soon though.

What you have looks ok to me though, is the button not in the customize dialog window? if you don't specify a toolbarID to insert the toobar button into, then it will be in the customize window.

Erik

--
You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mozilla-labs-jetpack?hl=en.

--
Erik Vergobbi Vold

Email: erik...@gmail.com
Website: http://erikvold.com/

Github: http://github.com/erikvold
Identi.ca: http://identi.ca/erikvold
LinkedIn: http://www.linkedin.com/in/erikvold

[Erik Vold]

You might want to try using a image too, I'm not sure if that is req'd.

Erik

On Fri, Jun 24, 2011 at 15:17, Tobias Redmann <tobias....@googlemail.com> wrote:

--

You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mozilla-labs-jetpack?hl=en.

[Tobias Redmann]

Just for clearance: I want to add a button to the bar where the search and address is - like in the attachment. I'm afraid, that there is a misunderstanding.

Can your code add a button to this bar? This is the toolbar, isn't it?

-- Tobias

2011/6/25 Erik Vold <erik...@gmail.com>

[Tobias Redmann]

Ok I got it. The button is in the customization dialog. Is there a possibility to automatic add the button - firebug did so!

2011/6/25 Tobias Redmann <tobias....@googlemail.com>

[Erik Vold]

Yep that will work, you'll need to set the options.toolbarID to the navigation bar's id, then set  options.insertbefore to the id of the element which you want to insert your toolbar button before.

You can use DOM Inspector to get those ids for now, I'll have them in the docs later.

Erik

[Tobias Redmann]

Ok great. If you don't mind and can stand my bad english, I will write a little How-To next week - perhaps this weekend.

2011/6/25 Erik Vold <erik...@gmail.com>

[Tobias Redmann]

Toolbar Buttons with Addon SDK Working example

var self = require("self");

var toolbar = require("toolbarbutton");

exports.main = function(options, callbacks) {
  console.log("My ID is " + self.id);

  var button = toolbar.ToolbarButton({
    'id':'yourid',
    'label' : 'LabelName',
    'image': require("self").data.url("16x16.png"),
    'onCommand': function () {
      var tabs = require("tabs");
      tabs.open("http://onn.ug");
    },
    toolbarID: "nav-bar"
    //insertbefore: ""
   
    });
 
 }

2011/6/25 Tobias Redmann <tobias....@googlemail.com>

[Erik Vold]

That'd be great. 

Erik

[Tobias Redmann]

One problem left. If I remove my button with the customize dialog, after a restart the button is there again. Your code had an unload function (require('unload+')) which I had to remove -it doesn't worked. Do you have other ideas to not attach the button when removed by user?

I can write a lock-mechanisme, but than I must know when the buttons is removed. Register a DomChange/OnChange listener to the nav-bar? Any better idea?

[Erik Vold]

On Fri, Jun 24, 2011 at 17:46, Tobias Redmann <tobias....@googlemail.com> wrote:

One problem left. If I remove my button with the customize dialog, after a restart the button is there again. Your code had an unload function (require('unload+')) which I had to remove -it doesn't worked. Do you have other ideas to not attach the button when removed by user?

the unload+ module is in https://github.com/erikvold/vold-utils-jplib/

this is probably because it's being inserted into the toolbarID that you provided again.. maybe providing a moveTo method that would only be called by the addon during install/first run (and could be used at other times) would be better..

 

I can write a lock-mechanisme, but than I must know when the buttons is removed. Register a DomChange/OnChange listener to the nav-bar? Any better idea?

https://developer.mozilla.org/en/XUL/Toolbars/Toolbar_customization_events

Erik

[Erik Vold]

On Fri, Jun 24, 2011 at 19:07, Erik Vold <erik...@gmail.com> wrote:

On Fri, Jun 24, 2011 at 17:46, Tobias Redmann <tobias....@googlemail.com> wrote:

One problem left. If I remove my button with the customize dialog, after a restart the button is there again. Your code had an unload function (require('unload+')) which I had to remove -it doesn't worked. Do you have other ideas to not attach the button when removed by user?

..

this is probably because it's being inserted into the toolbarID that you provided again.. maybe providing a moveTo method that would only be called by the addon during install/first run (and could be used at other times) would be better..

I've added a moveTo() method to the object returned from calling ToolbarButton() which allows one to move the toolbar button whenever they wish. This can be used during install like so:

exports.main = function(options) {

  // create toolbarbutton

  var tbb = require("toolbarbutton").ToolbarButton({

    id: "TBB-TEST",

    label: "TBB TEST",

    //image: "",

    onCommand: function () {

      tbb.destroy(); 

    }

  });

  if (options.loadReason == "install") {

    tbb.moveTo({

      toolbarID: "nav-bar",

      forceMove: false // don't move if button is already in the window

    });

  }

};

There is also a destroy() method now.

[Will Bamberg]

This looks like a great example of how to manipulate the browser chrome without using XUL overlays.

In the next little while I'm going to document better how developers can migrate from traditional add-ons to SDK-based add-ons. One of the topics to cover is how to create add-ons without XUL overlays. Is the technique used here the best way to do this? Does anyone know whether there are alternatives I should be aware of?

Thanks very much for any pointers.

Will

[Erik Vold]

Hey Will,

The technique I used is simply to use JS to create xul elements, instead of using a xul overlay, which is the only alternative to using a xul overlays afaik. There is more than one way to implement the technique though.

While using the window-utils module I found setting up unloaders to be more difficult using the onUntrack method than it was to setup unloaders with closures, so I may be deviating from the Add-on SDK's recommended practice.

Regards,

Erik

[Abdullah Diaa]

toolbarButton has been removed from addon SDK v1.0 !! any suggestion ?

[Jeff Griffiths]

Erik,

I recently talked to someone who has used your toolbar button and
noted that the button does not show up right away. Is there some trick
you know of to have xul elements show up directly after install?

cheers, Jeff

[Wes Kocher]

iirc, you have to specify a toolbar id or else it goes to customize
box... From: Jeff Griffiths
Sent: Saturday, September 03, 2011 12:48 PM
To: mozilla-la...@googlegroups.com
Subject: Re: [jetpack] Toolbar Buttons and Addon SDK

[Erik Vold]

Wes is right, there is documentation here with a example that does what you want Jeff.

Erik

[Jeff Griffiths]

Thanks guys! It isn't something I've use personally yet, but I got a
question about it the other day.

[Hernan Rodriguez Colmeiro]

Erik, I've been using your module for a while, and have some questions for you.

- Do you know how can we add a badge to the toolbarbutton, the same
way Firebug or Chrome extension do?
- How can we change the image of the toolbarbutton after it has been created?

Any pointers would be great :)

Hernán

[Erik Vold]

Hey Hernán,

I've got a issue open for badges, so far I've only seen xbl used to implement this, so I'll either need to find a way to use xbl within a jp module (which should be possible right?) or work around the xbl somehow..

I haven't yet added the ability to change a tbb's properties, but I just made a issue for that too.

Erik

--

You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mozilla-labs-jetpack?hl=en.

[Hernan Rodriguez Colmeiro]

On Sat, Sep 17, 2011 at 20:22, Erik Vold <erik...@gmail.com> wrote:
> Hey Hernán,
> I've got a issue open for badges, so far I've only seen xbl used to
> implement this, so I'll either need to find a way to use xbl within a jp
> module (which should be possible right?) or work around the xbl somehow..

I've seen it implemented using a css overlay, setting a :after
pseudo-element after the button itself. I tried that, but didn't make
much progress, I'm at a loss trying to add CSS rules by javascript in
XUL files.

> I haven't yet added the ability to change a tbb's properties, but I just
> made a issue for that too.

Great, I'm going to watch those issues, and try to help getting them fixed :)

Hernán

[Erik Vold]

On Sat, Sep 17, 2011 at 18:23, Hernan Rodriguez Colmeiro <colm...@gmail.com> wrote:

On Sat, Sep 17, 2011 at 20:22, Erik Vold <erik...@gmail.com> wrote:
> Hey Hernán,
> I've got a issue open for badges, so far I've only seen xbl used to
> implement this, so I'll either need to find a way to use xbl within a jp
> module (which should be possible right?) or work around the xbl somehow..

I've seen it implemented using a css overlay, setting a :after
pseudo-element after the button itself. I tried that, but didn't make
much progress, I'm at a loss trying to add CSS rules by javascript in
XUL files.

This user styles module should allow you to add the css that you want to add.  There is documentation on altering chrome files with user styles here.  You basically just need to wrap the css rules in something like:

@-moz-document url-prefix('chrome://url') {
  /* css here */
}

Erik

[Hernan Rodriguez Colmeiro]

Thanks for the suggestion erik, that did the trick :)

Hernán

[Jon Yang]

I'm new to Firefox Add-On development and I'm trying to make a toolbar
button to start. It seems like the toolbarbutton module no longer
works. I tried just testing this code in the add-on builder and it
gives me a module not found error:

var toolbar = require("toolbarbutton");

exports.main = function(options) {};

Any help or ideas? Thanks.

On Sep 19, 9:06 pm, Hernan Rodriguez Colmeiro <colme...@gmail.com>
wrote:

> On Sat, Sep 17, 2011 at 22:48, Erik Vold <erikvv...@gmail.com> wrote:
> > On Sat, Sep 17, 2011 at 18:23, Hernan Rodriguez Colmeiro

> > <colme...@gmail.com> wrote:

[Hernan Rodriguez Colmeiro]

On Tue, Sep 20, 2011 at 05:45, Jon Yang <jya...@gmail.com> wrote:
> I'm new to Firefox Add-On development and I'm trying to make a toolbar
> button to start. It seems like the toolbarbutton module no longer
> works. I tried just testing this code in the add-on builder and it
> gives me a module not found error:
>
> var toolbar = require("toolbarbutton");
>
> exports.main = function(options) {};
>
> Any help or ideas? Thanks.
>

If you want to follow my suggestion, if it's your first time at
developing any firefox addon, try starting out with the default
modules in the SDK. Leave trying out 3rd arty modules like Erik's
toolbarbutton for later, as it sometimes require a bit of
addon-kung-fu to get them working as expected.
If you want something like a toolbarbutton try using the widget API
and then customize it (context click on the widget -> customize) and
move it to wherever you want.

Hernán

[Erik Vold]

Unfortunately bug 666837 breaks most of my modules on the Addon Builder, so I would not recommend using it for 3rd party modules either.

Erik

--
You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mozilla-labs-jetpack?hl=en.

[Jeff Griffiths]

On 11-09-20 7:34 AM, Erik Vold wrote:
> Unfortunately bug 666837
> <https://bugzilla.mozilla.org/show_bug.cgi?id=666837> breaks most of my

> modules on the Addon Builder, so I would not recommend using it for 3rd
> party modules either.

FYI, I pinged Daniel about that bug in #flightdeck on IRC, it should get
re-looked-at soon.

[Jon Yang]

I'm also trying to create a badge for my toolbar button, but am
struggling to figure out how to use the userstyles module. Could
someone maybe provide an example of how the css would look to add the
badge to the firefox ui? Any help would be greatly appreciated.
Thanks.