Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap addon demo. Shows how to add a sidebar to all browsing windows. More specifically, a sidebar which allows HTML content.
const {interfaces: Ci, utils: Cu} = Components;
Cu.import('resource://gre/modules/Services.jsm');
/*start - windowlistener*/
var windowListener = {
//DO NOT EDIT HERE
onOpenWindow: function (aXULWindow) {
// Wait for the window to 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, aXULWindow);
}, false);
},
onCloseWindow: function (aXULWindow) {},
onWindowTitleChange: function (aXULWindow, aNewTitle) {},
register: function () {
// Load into any existing windows
let XULWindows = Services.wm.getXULWindowEnumerator(null);
while (XULWindows.hasMoreElements()) {
let aXULWindow = XULWindows.getNext();
let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
windowListener.loadIntoWindow(aDOMWindow, aXULWindow);
}
// Listen to new windows
Services.wm.addListener(windowListener);
},
unregister: function () {
// Unload from any existing windows
let XULWindows = Services.wm.getXULWindowEnumerator(null);
while (XULWindows.hasMoreElements()) {
let aXULWindow = XULWindows.getNext();
let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
windowListener.unloadFromWindow(aDOMWindow, aXULWindow);
}
//Stop listening so future added windows dont get this attached
Services.wm.removeListener(windowListener);
},
//END - DO NOT EDIT HERE
loadIntoWindow: function (aDOMWindow, aXULWindow) {
if (!aDOMWindow) {
return;
}
//START - EDIT BELOW HERE
var browser = aDOMWindow.document.querySelector('#browser')
if (browser) {
var splitter = aDOMWindow.document.createElement('splitter');
var propsToSet = {
id: 'demo-sidebar-with-html_splitter',
//class: 'sidebar-splitter' //im just copying what mozilla does for their social sidebar splitter //i left it out, but you can leave it in to see how you can style the splitter
}
for (var p in propsToSet) {
splitter.setAttribute(p, propsToSet[p]);
}
var sidebar = aDOMWindow.document.createElement('vbox');
var propsToSet = {
id: 'demo-sidebar-with-html_sidebar',
//persist: 'width' //mozilla uses persist width here, i dont know what it does and cant see it how makes a difference so i left it out
}
for (var p in propsToSet) {
sidebar.setAttribute(p, propsToSet[p]);
}
var sidebarBrowser = aDOMWindow.document.createElement('browser');
var propsToSet = {
id: 'demo-sidebar-with-html_browser',
type: 'content',
context: 'contentAreaContextMenu',
disableglobalhistory: 'true',
tooltip: 'aHTMLTooltip',
clickthrough: 'never',
autoscrollpopup: 'autoscroller',
flex: '1', //do not remove this
style: 'min-width: 14em; width: 18em; max-width: 36em;', //you should change these widths to how you want
src: 'data:text/html,%3Chtml%3E%0A%3Cbody%3E%0A%3Ciframe%20width%3D%22520%22%20height%3D%22390%22%20src%3D%22http%3A%2F%2Fweb2.0calc.com%2Fwidgets%2Fhorizontal%2F%22%20scrolling%3D%22no%22%20style%3D%22border%3A%201px%20solid%20silver%3B%20%22%3E%20%3C%2Fiframe%3E%0A%3Cbr%20%2F%3E%0A%3Ca%20href%3D%22http%3A%2F%2Fweb2.0calc.com%2F%22%3EWeb%202.0%20scientific%20calculator%3C%2Fa%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E' //or just set this to some url like http://www.bing.com/
}
for (var p in propsToSet) {
sidebarBrowser.setAttribute(p, propsToSet[p]);
}
browser.appendChild(splitter);
sidebar.appendChild(sidebarBrowser);
browser.appendChild(sidebar);
}
//END - EDIT BELOW HERE
},
unloadFromWindow: function (aDOMWindow, aXULWindow) {
if (!aDOMWindow) {
return;
}
//START - EDIT BELOW HERE
var splitter = aDOMWindow.document.querySelector('#demo-sidebar-with-html_splitter');
if (splitter) {
var sidebar = aDOMWindow.document.querySelector('#demo-sidebar-with-html_sidebar');
splitter.parentNode.removeChild(splitter);
sidebar.parentNode.removeChild(sidebar);
}
//END - EDIT BELOW HERE
}
};
/*end - windowlistener*/
function startup(aData, aReason) {
windowListener.register();
}
function shutdown(aData, aReason) {
if (aReason == APP_SHUTDOWN) return;
windowListener.unregister();
}
function install() {}
function uninstall() {}
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>demo-sidebar-with-html@jetpack</em:id>
<em:version>initial</em:version>
<em:type>2</em:type>
<em:bootstrap>true</em:bootstrap>
<em:unpack>false</em:unpack>
<!-- Firefox -->
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>7.0</em:minVersion>
<em:maxVersion>10.0a1</em:maxVersion>
</Description>
</em:targetApplication>
<!-- Front End MetaData -->
<em:name>demo sidebar with html</em:name>
<em:description>Bootstrap addon demo. Shows how to add a sidebar to all browsing windows. More specifically, a sidebar which allows HTML content.</em:description>
<em:creator>Noitidart</em:creator>
<em:iconURL/>
<em:icon64URL/>
<em:optionsType>2</em:optionsType>
</Description>
</RDF>
@Noitidart

This comment has been minimized.

Copy link
Owner Author

@Noitidart Noitidart commented Jan 31, 2014

Notes:
See lines 75 and 76, this is where most of your customization takes place.

If you want to make the content in the sidebar different then edit loadIntoWindow between lines 44 and 86 on what you want to insert. Be sure to remove this stuff in the unloadFromWindow function between lines 93 and 101.

KNOWN BUG:
If you install this demo addon, and also have the firefox facebox messenger service sidebar visible:
If you open the facebook social messenger bar, and you click and drag one splitter, it resizes both sidebars, the facebook messenger and also the sidebar add by this addon. I don't know why this is, please share advice on how to fix, I would really appreciate that.

@gb5256

This comment has been minimized.

Copy link

@gb5256 gb5256 commented Mar 16, 2014

Hi, just started to use your demo app here (i am the guy from stackiverflow with the sdk sidebar). So I have your demo code up and running. Very nice.
Can you give some more explanation about line 75/76. The whole Iframe code is rather cryptic and very hard to read. Can you give an example how that works?

@Noitidart

This comment has been minimized.

Copy link
Owner Author

@Noitidart Noitidart commented Mar 17, 2014

Hi man glad to see people using the comments section.

In reply to your question on how to add the bar to the left side instead of right:

Replace L#82 which is browser.appendChild(splitter); with browser.insertBefore(splitter, browser.firstChild); and then replace L#85 which is browser.appendChild(sidebar); with browser.insertBefore(sidebar, browser.firstChild);

To toggle the sidebar visibility progamatically just toggle the hidden attribute of the sidebar and splitter to true or false.

For line 76, which is setting the iframe src that was an example for someone trying to load that html. Basically just remove that and replace with the source to your page you want in there. Like if you want to load bing in the sidebar set it to src: 'http://www.bing.com/' or if you want to load a page thats packaged within your addon set it to its path.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment