Search completed in 1.44 seconds.
XUL Overlays
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: tinderstatus
overlay.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 tinderstatus
overlay.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="tinderstatus
overlay" 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/tinderstatus
overlay.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/ … browser
overlay.xul command
overlay.xul editing
overlay.xul flasher.js hooks.js inspector.css inspector.js inspector
overlay.xul inspector.xml inspector.xul keyset
overlay.xul object.js object.xul popup
overlay.xul sidebar.js sidebar.xul statusbar
overlay.xul tasks
overlay-cz.xul tasks
overlay-ff.xul tasks
overlay-mobile.xul tasks
overlay-sb.xul tasks
overlay-tb.xul tasks
overlay.xul toolbox
overlay.xu...
...l utils.js venkman
overlay.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 browser
overlay.xul in the extension, the chrome uri would be chrome://xulschoolhello/content/browser
overlay.xul.
...so, to access the dtd file in the hello world extension, the chrome path is chrome://xulschoolhello/locale/browser
overlay.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: weblock
overlay.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: mailwindow
overlay.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.browser
overlay.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/firefox
overlay.xul <?xml version="1.0"?> <!doctype
overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <
overlay id="emptysidebar
overlay" 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 withclientrects
overlay.
...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="withclientrects
overlay"> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>span's rect</strong> <p> <span class="withclientrects
overlay">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="withclientrects
overlay"> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="withclientrects
overlay">item 1</li> <li class="withclientrects
overlay">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.browser
overlay.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.browser
overlay.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〉.browser
overlay = { /** * initializes this object.
... } // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.browser
overlay.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/utility
overlay.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="colsuperfluous
overlay" 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.browser
overlay = { /* 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.browser
overlay.init(); }, false); window.addeventlistener( "unload", function() { xulschoolchrome.browser
overlay.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
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/viewsource
overlay.xul
overlay chrome://global/content/viewpartialsource.xul chrome://browser/content/viewsource
overlay.xul
overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfo
overlay.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/global
overlay.js' in a xul file, you can call the godocommand method which executes the command passed as the argument.
...<script src="chrome://global/content/global
overlay.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 global
overlay.js script described earlier.
...the functions used can be found in the 'chrome://communicator/content/utility
overlay.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/pane
overlay.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/ff
overlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
overlay chrome://messenger/content/mailwindow
overlay.xul chrome://myaddon/content/tb
overlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6}
overlay chrome://songbird/content/xul/layoutbase
overlay.xul chrome://myaddon...
.../content/sb
overlay.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/pageinfo
overlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} # seamonkey-only
overlay chrome://navigator/content/pageinfo.xul chrome://pippki/content/pageinfo
overlay.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/mailwindow
overlay.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/mailwindow
overlay.xul chrome://myaddon/content/tb
overlay-tb2.xul appversion<3.0
overlay chrome://messenger/content/mailwindow
overlay.xul chrome://myaddon/content/tb
overlay-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="mydownload
overlay" 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/browser
overlay.js (deflated 42%) adding: content/browser
overlay.xul (deflated 69%) adding: skin/browser
overlay.css (stored 0%) adding: locale/browser
overlay.dtd (deflated 52%) adding: locale/browser
overlay.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/popup
overlay.xul chrome://inspector/content/viewers/dom/popup
overlay.xul
overlay chrome://inspector/content/command
overlay.xul chrome://inspector/content/viewers/stylerules/command
overlay.xul
overlay chrome://inspector/content/keyset
overlay.xul chrome://inspector/content/viewers/dom/keyset
overlay.xul
overlay chrome://inspector/content/popup
overlay.xul chrome://...
...inspector/content/viewers/stylerules/popup
overlay.xul
overlay chrome://inspector/content/command
overlay.xul chrome://inspector/content/viewers/dom/command
overlay.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 inbrowserxul
overlay(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
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/myextension
overlay.xul content/myextension
overlay.js (content/myextension
overlay.js) content/myextension
overlay.xul (content/myextension
overlay.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.browser
overlay.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...bar
overlay.xul http://lxr.mozilla.org/seamonkey/sou...t/navigator.js http://lxr.mozilla.org/seamonkey/sou...tor
overlay.xul http://lxr.mozilla.org/seamonkey/sou...onaltoolbar.js http://lxr.mozilla.org/seamonkey/sou...rce
overlay.xul http://lxr.mozilla.org/seamonkey/sou...ext
overlay.xul http://lxr.mozilla.org/seamonkey/sou...lity
overlay.js http://lxr.mozilla.org/seamonkey/sou...oom
overlay.xul http://lx...
...r.mozilla.org/seamonkey/sou...tor
overlay.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...rks
overlay.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.
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/global
overlay.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/global
overlay.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.
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/places
overlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-
overlay href="chrome://browser/content/places/places
overlay.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.
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?
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.
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 ...
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.
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 --> ...
Proxy UI - Archive of obsolete content
mouseover when online, the tooltip will include the current proxy mode: code http://mxr.mozilla.org/seamonkey/sou...ity
overlay.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.
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.
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.
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.
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...
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.
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 basemenu
overlay.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/bloataddr
overlay.xul bloat/bloatcompose
overlay.xul bloat/bloatmain
overlay.xul javascript files (used to drive the tests): bloat/bloataddr
overlay.js bloat/bloatcompose
overlay.js bloat/bloatmain
overlay.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 weblock
overlay.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 getxul
overlayproviderservice nsixul
overlayprovider xul
overlay provider service more services will be added as needed.
Index
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 get
overlayiconcontroller().
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.
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.
Document - Web APIs
document.load
overlay()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
to the right, you see this canvas with the default grid
overlayed.
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 global
overlay.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.mssitemodeseticon
overlay(iconuri, tooltip); // removes an
overlay icon window.external.mssitemodeclearicon
overlay(); // 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 ...
:target - CSS: Cascading Style Sheets
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.
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...
position - CSS: Cascading Style Sheets
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.