Posicionamiento del panel con el SDK Add-on de Firefox

Question

Estoy tratando de hacer un progreso posicionando mi panel en una marca Add-on con el nuevo SDK.

veo que la documentación muestra sólo uno manera de controlar la posición de un panel, y que es pasando un ancla cuando se show():

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.

Idealmente, me gustaría que el ancla para ser el widget que el panel aparece anclado cuando se hace clic en ese widget, pero el widget no es un DOM node in a page así que supongo que no ...

Probablemente pueda solucionar esto, pero ni siquiera puedo encontrar un trabajo ejemplo de cómo anclar el panel a un nodo DOM. Cuando paso hacia atrás un nodo DOM en un contentScript través port así:

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); 
     }); 
    } 

datos/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 }); 

consigo el siguiente error de la consola:

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 

Cualquier información que me ayude a anclar con éxito a un elemento DOM, o encontrar otra forma de posicionar el panel sería genial.

Gracias.

Answer 1

Al definir el widget, puede agregar una propiedad de panel que es la instancia de su 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().

He aquí un ejemplo (por desgracia no es un ejemplo de esto en la documentación):

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 */ } 
}); 

Answer 2

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; 
    } 
}); 

En lugar de utilizar mainPanel.show(), utilice view.panel = mainPanel;. Resolverá el problema porque yo hice lo mismo.