_ff-addon-snippet-TwoPartToolbarButton - This makes a different panel open depending on if you click the left part or the right part of the toolbar button.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var doc = document; //to put this back in sdk do const doc = require('sdk/window/utils').getMostRecentBrowserWindow().document; | |
var navBar = doc.getElementById('nav-bar') | |
var btn = doc.createElement('toolbarbutton'); | |
btn.setAttribute('id', 'hylytit'); | |
btn.setAttribute('type', 'menu-button'); | |
btn.setAttribute('class', 'toolbarbutton-1'); | |
btn.setAttribute('image', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExODcxRjlGMzUzNEZGQkNGQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRUM5MTQ0MkJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRUM5MTQ0MUJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTg3MUZFQTk0QUU4RTMwMEYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTg3MUY5RjM1MzRGRkJDRkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5kJv/fAAAByUlEQVR42qRTPWvCYBC+mKiolFYURVSwfoCLkw4iGDM5WoO460/o4tKuHToV+gd0t5Ku4mQWJ8Fd/NhEpy6K3+ldakKsi+ALb3hzd89zd8+9L6MoCtyyOPpkMpl3m81WM5lMV4GOxyOsVqu3Xq/3qhIEg8Ga1+sFs9l8FcFut4P5fP6Cxz8CAvt8PmBZ9iqCw+Ggn9WaKTOB9/s9FAoF4Hn+LIjOZCMfxVGrWrWcFkRiWiwWiMfjIv6GOI77kGUZ1us15PN5SKVSz2ifttvtL2yBPRNRI1gsFiCK4pMkSVUE/GBrn5vN5i4ajVYxpFEsFuuRSIR1u91wQcAwDOAkwOl0VjBjCIFit9sdoOshl8sNsLp6IBCoOBwOME5LJSABqU8i8Pv91Kcwm83kdDrNk9/lcslYTYLi7HY7aBidIJvNTjqdziNpQBmIBDVIoFDT05TuPR6PCqbs2+0WBEGYqJWfbmKx2WxKo9FIDSAbtgDL5VLNQqRWq1Vtky4R6gDlcpnE/mYMV7nearUqw+FQJzEuDRyLxaBUKjXQVDVWoJNgFZV+vw/j8VgXi4DhcBiSySRl18H6+P5tAbekXC7p5DuLZ259jb8CDAAxmdyX9iaHkQAAAABJRU5ErkJggg=='); | |
btn.setAttribute('orient', 'horizontal'); | |
btn.setAttribute('label', 'Hylyt.it'); | |
//// | |
var toolbarbuttonPanel = doc.createElement('panel'); | |
toolbarbuttonPanel.setAttribute('id', 'toolbarbutton-panel'); | |
toolbarbuttonPanel.setAttribute('type', 'arrow'); | |
var toolbarbuttonLabel = doc.createElement('label'); | |
toolbarbuttonLabel.setAttribute('value', 'toolbarbutton panel'); | |
toolbarbuttonPanel.appendChild(toolbarbuttonLabel); | |
//// | |
//// | |
var dropmarkerPanel = doc.createElement('panel'); | |
dropmarkerPanel.setAttribute('id', 'dropmarker-panel'); | |
dropmarkerPanel.setAttribute('type', 'arrow'); | |
var dropmarkerLabel = doc.createElement('label'); | |
dropmarkerLabel.setAttribute('value', 'dropmarker panel'); | |
dropmarkerPanel.appendChild(dropmarkerLabel); | |
//// | |
navBar.appendChild(btn); | |
var mainPopupSet = document.querySelector('#mainPopupSet'); | |
mainPopupSet.appendChild(dropmarkerPanel); | |
mainPopupSet.appendChild(toolbarbuttonPanel); | |
btn.addEventListener('click',function(event) { | |
console.log('event.originalTarget',event.originalTarget); | |
if (event.originalTarget.nodeName == 'toolbarbutton') { | |
dropmarkerPanel.openPopup(btn); | |
} else if (event.originalTarget.nodeName == 'xul:toolbarbutton') { | |
toolbarbuttonPanel.openPopup(btn); | |
} | |
}, false); | |
/* | |
var anonNodes = document.getAnonymousNodes(document.querySelector('#hylytit')); | |
var toolbarbutton; | |
var dropmarker; | |
[].forEach.call(anonNodes, function(node, i) { | |
if (node.nodeName == 'xul:dropmarker') { | |
dropmarker = node; | |
node.addEventListener('mouseover',function(){ | |
console.log('moussssse'); | |
},false); | |
} else if (node.nodeName == 'xul:toolbarbutton') { | |
toolbarbutton = node; | |
} | |
}); | |
dropmarker.addEventListener('click', function() { //i dont know why but dropmarker click doesnt trigger | |
alert('dropmarker'); | |
dropmarkerPanel.openPopup(dropmarker); | |
}, false); | |
toolbarbutton.addEventListener('click', function() { //this one works fine | |
toolbarbuttonPanel.openPopup(toolbarbutton); | |
alert('toolbarbutton'); | |
}, false); | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I don't know why I could not attach click event listener to dropmarker in icon. So I used the btn.addEventListener and event.originalTarget.nodeName technique to diffrentiate between toolbarbutton and dropmarker.