Search completed in 1.44 seconds.
196 results for "overlay":
Your results are loading. Please wait...
XUL Overlays
MozillaTechXULOverlays
xul files and xul overlays overlays are xul files used to describe extra content in the ui.
... though overlays often define ui elements that have been added as a result of an update or enhancement of some kind, they can be used in many different ways.
... overlays provide a general mechanism for: adding ui for additional components, as described in the example above overriding small pieces of a xul file without having to resupply the whole ui reusing particular pieces of the ui xul files and overlays work together to describe a single master document.
...And 39 more matches
Cross Package Overlays - Archive of obsolete content
« previousnext » this section describes how to apply overlays to files that don't import them.
... applying overlays to other packages note: this section talks about contents.rdf which has been replaced in gecko 1.8 by manifest files.
... overlays have another very useful feature.
...And 19 more matches
Making it into a static overlay - Archive of obsolete content
because our extension modifies an existing file in the mozilla distribution, before we package it up we need to separate the modifications into a different file and add them back in at run time via a dynamic xul overlay.
... a xul overlay is a xul file containing elements to be inserted into another xul file when the other xul file is rendered into an application interface.
... static overlays are added to a xul file via a reference at the top of the file (much like stylesheets and javascript scripts).
...And 12 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
this article is a step-by-step tutorial on how to convert an old overlay-based extension into a restartless (bootstrapped) extension that is also extractionless.
...well, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own.
...in overlay extensions, you can place a resource mapping in the chrome.manifest for your add-on and load your own jsm from resource:// uris.
...And 11 more matches
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
now that we have a static overlay we're in good shape to create a xpi package that installs our extension as a dynamic overlay.
...copy the following files into the content sub-subdirectory: tinderstatusoverlay.xul tinderstatus.js tinderstatus.css tb-busted.png tb-nostatus.png tb-success.png tb-testfailed.png these are the files we're going to put into the xpi.
... we need to change some urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-sty...
...li resource="urn:mozilla:package:tinderstatus"/> </rdf:seq> <rdf:description about="urn:mozilla:package:tinderstatus" chrome:displayname="mozilla tinderstatus extension" chrome:author="myk melez" chrome:name="tinderstatus" chrome:extension="true" chrome:description="displays tinderbox status for the mozilla codebase."> </rdf:description> <rdf:seq about="urn:mozilla:overlays"> <rdf:li resource="chrome://navigator/content/navigator.xul"/> </rdf:seq> <rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://tinderstatus/content/tinderstatusoverlay.xul</rdf:li> </rdf:seq> </rdf:rdf> install.js, on the other hand, goes into the tinderstatus-installer directory: initinstall( "mozilla tinderstatus extension", "/mozdev/tinderstatus", ...
Overlay extensions - Archive of obsolete content
this page contains links to documentation for the approach to developing extensions for gecko-based applications which uses: xul overlays to specify the interface apis available to privileged code, such as tabbrowser and javascript modules, to interact with the application and content.
... firefox add-ons developer guide a guide to developing overlay extensions.
Access StringBundle from Overlay
unfortunately adding the bundles into thunderbird isn't as easy as adding them to your xul overlay.
... the most efficient way to append these strings is by attaching them to an existing stringbundleset as such: <stringbundleset id="stringbundleset"> <stringbundle src="chrome://your_extension/locale/overlay.properties" id="your-extension-strings" /> </stringbundleset> now that your stringbundle is attached you can access it from javascript as follows: var str = document.getelementbyid("your-extension-strings"); //get the stringbundle object itself str.getstring("propertyname"); //get a string (and do something with it) alternative way let stringbundleservice = cc["@mozilla.org/intl/stringbundle;1"].getservice(ci.nsistringbundleservice); let bundle = stringbundleservice.createbundle("chrome://your_extension/locale/overlay.properties"); let str = bundle.get...
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
extension/ chrome manifest chrome/ #registered in the chrome content package #run with privileges locale package skin package figure 1: chrome packages and chrome registration (fixme: not really explicit and not a figure) cross-package overlays the “overlay” technique introduced in chapter 3 required the use of the xul-overlay instruction in the xul document that is the overlay target.
... it is also possible to coerce an overlay without using the xul-overlay instruction in the xul document—this is called a “cross-package overlay” (figure 2).
... in fact, you need to use cross-package overlays to append buttons or menus to the firefox browser window.
...And 36 more matches
DOM Inspector internals - Firefox Developer Tools
this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menuitems placed via overlay).
...its contents should resemble the following: extensions/ … jsutil/ … prefs/ … res/ … tests/ … viewers/ … browseroverlay.xul commandoverlay.xul editingoverlay.xul flasher.js hooks.js inspector.css inspector.js inspectoroverlay.xul inspector.xml inspector.xul keysetoverlay.xul object.js object.xul popupoverlay.xul sidebar.js sidebar.xul statusbaroverlay.xul tasksoverlay-cz.xul tasksoverlay-ff.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul toolboxoverlay.xu...
...l utils.js venkmanoverlay.xul viewerregistry.js overlays you will notice that there are a lot of overlays.
...And 26 more matches
The Essentials of an Extension - Archive of obsolete content
this is what a chrome uri looks like: chrome://packagename/section/path/to/file so, for instance, if i want to access the file browseroverlay.xul in the extension, the chrome uri would be chrome://xulschoolhello/content/browseroverlay.xul.
...so, to access the dtd file in the hello world extension, the chrome path is chrome://xulschoolhello/locale/browseroverlay.dtd.
... xul files usually define one of two things: windows or overlays.
...And 24 more matches
Building the WebLock UI
weblock indicator in browser user interface package list the user interface described in this section is comprised of four files: weblockoverlay.xul is the file that defines the little status icon in the browser.
... because this step (particularly the overlay section) is so dependent on mozilla, the chapter is divided up into a couple of different sections.
...the third section, overlaying new user interface into mozilla, describes how to create an overlay into the browser that will make this dialog accessible from a mozilla build.
...And 11 more matches
Main Windows
as such, i've always thought it would be nice to have a list of what xul, js, or other files are that are here, what they do, and where they overlay at different points within the client.
... things appear confusing for several reasons: much of the code is written to be portable, so instead of duplicating it, its been put in overlays that are loaded over many different types of windows.
...the rest is loaded from overlays: mailwindowoverlay.xul this is the red sections shown in the interface above (where?), including the toolbars, notification bars, and the status bar, but also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of javascript.
...And 10 more matches
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other elements, so you can edit related css properties and see how the grid is affected.
... grid options the grid section of the layout view looks like this: you'll see a number of options contained within: overlay grid: contains a checkbox for each grid present on the page, along with various options.
... allows overlay views to be toggled on and off.
...And 9 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<tabbox> <tabs> <tab label="tab1"/> <tab label="tab2" selected="true"/> </tabs> <tabpanels> <tabpanel> <checkbox label="check1"/> </tabpanel> <tabpanel orient="vertical"> <checkbox label="check2"/> <checkbox label="check3"/> </tabpanel> </tabpanels> </tabbox> listing 22: tabs in use figure 18: output from listing 22 other xul functions overlays one of xul’s distinctive features is overlays.
... by inserting an xul-overlay processing instruction between the xml declaration and the opening tag of the root element, the xul document specified by the xul-overlay will be read in at the same time as the current xul document.
... the xul document that actually gets displayed will be a combination of the original xul document and the one specified in xul-overlay.
...And 8 more matches
Index - Archive of obsolete content
244 how to convert an overlay extension to restartless add-ons, code snippets, extensions, firefox, firefox os, guide, preferences system no summary!
...in your extension's browser.xul overlay, write code which listens for a custom dom event.
... 256 overlay extensions add-ons, extensions, landing no summary!
...And 8 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
this article explains how to add a toolbar button to a toolkit application (such as firefox, thunderbird, or kompozer) using overlays.
... creating an overlay the first step is to create an overlay for the document containing the toolbar you wish to enhance.
... explaining overlays is beyond the scope of this tutorial -- you can read about them in the xul tutorial.
...And 8 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
these sorts of files are typically used with reusable overlayable widgets (e.g., the sidebar).
... your css file should never import another skin file if your file is loaded by a xul overlay.
... css files that are used by xul overlays should never import the global skin (or any other skin for that matter).
...And 7 more matches
Bootstrapped extensions - Archive of obsolete content
traditional extensions include overlays, wherein the application can load up xul from the extension's package and automatically apply it on top its own ui.
...these are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application.
...see this tutorial on converting from an overlay extension to restartless for a practical step by step guide to migrating.
...And 5 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
to add your buttons, all you need to do is overlay the palette in your main browser overlay.
... <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="xulschoolhello-hello-world-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;" oncommand="xulschoolchrome.browseroverlay.dosomething(event);" /> <!-- more buttons here.
... --> </toolbarpalette> <!-- more overlay stuff.
...And 5 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
differences as compared to other toolkit/-based applications you need to overlay/open different chrome urls as compared to firefox.
... some urls are listed below: url in firefox url in seamonkey overlays chrome://browser/content/browser.xul chrome://navigator/content/navigator.xul main browser window chrome://browser/content/pageinfo/pageinfo.xul chrome://navigator/content/pageinfo/pageinfo.xul page info window chrome://browser/content/preferences/permissions.xul chrome://communicator/content/permis...onsmanager.xul permissions manager dialog urls added in 2.1 url in firefox url in seamonkey chrome://browser/content/bookmarks/bookmarkspanel.xul chrome://communicator/content/bookmarks/bm-panel.xul chrome://browser/content/places/places.xul chrome:...
...//communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome urls for overlaying as seamonkey.
...And 5 more matches
Creating a status bar extension - Archive of obsolete content
content status-bar-sample-1 chrome/content/ # firefox overlay chrome://browser/content/browser.xul chrome://status-bar-sample-1/content/status-bar-sample-1.xul the first line registers the location on disk of the contents of the extension whose id is "status-bar-sample-1".
...the second line registers an overlay.
... an overlay lets you add new content to an existing document.
...And 5 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
wser.css" type="text/css" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title="&emptysidebar.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="atest" value="&emptysidebar.title;" /> </vbox> </page> new extensions can be registered in the menus or popups, firefox uses overlays for extending menus.
...the overlay file is listed in example 4.
...chrome/content/firefoxoverlay.xul <?xml version="1.0"?> <!doctype overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <overlay id="emptysidebaroverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="viewsidebarmenu"> <menuitem key="key_openemptysidebar" observes="viewemptysidebar" /> </menupopup> <keyset id="mainkeyset"> <key id="key_openemptysidebar" command="viewemptysidebar" key="&openemptysidebar.commandkey;" modifiers="&openemptysidebar.modifierskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.title;" autocheck="false" type="checkbox" group=...
...And 5 more matches
Building a Thunderbird extension 5: XUL
</statusbar> <statusbar id="status-bar"> is a "merge point" for a xul overlay.
... xul overlays are a way of attaching other ui widgets to a xul document at run time.
... a xul overlay is a .xul file that specifies xul fragments to insert at specific merge points within a "master" document.
...And 5 more matches
Element.getClientRects() - Web APIs
note that the javascript function that paints the client rects is connected to the markup via the class withclientrectsoverlay.
...note that the p has onlyone border box, while the span has multiple border boxes.</p> <div> <strong>original</strong> <p> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>p's rect</strong> <p class="withclientrectsoverlay"> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>span's rect</strong> <p> <span class="withclientrectsoverlay">paragraph that spans multiple lines</span> </p> </div> example 2: this html creates three ordered lists.
... <h3>a list</h3> <p>note that the border box doesn't include the number, so neither do the client rects.</p> <div> <strong>original</strong> <ol> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="withclientrectsoverlay">item 1</li> <li class="withclientrectsoverlay">item 2</li> </ol> </div> example 3: this html creates two tables with captions.
...And 5 more matches
Adding Events and Commands - Archive of obsolete content
the most commonly used event is the onload event, which is used in overlays and other windows to detect when the window has loaded and then run initialization code: // rest of overlay code goes here.
... window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need.
... another way to attach event handlers, just like html, is to place the handler in the xul code: <overlay id="xulschoolhello-browser-overlay" onload="xulschoolchrome.browseroverlay.init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior.
...And 4 more matches
The Joy of XUL - Archive of obsolete content
overlays overlays are xul files used to describe extra content for the ui.
... overlays are a powerful mechanism for customizing and extending existing applications because they work in two related but highly different ways.
... in one respect, overlays are synonymous with "include" files in other languages because an application may specify that an overlay be included in its definition.
...And 4 more matches
HTML in XUL for rich tooltips - Archive of obsolete content
dynamic html in xul tooltip insert the appropriate code from below into your xul overlay.
... this example is what the final xul overlay could look like, assuming a javascript overlay titled overlay.js: <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menuitem id="htmltip2" label="foo2" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> </popup> <popupset id="mainpopupset"> <tooltip id="myhtmltip"> <html:div id="myhtmltipdiv" type="content"/> <...
.../tooltip> </popupset> </overlay> insert your version of the following into the javascript overlay.
...And 3 more matches
JavaScript Object Management - Archive of obsolete content
/** * controls the browser overlay for the hello world extension.
... */ 〈namespace〉.browseroverlay = { /** * initializes this object.
... } // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.browseroverlay.init(); }, false); there are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs.
...And 3 more matches
Tabbed browser - Archive of obsolete content
getting access to the browser from main window code running in firefox's global chromewindow, common for extensions that overlay into browser.xul, can access the tabbrowser element using the global variable gbrowser.
... opening a url in the correct window/tab there are methods available in chrome://browser/content/utilityoverlay.js that make it easy to open url in tabs such as openuilinkin and openuilink.
...this will only work in an overlay of browser.xul.
...And 3 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
delete these two files: chrome.rdf overlays.rdf explanation: seamonkey automatically rebuilds these files the next time it starts.
... rdf:resource="urn:mozilla:package:custombutton"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:custombutton" chrome:displayname="custom button" chrome:description="my custom toolbar button" chrome:author="my name" chrome:name="custombutton" chrome:localeversion="1.8" chrome:skinversion="1.5" chrome:extension="true"/> <rdf:seq about="urn:mozilla:overlays"> <!-- browser --> <rdf:li> <rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- address book --> <rdf:li> <rdf:seq about="chrome://messenger/content/addressbook/addressbook.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:se...
...paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- browser --> <toolbar id="nav-bar"> <hbox id="nav-bar-buttons"> <toolbarbutton id="custom-button-1"/> </hbox> </toolbar> <!-- address book --> <toolbar id="abtoolbar"> <hbox id="to...
...And 3 more matches
Custom toolbar button - Archive of obsolete content
copy the following content, and paste it into the new file: content custombutton chrome/ style chrome://global/content/customizetoolbar.xul chrome://custombutton/content/button.css # firefox overlay chrome://browser/content/browser.xul chrome://custombutton/content/button.xul # thunderbird mail overlay chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul # thunderbird compose overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul # thunderbird address book overlay chrome://messenger/content/addressbook...
.../addressbook.xul chrome://custombutton/content/button.xul # sunbird overlay chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul optionally remove the sections for toolbars that you do not need.
...then it specifies an overlay for each toolbar.
...And 2 more matches
XUL Structure - Archive of obsolete content
however, there are some features that are specific to html, such as forms, and others which are specific to xul, such as overlays.
...the extension will hook into the browser using a xul specific feature called an overlay which allows the xul from the extension to mesh with the xul in the browser.
...registered packages are not required to use overlays, of course.
...And 2 more matches
CustomizableUI.jsm
before customizableui was introduced, then you have to make sure that in case of running on newer browsers, xul overlay does not contain description of the button that you are creating with createwidget() method.
... otherwise, conflicting static xul overlay button and dynamic customizableui buttons might cause the created button to be unstable or create a double button.
... to avoid that, update your chrome manifest file with links to two different versions of xul overlay, using manifest flags.
...And 2 more matches
customDBHeaders Preference
user_pref( "mailnews.customdbheaders", "x-superfluous x-other"); adding a column the reply-to column tutorial does a good job of explaining how to add a column with an overlay, so i'll just show you my overlay file: <?xml version="1.0" ?> <overlay id="colsuperfluousoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type='application/javascript' src='chrome://superfluous/content/superfluous.js'/> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colsuperfluous" persist="...
...hidden ordinal width" currentview="unthreaded" flex="1" label="superfluous" tooltiptext="click to sort by superfluous" /> </treecols> </tree> </overlay> you should insure that whatever id you use for the treecol you're adding matches the reference from your javascript code (i.e.
...this is the superfluous.js file referenced from within the superfluous_overlay.xul file: dump(" ~ ~ ~ ~ superfluous ~ ~ ~ ~ \n"); var columnhandler = { getcelltext: function(row, col) { //get the messages header so that we can extract the 'x-superfluous' field var key = gdbview.getkeyat(row); var hdr = gdbview.db.getmsghdrforkey(key); var retval = hdr.getstringproperty("x-superfluous"); dump("x-superfluous: " + retval + "\n"); return retval; }, getsortstringforrow: function(hdr) { return hdr.getstring...
...And 2 more matches
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
in the html pane in the html pane, an element laid out with flexbox has the word flex next to it as shown in the following image: click the word flex in the html pane to keep the overlay visible when you move the mouse away from the container.
... clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex items are affected by your changes.
... flex container options the flex container section of the layout view looks like this: there are two settings you can change in the flex container section: you can control the color of the overlay by clicking on the small circle next to the selector.
...And 2 more matches
mix-blend-mode - CSS: Cascading Style Sheets
syntax /* keyword values */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; /* global values */ mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-...
... formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> ...
...class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> overlay <div class="container overlay"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> ...
...And 2 more matches
XUL Migration Guide - Archive of obsolete content
user interface components xul-based add-ons typically implement a user interface using a combination of two techniques: xul overlays and xul windows.
... xul overlays xul overlays are used to modify existing windows such as the main browser window.
... because sdk-based extensions are restartless, they can't use xul overlays.
... my-addon/ chrome/ content/ locale/ skin/ chrome.manifest data/ lib/ package.json there are limitations on what you can do in this manifest file: for example, you can't register overlays, resource: uris, or components.
Appendix D: Loading Scripts - Archive of obsolete content
these tags are generally inserted into xul overlay files or other xul documents, after which they are automatically loaded into the context of the xul window in question and executed immediately and synchronously.
...(a standalone xul window can use an onload attribute.) example the following overlay will load the script “overlay.js” from the same directory as the overlay file into the window which it overlays.
... the script will be read with the utf-8 encoding, based on the encoding of the overlay, and will execute as javascript version 1.8, based on the version specified in the script tag.
... <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="script-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript;version=1.8" src="overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects.
Observer Notifications - Archive of obsolete content
in a chrome browser overlay file, we register an observer to listen to the notification topic "xulschoolhello-test-topic" when the window loads.
... /** * controls the browser overlay for the hello world extension.
... */ xulschoolchrome.browseroverlay = { /* observer service.
... */ observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { asubject.queryinterface(ci.nsisupportsstring); window.alert("subject: " + asubject.data); // => "this is a test" window.alert("data: " + adata); // => "hello" } } } window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); window.addeventlistener( "unload", function() { xulschoolchrome.browseroverlay.uninit(); }, false); in the observe method the notification topic is verified because you can have one observer listening to several topics.
User Notifications and Alerts - Archive of obsolete content
nb.appendnotification( message, "xulschoolhello-friend-notification", "chrome://xulschoolhello/skin/friend-notification.png", nb.priority_info_high, [ acceptbutton, declinebutton ]); all browser tabs have a notification box by default, so you don't need to do any overlaying.
... custom alerts creating custom solutions for alerting the user is not complicated, given the advantages of xul overlays and css positioning.
... an easy way to display alerts is to include a hidden box in your overlay, which you can fill with any content you need before removing the hidden attribute so that it is displayed to the user.
... another option is to also add a hidden box to the overlay, but use css positioning to locate it where you want.
Add-ons - Archive of obsolete content
how to convert an overlay extension to restartless first off, what kind of add-on are we talking about here?
... well, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own.
...in your extension's browser.xul overlay, write code which listens for a custom dom event.
... legacy add-ons this section contains links to documentation for legacy technology for add-on development, including: legacy extensions for firefox for android add-ons that work with desktop firefox do not automatically work in firefox for android: overlay extensions this page contains links to documentation for the approach to developing extensions for gecko-based applications which uses: performance best practices in extensions one of firefox's great advantages is its extreme extensibility.
Index - Archive of obsolete content
ArchiveMozillaXULIndex
for more information about how to use an overlay to modify a menu, see using menus and popups in extensions 441 methods xul methods, xul reference no summary!
...to add a new menu onto the main application menubar, you will need to overlay this menubar.
... 956 creating toolbar buttons (customize toolbar window) add-ons, extensions, firefox 3, toolbars, xul this article explains how to add a toolbar button to a toolkit application (such as firefox, thunderbird, or kompozer) using overlays.
... 1024 cross package overlays tutorials, xul, xul_tutorial this section describes how to apply overlays to files that don't import them.
Extensions - Archive of obsolete content
to add a new menu onto the main application menubar, you will need to overlay this menubar.
...this can be done by overlaying the popup to append the item to.
...because of this, the new item might not appear at the end of the menu but before a menuitem added by another extension, depending on the order in which the overlays are applied.
...thus, you can add items to the firefox context menu by overlaying this single menu.
Manifest Files - Archive of obsolete content
the browser.manifest file used by firefox looks like this: content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes overlay chrome://global/content/viewsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://global/content/viewpartialsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul two packages are listed here, 'branding' and 'browser'.
... three overlays are also specified, which allow content from different packages to combine together.
... extensions will make the most use of overlays, since they merge their ui with the browser ui.
...also delete the entire <mozilla-directory>/chrome/overlayinfo/ directory if you are using overlays.
Updating Commands - Archive of obsolete content
if you include the script 'chrome://global/content/globaloverlay.js' in a xul file, you can call the godocommand method which executes the command passed as the argument.
...<script src="chrome://global/content/globaloverlay.js"/> <command id="cmd_paste" oncommand="godocommand('cmd_paste');"/> <button label="paste" command="cmd_paste"/> the example above will implement a paste button.
...in the example, the goupdatecommand method is called which is a function provided by the globaloverlay.js script described earlier.
...the functions used can be found in the 'chrome://communicator/content/utilityoverlay.js' script.
XUL element attributes - Archive of obsolete content
insertafter type: id when an element is in an overlay, the insertafter attribute specifies the id of the element in the base window that the element should appear after.
... insertbefore type: id when an element is in an overlay, the insertbefore attribute specifies the id of the element in the base window that the element should appear before.
... position type: string (representing an integer) when an element is in an overlay, the position is an index where the child is inserted.
... removeelement type: id when placed on an element in an overlay, it indicates that the element in the base file should be removed from the window.
prefpane - Archive of obsolete content
in this latter case, the separate file should use an overlay tag as its root tag since it will be loaded as an overlay to the main preferences window.
... attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> ...
... src type: uri the uri of the overlay contents of preference pane.
...after the overlay is merged.) you can put the handler for this event in the onpaneload attribute on the element.
Image gallery - Learn web development
the html body looks like this: <h1>image gallery example</h1> <div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <div class="overlay"></div> <button class="dark">darken</button> </div> <div class="thumb-bar"> </div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <img> and put right over the top of ...
... if the class name is "dark", changes the <button> class to "light" (using setattribute()), its text content to "lighten", and the background-color of the overlay <div> to "rgba(0,0,0,0.5)".
... if the class name not "dark", changes the <button> class to "dark", its text content back to "darken", and the background-color of the overlay <div> to "rgba(0,0,0,0)".
... btn.setattribute('class', xxx); btn.textcontent = xxx; overlay.style.backgroundcolor = xxx; hints and tips you don't need to edit the html or css in any way.
Chrome registration
style style overlays (custom css which will be applied to a chrome page) are registered with the following syntax: style chrome://uri-to-style chrome://stylesheet-uri [flags] note: only stylesheets at chrome uris can be applied in this way.
... this example shows how a different overlay can be used for different applications: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://songbird/content/xul/layoutbaseoverlay.xul chrome://myaddon...
.../content/sboverlay.xul application=songbird@songbirdnest.com appversion extensions may install into multiple versions of an application.
... example chrome manifest content necko jar:comm.jar!/content/necko/ locale necko en-us jar:en-us.jar!/locale/necko/ content xbl-marquee jar:comm.jar!/content/xbl-marquee/ content pipnss jar:pipnss.jar!/content/pipnss/ locale pipnss en-us jar:en-us.jar!/locale/pipnss/ # firefox-only overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} # seamonkey-only overlay chrome://navigator/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/prefover...
Index
as such, i've always thought it would be nice to have a list of what xul, js, or other files are that are here, what they do, and where they overlay at different points within the client.
... 77 building a thunderbird extension 4: chrome manifest extensions, thunderbird the file called chrome.manifest tells thunderbird what packages and overlays are provided by the extension.
... 93 access stringbundle from overlay thunderbird no summary!
... 100 add toolbar button example xul overlay file: 101 create custom column thunderbird the article "creating a custom column" will get you well on the road to creating your own columns and populating them with custom data.
Add Option to Context Menu
assuming this on chrome.manifest: overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul.
... for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </popup> </overlay> for thunderbird 2 and 3 in the same xpi if our extension needs to support thunderbird 2 and 3 we need to make cu...
...stom overlays for each version.
... this can be reached by adding these lines to the chrome.manifest file: overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay-tb2.xul appversion<3.0 overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay-tb3.xul appversion=>3.0 than we need two overlay xul files with content from examples above.
Working with windows in chrome code
opening windows from a <script> in a window or an overlay to open a new window, we usually use a window.open or window.opendialog dom call, like this: var win = window.open("chrome://myextension/content/about.xul", "aboutmyextension", "chrome,centerscreen"); the first parameter to window.open is the uri of the xul file that describes the window and its contents.
...for example: // alerts the title of the document displayed in the content-primary widget alert(content.document.title); for example, you can use content.document in a browser.xul overlay to access the web page in the selected tab in a firefox window.
...suppose you're developing a browser extension that consists of a browser.xul overlay and an options window.
... suppose the overlay contains a button to open the extension's options window which needs to read some data from the browser window.
Layout using named grid lines - CSS: Cascading Style Sheets
in this example i have added an extra div with a class of overlay.
... to position overlay using these implicit named lines is the same as positioning an item using lines that we have named.
...per { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } .wrapper > div.overlay { z-index: 10; grid-column: main-start / main-end; grid-row: hd-start / ft-end; border: 4px solid rgb(92,148,13); background-color: rgba(92,148,13,.4); color: rgb(92,148,13); font-size: 150%; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> <div class="overlay">...
...overlay</div> </div> given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout.
<blend-mode> - CSS: Cascading Style Sheets
<div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } overlay the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: overlay; } darken the final color is composed of the darkest values of each color channel.
... this blend mode is equivalent to overlay but with the layers swapped.
... html <div></div> <p>choose a blend-mode:</p> <select> <option selected>normal</option> <option>multiply</option> <option>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> css div { width: 300px; height: 3...
Customizing the download progress bar - Archive of obsolete content
first you need to overlay the downloads window so that you can add a new stylesheet.
... in your jar.mn file, add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed.
...in your overlay file, add a javascript file between the <overlay> and </overlay> tags: <script type="application/javascript" src="chrome://myextension/content/downloads-overlay.js" /> the javascript file will look something like this: var mydownloadmanager = { defaultcreatedownloaditem : null, init : function fdm_init() { mydownloadmanager.defaultcreatedownloaditem = window.createdownloaditem...
Interaction between privileged and non-privileged pages - Archive of obsolete content
in your extension's browser.xul overlay, write code which listens for a custom dom event.
... on the event handler for the correct namespaceuri property, or as per the dom specification, use initevent() with an event name that is itself namespaced (xml name characters only): "it is also strongly recommended that third parties adding their own events use their own prefix to avoid confusion and lessen the probability of conflicts with other new events.") in the case where your extension's overlay does not interact directly with browser.xul, such as in a sidebar, it might be easier to add the event listener to the top-level document directly as shown below (also see: accessing the elements of the top-level document from a child window).
... with callback</button> <button onclick="return something.send_request({baz: 3}, something.callback)">send {baz: 3} with callback</button> <button onclick="return something.send_request({mozilla: 3})">send {mozilla: 3} without callback</button> <button onclick="return something.send_request({firefox: 4}, something.callback)">send {firefox: 4} with callback</button> </body> </html> overlay on browser.xul in your extension: var something = { listen_request: function(callback) { // analogue of chrome.extension.onrequest.addlistener document.addeventlistener("something-query", function(event) { var node = event.target; if (!node || node.nodetype != node.text_node) return; var doc = node.ownerdocument; callback(json.parse(node.nodevalue), doc, fu...
Adding menus and submenus - Archive of obsolete content
adding a new menu we already saw how to add menus in overlays and, as you may have imagined, you can nest submenus as deep as you want.
... adding elements to existing menus just as explained in the previous sections, the best place to overlay your extension menu is inside the tools menu.
...if you're overlaying the tools menu, your overlay code should have something like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="javascriptconsole,devtoolsseparator"> <menupopup> <!-- your menuitem goes here.
Adding sidebars - Archive of obsolete content
« previousnext » the sidebar in firefox is a relatively large and flexible space to add rich interfaces without requiring new windows or complicated overlays.
...all you need is to overlay the view sidebar menu.
... the xul page for the sidebar can hold any content you want and it's no different from other xul windows or overlays.
Setting Up a Development Environment - Archive of obsolete content
adding: install.rdf (deflated 50%) adding: chrome.manifest (deflated 50%) adding: content/browseroverlay.js (deflated 42%) adding: content/browseroverlay.xul (deflated 69%) adding: skin/browseroverlay.css (stored 0%) adding: locale/browseroverlay.dtd (deflated 52%) adding: locale/browseroverlay.properties (stored 0%) creating xpi file.
... the dom inspector is particularly useful in finding out how to overlay a window, and how to replace default css style rules.
... now that you know how to quickly monitor your project and test changes, we'll learn how to add new ui elements to firefox, through overlays and new windows.
Index of archived content - Archive of obsolete content
on installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey 2 firefox addons developer guide hiding browser chrome hotfix extension how to convert an overlay extension to restartless inline options install manifests installing extensions and themes from web pages interaction between privileged and non-privileged pages jetpack processes legacy add-ons legacy extensions for firefox for android api accounts.j...
... prerequisites walkthrough webextensions for firefox for android listening to events in firefox extensions migrating from internal linkage to frozen linkage migrating raw components to add-ons multiple item extension packaging offering a context menu for form controls overlay extensions firefox addons developer guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions chapter 3: introduction to xul—how to build a more intuitive ui chapter 4:...
...structure conclusion enabling the behavior - retrieving tinderbox status enabling the behavior - updating the status bar panel enabling the behavior - updating the status periodically finding the code to modify finding the file to modify making a mozilla installation modifiable making it into a dynamic overlay and packaging it up for distribution making it into a static overlay prerequisites specifying the appearance tinderbox creating a release tag creating a skin for firefox/getting started creating a skin for mozilla faq getting started in-d...
Makefile.mozextension.2 - Archive of obsolete content
make_files: chrome.manifest install.rdf overlay.xul overlay.js overlay.dtd $(noecho) $(noop) make_clean: rm -rf $(project) # this may be a bit too old ?!
...real_install: $(cp) chrome/$(project).jar ~/.mozilla/default/32p27fdr.slt/chrome/ #################################### ###### define chrome_manifest content $(project) content/ overlay chrome://browser/content/browser.xul chrome://$(project)/content/overlay.xul locale $(project) en-us locale/ skin $(project) classic/1.0 skin/ style chrome://global/content/customizetoolbar.xul chrome://$(project)/skin/overlay.css endef export chrome_manifest chrome.manifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #se...
.../update.rdf</updateurl> <type>2</type> <targetapplication> <description> <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script src="overlay.js"/></overlay> ...
Extensions - Archive of obsolete content
extensions typically overlay the host application's ui to add toolbar buttons, menus and other features.
... one of prism's features is an extreme lack of ui elements, which means that trying to use the same overlays in firefox and prism is really not possible.
...you may also need to modify the extension's overlay to be able to work with the prism ui.
Debugging a XULRunner Application - Archive of obsolete content
add <script src="chrome://venkman/content/venkman-overlay.js" /> to one of your xul windows.
... function toopenwindowbytype is not defined if you get an error that "function toopenwindowbytype is not defined" you may add the following function to your scripts (doesn't seem to be in the venkman overlay): function toopenwindowbytype(intype, uri) { var winopts = "chrome,extrachrome,menubar,resizable,scrollbars,status,toolbar"; window.open(uri, "_blank", winopts); } i can't see my pages, functions ...
... security error: content at x-jsd:source?location=chrome%3a%2f%2fvenkman%2fcontent%2fvenkman-overlay.js&instance=12 may not load or link to chrome://venkman/skin/venkman-source.css.
XULRunner tips - Archive of obsolete content
me://mozapps/content/extensions/extensions.xul?type=themes extension:manager-themes javascript console chrome://global/content/console.xul global:console about:config chrome://global/content/config.xul developer extensions venkman need a custom build or a compatible extension need to edit compatibility in needs a method to start venkman (usually by overlaying the main xul file, similar to existing code for firefox, suite, etc.) the function toopenwindowbytype() needs to be defined.
...open your chrome.manifest file and add these lines: content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no locale inspector en-us jar:inspector.jar!/locale/inspector/ skin inspector modern/1.0 jar:inspector.jar!/skin/modern/inspector/ skin inspector classic/1.0 jar:inspector.jar!/skin/classic/inspector/ overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/dom/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/stylerules/commandoverlay.xul overlay chrome://inspector/content/keysetoverlay.xul chrome://inspector/content/viewers/dom/keysetoverlay.xul overlay chrome://inspector/content/popupoverlay.xul chrome://...
...inspector/content/viewers/stylerules/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/dom/commandoverlay.xul to launch dom inspector in your application, you need to open its main window, with a command like this: window.open("chrome://inspector/content/inspector.xul", "", "chrome"); alternatively, the dom inspector may also be added as an extension: (if you already have inspector installed for another application you can skip to the next step) follow the instructions above through "unzip the package." create a file in the extensions directory of your application with the same name as the dom inspector id (inspector@mozilla.org) containing one line of text -- the exact path to the root directory of dom inspector (where the insta...
Theme changes in Firefox 2 - Archive of obsolete content
safebrowsing/warning-overlay.xul safebrowsing/browser-protection.css new file containing the overlay that's drawn over the browser when you browse to a suspected phishing site.
... mozapps/extensions/itemdisabledfader.png new file; a translucent png used as an overlay on top of items that are disabled in the add-ons manager.
... mozapps/extensions/itemenabledfader.png new file; a translucent png used as an overlay on top of items that are enabled in the add-ons manager.
Common causes of memory leaks in extensions - Extensions
for example, in xul overlay code: var contentwindows = []; function inbrowserxuloverlay(contentwindow) { // forgetting or failing to pop the content window thing again contentwindows.push(contentwindow); } this will keep the content window compartments alive until the browser window is closed.
...consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically ...
... in overlay code you may use an unload event listener: addeventlistener("unload", function() { services.obs.removeobserver(myobserver, "private-browsing"); }, false); in bootstrap.js (restartless add-ons) unregister your observer in your shutdown function: function shutdown() { // ...
nsISessionStore
for many extensions, those that overlay browser.xul, the appropriate window object for nsisessionstore is the global object 'window'.
...if you you are working in a browser.xul overlay and want the currently selected tab, it's as simple as gbrowser.selectedtab.
... if you just hold a reference to some content document in the overlay's chrome window, here is how you find its corresponding tab: function tabfromdoc(doc) { var no = gbrowser.getbrowserindexfordocument(doc); return gbrowser.tabcontainer.childnodes[no]; } // example use: cc['@mozilla.org/browser/sessionstore;1'] .getservice(ci.nsisessionstore) .settabvalue(tabfromdoc(mycontentdoc), 'mykey', 'myvalue'); see also the session store api article.
Creating a Custom Column
for this we overlay messenger.xul, by placing the following line in our chrome.manifest file: overlay chrome://messenger/content/messenger.xul chrome://replyto_col/content/replyto_col_overlay.xul now that our overlay is set up we need to connect a column to the current columns that exist.
... our replyto_col_overlay.xul should now contain something similar to this: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colreplyto" persist="hidden ordinal width" currentview="unthreaded" flex="2" label="reply-to" tool...
...tiptext="click to sort by the reply-to header" /> </treecols> </tree> <!-- include our javascript file --> <script type="text/javascript" src="chrome://replyto_col/content/replyto_col.js"/> </overlay> that's it!
animation - CSS: Cascading Style Sheets
WebCSSanimation
mation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s linear 1s slidein;</div> <div class="animation a2"></div> </div> </...
...div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bd...
...wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', funct...
SDK and XUL Comparison - Archive of obsolete content
although you can write traditional add-ons that are restartless, you can't use xul overlays in them, so most traditional add-ons would have to be substantially rewritten anyway.
... advantages of xul-based add-ons user interface flexibility xul overlays offer a great deal of options for building a ui and integrating it into the browser.
/loader - Archive of obsolete content
the example above overlays the base path '' with a different mapping for 'toolkit/' prefixed modules.
...for example in the sdk, the loader is loaded at bootstrap as a jsm module but is then exposed as a pseudo-module to avoid the overhead of subsequent loads: let loadermodule = cu.import('resource://gre/modules/commonjs/toolkit/loader.js'); let loader = loadermodule.loader({ modules: { // overlay `toolkit/loader` so that `require('toolkit/loader')` // will return our `loadermodule`.
HTML to DOM - Archive of obsolete content
as an example, i will show a browser overlay .xul file, and some javascript code to access it.
... here is some xul code you can add to your browser overlay .xul file.
On page load - Archive of obsolete content
creating an overlay first, you need to create an overlay to one (or more, depending on which applications you target) of the following xul documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script a...
...ttach a script to your overlay (see "attaching a script to an overlay") that adds a load event listener to appcontent element (browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.getelementbyid("appcontent"); // browser if(appcontent){ appcontent.addeventlistener("domcontentloaded", myextension.onpageload, true); } var messagepane = document.getelementbyid("messagepane"); // mail if(messagepane){ messagepane.addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { v...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
once you've written the necessary chrome files (for instance, an overlay that adds a menu item to instantiate and use one of your components), you need to package them up as part of your extension.
...for our simple extension example, this file might look something like this: myextension.jar: % content myextension %content/ % locale myextension en-us %locale/ % skin myextension classic/1.0 %skin/classic/ % overlay chrome://browser/content/browser.xul chrome://myextension/content/myextensionoverlay.xul content/myextensionoverlay.js (content/myextensionoverlay.js) content/myextensionoverlay.xul (content/myextensionoverlay.xul) locale/myextension.dtd (locale/myextension.dtd) locale/myextension.properties (locale/myextension.properties) skin/classic/myextension.css (skin/classic/myextension.css) place this code in a file called...
Extension Theming Guidelines - Archive of obsolete content
branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package.
... css selectors when writing stylesheet rules for windows that you are overlaying always try to be specific with the css selector.
Offering a context menu for form controls - Archive of obsolete content
overlay the content the first thing to do is to establish an overlay over the chrome for the window in which you want to allow context menus on form controls.
... <overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls.
Appendix A: Add-on Performance - Archive of obsolete content
most add-ons use the load event handler in the main overlay to initialize their objects and sometimes read files or even fetch remote data.
...jsm provide the cleanest way to separate js into modules that can be loaded on request, unlike chrome scripts which are generally loaded with the overlay at startup.
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
install scripts just like with a regular initialization function, we want a load event handler: // rest of overlay code goes here.
... window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); then all we need is some persistent flag that ensures that the first run code is only run once.
Creating a dynamic status bar extension - Archive of obsolete content
write the xul file we need a slightly more complicated xul file this time, in order to add a reference to the javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statu...
...sbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the javascript function that will be executed whenever the user clicks on the status bar panel.
Creating a Mozilla Extension - Archive of obsolete content
completing this tutorial will give you a basic understanding of how mozilla's user interface (ui) is constructed, how to find the source code for the ui you want to extend, how to make an installation of mozilla modifiable, how to use mozilla's network library to load and parse web pages in javascript, and how to use dynamic overlays to package a mozilla extension for installation by others.
... contents prerequisites tinderbox making a mozilla installation modifiable finding the file to modify finding the code to modify adding the structure specifying the appearance enabling the behavior - retrieving tinderbox status enabling the behavior - updating the status bar panel enabling the behavior - updating the status periodically making it into a static overlay making it into a dynamic overlay and packaging it up for distribution conclusion next » original document information author(s): myk melez last updated date: september 19, 2006 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
List of commands - Archive of obsolete content
wordprevious cmd_selectwordnext cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_movepageup cmd_movepagedown cmd_selectpageup cmd_selectpagedown other commands the following list other commands (prefixed by cmd_ or browser:) which have not been categorized here yet (though they are in the alphabetical list below): http://lxr.mozilla.org/seamonkey/sou...baroverlay.xul http://lxr.mozilla.org/seamonkey/sou...t/navigator.js http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...onaltoolbar.js http://lxr.mozilla.org/seamonkey/sou...rceoverlay.xul http://lxr.mozilla.org/seamonkey/sou...extoverlay.xul http://lxr.mozilla.org/seamonkey/sou...lityoverlay.js http://lxr.mozilla.org/seamonkey/sou...oomoverlay.xul http://lx...
...r.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...ark.properties http://lxr.mozilla.org/seamonkey/sou...kmarks-temp.js http://lxr.mozilla.org/seamonkey/sou.../bookmarks.xml http://lxr.mozilla.org/seamonkey/sou...rksoverlay.xul http://lxr.mozilla.org/seamonkey/sou...okmarkstree.js list of commands (listed alphabetically) browser:addbookmark browser:addbookmarkas browser:addgroupmarkas browser:back browser:editpage browser:find browser:findagain browser:findprev browser:forward browser:home browser:managebookmark browser:open browser:openfile browser:print browser:printpreview browser:savepage browser:searchinternet browser:sendpage browser:uploadfile cmd_bm_copy cmd_bm_cut cmd_bm_delete cmd_bm_expandfolder cmd_bm_export cmd_bm_f...
Menus - Archive of obsolete content
sharing menus between windows if you wish to have several windows that share the same menu bar, a common technique is to place the menubar in an overlay and apply it to all of the windows.
...for example, to have a tools menu that is shared between all windows, just create a menu in the overlay, and include it in each window with a single line: <menu id="menu-tools"/> the overlay should have a menu with the same id 'menu-tools' containing the complete definition of the menu.
Special per-platform menu considerations - Archive of obsolete content
notes for firefox extension developers on the mac, some elements, once moved to the application menu, are no longer accessible from xul overlays or from javascript injected into browser.xul.
... to change these items in firefox, overlay hiddenwindow.xul instead.
XUL Reference - Archive of obsolete content
toscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko...
...ps --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer ...
command - Archive of obsolete content
if you include the script chrome://global/content/globaloverlay.js in your window, you can use the function godocommand function to invoke the command.
...see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not.
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
as you may (or may not) recall, that file tells the application what xul code your extension's interface needs to overlay onto.
...we need to add lines to the manifest for thunderbird and sunbird, like this: # thunderbird overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul # sunbird overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul these lines cause the main thunderbird message list window and the main window in sunbird to be the target of the overlays we apply in the stockwatcher2.xul file.
Window.importDialog() - Archive of obsolete content
the xul is merged into the existing window, almost like a xul overlay.
... because of this, element id and javascript conflicts are possible, just like overlays.
XUL Booster - Archive of obsolete content
add an overlay you'll need the chrome address of the content you wish to overlay, ex.
...learn more at creating_a_mozilla_extension:finding_the_file_to_modify to create an xul:overlay, create a xul fragment with a top level node that has an id matching an existing element, ex.
Add-ons
other toolsets, such as overlay add-ons, bootstrapped add-ons, and the add-on sdk, are no longer supported.
... migrate an existing extension if you maintain a legacy extension, such as an xul overlay, bootstrapped, or add-on sdk-based extension, you can still port it to use webextension apis.
Displaying Places information using views
every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views.
... the overlay contains javascript required by the views.
Step through code - Firefox Developer Tools
on, unless on a function call, in which case enter the function being called step out: run to the end of the current function, in which case, the debugger will skip the return value from a function, returning execution to the caller split console when paused, you can press the esc key to open and close the split console to gain more insight into errors and variables: pause on breakpoints overlay since firefox 70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debugging.
... if you want to turn this feature off, since firefox 71 you can do so by going to about:config in a new tab, setting the devtools.debugger.features.overlay pref to false, and restarting the browser.
Index - Firefox Developer Tools
this is the two-pane inspector that appears when ctrl+shift+i (or cmd+shift+i) is pressed from one of the applications for which dom inspector has explicit support (i.e., menuitems placed via overlay).
... 102 rulers devtools, firefox, rulers, tools you can overlay horizontal and vertical rulers on a web page: 103 settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ...
Compositing example - Web APIs
var canvas1 = document.createelement("canvas"); var canvas2 = document.createelement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas content.', 'the new shape is drawn only where both the new shape and the destination canvas overlap.
...dark parts on the base layer become darker, and light parts become lighter.', 'retains the darkest pixels of both layers.', 'retains the lightest pixels of both layers.', 'divides the bottom layer by the inverted top layer.', 'divides the inverted bottom layer by the top layer, and then inverts the result.', 'a combination of multiply and screen like overlay, but with top and bottom layer swapped.', 'a softer version of hard-light.
Hit regions and accessibility - Web APIs
partially overlaying the <a href="http://en.wikipedia.org/wiki/circle" onfocus="drawcircle();" onblur="drawpicture();">circle</a>.
... partially overlaying the circle is a green <a href="http://en.wikipedia.org/wiki/square" onfocus="drawsquare();" onblur="drawpicture();">square</a> and a purple <a href="http://en.wikipedia.org/wiki/triangle" onfocus="drawtriangle();" onblur="drawpicture();">triangle</a>, both of which are semi-opaque, so the full circle can be seen underneath.</p> </canvas> see the video how nvda reads this example by steve faulkner.
Web Video Text Tracks Format (WebVTT) - Web APIs
the primary purpose of webvtt files is to add text overlays to a <video>.
...the second line might be used to overlay text on a sign or label.
Fundamentals of WebXR - Web APIs
devices which use transparent glasses to allow the user to see the world, while overlaying the rendered image atop the scene.
... the difference is that the goggles pass through the real world, overlaying the rendered image on top of the user's physical environment.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
e-slider-thumb; } <div>lorem</div> safari media-mute-button div{ color: black; -webkit-appearance: media-mute-button; } <div>lorem</div> chrome safari edge media-play-button div{ color: black; -webkit-appearance: media-play-button; } <div>lorem</div> chrome safari edge media-overlay-play-button div{ color: black; -webkit-appearance: media-overlay-play-button; } <div>lorem</div> chrome safari media-return-to-realtime-button div{ color: black; -moz-appearance: media-return-to-realtime-button; -webkit-appearance: media-return-to-realtime-button; } <div>lorem</div> safari media-rewind-but...
...-results-button div{ color: black; -moz-appearance: searchfield-results-button; -webkit-appearance: searchfield-results-button; } <div>lorem</div> safari edge searchfield-cancel-button div{ color: black; -webkit-appearance: searchfield-cancel-button; } <div>lorem</div> chrome safari edge snapshotted-plugin-overlay div{ color: black; -moz-appearance: snapshotted-plugin-overlay; -webkit-appearance: snapshotted-plugin-overlay; } <div>lorem</div> safari sheet div { color: black; -moz-appearance: sheet; -webkit-appearance: sheet; } <div>lorem</div> none slider-vertical div{ color: black; -webkit-appearance:...
SVG and CSS - SVG: Scalable Vector Graphics
<radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(18)"> <path class="segment-fill" d="m0,0 v-20...
... <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <use id="outer-petals" xlink:href="#petals"/> <use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> </g> </svg> what next?
Porting the Library Detector - Archive of obsolete content
how the library detector works all the work is done inside a single file, librarydetector.xul this contains: a xul overlay a script the xul overlay adds a box element to the browser's status bar: the script does everything else.
Miscellaneous - Archive of obsolete content
oper.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: getbrowserselection(); // |window| object is implied; i.e., window.getbrowserselection() this final option massages the selection to remove leading and trailing whitespace.
Sidebar - Archive of obsolete content
this means you can't directly access the sidebar content from a script referenced from a browser.xul overlay.
Toolbar - Archive of obsolete content
there are two tutorials available: an elaborate step by step tutorial for beginners: custom toolbar button a tutorial describing the steps needed to add a toolbar button assuming you already have a working extension and know the basics of extension development: creating toolbar buttons adding button by default when you create and deploy your extension and include a toolbar button for it by overlaying the customize toolbarpalette, it is not available by default.
Inline options - Archive of obsolete content
this code should be in bootstrap.js (within the startup() function) for restartless extensions or in an xpcom component or a javascript code module (not an overlay!) for traditional extensions.
Legacy Add-ons - Archive of obsolete content
this section contains links to documentation for legacy technology for add-on development, including: add-on sdk legacy extensions for firefox for android earlier technology bootstrapped extensions overlay extensions ...
Getting Started with Firefox Extensions - Archive of obsolete content
you should see the following directory structure: xulschoolhello1 chrome.manifest install.rdf content browseroverlay.xul browseroverlay.js skin browseroverlay.css locale en-us browseroverlay.dtd browseroverlay.properties that's lots of files for something so simple!
Intercepting Page Loads - Archive of obsolete content
in a nutshell, from the chrome code in the overlay we add an event listener for the load event.
The Box Model - Archive of obsolete content
xulschoolhello.linkedtext.label = go to <html:a onclick="%s">our site</html:a> for more information to include html in a xul document, you need to add the namespace for it in the document root: <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> then you can have an html:p (paragraph) element where you insert the result of parsing the property string.
Performance best practices in extensions - Archive of obsolete content
defer everything that you can most extensions have a load event listener in the main overlay that runs their startup functions.
Setting up an extension development environment - Archive of obsolete content
changes to xul overlays will still require reloading of the document overlaid.
Firefox addons developer guide - Archive of obsolete content
add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter 3 or 5 more informations about overlay (how to overlay some interesting part of firefox like status bar, menus or toolbar) add previous/next at the end of each chapter questions: opensource appendix.
Localizing an extension - Archive of obsolete content
to options.xul, we add this line: <!doctype window system "chrome://stockwatcher2/locale/options.dtd"> we add a similar line to the stockwatcher.xul file: <!doctype overlay system "chrome://stockwatcher2/locale/stockwatcher2.dtd"> in larger applications you might need to use entities from several locale files in a single xul file.
Enabling the behavior - updating the status periodically - Archive of obsolete content
ype="application/javascript" src="chrome://navigator/content/navigator.js"/> <script type="application/javascript" src="chrome://navigator/content/navigatordd.js"/> <script type="application/javascript" src="chrome://navigator/content/sessionhistoryui.js"/> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js"/> <!-- hook for stringbundle overlays --> ...
Finding the file to modify - Archive of obsolete content
each window and dialog box in mozilla is defined by a single xul file (in some cases other xul files called overlays contribute portions of another window's structure).
Proxy UI - Archive of obsolete content
mouseover when online, the tooltip will include the current proxy mode: code http://mxr.mozilla.org/seamonkey/sou...ityoverlay.xul bugs bug 243624 reference network.proxy.type ...
insertafter - Archive of obsolete content
« xul reference home insertafter type: id when an element is in an overlay, the insertafter attribute specifies the id of the element in the base window that the element should appear after.
insertbefore - Archive of obsolete content
« xul reference home insertbefore type: id when an element is in an overlay, the insertbefore attribute specifies the id of the element in the base window that the element should appear before.
position - Archive of obsolete content
« xul reference home position type: string (representing an integer) when an element is in an overlay, the position is an index where the child is inserted.
prefpane.src - Archive of obsolete content
« xul reference home src type: uri the uri of the overlay contents of preference pane.
removeelement - Archive of obsolete content
« xul reference home removeelement type: id when placed on an element in an overlay, it indicates that the element in the base file should be removed from the window.
Menus - Archive of obsolete content
for more information about how to use an overlay to modify a menu, see using menus and popups in extensions the following tables list the ids of menus in firefox that are commonly overlaid upon.
Toolbars - Archive of obsolete content
creating toolbar buttons how to use overlays to add toolbar buttons to mozilla applications.
Introduction - Archive of obsolete content
this is done using a feature of xul called an overlay, which allows the ui provided from one source, in this case, the firefox browser, to be merged together with the ui from the extension.
More Wizards - Archive of obsolete content
next, we'll see how to use overlays to handle common content.
XUL Tutorial - Archive of obsolete content
in skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using css and xbl xbl example specialized window types features of a window creating dialogs open and save dialogs creating a wizard more wizards overlays cross package overlays installation creating an installer install scripts additional install features this xul tutorial was originally created by neil deakin.
Using the Editor from XUL - Archive of obsolete content
before each window is closed, javascript code in globaloverlay.js tries to call a trytoclose method on each window.
XUL Changes for Firefox 1.5 - Archive of obsolete content
loading overlays dynamically xul now supports loading overlays dynamically with the document.loadoverlay function.
XUL Questions and Answers - Archive of obsolete content
overlaying elements without ids the original developers only tend to put ids where they need them.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
treecell see tree treechildren see tree treecol see tree treecols see tree treeitem see tree treerow see tree elements that do not expose anything to screen readers/have no discovered accessibility issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitter stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane prefwindow resizer richlistbox richlistitem resizer rule scrollbar scrollbox scrollcorner separator templat...
elements - Archive of obsolete content
orpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels...
prefwindow - Archive of obsolete content
for animatefadein to work properly, contents of prefpanes should be put into overlays.
toolbarpalette - Archive of obsolete content
you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette.
XUL - Archive of obsolete content
overlays overlays are used to describe extra content for the ui.
XULRunner Hall of Fame - Archive of obsolete content
includes smil audio overlays and idpf fixed layout.
2006-11-03 - Archive of obsolete content
xul overlay question -- how to replace an existing element?
2006-11-17 - Archive of obsolete content
nickolay ponomarev lets us know that processing instructions are now added to xul document's dom this also means, you can no longer use document.firstchild in xul scripts to get the root element of a xul document and the xml-stylesheet and xul-overlay processing instructions outside the prolog no longer have any effect peter.sei...@gmail.com runs into some difficulties deploying xulrunner 1.8 on os x?
2006-09-30 - Archive of obsolete content
developers should use this sample instead: http://developer.mozilla.org/en/docs/xpcom_glue discussions dynamic load overlay a short discussion about the possibilities of loading and unloading xul overlay runtime reading binary data from file discusses about the code to read binary data from file how to build xpcom component on mac os x discusses about the make file code used to build xpcom components on mac os x successfully meetings none during this week.
RDF in Mozilla FAQ - Archive of obsolete content
this is like overlaying graphs, or merging collections of statements ("microtheories") together.
Overflowing content - Learn web development
in a legacy application, you may encounter a box where content is overlaying other content on the page.
Test your skills: backgrounds and borders - Learn web development
make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this.
Test your skills: Grid Layout - Learn web development
by editing the css rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below.
Grids - Learn web development
phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> </aside> <footer>contact me@mysite.com</footer> </div> if you use the firefox grid inspector to overlay the grid lines on your design, you can see how our 12 column grid works.
Accessibility information for UI designers and developers
links vs buttons to keep your interface in line with user expectations, use links for interactions that go somewhere (on the current page or another page) and buttons for interactions that do something (like submit a form or open an overlay).
Creating a Firefox sidebar
a sample extension to add a web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option.
Interface Compatibility
javascript/xul interfaces traditional extensions written using xul overlays and xpcom have access to the full power of the mozilla platform.
JavaScript Tips
xul tips when inserting code with an xul overlay, wrap functions and variables inside an object with a unique name to avoid conflicting with existing or future function and variable names.
XPCOMUtils.jsm
it will not work from overlay scripts or bootstrap.js or etc.
Bootstrapping a new locale
t is contained in "browser" type $ ls and, you should see the following output from your terminal: aboutcerterror.dtd pageinfo.dtd aboutdialog.dtd pageinfo.properties aboutprivatebrowsing.dtd pagereportfirsttime.dtd aboutrobots.dtd places aboutsessionrestore.dtd preferences aboutsupport.dtd quitdialog.properties basemenuoverlay.dtd safemode.dtd browser.dtd safebrowsing browser.properties sanitize.dtd credits.dtd search.properties enginemanager.dtd searchbar.dtd enginemanager.properties setdesktopbackground.dtd feeds shellservice.properties history sidebar migration tabbrowser.
Creating localizable web content
for video, use the code to display the video in an overlayed video player on the page instead of linking to a video section in english.
about:memory
for add-ons that use xul overlays, such as adblock plus, the memory usage of those overlays will not show up in this sub-tree; it will instead be in the non-add-on sub-trees and won't be identifiable as being caused by the add-on.
Preferences system
ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
Leak And Bloat Tests
code locations the files specific to leak and bloat testing are be stored in: http://mxr.mozilla.org/comm-central/source/mailnews/test/performance these files consist of: overlays (used to provide the hooks for the javascript): bloat/bloataddroverlay.xul bloat/bloatcomposeoverlay.xul bloat/bloatmainoverlay.xul javascript files (used to drive the tests): bloat/bloataddroverlay.js bloat/bloatcomposeoverlay.js bloat/bloatmainoverlay.js preference settings (used to provide a defined profile, see below): common/mailnewstestprefs.js python scripts (used to set up the p...
Web Replay
this interface overlays a separate implementation from the c++ debugger, implemented in devtools/server/actors/replay/debugger.js.
AT APIs Support
iaccessible2 is a set of interfaces that overlay the msaa (iaccessible) and dom (isimpledom*) interface support.
Toolkit API
: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps see also the following developer pages contain examples and discussions of particular topics: xul xul overlays developing extensions xulrunner developing themes dom rdf storage ...
Creating XPCOM components
pying interfaces into your build environment implementing the nsicontentpolicy interface receiving notifications implementing the nsicontentpolicy uniform resource locators checking the white list creating nsiuri objects building the weblock ui user interface package list client code overview xul the xul document the locking ui site adding ui weblock.xul overlaying new user interface into mozilla weblockoverlay.xul other resources weblock.css image resources packaging weblock component installation overview archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading and setting the sdk building a microsoft visual cpp project ...
mozilla::services namespace
ervice nsichromeregistryservice chrome registry service getioservice nsiioservice io service getobserverservice nsiobserverservice observer service getstringbundleservice nsistringbundleservice string bundle service gettoolkitchromeregistryservice nsitoolkitchromeregistry toolkit chrome registry service getxulchromeregistryservice nsixulchromeregistry xul chrome registry service getxuloverlayproviderservice nsixuloverlayprovider xul overlay provider service more services will be added as needed.
Index
MozillaTechXPCOMIndex
it can be used in the thunderbird threadpane for extensions to overlay their own columns.
nsIMsgCustomColumnHandler
it can be used in the thunderbird threadpane for extensions to overlay their own columns.
nsIThreadObserver
example it is possible to overlay processing events for a gui toolkit on top of the events for a thread: var nativequeue; observer = { ondispatchedevent(thread) { nativequeue.signal(); } onprocessnextevent(thread, maywait, recursiondepth) { if (nativequeue.hasnextevent()) { nativequeue.processnextevent(); } while (maywait && !thread.haspendingevent()) { nativequeue.wait(); nativequeue.proc...
nsIWinTaskbar
among these is the addition of the method getoverlayiconcontroller().
Setting HTTP request headers
this means that you should put the observer's implementation in an xpcom component instead of an overlay.
Address Book examples
photo display handlers are registered with the registerphotodisplayhandler function within the context of the address book card view overlay.
Building a Thunderbird extension 1: introduction
the tutorial has the following pages: introduction (this page) the extension filesystem (setting up your local system) install manifest (the install.rdf file that contains meta-information about the extension) chrome manifest (list of packages and overlays) xul (the xml user interface language that is used to modify the thunderbird user interface) adding javascript (explains how to add some simple javascript to your thunderbird extension) installing locally (enabling the extension on your local thunderbird instance) packaging (making a distribution package that contains the extension) distributing (from your own site or from http://addons.moz...
Building a Thunderbird extension 2: extension file layout
his tutorial is finished, our extension will look like this: myfirstext.xpi: //created in step 8 /install.rdf //created in step 3 /chrome.manifest //created in step 4 /chrome/ /content/ /content/myhelloworld.xul //created in step 5 /content/overlay.js //created in step 6 /chrome/locale/* //building an extension# localization /chrome/skin/ /defaults/preferences/ //building an extension# defaults files the following tutorial pages will explain how to write each of these files (except locale/ and defaults/) and package them into an xpi (zippy) file.
Building a Thunderbird extension 6: Adding JavaScript
depending on the installed theme the result will look something like this: modify xul elements with javascript save the following javascript code into the content/ folder next to your myhelloworld.xul file and name it overlay.js.
Demo Addon
the toolbar button and its functionality are defined in overlay.xul and overlay.js.
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Preferences System
ui elements that refer to the preferences above, e.g.: <checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
UI Tour - Firefox Developer Tools
if you're stopped at a breakpoint, the entire line gets a green overlay.
Rulers - Firefox Developer Tools
you can overlay horizontal and vertical rulers on a web page: the units are in pixels.
Firefox Developer Tools
rulers overlay horizontal and vertical rulers on a web page for the latest developer tools and features, try firefox developer edition.
CanvasRenderingContext2D.globalAlpha - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
Manipulating video using canvas - Web APIs
as a result, the final image has the entire green screen area 100% transparent, so that when it's drawn into the destination context in line 13, the result is an overlay onto the static backdrop.
Applying styles and colors - Web APIs
by overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn.
Drawing shapes with canvas - Web APIs
to the right, you see this canvas with the default grid overlayed.
Document - Web APIs
WebAPIDocument
document.loadoverlay()obsolete since gecko 61 loads a xul overlay dynamically.
Fullscreen API - Web APIs
shows an overlay button which can not be disabled.samsung internet android full support 10.0 full support 10.0 full support 1.0prefixed prefixed implemented with the vendor prefix: webkitoptions parameterchrome full support 71edge ...
Index - Web APIs
WebAPIIndex
to the right, you see this canvas with the default grid overlayed.
Targeting and hit detection - Web APIs
simplified representative objects one common solution is to overlay simplified, invisible objects atop the objects in your scene.
WebXR Device API - Web APIs
webxr-compatible devices include fully-immersive 3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.
Window.controllers - Web APIs
chrome code can add controllers (to be used in conjunction with the godocommand and goupdatecommand functions in globaloverlay.js).
msthumbnailclick - Web APIs
example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var ...
ARIA: dialog role - Accessibility
dialogs are generally placed on top of the rest of the page content using an overlay.
WAI-ARIA Roles - Accessibility
dialogs are generally placed on top of the rest of the page content using an overlay.
Accessibility documentation index - Accessibility
dialogs are generally placed on top of the rest of the page content using an overlay.
:target - CSS: Cascading Style Sheets
WebCSS:target
ightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in that specification.
Styling Columns - CSS: Cascading Style Sheets
instead, the rule overlays the gap.
Using CSS gradients - CSS: Cascading Style Sheets
to hilight the difference the color hint can make: <div class="colorhint-gradient"></div> <div class="regular-progression"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } .colorhint-gradient { background: linear-gradient(to top, black, 20%, cyan); } .regular-progression { background: linear-gradient(to top, black, cyan); } overlaying gradients gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects.
Overview of CSS Shapes - CSS: Cascading Style Sheets
this allows the overlay of wrapped content around an image, or the use of an image which is never displayed on the page purely as a method of creating a complex shape without needing to carefully map a polygon.
WebKit CSS extensions - CSS: Cascading Style Sheets
::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-media-controls ::-webkit-media-controls-current-time-display ::-webkit-media-controls-enclosure ::-webkit-media-controls-fullscreen-button ::-webkit-media-controls-mute-button ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-timeline ::-webkit-media-controls-time-remaining-display ::-webkit-media-controls-toggle-closed-captions-button ::-webkit-media-controls-volume-control-container ::-webkit-media-controls-volume-control-hover-background ::-webkit-media-controls-volume-slider ::-webkit-meter-bar ::-webki...
background-blend-mode - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <blend-mode>#where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples <div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</opt...
Guide to scroll anchoring - CSS: Cascading Style Sheets
that will show a purple overlay on top of the anchor node.
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
overlay behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space.
position - CSS: Cascading Style Sheets
WebCSSposition
note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.
Mobile first - Progressive web apps (PWAs)
so, if you were planning to have a vertical navigation menu on desktop, you might replace this on mobile with a select menu containing the options, or even a single button that when pressed brings the navigation options up in an overlay.
SVG: Scalable Vector Graphics
WebSVG
other resources: xml, css, dom, canvas examples google maps (route overlay) & docs (spreadsheet charting) svg bubble menus svg authoring guidelines an overview of the mozilla svg project frequently asked questions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a document model (dom) and events, and is accessible from javascript.