Panel positioning with the Firefox Add-on SDK

Question

I am trying to make some headway positioning my panel in an Add-on make with the new SDK.

I see that the documentation shows only one way to control the position of a panel, and that is by passing an anchor when you show() it:

show(anchor)

Displays the panel. [ anchor : handle ]

A handle to a DOM node in a page to which the panel should appear to be anchored. If not given, the panel is centered inside the most recent browser window. Note that it is not currently possible to anchor panels in this way using only the high level APIs.

Ideally, I'd like the anchor to be the widget that the panel appears anchored to when that widget is clicked, but the widget is not a DOM node in a page so I guess not...

I can probably work around this, but I can't even find a working example of how to anchor the panel to a DOM node. When I pass back a DOM node in a contentScript through port like this:

lib/main.js

  var scraper = pageMod.PageMod({
    include: ['*'],
    contentScriptWhen: 'ready',
    contentScriptFile: [data.url('jquery-1.6.2.min.js'), data.url('scraper.js')],
    onAttach: function(worker){
      worker.port.on('pageLoaded', function(page){
        widget.panel.show(page.anchor);
      }); 
    }

data/scraper.js

$('body').append('
  <div id="anchor-to-me" style="position:fixed; bottom: 0; right: 0;">.</div>
');

var anchor = $('#anchor-to-me').get();
self.port.emit('pageLoaded', { anchor : anchor  });

I get the following console error:

error: An exception occurred.
Traceback (most recent call last):
  File "resource://jid1-wuvxefqtmptsnw-at-jetpack-addon-kit-lib/panel.js", line 147, in show
    let document = getWindow(anchor).document;
  File "resource://jid1-wuvxefqtmptsnw-at-jetpack-addon-kit-lib/panel.js", line 345, in getWindow
    let anchorWindow = anchor.ownerDocument.defaultView.top;
TypeError: anchor.ownerDocument is undefined

Any info to help me successfully anchor to a DOM element, or find some other way to position the panel would be great.

Thanks.

score 2 · Answer 1 · edited May 15 '13 at 07:14

const panel = require("panel").Panel({
  width: 240,
  height: 320,
  contentURL: data.url("foo.html"),
  contentScriptFile: [data.url("jquery-1.4.4.min.js"),
                      data.url("panel.js")]
});

const widget = widgets.Widget({
  id: "some-id",
  label: "Some label",
  contentURL: data.url("icon.png"),
  //panel: panel,
  onClick: function(view) { /* cool stuff */ 
     view.panel = panel;
  }
});

Instead of using mainPanel.show(), use view.panel = mainPanel;. It will solve the problem bcz I did the same.

score 1 · Answer 2 · answered Aug 01 '11 at 20:26

1

When you define your widget, you can add a panel property that is the instance of your panel:

[ panel : Panel ]

An optional panel to open when the user clicks on the widget. Note: If you also register a "click" listener, it will be called instead of the panel being opened. However, you can show the panel from the listener by calling this.panel.show().

Here's an example ( unfortunately there isn't an example of this in the docs ):

const panel = require("panel").Panel({
  width: 240,
  height: 320,
  contentURL: data.url("foo.html"),
  contentScriptFile: [data.url("jquery-1.4.4.min.js"),
                      data.url("panel.js")]
});

const widget = widgets.Widget({
  id: "some-id",
  label: "Some label",
  contentURL: data.url("icon.png"),
  panel: panel,
  onClick: function() { /* cool stuff */ }
});

answered Aug 01 '11 at 20:26

therealjeffg

5,790
1
23
24

Thanks for your answer canuckistani, but this doesn't assist in making the Panel visually anchored to the widget (or DOM element) when it is opened programmatically. – doctororange Aug 04 '11 at 02:01
If you want to instead anchor a Panel to a DOM Element, you need to 1) get a handle on the DOM element, then 2) call PanelThingy.show(DOMHandle) – therealjeffg Aug 09 '11 at 22:11
Unfortunately, according to myk, "Panel.show() expects a real DOM object as the anchor, and messages serialize their payloads to JSON, stripping them of their object identity in the process." As such, you can't pass a DOM object back to the main JS. A related bug is being discussed here: https://bugzilla.mozilla.org/show_bug.cgi?id=638142 – doctororange Aug 16 '11 at 00:15
1

For an example of how yo could really do this: https://builder.addons.mozilla.org/addon/1013359/revision/33/ ...unfortunately it relies on xpcom and will likely break in the future. – therealjeffg Aug 17 '11 at 01:23

Panel positioning with the Firefox Add-on SDK

2 Answers2