javascript - can I add a context menu to a widget? -
i'm trying add context menu widget menu:
var widgets = require("sdk/widget"); var tabs = require("sdk/tabs"); var contextmenu = require("sdk/context-menu"); var menu = widgets.widget({ id: "menu", label: "menu", contenturl: data.url("icon.png"), onclick: function() { //show menu here } }); is possible add menu icon?
or somehow when click show context menu?
done here looks like:
ok man here simplified example. , i'll upload xpi in second. //create , add panel var doc = document; var myelement= doc.getelementbyid('elementtoattachpaneltoid'); //we attach menu element
var mymenujson = ['xul:menupopup', {id: 'mymenu1'}, ['xul:menuitem', {label:'menu item1'}], ['xul:menu', {label:'menu item2 submenu1'}, ['xul:menupopup', {}, ['xul:menuitem', {label:'submenu1 item1'}], ['xul:menuitem', {label:'submenu1 item2'}], ['xul:menuitem', {label:'submenu1 item3'}] ] ], ['xul:menuitem', {label:'menu item3 before seperator'}], ['xul:menuseparator', {}], ['xul:menuitem', {label:'menu item4 after seperator'}] ]; var mainpopupset = doc.getelementbyid('mainpopupset'); mainpopupset.appendchild(jsontodom(mymenujson, doc, {})); myelement.setattribute('context', 'mymenu1'); we can add menu setting context attribute of id of menu want give it
to see jsontodom function see gist here. install addon is, copy code gist , paste scratchpad , run it, right click on widget , pop up. gist here: noitidart / _ff-addon-snippet-createmenuwithsubmenuandattachtowidget.js
now in main.js couldn't test because doesn't have permission require("chrome"). if doesnt work add in @ top of main.js var {cc, ci, cu} = require("chrome"); cu.import("resource://gre/modules/services.jsm"); , compile , upload again, ill test , send back.
ok anyways, if works on first shot here is, code paste main.js. wasn't hard copied bootstrap boilerplate addon sdk, because im pretty sure addon sdk doesnt allow this. looks long bunch of copy , pasting, jsontodom function, read stuff in bottom of gist linked you.
var data = require("sdk/self").data; var panel = require("sdk/panel").panel({ width: 200, height: 150, contenturl: data.url("menu.html"), contentscriptfile: data.url("menu.js") }); var menu = require("sdk/widget").widget({ id: "open-traveleye", label: "traveleye", contenturl: data.url("earth-icon.png"), panel: panel }); //putting after .widget thing need widget insert browser before running code var {cc, ci, cu} = require("chrome"); cu.import("resource://gre/modules/services.jsm"); var windowlistener = { //do not edit here onopenwindow: function(axulwindow) { // wait window finish loading let adomwindow = axulwindow.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidomwindowinternal || ci.nsidomwindow); adomwindow.addeventlistener('load', function() { adomwindow.removeeventlistener('load', arguments.callee, false); windowlistener.loadintowindow(adomwindow); }, false); }, onclosewindow: function(axulwindow) {}, onwindowtitlechange: function(axulwindow, anewtitle) {}, register: function() { // load existing windows var domwindows = services.wm.getenumerator('navigator:browser'); while (domwindows.hasmoreelements()) { let adomwindow = domwindows.getnext(); windowlistener.loadintowindow(adomwindow); } // listen new windows wm.addlistener(windowlistener); }, unregister: function() { // unload existing windows var domwindows = services.wm.getenumerator('navigator:browser'); while (domwindows.hasmoreelements()) { let adomwindow = domwindows.getnext(); windowlistener.unloadfromwindow(adomwindow; } //stop listening future added windows dont attached wm.removelistener(windowlistener); }, //end - not edit here loadintowindow: function (adomwindow, axulwindow) { var window = adomwindow; if (!window) { return; } createandattachmenu(window); }, unloadfromwindow: function (adomwindow, axulwindow) { var window = adomwindow; if (!window) { return; } destroymenu(window); } }; function createandattachmenu(window) { var doc = window.document; var mywidget = doc.getelementbyid('widget:jid1-lwnbwjjiimxm4a@jetpack-open-traveleye'); //we add menu widget, can add menu setting context attribute of id of menu want give var mymenujson = ['xul:menupopup', {id: 'mymenu1'}, ['xul:menuitem', {label:'menu item1'}], ['xul:menu', {label:'menu item2 submenu1'}, ['xul:menupopup', {}, ['xul:menuitem', {label:'submenu1 item1'}], ['xul:menuitem', {label:'submenu1 item2'}], ['xul:menuitem', {label:'submenu1 item3'}] ] ], ['xul:menuitem', {label:'menu item3 before seperator'}], ['xul:menuseparator', {}], ['xul:menuitem', {label:'menu item4 after seperator'}] ]; var mainpopupset = doc.getelementbyid('mainpopupset'); mainpopupset.appendchild(jsontodom(mymenujson, doc, {})); mywidget.setattribute('context', 'mymenu1'); } function destroymenu(window) { var mymenu = doc.getelementbyid('mymenu1'); if (mymenu) { mymenu.parentnode.removechild(mymenu); } } /*dom insertion library function mdn - https://developer.mozilla.org/en-us/docs/xul_school/dom_building_and_html_insertion*/ jsontodom.namespaces = { html: 'http://www.w3.org/1999/xhtml', xul: 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' }; jsontodom.defaultnamespace = jsontodom.namespaces.html; function jsontodom(xml, doc, nodes) { function namespace(name) { var m = /^(?:(.*):)?(.*)$/.exec(name); return [jsontodom.namespaces[m[1]], m[2]]; } function tag(name, attr) { if (array.isarray(name)) { var frag = doc.createdocumentfragment(); array.foreach(arguments, function (arg) { if (!array.isarray(arg[0])) frag.appendchild(tag.apply(null, arg)); else arg.foreach(function (arg) { frag.appendchild(tag.apply(null, arg)); }); }); return frag; } var args = array.slice(arguments, 2); var vals = namespace(name); var elem = doc.createelementns(vals[0] || jsontodom.defaultnamespace, vals[1]); (var key in attr) { var val = attr[key]; if (nodes && key == 'key') nodes[val] = elem; vals = namespace(key); if (typeof val == 'function') elem.addeventlistener(key.replace(/^on/, ''), val, false); else elem.setattributens(vals[0] || '', vals[1], val); } args.foreach(function(e) { try { elem.appendchild( object.prototype.tostring.call(e) == '[object array]' ? tag.apply(null, e) : e instanceof doc.defaultview.node ? e : doc.createtextnode(e) ); } catch (ex) { elem.appendchild(doc.createtextnode(ex)); } }); return elem; } return tag.apply(null, xml); } /*end - dom insertion library function mdn*/ //end added stuff var tabs = require("sdk/tabs"); panel.port.on("noformatting", function() { tabs.activetab.attach({ contentscriptfile: data.url('no-formatting.js') }); }); panel.port.on("bold", function() { tabs.activetab.attach({ contentscriptfile: data.url('bold.js') }); }); panel.port.on("italic", function() { tabs.activetab.attach({ contentscriptfile: data.url('italic.js') }); }); panel.port.on("eye", function() { tabs.activetab.attach({ contentscriptfile: data.url('eye.js') }); });
Comments
Post a Comment