-
-
Save Noitidart/8728393 to your computer and use it in GitHub Desktop.
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> |
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.
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?