Created
January 31, 2014 08:26
-
-
Save Noitidart/8728393 to your computer and use it in GitHub Desktop.
Bootstrap addon demo. Shows how to add a sidebar to all browsing windows. More specifically, a sidebar which allows HTML content.
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
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() {} |
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
<?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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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);
withbrowser.insertBefore(splitter, browser.firstChild);
and then replace L#85 which isbrowser.appendChild(sidebar);
withbrowser.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.