Creating a status bar extension - Archive of obsolete content
hrome manifest is a file that tells the target application where to look for the chrome package for your extension. the chrome is the set of user interface elements outside the content area of the application's window, such as toolbars, status bars, menu bars, and the like. the chrome manifest file, chrome.manifest, for the sample follows. ...
...ar-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". this path is relative to the extension's root folder in this case, but can be absolute if you want it to be. the second line registers an overlay. an overlay lets you add new content to an existing document. ...
...le-1". this path is relative to the extension's root folder in this case, but can be absolute if you want it to be. the second line registers an overlay. an overlay lets you add new content to an existing document. in this case, we want to augment the ui of the firefox browser, so we specify the uri of the firefox main window's xul file, "chrome://browser/content/browser.xul", as the interface to overlay onto, and the uri of our own xul file, "chrome://status-bar-sample-1/content/status-bar-sample-1.xul", as the interface to overlay onto the browser. see xul overlays for details on how overlays work. ...
...And 6 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. its intended audience is extension developers with a basic knowledge of xul and css. we assume that you're also familiar with the basics of creating firefox extensions and have the hello world extension working. another tutorial, which walks you through the entire process from the beginning, is also available. 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. to overlay a document, you need to know its uri. you can find a list of uris for the most commonly overlaid documents at th...
...main window and view message window). this needs to be looked into. ...
...main window and view message window). this needs to be looked into. ...
...And 6 more matches

customDBHeaders Preference
ssage database. also, it has been brought to my attention that the delimiter has been changed to a space in the latest code. ...
...brought to my attention that the delimiter has been changed to a space in the latest code. ...
...er has been changed to a space in the latest code. ...
...And 6 more matches

Customizing the download progress bar - Archive of obsolete content
this example illustrates how to customize the progress bar displayed for a given download in the downloads window. first you need to overlay the downloads window so that you can add a new stylesheet. ...
... this example illustrates how to customize the progress bar displayed for a given download in the downloads window. first you need to overlay the downloads window so that you can add a new stylesheet. ...
...ustrates how to customize the progress bar displayed for a given download in the downloads window. first you need to overlay the downloads window so that you can add a new stylesheet. ...
...And 5 more matches

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
ox allows all of this by default, and if you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest. the first thing you need to do is add your buttons to the toolbar palette. the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those added by extensions. ...
...you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest. the first thing you need to do is add your buttons to the toolbar palette. the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those added by extensions. to add your buttons, all you need to do is overlay the palette in your main browser overlay. ...
...ay attention to the details we describe here, your toolbar may not be as easy to customize as the rest. the first thing you need to do is add your buttons to the toolbar palette. the toolbarpalette is a collection of all toolbar buttons and toolbar items in firefox, including those added by extensions. to add your buttons, all you need to do is overlay the palette in your main browser overlay. ...
...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. this is an separate xul file that specifies the location of menu items. the sidebar here is added to the view | sidebar menu. the overlay file is listed in example 4. example 4. chrome/content/firefoxoverlay.xul <?xml version="1.0"?> <!doctype overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <overlay id="emptysidebaroverlay" xmlns="http://www.mozi...
... the broadcaster serves two purposes. the first is it indirectly provides the arguments for the togglesidebar function. the second is it provides attributes to the menuitem, some of which are changed automatically when togglesidebar is called. see code_snippets/sidebar for more information. if...
... the broadcaster serves two purposes. the first is it indirectly provides the arguments for the togglesidebar function. the second is it provides attributes to the menuitem, some of which are changed automatically when togglesidebar is called. see code_snippets/sidebar for more information. if the sidebar is ...
...And 5 more matches

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
near the top. presss the return or enter key, or the evaluate button. the console displays the location of seamonkey's chrome directory. explanation: the chrome directory contains program files that are part of seamonkey itself, together with other files that are provided by extensions. your toolbar button will be an extension. 2. delete these two files: chrome.rdf overlays.rdf explanation: seamonkey automatically rebuilds these files the next time it starts. when it rebuilds them, it will include your new extension. 3. edit the file: installed-chrome.txt at the end of the file, add the following line. copy and paste the line from here, to avoid typing errors: content,install,url,resource:/chrome/custombutton/ explanation: this ...
... 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...
...planation: this file contains details of your extension, and specifies how it modifies seamonkey. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...
...And 5 more matches

Custom toolbar button - Archive of obsolete content
applications specify the versions where the extension works. the last section in the file specifies that this extension adds content to the application. 4. create a plain text file named chrome.manifest. ...
...this extension adds content to the application. 4. create a plain text file named chrome.manifest. ...
...lowing 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 ...
...And 5 more matches

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
d applied to it, a number of features are made available in the devtools to provide easy access to grid features. in the html pane in the html pane, elements laid out using a grid have a "grid" marker beside them. in the css pane in the css pane's rules view, any instance of a display: grid declaration gets a grid icon included within it: . 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. the layout view grid section when grids are included on a page, the css pane's layout view includes a "grid" section containing a number of optio...
... for viewing those grids. you can find out more about those in the section below. note: the layout view can be found underneath the layout tab on the right-hand pane of the page inspector. the above and below screenshots should give you further hints on how to get to this. 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. grid display settings: display line numbers: turn the line numbers shown for each grid overlay on and off (on by default). display area names: turn area names on and off, in the case of grids with named grid areas (on by default, where relevant). ext...
...the case of grids with named grid areas (on by default, where relevant). extend lines infinitely: by default, grid lines/tracks are only shown inside the element with display: grid set on it; when toggling this option on, the grid lines extend to the edge of the viewport along each axis. mini grid view: a smaller view of the currently overlaid grid. note: your grid preferences such as overlay color and display settings choices are persisted across page loads for each separate page. let's examine these features in more detail. overlay grid each grid present on a page has an entry in the "overlay grid" section: each entry consists of (from left to right): a checkbox allowing you to toggle the grid overlay for that grid on and off. a name label to represent the grid, consistin...
...And 5 more matches

Writing Skinnable XUL and CSS - Archive of obsolete content
rt another skin file are calledbase skin files. there is one notable exception to this rule. skin files that don't import any other skin files, but that are only intended to be used in the context of another component's skin are also considered derived skin files, since they are implicitly importing information from the other component's skin. 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). they are already derived skins and therefore should not inherit from global. they should instead rely on the context in which they will appear for color, font,...
... are already derived skins and therefore should not inherit from global. they should instead rely on the context in which they will appear for color, font, and border information. for example, the sidebar should not import the global skin, since it could appear in messenger and in navigator (which could have two completely different color schemes). if it imported the global skin, then when it was overlayed into navigator, it would potentially clash (if the user's current chosen navigator skin were not inheriting from global). derived skin files should not contain any font, color, or border information. this information should only be found in base skin files. the skin file should instead inherit from a base skin file to obtain the appropriate font, color, and border information. by obeying this ...
..., or border information. this information should only be found in base skin files. the skin file should instead inherit from a base skin file to obtain the appropriate font, color, and border information. by obeying this restriction, your package will be almost entirely skinnable by changing only the global defaults. this rule also applies when designing a css file for a ui component that will be overlayed into other components. below are examples for each case. example 1: the navigator package has a personal toolbar with popup menu buttons. the colors for the toolbar and buttons should be drawn from global by placingclass attributes on the appropriate elements in the xul. there should be no rules in navigator.css that attempt to define colors, fonts, etc. for either the personal toolbar header...
...And 4 more matches

Chrome registration
skin a skin package is registered with the line: skin packagename skinname uri/to/files/ [flags] this will register a skin package when resolving the uri chrome://packagename/skin/... . the skinname is an opaque string identifying an installed skin. if more than one skin is registered for a package, the chrome registry will select the best-fit skin using the user's preferences. 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. override in some cases an extension or embedder may wish to override a chrome file provided by the application or xulrunner. in order to allow for this, the chrome registrat...
...re may be chrome registration lines which only apply to one particular application. the flag application=app-id indicates that the instruction should only be applied if the extension is installed into the application identified by app-id. multiple application flags may be included on a single line, in which case the line is applied if any of the flags match. ...
...ply to one particular application. the flag application=app-id indicates that the instruction should only be applied if the extension is installed into the application identified by app-id. multiple application flags may be included on a single line, in which case the line is applied if any of the flags match. ...
...And 4 more matches

Main Windows
this content is for older versions of thunderbird. much of it may no longer be relevant. see developer.thunderbird.net for newer information. the base chrome directory of thunderbird can sometimes appear confusing when you're just beginning to look at it. 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. some of the code was written based off of early firefox code, but is not exactly the same. you’ll sometimes see reimplementations of things that are already...
...he same. you’ll sometimes see reimplementations of things that are already in toolkit, written specially for thunderbird. messenger.xul the base mail window that you see when you first open thunderbird is messenger.xul: messenger.xul itself doesn’t contain a lot. its main focus is on handling the folderpane, threadpane, and the message preview sections shown above. ...
...imes see reimplementations of things that are already in toolkit, written specially for thunderbird. messenger.xul the base mail window that you see when you first open thunderbird is messenger.xul: messenger.xul itself doesn’t contain a lot. its main focus is on handling the folderpane, threadpane, and the message preview sections shown above. ...
...And 4 more matches

Element.getClientRects() - Web APIs
dered, an empty list is returned. rectangles are returned even for css boxes that have empty border-boxes. the left, top, right, and bottom coordinates can still be meaningful. fractional pixel offsets are possible. examples these examples draw client rects in various colors. note that the javascript function that paints the client rects is connected to the markup via the class withclientrectsoverlay. html example 1: this html creates three paragraphs with a <span> inside, each embedded in a <div> block. client rects are painted for the paragraph in the second block, and for the <span> element in the third block. <h3>a paragraph with a span inside</h3> <p>both the span and the paragraph have a border set. the client rects are in red. note that the p has onlyone border box, while the sp...
...he third block. <h3>a paragraph with a span inside</h3> <p>both the span and the paragraph have a border set. the client rects are in red. note that the p has onlyone border box, while the span has multiple border boxes.</p> <div> <strong>original</strong> <p> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>p's rect</strong> <p class="withclientrectsoverlay"> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>span's rect</strong> <p> <span class="withclientrectsoverlay">paragraph that spans multiple lines</span> </p> </div> example 2: this html creates three ordered lists. client rects are painted for the <ol> in the second block, and for each <li> element in the third block. <h3>a list</h3> <p>note that th...
...s three ordered lists. client rects are painted for the <ol> in the second block, and for each <li> element in the third block. <h3>a list</h3> <p>note that the border box doesn't include the number, so neither do the client rects.</p> <div> <strong>original</strong> <ol> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="withclientrectsoverlay">item 1</li> <li class="withclientrectsoverlay">item 2</li> </ol> </div> example 3: this html creates two tables with captions. client rects are painted for the <table> in the second block. <h3>a table with a caption</h3> <p>although the table's bo...
...And 4 more matches

Adding Events and Commands - Archive of obsolete content
« previousnext » event handlers just like with html, most javascript code execution is triggered by event handlers attached to dom elements. the most commonly used event is the onload event, which is used in overlays and other windows to detect when the window has loaded and then run initialization code: // rest of overlay code goes here. window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need. ...
...ion() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need. please read appendix a for recommendations on how to use the load event to initialize your add-on without having a negative performance impact on firefox. another way to attach event handlers, just like html, is to place the handler in the xul code: <overlay id="xulschoolhello-browser-overlay" onload="xulschoolchrome.browseroverlay.init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior. also, note that the addeventlistener method receives the event name without the "on" prefix, while element attributes do have the prefix. there's a l...
...event argument, which is an event object that holds information on the event. you can get information on key modifiers (in case the user was holding a modifier key like alt while performing the event), screen coordinates for mouse events, and most importantly, the target element for the event. for example: <button label="&xulschoolhello.defaultgreeting.label;" oncommand="xulschoolchrome.browseroverlay.changegreeting(event);" /> then on the javascript code you would have something like this: changegreeting : function(aevent) { // more stuff aevent.target.setattribute("label", somenewgreeting); } the target in this example is the button element, so clicking on it will change its text. the advantage of using the event argument is that the method is not dependent of the specific button, s...
...And 3 more matches

Appendix D: Loading Scripts - Archive of obsolete content
of the services global assume that you're previously imported the services.jsm module. as this module only exists on firefox 4 and other gecko 2-based platforms, the services in question will have to be manually loaded on other platforms. <script> tags xul script tags are traditionally the primary means of loading scripts for extension developers. 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. advantages familiarity: these tags are very similar to the html script tags familiar to most web developers. simplicity: the simple, declarative nature of these tags make them easy to find and understand at a glance. speed: script...
... allocate and initialize all of their data structures each time the script is loaded. loading: script loaded via script tags run in partially loaded documents. problems can ensue if the script immediately attempts to access dom nodes. this is easily resolved by deferring the work to a dynamically added onload hander. ...
...their data structures each time the script is loaded. loading: script loaded via script tags run in partially loaded documents. problems can ensue if the script immediately attempts to access dom nodes. this is easily resolved by deferring the work to a dynamically added onload hander. ...
...And 3 more matches

JavaScript Object Management - Archive of obsolete content
you need. to initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the window. the load event is fired after the dom on the window has loaded completely, but before it's displayed to the user. this allows you to manipulate and possibly change elements in the window without the user noticing the changes. ...
...to run the initialization code from the "load" event handler for the window. the load event is fired after the dom on the window has loaded completely, but before it's displayed to the user. this allows you to manipulate and possibly change elements in the window without the user noticing the changes. /** * controls the browser overlay for the hello world extension. */ 〈namespace〉.browseroverlay = { /** * initializes this object. ...
...the window has to finish loading before it can do any of these things. they are bad ui practices anyway and you should avoid them. ...
...And 3 more matches

Tabbed browser - Archive of obsolete content
browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the xul sense of a browser element. furthermore another meaning of 'browser' in this document and in some firefox source is "the tabbrowser element" in a firefox xul window. 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. // gbrowser is only accessible from the scope of // the browser window (browser.xul) gbrowser.addtab(...); if gbrowser isn't defined your code is either not running in the scope of the browser window or running too early. you can access gbrowser only after the browser window is fully loaded. if you need to ...
...nction () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element). see tabbrowser for getbrowserfortab(). note that the code above does not work inside of the electrolysis (e10s) enabled tabs. opening a url in the correct window/tab there are methods available in chrome://browser/content/utilityoverlay.js that make it easy to open url in tabs such as openuilinkin and openuilink. openuilinkin( url, where, allowthirdpartyfixup, postdata, referrerurl ) where: "current" current tab (if there aren't any browser windows, then in a new window instead) "tab" new tab (if there aren't any browser windows, then in a new window instead) "tabshifted" same as "tab" but in background if default i...
... filename hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held. the code given is for a menuitem, but will work equally well for other xul elements. this will only work in an overlay of browser.xul. xul: <menuitem oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", ...
...And 3 more matches

Makefile.mozextension.2 - Archive of obsolete content
ct)/locale/en-us $(project)/components/ $(project)/defaults/ $(project)/defaults/preferences/ $(project)/locale/de-de $(project)/skin make_xpi: $(mkdir) $(project)/chrome && \ cd $(project) && \ $(zipprog) -r chrome/$(project).jar content locale skin && \ $(zipprog) -r $(project).xpi chrome.manifest install.rdf components defaults chrome && cd .. ...
...n-us $(project)/components/ $(project)/defaults/ $(project)/defaults/preferences/ $(project)/locale/de-de $(project)/skin make_xpi: $(mkdir) $(project)/chrome && \ cd $(project) && \ $(zipprog) -r chrome/$(project).jar content locale skin && \ $(zipprog) -r $(project).xpi chrome.manifest install.rdf components defaults chrome && cd .. ...
...ect)/components/ $(project)/defaults/ $(project)/defaults/preferences/ $(project)/locale/de-de $(project)/skin make_xpi: $(mkdir) $(project)/chrome && \ cd $(project) && \ $(zipprog) -r chrome/$(project).jar content locale skin && \ $(zipprog) -r $(project).xpi chrome.manifest install.rdf components defaults chrome && cd .. ...
...And 3 more matches

The Joy of XUL - Archive of obsolete content
owers developers with the ability to extend xul by customizing existing tags and creating new tags of their own. by using xbl, developers can easily build custom user interface widgets such as progress meters, fancy pop-up menus, and even toolbars and search forms. these custom components can then be used in xul applications by specifying the custom tag and associated attributes. ...
...pers with the ability to extend xul by customizing existing tags and creating new tags of their own. by using xbl, developers can easily build custom user interface widgets such as progress meters, fancy pop-up menus, and even toolbars and search forms. these custom components can then be used in xul applications by specifying the custom tag and associated attributes. overlays overlays are xul files used to describe extra content for the ui. they are a general mechanism for adding ui for additional components, overriding small pieces of a xul file without having to resupply the whole ui, and reusing particular pieces of the ui. overlays are a powerful mechanism for customizing and extending existing applications because they work in two related but highly different ways. i...
... used to describe extra content for the ui. they are a general mechanism for adding ui for additional components, overriding small pieces of a xul file without having to resupply the whole ui, and reusing particular pieces of 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. but overlays can also be specified externally, enabling the designer to superimpose them upon an application without changing the original source. in practical terms, this enables developers to maintain one code stream for a given application, then apply c...
...And 3 more matches

Leak And Bloat Tests
run the following command: make mailbloat this will run the tests and produce some result files. see debugging memory leaks for more information on what to do with this data. todo: add more information on processing output. ...
...roduce some result files. see debugging memory leaks for more information on what to do with this data. todo: add more information on processing output. ...
...debugging memory leaks for more information on what to do with this data. todo: add more information on processing output. ...
...And 3 more matches

Building a Thunderbird extension 5: XUL
m folder. omni.ja can be easily browsed by copying the file to a different location and renaming it to omni.zip. if you have trouble with one zip manager (like 7zip) try another (like winrar). in messenger.xul we find the status bar, which looks something like this.: <statusbar id="status-bar" ...> ... <statusbarpanel>s ... </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. these fragments can specify widgets to be inserted, removed or modified. in this example you are adding a line to the indented statusbar. therefore it becomes an item owned by the id called "s...
...be inserted, removed or modified. in this example you are adding a line to the indented statusbar. therefore it becomes an item owned by the id called "status-bar". this shows how the thunderbird architecture allows extensions to modify the user experience without modifying the installation files. this also enables version independence between thunderbird and thunderbird extensions. ...
...s-bar". this shows how the thunderbird architecture allows extensions to modify the user experience without modifying the installation files. this also enables version independence between thunderbird and thunderbird extensions. ...
...And 3 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. while this makes creating extensions that add to the application's user interface relatively easy, it means that updating, installing, or disabling an extension requires an application restart. gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduces bootstrapped extensions. these are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. this is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down. all t...
...t contains functions the browser calls to command the extension to install, uninstall, start up, and shut down. all the application does is call into this script file; the extension is responsible for adding and removing its user interface and handling any other setup and shutdown tasks it requires. this article discusses how bootstrapped extensions work. see this tutorial on converting from an overlay extension to restartless for a practical step by step guide to migrating. the startup and shutdown process a key feature of bootstrapped extensions is that they must be able to start up and shut down on demand by the application. when the extension's startup() function is called, it must manually inject its user interface and other behavior into the application. similarly, when its shutdown() f...
...ns you can use a chrome.manifest file in bootstrapped add-ons to: make your add-on's content available via a chrome:// url (using the content, locale, and skin instructions in the manifest). replace existing chrome:// uris with your content (using the override instruction). not all chrome.manifest instructions are supported in bootstrapped add-ons, for example you still cannot register xul overlays from a bootstrapped add-on. see the chrome.manifest documentation for details. in firefox 10 and later the chrome.manifest file located in the root of the add-on's xpi (i.e. a sibling of the install.rdf) is loaded automatically. in firefox 8 and 9 you had to load/unload the manifest manually using nsicomponentmanager.addbootstrappedmanifestlocation() and nsicomponentmanager.removebootstrappedma...
...And 2 more matches

Manifest Files - Archive of obsolete content
either a local file path using a file url or a jar archive using a jar url, which will be described in a moment. you can specify multiple packages by including another line in the manifest file. ...
...will be described in a moment. you can specify multiple packages by including another line in the manifest file. ...
...ribed in a moment. you can specify multiple packages by including another line in the manifest file. ...
...And 2 more matches

Add Option to Context Menu
assuming this on chrome.manifest: overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul. ...
... assuming this on chrome.manifest: overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myext/content/thunderbird-overlay.xul add the next in thunderbird-overlay.xul. ...
...l add the next in thunderbird-overlay.xul. ...
...And 2 more matches

mix-blend-mode - CSS: Cascading Style Sheets
f the element's parent and the element's background. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...uminosity; /* global values */ mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset; values <blend-mode> the blending mode that should be applied. ...
...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

On page load - Archive of obsolete content
page is loaded in browser/mail. if you need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners. progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events. progress listeners implement the nsiwebprogresslistener interface. ...
...u need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners. progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events. progress listeners implement the nsiwebprogresslistener interface. ...
...eners. progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events. progress listeners implement the nsiwebprogresslistener interface. ...
...eate 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 attach 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("appc...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
. so now you need to create the normal content/, locale/ and skin/ directories in which to place your chrome files. personally i like placing these directly under the root directory of my module, but i don't suppose it makes any difference if you prefer putting them under a chrome/ subdirectory or whatever. let freedom reign! 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. this is accomplished through the use of a jar manifest. for our simple extension example, this file might look something like this: myextension.jar: % content myextension %content/ % locale myextension en-us %locale/ % ...
...nents), you need to package them up as part of your extension. this is accomplished through the use of a jar manifest. ...
...hrough the use of a jar manifest. ...
...or our simple extension example, this file might look something like this: myextension.jar: % content myextension %content/ % locale myextension en-us %locale/ % skin myextension classic/1.0 %skin/classic/ % overlay chrome://browser/content/browser.xul chrome://myextension/content/myextensionoverlay.xul content/myextensionoverlay.js (content/myextensionoverlay.js) content/myextensionoverlay.xul (content/myextensionoverlay.xul) locale/myextension.dtd (locale/myextension.dtd) locale/myextension.properties (locale/myextension.properties) skin/classic/myextension.css (skin/classic/myextension.css) place this code in a file called jar.mn in the root directory of your extension, making su...

User Notifications and Alerts - Archive of obsolete content
y"); acceptbutton.popup = null; acceptbutton.callback = function() { that.acceptrequest(); }; // similarly for decline button. 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. the notificationbox elements can be obtained from the gbrowser object. in this case we don't pass any arguments to getnotificationbox so that we get the notification box that corresponds to the tab currently on display. the appendnotification method takes the message, id, image (32x32), level and buttons. the level argument determines the "strength" of the message, indicated by its background...
...t works on firefox 3 on ubuntu linux, but we haven't tested all distributions and firefox versions. because of the inconsistent support and temporary nature of these alerts, we don't recommend using this service to show information the user needs to know and can't get in any other way. ...
...the best locations for this kind of box are above and below the tab browser. ...
...so that it is displayed to the user. the best locations for this kind of box are above and below the tab browser. below is preferrable because it only cuts the bottom part of the current page, as opposed to pushing down all tabs and content. notification boxes are a good guideline to what you should aim for: thin, informative and easy to dismiss. another option is to also add a hidden box to the overlay, but use css positioning to locate it where you want. this usually means that the box will be hovering on top of the page's content, and there are a few things you must know about this. first of all, switching tabs will probably make your alert disappear. this is probably due to the fact that the browser tab box uses a deck internally, and that affects z-indexing. you'll have to code around this ...

Creating a dynamic status bar extension - Archive of obsolete content
the previous sample; simply replace the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher". if you need to brush up, visit the chrome manifest section. ...
...us sample; simply replace the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher". if you need to brush up, visit the chrome manifest section. ...
... the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher". if you need to brush up, visit the chrome manifest section. ...
...our extension will refresh the stock information display when the user clicks the panel. ...

Index - Archive of obsolete content
g lists commands which might be usable by <command> or command dispatchers/controllers. 440 menus add-ons, extensions, needscontent, reference, référence(2), xul an extension will often wish to attach a new command to a menu. to do this, the new menu will need to be laid over the existing menu which the item should be displayed upon. ...
...menu where the items on the menu are specific to the context in which the menu was opened. a typical usage is for the user to right-click on an element to display a menu of commands pertaining to what was clicked on. 599 extensions xul, xul popup guide the main menu bar in firefox has the id 'main-menubar'. to add a new menu onto the main application menubar, you will need to overlay this menubar. for instance: 600 floating panels a floating panel is used for secondary popups such as tool palettes and property inspector panels. it will have a titlebar which the user may use to move the panel around on the screen. a floating panel can be created using the panel element with at least two additional attributes as in the following example: 601 men...
...e containers for toolbar buttons and other user interface objects. the following articles provide details about implementing and working with toolbars. 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. its intended audience is extension developers with a basic knowledge of xul and css. 957 custom toolbar button add-ons, extensions, seamonkey, toolbars, xul, thunderbird this page tells you step-by-step how to make a custom toolbar button in firefox, seamonkey 2.0, thunderbird or sunbird. (for seamonkey 1.x, see the page custom toolbar button:seamonkey.) 958 code...
...rial. 1022 creating a wizard tutorials, xul, xul_tutorial many applications use wizards to help the user through complex tasks. xul provides a way to create wizards easily. 1023 creating an installer tutorials, xpinstall_api_reference, xul, xul_tutorial this section will describe packaging a xul application into an installer. 1024 cross package overlays tutorials, xul, xul_tutorial this section describes how to apply overlays to files that don't import them. 1025 custom tree views tutorials, xul, xul_tutorial the tree view holds the data to be displayed in the tree. 1026 document object model dom, tutorials, xul, xul_tutorial the document object model (dom) can be used with xul elements to get...

Updating Commands - Archive of obsolete content
hecking if the command was enabled or not, although we probably shouldn't do that. the code above is generic enough that it can be a function that takes a command as an argument and executes that command. this function could then be reused for all commands. in fact, this is common enough that mozilla includes a library which does just that. ...
...it is attached to the command which will invoke the command on the necessary controller when called. ...
...dater listens for. you can specify multiple events by separating them with commas. in the example above, the command updater listens for the focus event. this causes commands to be updated when an element receives the focus. when a focus event occurs, the code in the oncommandupdate attribute is called. in the example, the goupdatecommand method is called which is a function provided by the globaloverlay.js script described earlier. it will update the command and enable or disable necessary buttons and menu items. the code behind it is fairly simple. it just gets the necessary controller, calls its iscommandenabled method, and then enables or disables the command. if you have several commands to update, call the goupdatecommand method once for each command. note that the command updater will rece...
.... focus: occurs when the focused element changes. select: occurs when the selected text changes. undo: occurs when the undo buffer changes. clipboard: occurs when the contents of the clipboard changes. the following example shows the command updaters used in the mozilla browser to update the edit menu commands. the functions used can be found in the 'chrome://communicator/content/utilityoverlay.js' script. <commandset id="globaleditmenuitems" commandupdater="true" events="focus" oncommandupdate="goupdateglobaleditmenuitems()"/> <commandset id="selecteditmenuitems" commandupdater="true" events="select" oncommandupdate="goupdateselecteditmenuitems()"/> <commandset id="undoeditmenuitems" commandupdater="tru...

XUL Structure - Archive of obsolete content
h the same way. in fact, in mozilla, all document types, whether they are html or xul, or even svg, are all handled by the same underlying code. this means that the same css properties may be used to style both html and xul, and many of the features can be shared between both. however, there are some features that are specific to html, such as forms, and others which are specific to xul, such as overlays. since xul and html are handled in the same way, you can load both from either your local file system, from a web page, or from an extension or standalone xulrunner application. content from remote sources (e.g. http://localhost/~username/ ), regardless of whether they are html or xul or another document type, are limited in the type of operations they can perform, for security reasons. for thi...
...able to add features to the browser. the extensions are small packages of xul files, javascript, style sheets and images packed together into a single file. these packaged files can be created by using a zip utility. when the user downloads the zipped file, the packaged files will be installed onto the user's machine. 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. to the user, it may seem like the extension has modified the browser, but in reality, the code is all separate, and the extension may be easily uninstalled. registered packages are not required to use overlays, of course. if they don't, you won't be able to access them via the main browser interface, but you can still ac...
...her types of xml documents. since xul is also xml, the xul document is a subtype of the more generic xml document. there are subtle differences in functionality. for example, while the form controls on an html page are accessible via the document.forms property, this property isn't available for xul documents, since xul doesn't have forms in the html sense. likewise, xul specific features such as overlays and templates are only available in xul documents. this distinction between documents is important. it is possible to use many xul features in html or xml documents since they aren't document type specific; however other features require the right kind of document. for instance, you can use the xul layout types in other documents since they don't rely on the xul document type to function. to s...
...the main window for a content package should have the same name as the package with a .xul extension. in this case, the package name is "browser" so we expect to find browser.xul. some of the other xul files describe separate windows. for example, the file pageinfo.xul describes the page info dialog. many packages will include a contents.rdf file, which describes the package, its author, and the overlays it uses. however, this file is obsolete and has been replaced with a simpler mechanism. this newer method is the manifest file mentioned earlier, and you will find these as files with the .manifest extension in the chrome directory. for instance, browser.manifest describes the browser package. several subdirectories, such as bookmarks and preferences, describe additional sections of the browser...

XUL element attributes - Archive of obsolete content
en type: boolean if set to true, the element is not displayed. this is similar to setting the css display property to 'none'. id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. ...
...this value may be a comma-separated list of ids, which are scanned and the first one found in the window is used. ...
...e of an attribute, so for boolean attributes like checked where absence means false, you will need to explicitly set the attribute to false before the window closes (bug 15232). popup type: id should be set to the value of the id of the popup element that should appear when the user clicks on the element. position type: string (representing an integer) when an element is in an overlay, the position is an index where the child is inserted. the position is one-based, so use a value of 1 to place the element at the beginning. this attribute is ignored if either an insertbefore or insertafter attribute matches an element. preference-editable mozilla 1.8 type: boolean if true, the element may be used as one that modifies a preference in a prefwindow. the preference attrib...
... may provide support for additional datasources. ref type: uri for template-generated elements, this attribute is used to specify the root rdf node where content generation begins. this will correspond to the value of an about attribute on an rdf container. this attribute should be placed alongside the datasources attribute. 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. sortdirection type: one of the values below set this attribute to set the direction that template-generated content is sorted. use the sortresource attribute to specify the sort key. ascending the data is sorted in ascending order. descending the data is sorted in descending order. natural th...

prefpane - Archive of obsolete content
e set of preferences that will be modified, and the user interface for adjusting those preferences. the former is specified using a preferences element while the latter may be specified using other xul elements. both may be specified directly as children of the prefpane element, or the src attribute may be used to put a pane in a separate file. 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. more information is available in the preferences system article. attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" l...
...more preferences ... </preferences> <checkbox label="number one?" preference="pref_one"/> ... more ui elements ... ...
...em. onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window. selected type: boolean this attribute will be set to true for the currently selected prefpane. to change the selected pane, use the prefwindow's showpane method. src type: uri the uri of the overlay contents of preference pane. if this is not specified, the contents of the prefpane element is used. properties contentheight (readonly) the height (in pixels) of current pane's content. image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. ...
...spaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata events paneload this event is fired on the pane element when the pane is fully loaded (e.g. after the overlay is merged.) you can put the handler for this event in the onpaneload attribute on the element. using multiple prefpanes note that when using multiple prefpanes in the same prefwindow, you must not put the <script> elements above the prefpane elements, but instead below them. otherwise the dialog will show erratic behavior and not display correctly. place the <script> tags as in the following exa...

Index
d in mozilla/mail. (a fair amount of this code is forked from code in the mailnews/ directory). 44 main windows thunderbird the base chrome directory of thunderbird can sometimes appear confusing when you're just beginning to look at it. 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: 45 message interfaces interfaces, interfaces:scriptable, needscontent, xpcom api reference, thunderbird nsimsghdr - this interface describes headers for all mail messages. it can be used to retrieve address, subject and related header information for a mail message. 46 message examp...
...ed, our extension will look like this: 76 building a thunderbird extension 3: install manifest extensions, thunderbird the install.rdf file is an xml file that provides general information about the extension. 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. open the file called chrome.manifest that you created and add this code: 78 building a thunderbird extension 5: xul extensions, thunderbird thunderbird's user interface is written in xul and javascript. xul is an xml grammar that provides user interface widgets like buttons, menus, toolbars, trees etc. we add widgets by inserting new xul dom el...
...t understands how to display a combination of user activity and history. see the activity manager page for a general description of the component. see the activity manager interfaces page for an overview of the related interfaces. 92 /common_thunderbird_extension_techniques">common thunderbird extension techniques thunderbird no summary! 93 access stringbundle from overlay thunderbird no summary! 94 access thunderbird window areas thunderbird to access particular parts of the thunderbird window you can use these helper methods. an alternative to these methods is to directly access the element by it's id as in the detect when a folder opens example. 95 access window missing, thunderbird the window object represents...
... has no content. enrich mdc by contributing. 97 add new tab missing, thunderbird no summary! 98 add option to context menu incomplete, thunderbird assuming this on chrome.manifest: 99 add tab needsupdate, missing, thunderbird this page has no content. enrich mdc by contributing. 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. the customdbheaders preference article provides information on a preference setting that exposes custom header data for use in a custom column within thunderbird's main view. 102 detect op...

Creating a Custom Column
. getting started in this example we will be developing a small extension that will be adding a column that will display the "reply-to:" field of an email (if it exists, it if often not set). if you are unfamiliar with the setup and creation of an extension please read building a thunderbird extension. adding a column by far the easiest part is the physical addition of the 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. looking in messenger.xul reveals that the columns reside inside a tree with the id "threadtree" whose columns (treecols) reside...
... exist. looking in messenger.xul reveals that the columns reside inside a tree with the id "threadtree" whose columns (treecols) reside in "threadcols". to attach our column we add another treecol tag ("colreplyto") with the settings that we would like to use. don't forget to add in a splitter before the column to ensure that the user can easily resize and drag our column around. ...
...h the id "threadtree" whose columns (treecols) reside in "threadcols". to attach our column we add another treecol tag ("colreplyto") with the settings that we would like to use. don't forget to add in a splitter before the column to ensure that the user can easily resize and drag our column around. ...
...unfortunately the new column doesn't have any data in it and it doesn't react to sort clicks on it... yet. the column handler now that our column physically exists it's time to give it a bit of personality. the nsimsgcustomcolumnhandler interface to handle a column we need to implement the nsimsgcustomcolumnhandler interface which d...

msthumbnailclick - Web APIs
thumbnailclick event is available only to documents that are launched from a pinned site shortcut. parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. ...
...ned site shortcut. parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. ...
...in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. ...
...ntobj interface for the current event. ...

Layout using named grid lines - CSS: Cascading Style Sheets
a for us. implicit grid lines from named areas we have seen how named lines create a named area, and this also works in reverse. named template areas create named lines that you can use to place your items. if we take the layout created in the guide to grid template areas, we can use the lines created by our areas to see how this works. in this example i have added an extra div with a class of overlay. we have named areas created using the grid-area property, then a layout created in grid-template-areas. the area names are: hd ft main sd this gives us column and row lines: hd-start hd-end sd-start sd-end main-start main-end ft-start ft-end you can see the named lines in the image, note that some lines have two names - for example sd-end and main-start refer to the same colu...
...eated using the grid-area property, then a layout created in grid-template-areas. the area names are: hd ft main sd this gives us column and row lines: hd-start hd-end sd-start sd-end main-start main-end ft-start ft-end you can see the named lines in the image, note that some lines have two names - for example sd-end and main-start refer to the same column line. to position overlay using these implicit named lines is the same as positioning an item using lines that we have named. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-te...
...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">...
...by selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily. multiple lines with the same name with...

<blend-mode> - CSS: Cascading Style Sheets
a black layer leads to no change, and a white layer leads to a white final layer. the effect is like two images shone onto a projection screen. <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. this blend mode is equivalent to hard-light but with the layers swapped. <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'); b...
...he result of multiply if the bottom color is darker, or screen if the bottom color is lighter. this blend mode is equivalent to hard-light but with the layers swapped. <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. <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: darken; } lighten the final color is composed of the light...
..."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: color-burn; } hard-light the final color is the result of multiply if the top color is darker, or screen if the top color is lighter. this blend mode is equivalent to overlay but with the layers swapped. the effect is similar to shining a harsh spotlight on the backdrop. <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: hard-light; } soft-light the final color is similar to ...
...und images set on it — a firefox logo on top of a linear gradient. below it we have a provided a <select> menu that allows you to change the background-blend-mode applied to the <div>, allowing you to compare the different blend mode effects. ...

Interaction between privileged and non-privileged pages - Archive of obsolete content
here we call the event myextensionevent. ...
... var mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation...
... 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...

Offering a context menu for form controls - Archive of obsolete content
lt. this article describes how an extension can override this change in a particular window, enabling context menus to work on form controls. this article presents information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. ...
... change in a particular window, enabling context menus to work on form controls. this article presents information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. ...
...nts information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this. there is ongoing discussion about this topic; please see bug 433168 for the latest information. 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. window.addeventlistener("load", function(...

Adding menus and submenus - Archive of obsolete content
you should avoid having deep menus or too many options, since they are confusing for most users. ...
...or it to fill up before displaying anything. it's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents. we'll look into some asynchronous techniques further ahead in the tutorial. ...
... something going on, and asynchronously fill its contents. we'll look into some asynchronous techniques further ahead in the tutorial. 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. that is, unless there's a place inside the menu structure where your extension menus make more sense. 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. --> </menupopup> </menu> </menupopup> now let's loo...

Observer Notifications - Archive of obsolete content
ed observers observerservice.notifyobservers( subject, "xulschoolhello-test-topic", "hello"); } in the notifytest method, the notifyobservers call is used to notify all registered observers about the notification topic "xulschoolhello-test-topic". the input parameter is an instance of nsisupportsstring with some text and the last input parameter is a string "hello". in a chrome browser overlay file, we register an observer to listen to the notification topic "xulschoolhello-test-topic" when the window loads. keep in mind that you have to remove observers that are not longer needed. not doing so will result in memory leaks. therefore, the registered observer is unregistered when the browser window is unloaded. /** * controls the browser overlay for the hello world extension. */ xul...
...n observer to listen to the notification topic "xulschoolhello-test-topic" when the window loads. keep in mind that you have to remove observers that are not longer needed. not doing so will result in memory leaks. therefore, the registered observer is unregistered when the browser window is unloaded. /** * controls the browser overlay for the hello world extension. */ xulschoolchrome.browseroverlay = { /* observer service. */ _observerservice : null, /** * initializes this object. */ init : function() { this._observerservice = components.classes["@mozilla.org/observer-service;1"]. getservice(components.interfaces.nsiobserverservice); this._observerservice.addobserver(this, "xulschoolhello-test-topic", false); }, /** * unitializes this object. */ un...
...associated with the notification. */ observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { asubject.queryinterface(ci.nsisupportsstring); window.alert("subject: " + asubject.data); // => "this is a test" window.alert("data: " + adata); // => "hello" } } } window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); window.addeventlistener( "unload", function() { xulschoolchrome.browseroverlay.uninit(); }, false); in the observe method the notification topic is verified because you can have one observer listening to several topics. you may notice that we explicitly set the interface of the asubject object to nsisupportsstring using the queryinterface method. this is because the first ...

Setting Up a Development Environment - Archive of obsolete content
ead. let's try and build the xpi from the command line first. open the command line program in your system and navigate to the src directory in your project. run the following command: make that's it. if everything went well, you should see an output similar to this: creating xpi file. adding: install.rdf (deflated 50%) adding: chrome.manifest (deflated 50%) adding: content/browseroverlay.js (deflated 42%) adding: content/browseroverlay.xul (deflated 69%) adding: skin/browseroverlay.css (stored 0%) adding: locale/browseroverlay.dtd (deflated 52%) adding: locale/browseroverlay.properties (stored 0%) creating xpi file. done! build finished successfully. if you inspect the bin directory, you should see the xulschoolhello2.xpi file. if you run make again, you'll only see...
...staller option, but since firefox 3 it has been separated as another add-on you can add and remove. it's a very useful inspection tool that lets you look into the dom of html and xul documents, as well as applied css rules and associated javascript objects. introduction to dom inspector is a good guide on how to get started using it. the dom inspector is particularly useful in finding out how to overlay a window, and how to replace default css style rules. you can see the names of the files involved, which gives you a good starting point when looking into the mozilla source. you can even change styles, attributes and execute javascript code in it, although that's not completely reliable. javascript debugger the name says it all. the venkman javascript debugger is a great way to trace execution...
...re out what the nodes correspond to in the firefox ui. install the firebug extension. open the firebug window and go to an ajax-heavy page such as gmail or facebook. open and enable the net tab. try to identify what is going on with some of the requests being sent. 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. « previousnext » this tutorial was kindly donated to mozilla by appcoast. ...

Add-ons - Archive of obsolete content
is in japanese and distributed via the xuldev.org website. so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported). hotfix extension this document has been moved to the add-ons wiki. 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. some of that will have to be replaced and the rest will need to be loaded differently. inline options firefox 7 supports a new syntax for defining extensions' prefere...
...ns metadata identifying the add-on, providing information about who created it, where more information can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on. interaction between privileged and non-privileged pages an easy way to send data from a web page to an extension is by using custom dom events. ...
...extensions can do almost anything. ...

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...

Extensions - Archive of obsolete content
adding a new menu the main menu bar in firefox has the id 'main-menubar'. to add a new menu onto the main application menubar, you will need to overlay this menubar. for instance: <menubar id="main-menubar"> <menu label="search" insertbefore="tools-menu"> <menupopup> <menuitem label="web"/> <menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu. the insertbefore attribute is set to 'tools-menu' to ensure that the new menu is added at the right place. note that the menu will not appear until it has a <menupopup>. adding a new menuitem you might wish to add a new item to one of the menus. this can be done by overlaying the popup to append the item to. for a list of the ids of the menus for fir...
... menus. for example, to add an item to the end of the tools menu, use the following: <menupopup id="menu_toolspopup"> <menuitem label="thesaurus"/> </menupopup> note that other extensions may be adding their own items into the same menus. 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. as you cannot predict this order, you should not rely on any menuitems being in particular positions in the presence of other extensions. modifying the context menu an extension may wish to modify the context menu associated with the browser area. normally, this menu displays menu items specific to what was context clicked or focused. for instance, opening a context menu for a lin...
...y when certain content is selected. in firefox, the browser area that displays web pages has only one context menu. instead of having separate context menus depending on what type of element was the target of the context menu, only one context menu is used and items that don't apply to that type of element are hidden from the menu as needed. thus, you can add items to the firefox context menu by overlaying this single menu. this context menu has the id 'contentareacontextmenu'. in this example, a single item is added to the end of the firefox context menu. <popup id="contentareacontextmenu"> <menuitem id="thumbnail-show" label="view thumbnail" oncommand="thumbnails.view();"/> </popup> note that the popup element is used rather than the menupopup element as this is the element that firefox u...

Debugging a XULRunner Application - Archive of obsolete content
structions to install venkman into your xulrunner application (xulrunner 1.9 and later): get venkman from addons.mozilla.org (v0.9.87 at the time of writing). to download the package, right-click the install link and save the package locally. create a directory <application>/distribution/bundles/venkman. unzip the package into that directory. add <script src="chrome://venkman/content/venkman-overlay.js" /> to one of your xul windows. add ui to open venkman to your window (it could be a menu item or a toolbar button). make it call start_venkman() when activated. troubleshooting x-jsd is not a registered protocol if the message "x-jsd is not a registered protocol" appears when trying to open *.js files in venkman, then add an empty file called .autoreg in the same directory as your xulrun...
...edit it to force the last modified time to be updated. xulrunner will then notice the new components file. when adding a component to a xulrunner application, change the buildid in application.ini. 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 ... if your pages are not in the loaded script window, uncheck the menu item "debug\exclude browser files" and find them in open windows tab when opening a js file in venkman, the code is unform...
..._blank", winopts); } i can't see my pages, functions ... if your pages are not in the loaded script window, uncheck the menu item "debug\exclude browser files" and find them in open windows tab when opening a js file in venkman, the code is unformatted and i get the following error in the jsconsole... 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. note the "new in firefox 3" attribute "contentaccessible" on https://developer.mozilla.org/en/chrome_registration so as per http://markmail.org/message/ezbomhkw3bgqjllv#query:x-jsd+page:1+mid:xvlr7odilbyhn6v7+state:results change the manifest to have this line: content venkman jar:venkman.jar!/content/venkman/ con...

XULRunner tips - Archive of obsolete content
there is a working stub. any better suggestion? venkman uses "chrome://communicator/skin/" as an alias for "chrome://global/skin/" and this alias was maintained in the xulrunner toolkit until xulrunner 1.9 was released. when using xulrunner 1.9 or greater, you can crea...
...open your chrome.manifest file and add these lines: content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no locale inspector en-us jar:inspector.jar!/locale/inspector/ skin inspector modern/1.0 jar:inspector.jar!/skin/modern/inspector/ skin inspector classic/1.0 jar:inspector.jar!/skin/classic/inspector/ overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/dom/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/stylerules/commandoverlay.xul overlay chrome://inspector/content/keysetoverlay.xul chrome://inspector/content/viewers/dom/keysetoverlay.xul overlay chrome://inspector/content/popupoverlay.xul chrome://...
...xul chrome://inspector/content/viewers/dom/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/stylerules/commandoverlay.xul overlay chrome://inspector/content/keysetoverlay.xul chrome://inspector/content/viewers/dom/keysetoverlay.xul overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/stylerules/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/dom/commandoverlay.xul to launch dom inspector in your application, you need to open its main window, with a command like this: window.open("chrome://inspector/content/inspector.xul", "", "chrome"); alternatively, the dom inspector may also be added as an extension: (if you already have inspector...

Common causes of memory leaks in extensions - Extensions
still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist. storing references to window objects and dom nodes the most common problem is extensions holding onto references to content windows for too long. for example, in xul overlay code: var contentwindows = []; function inbrowserxuloverlay(contentwindow) { // forgetting or failing to pop the content window thing again contentwindows.push(contentwindow); } this will keep the content window compartments alive until the browser window is closed. users often only open a single browser window per session and use tabs, in which case the leaked compartments will live for t...
... in foreign document should instead be stored in an object which is specific to that document, and cleaned up when the document is unloaded, or stored as weak references. be careful with setinterval/settimeout using window.setinterval() or window.settimeout() can be problematic, too, when it comes to zombie compartments. ...
...er causes the observer service to use a strong reference to the observer object, which will cause it to hold onto the whole window. to avoid this problem explicitly call nsiobserverservice.removeobserver() in an unload event listener. you may also specify ownsweak = true in the call to nsiobserverservice.addobserver(), but that might require you to properly implement weak references as well. 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() { // ... services.obs.removeobserver(myobserver, "private-browsing"); } in javascript code modules it recommended to also ...

Image gallery - Learn web development
t or further help section at the bottom of this page. project brief you have been provided with some html, css and image assets and a few lines of javascript code; you need to write the necessary javascript to turn this into a working program. ...
...e've already provided a line that stores a reference to the <button> in a constant called btn. you need to add an onclick handler that: checks the current class name set on the <button> — you can again achieve this by using getattribute(). ...
... on the <button> — you can again achieve this by using getattribute(). 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)". the following lines provide a basis for achieving the changes stipulated in points 2 and 3 above. 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. assessment or further help if you would like your work assessed, or are stuck and want to ask for help: ...

CustomizableUI.jsm
ect with its desired properties. for a list of supported properties, see api-provided widgets. parameters aproperties the specification for the widget return value a wrapper around the created widget. note: if your extension is compatible with versions of firefox below 29, i.e. 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. note: unlike button descr...
...ain 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. note: unlike button described with xul overlay, widget-button created via createwidget() method cannot have references to other overlay elements transferred directly as parameters. for example, if there is a need to create a button with dynamically assignable tooltip, the node for static tooltip should be deleted as soon as the widget will be created, and node-reference to popup tooltip element has to be added. for that, this function has to ...
...button with dynamically assignable tooltip, the node for static tooltip should be deleted as soon as the widget will be created, and node-reference to popup tooltip element has to be added. for that, this function has to be used (see more here): oncreated: function(node) { node.removeattribute("tooltiptext"); node.tooltip = "[reference to popup tooltip element, described in xul overlay, or created in any other way]"; }, destroywidget() destroy a widget if the widget is part of the default placements in an area, this will remove it from there. it will also remove any dom instances. however, it will keep the widget in the placements for whatever area it was in at the time. you can remove it from there yourself by calling customizableui.removewidgetfromarea(awidgetid). paramet...

mozilla::services namespace
see also services.jsm nsiservicemanager.getservice() ...
...see also services.jsm nsiservicemanager.getservice() ...
...see also services.jsm nsiservicemanager.getservice() ...

nsISessionStore
is the last one that was closed. return value returns a reference to the reopened window as an nsidomwindow object. note on windows the nsisessionstore api stores state information for certain windows inside the web brower. these windows are nsidomwindow objects that contain the tabbrowser that users see as tabs; the document in these windows is browser.xul. for many extensions, those that overlay browser.xul, the appropriate window object for nsisessionstore is the global object 'window'. for javascript running in windows other than the one you want to use in nsisessionstore, you need a nsidomwindow object containing browser.xul. this will be the outermost or root nsidomwindow in a nsixulwindow (the window seen by users as a moveable frame on the display). this kind of domwindow object c...
...; see example #3 in working_with_windows_in_chrome_code. it can also be obtained from an nsixulwindow using if (xul_win.docshell instanceof nsiinterfacerequestor) { var win = xul_win.docshell.getinterface(nsidomwindow); ... note on tabs the nsisessionstore apis referencing nsidomnode atab require you to get hold of the tab node storing the data. ...
...terfacerequestor) { var win = xul_win.docshell.getinterface(nsidomwindow); ... note on tabs the nsisessionstore apis referencing nsidomnode atab require you to get hold of the tab node storing the data. 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. nsisess...

Working with windows in chrome code
this article describes working with multiple windows in mozilla chrome code (xul applications and extensions). it contains tips and example code on opening new windows, finding an already opened window, and passing data between different windows. 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. the second parameter is the window's name; the name can be used in links or forms as the target attribute. this is different from the user-visible window ti...
...ages if you need to interact with the content page. the content shortcut in case of <browser type="content-primary" />, you can use the content shortcut property to accesss the window object of the content document. 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. some examples use _content instead of content. the former has been deprecated for a while, and you should use content in the new code. accessing a document in the sidebar firefox has a sidebar, which is implemented as a <browser> element with id="sidebar". to access the elements and variables inside the sidebar, you need to use do...
... property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places. in more complicated cases you need to use the nsiwindowmediator interface, introduced above. one case in which you might want to use nsiwindowmediator is in an extension's options 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. as you may remember, firefox's extension manager can also be used to open your options dialog. this means the value of window.opener in your options dialog is not necessarily the browser window -- instead, it might be the extension manager win...

Step through code - Firefox Developer Tools
this lets you know what kind of breakpoint the code is paused on (breakpoint, event breakpoint, etc.), and also provides a step button and a play button. the thinking here is that if you've got your devtools open in a separate window, as many people do, it can be easier ...
...alled 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. this lets you know what kind of breakpoint the code is paused on (breakpoint, event breakpoint, etc.), and also provides a step button and a play button. the thinking here is that if you've got your devtools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward whil...
...step button and a play button. the thinking here is that if you've got your devtools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward while you are looking at the result. 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. inline variable preview new in firefox 71, the source pane now gives you an instant preview of the variables on each line of code you've stepped through. see set a breakpoint > inline variable preview for more information. ...

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
, and more. discovering flex containers when an html element on your page has display: flex applied to it, a number of features are made available in the devtools to provide easy access to flexbox layout features. 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. in the infobar when you hover over an element in the html pane, you will see a tooltip that gives you more information about the element. when you hover over a flex container or flex item, the tooltip includes the appropriate information. this header is a flex container: each navbar link is a flex item: the nav element within the hea...
...the appropriate information. this header is a flex container: each navbar link is a flex item: the nav element within the header is both a flex item and a flex container which holds the navigation links: in the css pane in the css pane's rules view, any instance of a display: flex declaration gets a small flexbox icon next to the word flex. 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. the layout flex container section the css pane's layout view includes a collapsible "flex container" ...
...n below. note: the layout view can be found underneath the layout tab on the right-hand pane of the page inspector. the above and below screenshots should give you further hints on how to get to this. 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. this will toggle a color picker so you can select a different color for the overlay. the switch on the right-hand side of the flex container section will also toggle the overlay on and off. flex item properties the flex items within the flex container are displayed as a numbered list in the flex items section. each entry displays the item'...

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> </...
..."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: pointe...
...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
owser to attack by malicious web pages. although it's possible to write insecure add-ons using the sdk, it's not as easy, and the damage that a compromised add-on can do is usually more limited. restartlessness add-ons built with the sdk can be installed without having to restart firefox. 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. user experience best practices the ui components available in the sdk are designed to align with the usability guidelines for firefox, giving your users a better, more consistent experience. mobile support starting in sdk 1.5, we've added experimental support for develo...
... with the usability guidelines for firefox, giving your users a better, more consistent experience. mobile support starting in sdk 1.5, we've added experimental support for developing add-ons on the new native version of firefox mobile. see the tutorial on mobile development. 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. using only the sdk's supported apis you have much more limited options for your ui. xpcom traditional add-ons have access to a vast amount of firefox functionality via xpcom. the sdk's supported apis expose a relatively small set of this functionality. low-level apis and third-par...

XUL Migration Guide - Archive of obsolete content
t at this point. if your add-on only needs a little help from those techniques, and can accomplish most of what it needs using the supported apis, then it might still be worth migrating: we'll add more supported apis in future releases to meet important use cases. 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. in this way an extension can integrate its user interface into the browser: for example, adding menu items, buttons, and toolbars. because sdk-based extensions are restartless, they can't use xul overlays. to add user interface components to the browser, there are a few different op...
...ly expects you to specify your user interface using html, not xul. however, you can include a chrome.manifest file in your add-on and it will be included in the generated xpi. 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. however, you can register a chrome: uri, with a skin and locale, and this means you can include xul windows in an sdk-based add-on. you can keep the "chrome.manifest" file in your add-on's root directory and create a directory there called "chrome". in that directory you can keep your "content", "locale", and "skin" subdirectories: this allows you to refer to ob...

/loader - Archive of obsolete content
// panel -> resource:///modules/panel.js '': 'resource:///modules/', // allow relative urls and resolve them to add-on root: // ./main -> resource://my-addon/root/main.js './': 'resource://my-addon/root/' } }); the order of keys in paths is irrelevant since they are sorted by keys from longest to shortest to allow overlapping mapping. the example above overlays the base path '' with a different mapping for 'toolkit/' prefixed modules. modules the loader may optionally be provided with a set of module exports. in the sdk we call these "pseudo modules". this feature may be used in a few different ways: to expose an api that doesn't have a js file with an implementation or is written in an incompatible format such as jsm: let { loader } = requi...
...ed in detail in the built-in modules section. to reuse module instances that are already loaded. 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`. 'toolkit/loader': loadermodule } }); use this feature with a great care though. while reuse may sound like a compelling idea it comes with the side effect of shared state, which can cause problems. for example, unload of a loader won't trigger unload hooks on pseudo-modules. globals each module...

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. sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls. you're probably familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. the code required to add a sidebar is very simple, as explained in creating a firefox sidebar. it's even simpler than that. all you need is to overlay the view sidebar menu. <menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhell...
...e references: you can choose an obscure key combination that won't conflict with firefox, such as ctrl+shift+(some letter), but there's no way of knowing if any other extension uses that same combination as well. shortcut keys can be very valuable for advanced users, but don't rely on them. the xul page for the sidebar can hold any content you want and it's no different from other xul windows or overlays. one minor difference is that the xul sidebar should be defined using the « xul reference « root element instead of window or dialog. the load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and clean up . another, more important difference to take into account is that users can resize the sidebar to their liking, and...

Appendix A: Add-on Performance - Archive of obsolete content
e minutes to load, which is a serious inconvenience for users that gives them a negative view of firefox. add-on developers need to make sure that they minimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to achieve that. startup this is the area where add-ons have the most noticeable impact. 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. the problem with the onload event is that it runs before the main window becomes visible, so all handlers need to complete before the user can see the window. an add-on can normally add a few hundred milliseconds to startup time because of the load handler, and it's not hard to figure out what having several add-ons w...
... features that are only available depending on user preferences. other add-ons have most of their features depend on a user being logged in to a service. don’t load at startup something you won’t need at the time. javascript code modules. use them. 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. keep as much of your code in jsm, make it as modular as you can, and only load modules as you require them. if your add-on is too simple for jsm, don’t worry about it. there’s still one more thing you can do. do as little as possible in your load handler. ask yourself: is there anything i can’t run 100 ms or even 500 ms later? if there is, just use an nsitimer or the settimeout...

Firefox addons developer guide - Archive of obsolete content
should we keep this part ? gen's opinion: yes, because it is important for developers to make informed decisions regarding oss licenses and it was a part of the original guide. opinions: i think we should be careful...
...should we keep this part ? gen's opinion: yes, because it is important for developers to make informed decisions regarding oss licenses and it was a part of the original guide. opinions: i think we should be careful about adding ne...

Creating a Mozilla Extension - Archive of obsolete content
webtool for tracking source code status, to get the status of the code. 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 p...
...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. ...

Extensions - Archive of obsolete content
prism has support for extensions. extensions are built using the same methods as any mozilla-based extension. since prism is a totally separate host application, there are some prism-specific issues that you need to handle when creating your extension. most notably, the prism application id and the differences in the user interface (ui). 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. the basics in order to install an extension in prism, you need to follow the guidelines for building a mozilla-based extension. to support prism specifically, you'll need to add prism to the list of ta...
...ements to merge in your extension ui. see the prism main window xul file for the actual structure: webrunner.xulporting an existing extension since there aren't many extensions designed explicitly for prism, you may need to port your favorite extensions. this usually means extracting and editing the install.rdf file to add prism as a target application. you may also need to modify the extension's overlay to be able to work with the prism ui. many archive tools, like 7zip, can edit and update a file in the archive without needing to manually extract it and add it back into the xpi. installing prism supports a basic add-on user interface which allows a user to manage extensions. using this dialog, a user just launches a webapp and opens the add-ons dialog. then install the extension by either dragg...

List of commands - Archive of obsolete content
wordprevious cmd_selectwordnext cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_movepageup cmd_movepagedown cmd_selectpageup cmd_selectpagedown other commands the following list other commands (prefixed by cmd_ or browser:) which have not been categorized here yet (though they are in the alphabetical list below): http://lxr.mozilla.org/seamonkey/sou...baroverlay.xul http://lxr.mozilla.org/seamonkey/sou...t/navigator.js http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...onaltoolbar.js http://lxr.mozilla.org/seamonkey/sou...rceoverlay.xul http://lxr.mozilla.org/seamonkey/sou...extoverlay.xul http://lxr.mozilla.org/seamonkey/sou...lityoverlay.js http://lxr.mozilla.org/seamonkey/sou...oomoverlay.xul http://lx...
...onkey/sou...t/navigator.js http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...onaltoolbar.js http://lxr.mozilla.org/seamonkey/sou...rceoverlay.xul http://lxr.mozilla.org/seamonkey/sou...extoverlay.xul http://lxr.mozilla.org/seamonkey/sou...lityoverlay.js http://lxr.mozilla.org/seamonkey/sou...oomoverlay.xul http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...ark.properties http://lxr.mozilla.org/seamonkey/sou...kmarks-temp.js http://lxr.mozilla.org/seamonkey/sou.../bookmarks.xml http://lxr.mozilla.org/seamonkey/sou...rksoverlay.xul http://lxr.mozilla.org/seamonkey/sou...okmarkstree.js list of commands (listed alphabetically) browser:addbookmark browser:addbookmarkas browser:addgroupmarkas brow...

Menus - Archive of obsolete content
opup. you could further add a third level of menus by using another menu element as one of the items inside the 'sort' menupopup. however, this tends to become more difficult for the user to use, so you should avoid adding too many levels of submenus. ...
...veral 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. this allows the menu bar to be shared between each window without having to duplicate code. this technique may be used for individual menus or for an entire menu bar. 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. if you wish to have slight differences between each window, one possibility is to show or hide menu items in a load event listener. for example, to have an item initially hidden in a window: function initmenus(...

XUL Tutorial - Archive of obsolete content
he has graciously given us permission to use it as part of the mdn. original document information author: neil deakin copyright information: © 1999-2005 xulplanet.com ...
...he has graciously given us permission to use it as part of the mdn. original document information author: neil deakin copyright information: © 1999-2005 xulplanet.com ...

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
invoked from the edit menu, a context menu and by pressing a keyboard shortcut. you attach the code to the command using the oncommand attribute. it will be called no matter how it is invoked by the user. in addition, disabling the command will automatically disable the menu items and keyboard shortcuts. commands are identified by their id. if you include the script chrome://global/content/globaloverlay.js in your window, you can use the function godocommand function to invoke the command. using this function has the advantage that the command will be sent to the part of the ui which will respond to it. typically, this will be the currently focused element. like a broadcaster, commands forward attributes to other elements. more information is available in the xul tutorial. see also: command at...
...he currently focused element. like a broadcaster, commands forward attributes to other elements. more information is available in the xul tutorial. see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements a...

Theme changes in Firefox 2 - Archive of obsolete content
feeds/addfeedreader.xul feeds/addfeedreader.css new file that presents ui for adding a new feed reader. feeds/subscribe.xhtml feeds/subscribe.css new file that presents the ui for subscribing to an rss feed. preferences/downloads.xul - removed from firefox 2. preferences/general.xul - removed from firefox 2. 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. search/enginemanager.xul enginemanager.css new file containing the ui for the search engine manager window. toolkit/mozapps/preferences/fontscaling.xul - removed from firefox 2. changes to the default theme ...
... updated to include new styles. mozapps/extensions/about.css updated with a simplified set of style names, since several styles were identical. mozapps/extensions/extensions.css css for the add-ons manager window. updated to support the new features of the firefox 2 add-ons manager. 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. mozapps/extensions/notifybadges.png new file; contains the icons used ito badge the icons for add-ons in the add-on manager window to indicate their status. these look like ...

Updating an extension to support multiple Mozilla applications - Archive of obsolete content
ications what to do with the chrome provided by the extension. that's where the chrome manifest comes into play. update the chrome manifest remember way back in the first article in this series when we created our chrome manifest, which we haven't touched since? it's time to touch it. ...
...ies when we created our chrome manifest, which we haven't touched since? it's time to touch it. as you may (or may not) recall, that file tells the application what xul code your extension's interface needs to overlay onto. for firefox, we overlaid onto browser.xul, which describes a firefox browser window. 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. with these simple tweaks, this extens...

Window.importDialog() - Archive of obsolete content
so be careful. specification this is not part of any specification. ...
...sed to importdialog() is very similar to xul passed to window.opendialog(), with some limitations and caveats: only <dialog> top level elements are permitted. scripts are loaded via an attribute on the <dialog> element, not via the <script> tag. the xul is merged into the existing window, almost like a xul overlay. because of this, element id and javascript conflicts are possible, just like overlays. so be careful. specification this is not part of any specification. ...

Add-ons
change the appearance or content of particular websites modify the firefox user interface add new features to firefox there are several types of add-ons, but the most common type are extensions. developing extensions in the past, there were several toolsets for developing firefox extensions, but as of november 2017, extensions must be built using webextensions apis. other toolsets, such as overlay add-ons, bootstrapped add-ons, and the add-on sdk, are no longer supported. extensions written using webextensions apis for firefox are designed to be cross-browser compatible. in most cases, it will run in chrome, edge, and opera with few if any changes. they are also fully compatible with multiprocess firefox. you can see the apis currently supported in firefox and other browsers. extension w...
...s extensions for firefox for android in 2020, mozilla will release a new firefox for android experience. this new, high-performance browser for android has been rebuilt from the ground up using geckoview, mozilla’s mobile browser engine. we are currently building support for the webextensions api on geckoview. 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. there are some porting resources on firefox extension workshop, our site for firefox-specific development resources. for more information about transition support, please visit our wiki page. publishing add-ons addons.mozilla.org, commonly known as "amo," is mozilla's official site for developers to ...

Index - Firefox Developer Tools
inspector internals code, tools, internals, organisation, source there are three main facets to dom inspector. the one you are likely to be most familiar with is its inspector.xul-based primary ui. 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). 9 introduction to dom inspector dom_inspector the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application. dom inspector is standalone; it supports all toolkit applications, and it...
...1 responsive design mode design, dev tools, firefox, guide, responsive design, tools, web development, l10n:priority responsive design is the practice of designing a website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops. 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 ... (the elipsis) on the right of the tab. 104 shader editor the shader editor enables you to see and edit the vertex and fragment shaders used by webgl. 105 s...

Compositing example - Web APIs
compositing example this code sets up the global values used by the rest of the program. 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. every...
...iply)', 'a combination of multiply and screen. 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. pure black or white does not result in pure black or white.', 'subtracts the bottom layer from the top layer or the other way round to always get a positive value.', 'like difference, but with lower contrast.', 'preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.', 'preserves the lum...

Hit regions and accessibility - Web APIs
tags can be used as a fallback for browsers which don't support canvas rendering. it's also very useful for assistive technology users (like screen readers) which can read and interpret the sub dom in it. a good example at html5accessibility.com demonstrates how this can be done: <canvas> <h2>shapes</h2> <p>a rectangle with a black border. in the background is a pink circle. ...
...s (like screen readers) which can read and interpret the sub dom in it. a good example at html5accessibility.com demonstrates how this can be done: <canvas> <h2>shapes</h2> <p>a rectangle with a black border. in the background is a pink circle. partially overlaying the <a href="http://en.wikipedia.org/wiki/circle" onfocus="drawcircle();" onblur="drawpicture();">circle</a>. ...

Web Video Text Tracks Format (WebVTT) - Web APIs
webvtt is a text based format, which must be encoded using utf-8. where you can use spaces you can also use tabs. there is also a small api available to represent and manage these tracks and the data needed to perform the playback of the text at the correct times. webvtt files the mime type of webvtt is text/vtt. ...
... vertical omitted vertical:rl vertical:lr align:start left top top align:middle centred horizontally centred vertically centred vertically align:end right bottom bottom example 13 - cue setting examples the first line demonstrates no settings. the second line might be used to overlay text on a sign or label. the third line might be used for a title. the last line might be used for an asian language. 00:00:05.000 --> 00:00:10.000 00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start 00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end cue payload the payload is where the main informatio...

Fundamentals of WebXR - Web APIs
nclude phones, which show the resulting scene on the device's screen in a 2d presentation, as well as goggles that use a pair of cameras, one for each eye, to capture the scene in stereo in order to retain the world's depth, with the webxr scene then rendered for each eye with that eye's captured background in place. devices which use transparent glasses to allow the user to see the world, while overlaying the rendered image atop the scene. the user is, thus, directly viewing the real world instead of a series of digital photos of it. both types of device should be capable of also presenting vr sessions. webxr doesn't generally care which type of device you're using, and the rendering process is almost exactly the same as for vr, except you don't erase the background or skybox before rendering...
...ce. the types and number of sensors included will determine how many degrees of freedom the user has. goggles and glasses xr goggles are similar to headsets in that they involve the placing of graphics display surfaces in front of the eyes in order to render the views of a scene needed to simulate the depth of the simulated scene. the difference is that the goggles pass through the real world, overlaying the rendered image on top of the user's physical environment. this is done without digitally reproducing the world, as would be necessary with a full headset. instead, the display surface is transparent, and if not displaying anything is essentially identical to wearing regular eyeglasses. when objects are drawn, they are drawn onto the goggles' lenses, either partially or completely blocking ...

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:...

background-blend-mode - CSS: Cascading Style Sheets
here can be several values, separated by commas. formal definition initial valuenormalapplies toall elements. in svg, it applies to container elements, graphics elements, and graphics referencing elements.. ...
...on 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</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> #div { wid...

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...
...the stylesheet only modifies the display in certain ways. this is also true for ht...

Porting the Library Detector - Archive of obsolete content
loaded jquery. for each library that it finds, the library detector adds an icon representing that library to the status bar. it adds a tooltip to each icon, which contains the library name and version. you can browse and run the ported version in the sdk's examples directory. how the library detector works all the work is done inside a single file, librarydetector.xul this contains: a xul overlay a script the xul overlay adds a box element to the browser's status bar: the script does everything else. the bulk of the script is an array of test objects, one for each library. each test object contains a function called test(): if the function finds the library, it defines various additional properties for the test object, such as a version property containing the library version. each t...

HTML to DOM - Archive of obsolete content
g with an html string, you can convert it to a data uri and use that to load in the browser element. using a hidden xul iframe (alternate example) sometimes, a browser element is overkill, or does not meet your needs, or you can't fulfill its requirements. while working on donkeyfire, i discovered the iframe xul element, and it is very easy to implement it. 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. don't forget to modify the id and name! <vbox hidden="false" height="0"> <iframe type="content" src="" name="donkey-browser" hidden="false" id="donkey-browser" height="0"/> </vbox> then, in your extension's "load" event handler: onload: function() { donkeybrowser = docume...

Miscellaneous - Archive of obsolete content
it also collapses cons...

Sidebar - Archive of obsolete content
rome code (browser/addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main browser document (the sidebar is actually implemented as a xul browser element). this means you can't directly access the sidebar content from a script referenced from a browser.xul overlay. to access your sidebar's window or document objects, you need to use the contentwindow or contentdocument properties of document.getelementbyid("sidebar") respectively. for example the code below calls a function defined in the sidebar's context: var sidebarwindow = document.getelementbyid("sidebar").contentwindow; // verify that our sidebar is open at this moment: if (sidebarwindow.location.h...

Toolbar - Archive of obsolete content
the user has to drag it onto the toolbar. the following code will place your button on the toolbar by default. this should only be done on the first run of your add-on after installation so that if the user decides to remove your button, it doesn't show up again every time they start the application. notes insert your button by ...

Extension Theming Guidelines - Archive of obsolete content
ement for your skin package allowing them to provide their own styles for all of your 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. while it may be tempting to use the same stylesheet in multiple places try to avoid this so that themes can correctly target the right windows. css selectors when writing stylesheet rules for windows that you are overlaying always try to be specific with the css selector. if you are not then you run a risk of conflicting wi...

Inline options - Archive of obsolete content
ar control = doc.getelementbyid("myaddon-pref-control"); control.value = "test"; } } }; services.obs.addobserver(observer, "addon-options-displayed", false); // don't forget to remove your observer when your add-on is shut down. 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. note: starting in gecko 13.0, you can also listen for the addon-options-hidden notification, which has the same subject and data as above, to find out when the ui is about to be removed. use this notification to remove event listeners, or any other references that might otherwise be leaked. locating the options file there are two ways to let the add-on manager f...

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 ...

Appendix B: Install and Uninstall Scripts - Archive of obsolete content
. it can be used to write or copy necessary files to the profile folder, like the initial db the add-on will use for storage. a few others require cleanup code to be run after the add-on is uninstalled. this appendix covers these cases with simple code that should work for most add-ons. install scripts just like with a regular initialization function, we want a load event handler: // rest of overlay code goes here. window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); then all we need is some persistent flag that ensures that the first run code is only run once. the best approach in this case is to use a preference, as explained in the handling preferences section. so, if we were to use fuel, we can do the following in the init function: init :...

Getting Started with Firefox Extensions - Archive of obsolete content
in a convenient location. issue the following command to unzip the file on linux or mac os x: unzip xulschoolhello1.xpi -d xulschoolhello1 on windows, you can change the file extension from xpi to zip, or open the file directly, then unzip it, using a zip tool. you should see the following directory structure: xulschoolhello1 chrome.manifest install.rdf content browseroverlay.xul browseroverlay.js skin browseroverlay.css locale en-us browseroverlay.dtd browseroverlay.properties that's lots of files for something so simple! in the next section, we'll inspect these files and see what they do. « previousnext » this tutorial was kindly donated to mozilla by appcoas...

Intercepting Page Loads - Archive of obsolete content
on your needs. we will start with the simplest one, which is also the most common to use. note: performance is very important when it comes to add-ons and page loads. read the recommendations in appendix a regarding performance if you're planning on implementing any of these. the easy way: load events this comes from the tabbrowser code snippets page. in a nutshell, from the chrome code in the overlay we add an event listener for the load event. this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window. it is full of useful functions, so you should always keep it in mind when you want to handle tabs and web content windows. attaching the...

The Box Model - Archive of obsolete content
, one with the text-link class. you'll also need to do some css work on the labels so that the inner spacing in the text looks right. another option is to take it up a notch and really use html. 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. you can easily parse xml using the domparser object. since xul documents are strict xml, you can only use strict xhtml in xul, and not...

Performance best practices in extensions - Archive of obsolete content
e benefits, they should be used wisely. loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive. code should be modularized to the extent that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred. defer everything that you can most extensions have a load event listener in the main overlay that runs their startup functions. do as little as possible here. the browser window is blocked while your add-on's load handler runs, so the more it does, the slower firefox will appear to the user. if there is anything that can be done even a fraction of a second later, you can use an nsitimer or the window.settimeout() method to schedule that work for later. even a short delay can have a big...

Setting up an extension development environment - Archive of obsolete content
fs can now be found at https://github.com/noitidart/devprefs. maxversion needs to be set in install.rdf javascript.options.showinconsole = true. logs errors in chrome files to the error console. nglayout.debug.disable_xul_cache = true. disables the xul cache so that changes to windows and dialogs do not require a restart. this assumes you're using directories rather than jars. changes to xul overlays will still require reloading of the document overlaid. browser.dom.window.dump.enabled = true. enables the use of the dump() statement to print to the standard console. see window.dump for more info. you can use nsiconsoleservice instead of dump() from a privileged script. javascript.options.strict = true. enables strict javascript warnings in the error console. note that since many people hav...

Localizing an extension - Archive of obsolete content
ode to use the entities instead of the strings, so that the substitutions take place based on the currently active locale. to add a reference to the correct locale file for a given xul file, we need to add one line to the xul file. 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. using multiple dtds describes how to do it. note that the urls of the dtd files don't actually include the name of the localization to use. the chrome registry resolves the uris based on the user's current locale setting and the data you ...

Enabling the behavior - updating the status periodically - Archive of obsolete content
with this code in place, restarting mozilla should cause the tinderbox status panel to display the current tinderbox state. to confirm this state, go to tinderbox and verify that the panel displays the current worst state of active tinderbox clients. « previousnext » ...

Finding the file to modify - Archive of obsolete content
based user interface language (and is pronounced like "zool"), is an xml-based language specifically designed for describing application interfaces. it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers). each window and dialog box in mozilla is defined by a single xul file (in some cases other xul files called overlays contribute portions of another window's structure). to add a tinderbox status icon to mozilla, we need to find the xul file that defines the structure of the browser window. the best way to find a xul file for a window is to use the dom inspector. the dom inspector is a tool bundled with mozilla that allows you to examine the dom of web pages and xul windows. to access it, go to the "tools" men...

Proxy UI - Archive of obsolete content
selection and the proxy mode (network.proxy.type) selecting a disabled item is not allowed. selecting "proxy configuration..." opens the preferences panel to "advanced > proxies" (tbdescribed: changing the prefs values). unfiled bug: changing proxy mode does not update the menu. mouseover when online, the tooltip will include the current proxy mode: code http://mxr.mozilla.org/seamonkey/sou...ityoverlay.xul bugs bug 243624 reference network.proxy.type ...

insertafter - Archive of obsolete content
this attribute overrides the insertbefore attribute. ...

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. this value may be a comma-separated list of ids, which are scanned and the first one found in the window is used. ...

position - Archive of obsolete content
the position is one-based, so use a value of 1 to place the element at the beginning. ...

prefpane.src - Archive of obsolete content
« xul reference home src type: uri the uri of the overlay contents of preference pane. if this is not specified, the contents of the prefpane element is used. see also src ...

removeelement - Archive of obsolete content
...

Menus - Archive of obsolete content
firefox menus element id description main-menubar the menubar element. menu_filepopup the menupopup associated with the 'file' menu. ...

Special per-platform menu considerations - Archive of obsolete content
in the tools menu on other platforms. when moved to the application menu, the label and shortcut keys are overridden by platform conventions. however, regardless of the platform, the command event will be fired on the menu item when it is activated by the user. notes for firefox extension developers on the mac, some elements, once moved to the application menu, are no longer accessible from xul overlays or from javascript injected into browser.xul. for example, using document.getelementbyid() for the quit menu item returns the hidden item that still sits in the file menu. to change these items in firefox, overlay hiddenwindow.xul instead. ...

Toolbars - Archive of obsolete content
documentation xul school: adding toolbars and toolbar buttons a helpful tutorial to creating toolbars and toolbar buttons. toolbar customization events a look at the events that are sent during toolbar customization; you can use these to be kept aware of changes to toolbars. creating toolbar buttons how to use overlays to add toolbar buttons to mozilla applications. custom toolbar button another example of how to create a toolbar button, complete with a sample extension you can download and try. code snippets: toolbar code snippets that are helpful when working with toolbars. community view mozilla extension de...

Introduction - Archive of obsolete content
lts. the contents of menus, trees and other elements can be populated with this data, or with your own data supplied in an rdf file. there are several ways you can use xul: firefox extension an extension adds functionality to the browser itself, often in the form of extra toolbars, context menus, or customizations to the browser's user interface. 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. extensions may also be applied to other mozilla based products such as thunderbird. standalone xulrunner application xulrunner is a packaged version of the mozilla platform which allows you to create standalone xul applications. a browser isn't required to run ...

More Wizards - Archive of obsolete content
as you switch pages. thus, the back button will be disabled on the first page so you don't have to set it yourself. another useful property of the wizard is currentpage, which holds a reference to the currently displayed wizardpage. you can also modify the current page by changing this property. if you do change it, the various page change events will still be fired. next, we'll see how to use overlays to handle common content. « previousnext » ...

Using the Editor from XUL - Archive of obsolete content
ir changes, or cancel. note that if they cancel, the close operation is aborted. the user clicks the close widget in their os/window manager. in this case, the onclose method on the <window> element is called. the user chooses 'close' from the file menu, uses the key shortcut, or quits the application, causing all windows to be closed. before each window is closed, javascript code in globaloverlay.js tries to call a trytoclose method on each window. in editor.js, we set this to call editorcanclose(). if the user chooses to save the document, or throw away their changes, then the window is closed. when the last reference to the nseditorshell goes away (as a result of nseditorboxobject releasing its reference) it releases the owning reference on the editor. editor event handling editing ...

XUL Changes for Firefox 1.5 - Archive of obsolete content
o-based behaviour should be changed. <stringbundle> the <stringbundle> element has a strings property which may be used to retrieve an enumeration of all of the strings in the bundle. draggable tabs the tabbrowser now allows the user to rearrange tabs by dragging them. <tabbox> the <tabbox> element now supports a selectedindex attribute to specify the tab to be selected by default. loading overlays dynamically xul now supports loading overlays dynamically with the document.loadoverlay function. original document information author(s): neil deakin ...

XUL Questions and Answers - Archive of obsolete content
possible? loading remote dtds for xml documents is currenty not supported in xul. the following bugs were reported on this issue: bug 22942, bug 133698. is there an editor widget in xul that supports syntax highlighting? daniel glazman has been working on this for his projects. he said the code will be open-source, but it is not released yet (as of oct 2006). some teasers are on his blog. overlaying elements without ids the original developers only tend to put ids where they need them. as an extension author, you have at least two options: use dom methods to dynamically create or rearrange elements file an enhancement request in bugzilla to have extra ids added. displaying graphics and animation in xul? there are several options for displaying graphics and animation in xul: <...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
act format? ...

elements - Archive of obsolete content
orpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels...

prefwindow - Archive of obsolete content
the user choices, without waiting for the dialog to close with ok. the second preference is browser.preferences.animatefadein, again a boolean preference. this one can be safely omitted in xulrunner-based applications but you can override the default behavior (true for mac os x and false for other platforms) setting it. for animatefadein to work properly, contents of prefpanes should be put into overlays. note for mac os x: a common way of opening modal windows on mac os x that are not attached as a sheet to the main window is to use nsiwindowwatcher.openwindow() with a null parentwindow. this does not work with prefwindows, breaking the general behavior of the window and in particular the list of prefpanes. prefer the classical window.opendialog() with the following window features: "chrome,t...

toolbarpalette - Archive of obsolete content
available toolbar items. it is not displayed, but is used by the toolbar customization dialog to display the list of items. the children of the toolbarpalette should be the complete list of toolbarbuttons and toolbaritems that can be added to the toolbar. do not add the various spacing items, as those are added automatically. you can add your own custom buttons to the firefox browser by using an overlay that overlays the toolbarpalette with the idbrowsertoolbarpalette. examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element a...

XUL - Archive of obsolete content
ble xul controls. the joy of xul describes the key features and components of xul. menus and popups guide a guide on using menus and popup panels. template guide a detailed guide on xul templates, which is a means of generating content from a datasource. drag and drop how to perform drag and drop operations. overlays overlays are used to describe extra content for the ui. they provide a powerful mechanism for extending and customizing existing xul applications. xul periodic table this collection of xul demos used to be available as a web page, but can no longer be viewed in firefox since support for remote xul was disabled. there is a xulrunner ap...

XULRunner Hall of Fame - Archive of obsolete content
ons, many of which use xulrunner. xulrunner 5+ based applications these applications use xulrunner 5 or greater. azardi free win/mac/linux epub 2/epub 3 desktop reader using html5 and latest css features of gecko for interactive e-books. version updates match the rapid release cycle. now available with xulrunner 30 with i18n support. mathml support is significant. includes smil audio overlays and idpf fixed layout. celtx all-in-one media pre-production software. source chatzilla a standalone version of the chatzilla irc client. conkeror a highly programmable web browser with a leopard-oriented design inspired by emacs. source evergreen - staff client evergreen is an open source library system. source ieditweb a client/server based content manag...

2006-11-03 - Archive of obsolete content
and also further discussion on lastmodifieddate. tb storage-idea tb is planning to change from mbox-format storage to database-based storage. however, user wonder both storage method could exist in tb at the same time without crashing. suggestion made for e-mail popup it suggested that the e-mail popup duration should depends on number of messages and examples of this idea is provided. xul overlay question -- how to replace an existing element? no respond thus far. links in tb is not sent to firefox directly cédric corazza provided a code solution for this problem. bug found in nslocalmailfolder.cpp david bienvenu is following up on this bug. meetings calendar project weekly status meeting - 2006/11/01 17:00 utc (meeting notes) calendar project weekly qa chat - 2006/11/02 16:3...

2006-11-17 - Archive of obsolete content
n2xul asks for any quick pointers, opinions, experience, suggestions or ideas on where xulrunner might leak memory bug 319654 was fixed on trunk recently. 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? please see mozilla.dev.platform faq for solution. peter naulls makes the suggestion in use and maintenance of xlib code that he become the nominal maintainer of the xlib code. meetings no meetings this week ...

2006-09-30 - Archive of obsolete content
tech.xpcom - sept 30- oct 5, 2006 announcements build a xpcom component on mac os x benjamin smedberg confirmed that this tutorial http://www.iosart.com/firefox/xpcom/ is misleading as it uses the standalone glue (-dxpcom_glue) for components, which is not recommended. developers should use this sample instead: http://developer.mozilla.org/en/docs/xpcom_glue discussions dynamic load overlay a short discussion about the possibilities of loading and unloading xul overlay runtime reading binary data from file discusses about the code to read binary data from file how to build xpcom component on mac os x discusses about the make file code used to build xpcom components on mac os x successfully meetings none during this week. ...

RDF in Mozilla FAQ - Archive of obsolete content
statements. a datasource is a subgraph (or collection of statements, depending on your viewpoint) that are for some reason collected together. some examples of datasources that exist today are "browser bookmarks", "browser global history", "imap mail accounts", "nntp news servers", and "rdf/xml files". in mozilla, datasources can be composed together using the composite data source. this is like overlaying graphs, or merging collections of statements ("microtheories") together. statements about the same rdf resource can then be intermingled: for example, the "last visit date" of a particular website comes from the "browser global history" datasource, and the "shortcut keyword" that you can type to reach that website comes from the "browser bookmarks" datasource. both datasources refer to "websit...

XUL Booster - Archive of obsolete content
xul booster is a third party eclipse / webtools build that offers some support for xul editing and awesome support for extension packaging. extension quick start xul booster makes creating and packaging an extension very easy. it supports exporting xpi files or registering a file system based project. create an extension you'll need an extension id; see generating guids. add an overlay you'll need the chrome address of the content you wish to overlay, ex. chrome://browser/content/browser.xul. 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. menupopup id="menu_toolspopup". learn more at creating_a_mozilla_extension:adding_the_structure. download visit ...

Overflowing content - Learn web development
yout) manage overflow. they largely work without assumptions or dependencies for how much content there will be on a web page. this has not always been the norm. in the past, some sites were built with fixed-height containers to align bottoms of boxes. these boxes may otherwise have no relationship to each other. this was fragile. in a legacy application, you may encounter a box where content is overlaying other content on the page. now you can recognize that this happens with overflow. ideally, you will refactor the layout to not rely on fixed-height containers. when developing a site, always keep overflow in mind. test designs with large and small amounts of content. increase the font sizes of text. generally ensure that your css works in a robust way. changing the value of overflow to hide c...

Test your skills: backgrounds and borders - Learn web development
this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right. make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this. the finished example should look like the image below: try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these exampl...

Test your skills: Grid Layout - Learn web development
try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. grid layout two in this example we already have a grid defined. by editing the css rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below. try updating the live code below to recreate the finished example: additional questions: can you now cause the first item to display on top without changing the order of items in the source? for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. grid layout three there ar...

Grids - Learn web development
et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> <aside><h2>other things</h2> <p>nam vulputate diam nec tempor bibendum. donec luctus augue eget malesuada ultrices. 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. test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: grids. summary in this overview we have toured the main features of css grid layout.

Accessibility information for UI designers and developers
t lets people type a character, say ‘k’, to jump directly to options starting with ‘k’. it is recommended to use native controls, visibly or under the hood. 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). links can be styled as buttons and vice versa, but designers are advised to avoid this where possible. motion on pages with transitions and animations, note that some users could experience distraction, dizziness or nausea. pages with a parallax effect can particularly cause troubles. to help these users, you could offer a setting to turn off animations, or wrap the css in the prefers-reduc...

Creating a Firefox sidebar
mplemented in firefox 29 as part of the add-on sdk. it's the easiest way to create an extension with a sidebar.obsolete since gecko 57 you can also build a restartless extension yourself without the sdk. 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. the document might be obsolete, though.obsolete since gecko 57 the social api obsolete since gecko 57 (firefox 57 / thunderbird 57 / seamonkey 2.54)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this content covers features introduced in firefox 17. the...

Interface Compatibility
jetpack sdk and apis are not yet complete. the stable version 1.0 of the jetpack sdk is planned for later in 2010. documented apis which are shipped as part of the jetpack sdk are designed to work in future versions of firefox. achieving this compatibility may require rebuilding the extension with a new version of the jetpack sdk. javascript/xul interfaces traditional extensions written using xul overlays and xpcom have access to the full power of the mozilla platform. with the power, however, comes the understanding that the mozilla platform is constantly changing and many apis may change in future versions of firefox. in micro/maintenance releases, there should be no incompatible changes to interfaces, except as a last resort when a security fix leaves no other option. this includes not only ...

Displaying Places information using views
nctionality so that you can focus on building your extension or application. places provides the following built-in views: tree menu toolbar instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places". every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views. the overlay contains javascript required by the views. it also contains the built-in places conte...

JavaScript Tips
var uniquename = { _privatemember: 3, publicmember: "a string", init: function() { this.dosomething(this.anothermember); }, dosomething: function(aparam) { alert(aparam); } }; xpconnect don't use object methods and properties more than you have to. it is often faster to store the result in a temporary variable. don't call methods that you don't have to. for instance, windowmanager.getenumerator(atype).hasmoreelements() may be replaced with windowmanager.getmostrecentwindow(atype) != null for a single window. ...

XPCOMUtils.jsm
self and have them load one another. for example, if an extension named "myextension" bundles foo.jsm and bar.jsm, and foo.jsm needs to load bar.jsm, it can do so like this: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.importrelative(this, "bar.jsm"); in other words: importrelative will only work from other code modules (such as jsm files). it will not work from overlay scripts or bootstrap.js or etc. details can be found here: bug 628669 itersimpleenumerator() wraps an nsisimpleenumerator instance into a javascript generator that can be easily iterated over. generator itersimpleenumerator( enumerator, interface ); parameters enumerator the nsisimpleenumerator instance to iterate over. interface the expected interface for each element. return va...

Bootstrapping a new locale
t is contained in "browser" type $ ls and, you should see the following output from your terminal: aboutcerterror.dtd pageinfo.dtd aboutdialog.dtd pageinfo.properties aboutprivatebrowsing.dtd pagereportfirsttime.dtd aboutrobots.dtd places aboutsessionrestore.dtd preferences aboutsupport.dtd quitdialog.properties basemenuoverlay.dtd safemode.dtd browser.dtd safebrowsing browser.properties sanitize.dtd credits.dtd search.properties enginemanager.dtd searchbar.dtd enginemanager.properties setdesktopbackground.dtd feeds shellservice.properties history sidebar migration tabbrowser.

Creating localizable web content
uialisms. depending on context, find alternate strings or document an explanation of the string for localizers check that we don't link in new pages to sub-pages with anchors. e.g.: a new page is announced with only 100 words but it is actually content added to an existing page in english. happens for things like faq, or video pages for example. 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. per-locale customizations check if there are alternative links for localized pages (e.g., links to mdn, addons.mozilla.org, or other external resources, are there translated equivalents we can use). if there are alternatives, use them by adding the $lang; parameter in the urls evaluate the impact of new pages on all...

about:memory
fier. you can look in about:support to see which add-on a particular identifier belongs to. for example, 59c81df5-4b7a-477b-912d-4e0fdf64e5f2 is chatzilla. all javascript memory usage for an add-on is measured separately and shown in this sub-tree. for add-ons that use separate windows, such as chatzilla, the memory usage of those windows will show up in this sub-tree. 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. other measurements this section contains multiple trees, includes many that cross-cut the measurements in the "explicit" tree. for example, in the "explicit" tree all dom and layout measurements are...

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. you should be careful to read the higs for the platforms you are targeting and use the xul preprocessor if necessary to set different window titles as appropriate. you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected ...

Web Replay
"debugger integration", child objects besides scripts and script sources become invalid when the debugger resumes execution, and must be reconstructed each time the replaying process pauses. inspecting a replaying process access to js objects in the replaying process is currently only done through the js debugger interface — debugger.object, debugger.frame.eval, and so forth. this interface overlays a separate implementation from the c++ debugger, implemented in devtools/server/actors/replay/debugger.js. this communicates with the replaying process via json and is fairly easy to extend for new features (such as web console support). appendix: impacts on gecko development web replay is designed to minimize the places where other parts of gecko need to know about it or interact with it. t...

AT APIs Support
e note that the web docs are sometimes out of date, and the latest at-spi is available on cvs. universal access (ua) universal access (ua) is the apple's accessibility framework. windows platform we support msaa (microsoft active accessibility) and iaccessible2 on windows. also we expose ms com interfaces isimpledom* to provide an access to dom tree. iaccessible2 is a set of interfaces that overlay the msaa (iaccessible) and dom (isimpledom*) interface support. any object that supports iaccessible will also support iaccessible2 and possibly any of the other ia2 interfaces. linux/unix platform we support atk/at-spi interfaces on linux. mac platform we currently support only a subset of universal access. the rest of the mozilla universal access support is in progress. accessible web stan...

Toolkit API
: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps see also the following developer pages contain examples and discussions of particular topics: xul xul overlays developing extensions xulrunner developing themes dom rdf storage ...

Creating XPCOM components
pying interfaces into your build environment implementing the nsicontentpolicy interface receiving notifications implementing the nsicontentpolicy uniform resource locators checking the white list creating nsiuri objects building the weblock ui user interface package list client code overview xul the xul document the locking ui site adding ui weblock.xul overlaying new user interface into mozilla weblockoverlay.xul other resources weblock.css image resources packaging weblock component installation overview archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading and setting the sdk building a microsoft visual cpp project ...

Index
the nsimsgcompfields interface provides properties for an composition of an outgoing message. 762 nsimsgcustomcolumnhandler interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference, thunderbird the nsimsgcustomcolumnhandler interface allows you to create custom handlers for columns. it can be used in the thunderbird threadpane for extensions to overlay their own columns. 763 nsimsgdbhdr interfaces, interfaces:scriptable, needscontent, xpcom api reference, thunderbird the nsimsgdbhdr interface describes headers for mail messages. 764 nsimsgdbview interfaces, interfaces:scriptable, message database, message windows, messages, needscontent, needsmarkupwork, xpcom api reference, xpcom interface reference, thunder...

nsIMsgCustomColumnHandler
mailnews/base/public/nsimsgcustomcolumnhandler.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsitreeview this interface is meant to be implemented by extensions, as shown in the tutorial. the interface inherits from nsitreeview, however when you're implementing a custom handler in javascript its not necessary to implement all of nsitreeview's methods. ...

nsIThreadObserver
maywait, in unsigned long recursiondepth ); parameters thread the nsithread on which the event is going to be processed. maywait true if the method is allowed to block the calling thread. this parameter will be false during thread shutdown. recursiondepth the number of calls to nsithread.processnextevent() on the call stack in addition to the current call. ...

nsIWinTaskbar
rrespond to tabs within the application; they can vary in size, shape, and location. they don't even have to represent actual gui elements on the window. unlike window previews, tab previews require most of the functionality of the nsitaskbarpreviewcontroller interface be implemented. warning: this api has undergone changes that are not yet documented. among these is the addition of the method getoverlayiconcontroller(). this method is currently known to crash if used under certain conditions. see bug 744992 for details and to track progress on a fix. implemented by: @mozilla.org/windows-taskbar;1. to create an instance, use: var wintaskbar = components.classes["@mozilla.org/windows-taskbar;1"] .getservice(components.interfaces.nsiwintaskbar); method overview nsijumplistbuild...

Setting HTTP request headers
ctivate it you just need to call: httprequestobserver.register(); you should also remember to unregister the observer at shutdown: httprequestobserver.unregister(); and that's it. xpcom components you need to register a single http-on-modify-request observer per application (and not one per window). this means that you should put the observer's implementation in an xpcom component instead of an overlay. if you want to support gecko2 (firefox4) you need to register your javascript component as described here: https://developer.mozilla.org/en/xpcom/xpcom_changes_in_gecko_2.0#javascript_components. var headername = "x-hello"; var headervalue = "world"; function log(text) { // var consoleservice = components.classes["@mozilla.org/consoleservice;1"].getservice(components.interfaces.nsiconso...

Address Book examples
handler with these identifiers and a custom photo handler. photo display handlers a photo display handler determines how a contact photo can be extracted from a contact and displayed in an img element. this is useful in the contact viewer within the address book. photo display handlers are registered with the registerphotodisplayhandler function within the context of the address book card view overlay. a photo display handler is a function that behaves as follows: /* * function(acard, aimg): * the function is responsible for determining how to retrieve * the photo from nsiabcard acard, and for displaying it in img * img element aimg. returns true if successful. if it returns * false, the generic photo display handler will be called. */ how do i set up autocomplete to us...

Building a Thunderbird extension 1: introduction
t for newer information. this tutorial will introduce you to the components of a thunderbird extension and will show you how to build your own. ...

Building a Thunderbird extension 2: extension file layout
you can find...

Building a Thunderbird extension 6: Adding JavaScript
ill create a small piece of javascript code that inserts the current date into our statusbar widget. the statusbar is usually displayed at the bottom of the thunderbird window. 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. window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: "...

Demo Addon
utton into the toolbar. afterwards, just click that button to show the demo overview. all three demos are explained in the following sections. only the interesting parts are shown, it's recommended that you download the add-on and have a look at its files. the basics the interesting parts covered in this article are in the content folder. the toolbar button and its functionality are defined in overlay.xul and overlay.js. we make use of fixiterator(). it is a handy library that keeps your code cleaner and simpler. it lets you iterate over any collection and transforms your collection elements in the given objects, to use fixiterator, you have to import it with cu.import("resource:///modules/iteratorutils.jsm");. demo 1 - iterate over all the accounts this demo is implemented in demo1.html in...

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. you should be careful to read the higs for the platforms you are targeting and use the xul preprocessor if necessary to set different window titles as appropriate. you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window size does not change as the selected ...

UI Tour - Firefox Developer Tools
o jump directly to a function, class or method definition. source pane this shows the javascript file currently loaded. when the source pane is focused you can search for a string in the file using ctrl + f (cmd + f on a mac). breakpoints have a blue arrow overlaid on the line number. conditional breakpoints have an orange arrow. if you're stopped at a breakpoint, the entire line gets a green overlay. in the screenshot below there are three breakpoints: line 82 has a normal breakpoint and execution is paused here line 85 has a logpoint which logs the contents of tablerow to the console line 100 has a conditional breakpoint the third column shows more information about the breakpoints. for example, the logpoint at line 85 logs the value of the tablerow variable to the console and the ...

Rulers - Firefox Developer Tools
the dimensions of the viewport are displayed near the top-right corner of the viewport. to be able to toggle rulers for a page, you first need to enable the button by going to the settings page for the developer tools and checking "toggle rulers for the page" under available toolbox buttons. once enabled, the "toggle rulers for the page" button appears at the top right of the toolbox, in the same place as the settings/options button. behavior to keep in mind when using rulers: the rulers command must be reapplied in new tabs and after each page refresh. the command isn't permanent. ...

Firefox Developer Tools
storage, indexeddb, and session storage present in a page. dom property viewer inspect the page's dom properties, functions, etc. eyedropper select a color from the page. style editor view and edit css styles for the current page. taking screenshots take a screenshot of the entire page or of a single element. measure a portion of the page measure a specific area of a web page. rulers overlay horizontal and vertical rulers on a web page for the latest developer tools and features, try firefox developer edition. download firefox developer edition connecting the developer tools if you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. but you can attach the tools to a variety of ot...

CanvasRenderingContext2D.globalAlpha - Web APIs
drawing translucent shapes this example uses the globalalpha property to draw two semi-transparent rectangles. 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. we begin by drawing a solid background composed of four differently colored squares. next, we set the globalalpha property to 0.2 (20% opaque); this alpha level will apply to all of our transparent shapes. after that, we use a for loop to draw a series of circles with increas...

Manipulating video using canvas - Web APIs
foo.png. every pixel in the frame's image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is entirely transparent. 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. the resulting image looks like this: this is done repeatedly as the video plays, so that frame after frame is processed and displayed with the chroma-key effect. view the full source for this example. ...

Applying styles and colors - Web APIs
and 1.0 (fully opaque). a globalalpha example in this example, we'll draw a background of four different colored squares. on top of these, we'll draw a set of semi-transparent circles. the globalalpha property is set at 0.2 which will be used for all shapes from that point on. every step in the for loop draws a set of circles with an increasing radius. the final result is a radial gradient. by overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. by increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx...

Drawing shapes with canvas - Web APIs
iarity with some of the basic shapes. working with paths is essential when drawing objects onto the canvas and we will see how that can be done. the grid before we can start drawing, we need to talk about the canvas grid or coordinate space. our html skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. to the right, you see this canvas with the default grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed relative to this origin. so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). later in this tutorial we'll see how we can translate the orig...

Document - Web APIs
e which is the target of the current tooltip. mozilla also define some non-standard methods: document.execcommandshowhelp()obsolete since gecko 14 this method never did anything and always threw an exception, so it was removed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11). document.getboxobjectfor() use the element.getboundingclientrect() method instead. document.loadoverlay()obsolete since gecko 61 loads a xul overlay dynamically. this only works in xul documents. document.querycommandtext()obsolete since gecko 14 this method never did anything but throw an exception, and was removed in gecko 14 (firefox 14 / thunderbird 14 / seamonkey 2.11). internet explorer notes microsoft defines some non-standard properties: document.filesize* returns size in byte...

Fullscreen API - Web APIs
ed with the vendor prefix: webkit no support 12 — 14prefixed prefixed implemented with the vendor prefix: osafari ios full support 6prefixed notes full support 6prefixed notes prefixed implemented with the vendor prefix: webkitnotes only available on ipad, not on iphone. ...

Index - Web APIs
erations. the output looks like this: 525 drawing shapes with canvas canvas, graphics, html, html canvas, html5, intermediate, tutorial before we can start drawing, we need to talk about the canvas grid or coordinate space. our html skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high. to the right, you see this canvas with the default grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed relative to this origin. so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). later in this tutorial we'll see how we can translate the orig...

Targeting and hit detection - Web APIs
hich makes direct tracing of rays to polygons impractical in most cases. instead, most applications find a way to simplify the implementation of their hit testing algorithms. it's possible—or even likely—that whatever 3d graphics engine you're using offers hit testing, especially if it's designed specifically for game development. simplified representative objects one common solution is to overlay simplified, invisible objects atop the objects in your scene. these objects then serve a s. for instance, if you have a more-or-less rectangular object, use a rectangle as a surrogate for the object when performing hit testing. likewise, if an object is essentially round, use the radius of the minimum enclosing circle to establish a colision test object. real-world hit testing the acronym "lida...

WebXR Device API - Web APIs
he real world, (augmented reality, or ar). the webxr device api implements the core of the webxr feature set, managing the selection of output devices, render the 3d scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers. 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. to accomplish these things, the webxr device api provides the following key capabilities: find compatible vr or ar output devices render a 3d scene to the device at an appropriate frame rat...

Window.controllers - Web APIs
hrome window. syntax controllers = window.controllers controllers is an object of type xulcontrollers (nsicontrollers). specification xul-specific. not part of specification. by default, a window's controller contains the code that supports the global window commands. chrome code can add controllers (to be used in conjunction with the godocommand and goupdatecommand functions in globaloverlay.js). however, the added controllers must be explicitly removed when the window is unloaded, as this is not done automatically. each missing removal can cause bug 415775: assertion: xpconnect is being called on a scope without a 'components' property! ...

ARIA: dialog role - Accessibility
dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with). ...

WAI-ARIA Roles - Accessibility
the end of every page of a website, including copyright information, navigation links, and privacy statements. this section is commonly called a footer.aria: dialog rolethe dialog role is used to mark up an html based application dialog or window that separates content or ui from the rest of the web application or page. dialogs are generally placed on top of the rest of the page content using an overlay. dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).aria: document rolegenerally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: the document role tells assistive technologies with reading or ...

Accessibility documentation index - Accessibility
ion links, and privacy statements. this section is commonly called a footer. 59 aria: dialog role aria, accessibility, needscontent, web development the dialog role is used to mark up an html based application dialog or window that separates content or ui from the rest of the web application or page. dialogs are generally placed on top of the rest of the page content using an overlay. dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with). 60 aria: document role aria, aria role, document, reference generally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: ...

:target - CSS: Cascading Style Sheets
living standard defines html-specific semantics. selecto...

Styling Columns - CSS: Cascading Style Sheets
rule. rules are only drawn between columns and not on the outer edges. rules should also only be drawn between columns which have content. in this next example i have created a 5px dotted rule with a color of rebeccapurple, using the longhand values. note that the rule itself does not take up any space: a wide rule will not push the columns apart to make space for the rule. instead, the rule overlays the gap. in this next example we have a very wide rule of 40px and a 10px gap. the rule displays under the content of the columns. in order to make space on both sides of the rule, the gap would need to be increased to be larger than 40px. summary this details all the current ways in which column boxes can be styled. in the next guide we will take a look at making elements inside a containe...

Using CSS gradients - CSS: Cascading Style Sheets
the backgrounds are stacked from top to bottom, with the first specified being on top. <div class="layered-image"></div> div { width: 300px; height: 150px; } .layered-image { background: linear-gradient(to right, transparent, mistyrose), url("https://mdn.mozi...

Overview of CSS Shapes - CSS: Cascading Style Sheets
alue border-box to any of the other allowed values to see how the shape moves closer or further away from the box. to explore the box values in more detail see our guide covering shapes from box values. shapes from images an interesting way to generate your path is to use an image with an alpha channel — the text will then wrap around the non-transparent parts of the image. 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. note that images used in this way must be cors compatible, otherwise shape-outside will act as if none had been given as the value, and you will get no shape. in this next example, we have an image with a fully...

WebKit CSS extensions - CSS: Cascading Style Sheets
nk, webkit, and gecko browsers treat all pseudo-elements starting with ::-webkit- as valid. ...

Guide to scroll anchoring - CSS: Cascading Style Sheets
event listener is not handling well the extra scrolling to compensate for the anchor node movement. you can check whether disabling scroll anchoring fixes the issue in firefox by changing layout.css.scroll-anchoring.enabled to false in about:config. if it does, you can check what node is firefox using as the anchor using the layout.css.scroll-anchoring.highlight switch. that will show a purple overlay on top of the anchor node. if one node doesn't seem appropriate to be an anchor, you can exclude it using overflow-anchor, as described below. what if i need to disable it? the specification provides a new property, overflow-anchor, which can be used to disable scroll anchoring on all or part of the document. it's essentially a way to opt out of the new behavior. the only possible values are ...

overflow - CSS: Cascading Style Sheets
y scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes. printers may still print overflowing content. auto depends on the user agent. if content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. desktop browsers provide scrollbars if content overflows. overlay behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. only supported in webkit-based (e.g., safari) and blink-based (e.g., chrome or opera) browsers. mozilla extensions -moz-scrollbars-none [1] use overflow: hidden instead. -moz-scrollbars-horizontal [1] use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead. ...

position - CSS: Cascading Style Sheets
r and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. the offset does not affect the position of any other elements. this value always creates a new stacking context. 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. this effectively inhibits any "sticky" behavior (see the github issue on w3c csswg). description types of positioning a positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (in other words, it's anything except static.) a relatively positioned element is an eleme...

Mobile first - Progressive web apps (PWAs)
ve is to put the content first and to hide away the navigation until the user really needs it. first of all, you can consider a different navigation mechanism on mobile. 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. second, a popular option is to put the navigation menu down at the bottom of the page rather than up at the top as the expectation would commonly be. this puts the content first at the top of the page and means that when the user has reached the end of a page, they have a signpost giving them an idea of where to go next. third, combining the two is also a good option — why not have a single ...

SVG: Scalable Vector Graphics
raction with javascript. applying svg effects to html content svg works together with html, css and javascript. use svg to enhance a regular html page or web application. view all... community view mozilla forums... mailing list newsgroup rss feed tools svg test suite markup validator more tools... other resources: xml, css, dom, canvas examples google maps (route overlay) & docs (spreadsheet charting) svg bubble menus svg authoring guidelines an overview of the mozilla svg project frequently asked questions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a document model (dom) and events, and is accessible from javascript. this allows developers to create rich animations and...