Can't get button node

34 views
Skip to first unread message

Ruben Goethals

unread,
Dec 18, 2014, 7:05:35 PM12/18/14
to mozilla-la...@googlegroups.com
Hi,

My first firefox addon ever.  I am trying to make an addon that allows a drop down toolbarbutton with bookmarks from certain tags, but with more than 1 tag (as firefox currently only supports 1 tag, not a mix).
Now, I'm stuck. I can't get the node of my action button in my script here: http://jsfiddle.net/e_motiv/b2vskv22/
cfx says:  thisNode is null ... (main.js:51:3)

Why?

Jeff Griffiths

unread,
Dec 18, 2014, 10:00:36 PM12/18/14
to mozilla-la...@googlegroups.com
What does the button think it's own id is?

FYI you can inspect the actual toolbar using the browser toolbox's inspector:

http://note.io/1uYjAbX

From looking at an add-on of my own, it looks like the id is created
something like:

'toggle-button--tweet-that-tweet-that'

It's possible that is different than what is returned by `this.id`? I
didn't run your code.

Jeff
> --
> You received this message because you are subscribed to the Google Groups
> "mozilla-labs-jetpack" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to mozilla-labs-jet...@googlegroups.com.
> To post to this group, send email to mozilla-la...@googlegroups.com.
> Visit this group at http://groups.google.com/group/mozilla-labs-jetpack.
> For more options, visit https://groups.google.com/d/optout.

Ruben Goethals

unread,
Dec 19, 2014, 7:52:24 AM12/19/14
to mozilla-la...@googlegroups.com, je...@canuckistani.ca
Thanks. I'll have a look at that when I will have some free time.
Indeed an Interesting point that the id will actually be pre- and postfixed with something.  Makes sense.
Though I wonder why this.id in the previous line gives the exact id that is said in the creating of the object instance. ("BmTagX")
Anyway, I will have a look soon. Thanks again!

Meanwhile: Does anybody know if I am doing this the right way to get the node? Is getelementbyid the right move or is there an existing method like "GetNode()" or "getElement()"?  (I'm not used to this way of javascript, so the code from the class files in sdk folders are a bit hard for me to understand and don't have time to learn yet another code model. ;-) )

P.S. Huge thanks for that browser tip -> Inspecting chrome://browser/content/browser.xul. One should put that on the addon sdk manual pages!!

Ruben Goethals

unread,
Dec 19, 2014, 4:46:09 PM12/19/14
to mozilla-la...@googlegroups.com, je...@canuckistani.ca
OK, after 3 hours work it's clear to me I won't be able to find it.
The id is indeed another id with pre- and postfixes, but how do I get it? No, idea.  Or how do I get the node of my class? Would even be better, but still no idea.
Any other help appreciated!

Ruben Goethals

unread,
Dec 19, 2014, 5:26:29 PM12/19/14
to mozilla-la...@googlegroups.com, je...@canuckistani.ca
After 4 hours, I did something like this:
const { id: addonID } = require('sdk/self');
const toWidgetId = id =>
 
('action-button--' + addonID.toLowerCase()+ '-' + id).
    replace
(/[^a-z0-9_-]/g, '');

And though it's the right id now, the menu is not attached to the button in the following lines:

 let id = toWidgetId(this.id);
 console
.log("wID=" + id);
 
var thisNode = document.getElementById(id);
 thisNode
.appendChild(this.pp);

-------------------------------------------------------------------------------------------------------------

Now, I have another version of the addon, without the sdk button and there everything work, except that can't get it off the toolbar, it's not customizabl, it's stuck to it.  I attached it like this:

var utils = require('sdk/window/utils');
var document = utils.getMostRecentBrowserWindow().document;
...
var navBar = document.getElementById('nav-bar');
navBar
.appendChild(this.bt);
If I could get it in the bar while being customizable, I might give up on the sdk class extension way and just use it without any classes.

Phew, Firefox addon development is HARD!  Wow!



Jeff Griffiths

unread,
Dec 19, 2014, 5:57:43 PM12/19/14
to mozilla-la...@googlegroups.com
If you want to make the button customizeable, you should look into these docs:

https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsm

The SDK ui buttons are implemented using these, and I don;t think it's
a good idea to create UI unless users can customize them

I don't have a solid handle on what your goal is though you want to
attach a menu to a button? How is using a panel insufficient? eg

https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons

If, on the other hand, you want to implement something like Firebug's
toolbar button, you can look at their code:

https://github.com/firebug/firebug.next/blob/master/lib/chrome/startButton.js

screenshot: http://note.io/1ABUX9N

To be honest I think it would be great if someone abstracted out the
Firebug code and published a module on npm that provides a
Firebug-like button that people could re-use.

Ruben Goethals

unread,
Dec 19, 2014, 6:34:06 PM12/19/14
to mozilla-la...@googlegroups.com, je...@canuckistani.ca
Thanks. Great resources. That should help me.

A panel looks aweful. I already decided at start not to go that way.  :-)

The firebug button is almost what I want, but it's too much and I am dazzled by the code.
As a matter of fact it's the same button that firefox already has if you have dragged a bookmarks tag to the toolbar. See screenshot below.
If you would know where that code resides, I could try abstracting it, although it's not 100% what you'd like.
(P.S. Menu is black-transparent because of my windows setting, but it's the normal window there.)

Ruben Goethals

unread,
Dec 19, 2014, 6:59:42 PM12/19/14
to mozilla-la...@googlegroups.com, je...@canuckistani.ca
Meanwhile, for the record, I found this to get an id inside a class. The same as "Making an id" also gets an already made id in the class itself.
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_id
Dow! Dow!  When are they going to make the sdk addon doc searchable (but only in there and nowhere else, because that's why i didn't fin it before).

Anyway, this in between, the issue status is still in my previous post.

Ruben Goethals

unread,
Dec 21, 2014, 5:18:34 PM12/21/14
to mozilla-la...@googlegroups.com, je...@canuckistani.ca
OK, I did it.
Thanks for all the help, Jeff.

I don't know when or if I'm going to abstract more than this as I'm sure the current status of the code is not to MDN addon SDK standards, but I did make a reusable widget for it:
http://jsfiddle.net/e_motiv/b2vskv22/3/

It's not a firebug icon, it's a standard bookmark item with menu-items dropdown, with icons. 

For the future, how or where do I propose packages for MDN or SDK itself?

Jeff Griffiths

unread,
Dec 21, 2014, 10:58:34 PM12/21/14
to mozilla-la...@googlegroups.com
You don't need to! You just publish the module to npm, and then people
can use npm to install them as dependencies. To do this, you need to
start using the new jpm tool:

http://work.erikvold.com/jetpack/2014/08/07/cfx-to-jpm.html

Jeff

willlma

unread,
Dec 22, 2014, 1:36:59 PM12/22/14
to mozilla-la...@googlegroups.com
I've made a menu-button available on GitHub: https://github.com/willlma/firefox-addon-sdk-menu-button

I plan to make it a JPM module, but haven't gotten around to it yet.

Agreed on the point about having an SDK only search function. In the meantime, I use a keyword search:
https://www.google.com/search?q=%s+site%3Adeveloper.mozilla.org%2Fen-US%2FAdd-ons%2FSDK%2F

Ruben Goethals

unread,
Dec 23, 2014, 8:01:15 AM12/23/14
to mozilla-la...@googlegroups.com
Thanks for the info, both of you.

P.S. I don't use jpm, because it says "Currently only works with Firefox Nightly."​. I'll wait for a next status.

Reply all
Reply to author
Forward
0 new messages