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.
...t application (such as firefox, thunderbird, or kompozer) using overlays.
...ird, or kompozer) using overlays.
...And 12 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, elements laid out using a grid have a "grid" marker beside them.
... for viewing those grids.
...And 12 more matches

Index - Archive of obsolete content
serwindow there are times in which an extension may find it useful to hide browser chrome (that is, toolbars, the location bar, and so forth), in order to reduce clutter when presenting a particular user interface.
... there are a variety of ways you can install extensions and themes from web pages, including direct linking to the xpi files and using the installtrigger object.
... extension except as noted below.
...And 11 more matches

HTML in XUL for rich tooltips - Archive of obsolete content
this example demonstrates the dynamic injection of html into a xul element.
... this example demonstrates the dynamic injection of html into a xul element.
... this example demonstrates the dynamic injection of html into a xul element.
...And 10 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.
... 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.
...l" > <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.
...And 10 more matches

Element.getClientRects() - Web APIs
dered, an empty list is returned.
...he third block.
...he 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.
...And 10 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.
... « previousnext » event handlers just like with html, most javascript code execution is triggered by event handlers attached to dom elements.
... event handlers just like with html, most javascript code execution is triggered by event handlers attached to dom elements.
...And 8 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.
...you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest.
...ay attention to the details we describe here, your toolbar may not be as easy to customize as the rest.
...And 8 more matches

Appendix D: Loading Scripts - Archive of obsolete content
of the services global assume that you're previously imported the services.jsm module.
... allocate and initialize all of their data structures each time the script is loaded.
...their data structures each time the script is loaded.
...And 8 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/...
...re may be chrome registration lines which only apply to one particular application.
...ply to one particular application.
...And 8 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 8 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.
... this example illustrates how to customize the progress bar displayed for a given download in the downloads window.
...ustrates how to customize the progress bar displayed for a given download in the downloads window.
...And 7 more matches

Writing Skinnable XUL and CSS - Archive of obsolete content
rt another skin file are calledbase skin files.
...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.
...nded 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.
...And 7 more matches

Building a Thunderbird extension 5: XUL
m folder.
...i.ja can be easily browsed by copying the file to a different location and renaming it to omni.zip.
... to omni.zip.
...And 7 more matches

Bootstrapped extensions - Archive of obsolete content
traditional extensions include overlays, wherein the application can load up xul from the extension's package and automatically apply it on top its own ui.
...sion's package and automatically apply it on top its own ui.
...t contains functions the browser calls to command the extension to install, uninstall, start up, and shut down.
...And 6 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.
...pers with the ability to extend xul by customizing existing tags and creating new tags of their own.
...ese custom components can then be used in xul applications by specifying the custom tag and associated attributes.
...And 6 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.
...will be described in a moment.
...ribed in a moment.
...And 6 more matches

customDBHeaders Preference
ssage database.
...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

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
near the top.
... 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.
...And 5 more matches

Custom toolbar button - Archive of obsolete content
applications specify the versions where the extension works.
...this extension adds content to the application.
...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

Setting Up a Development Environment - Archive of obsolete content
ead.
...line first.
... system and navigate to the src directory in your project.
...And 4 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 4 more matches

Creating a Custom Column
.
...ll be adding a column that will display the "reply-to:" field of an email (if it exists, it if often not set).
...t if often not set).
...And 4 more matches

Offering a context menu for form controls - Archive of obsolete content
lt.
... change in a particular window, enabling context menus to work on form controls.
...nts information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this.
...And 3 more matches

JavaScript Object Management - Archive of obsolete content
you need.
...to run the initialization code from the "load" event handler for the window.
...* controls the browser overlay for the hello world extension.
...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.
...nction () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
... 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.
...And 3 more matches

CustomizableUI.jsm
ect with its desired properties.
...ation for the widget return value a wrapper around the created widget.
...re that in case of running on newer browsers, xul overlay does not contain description of the button that you are creating with createwidget() method.
...And 3 more matches

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

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
, and more.
...the appropriate information.
...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.
...And 3 more matches

XUL Migration Guide - Archive of obsolete content
t at this point.
...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.
...eds 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.
...And 2 more matches

Getting Started with Firefox Extensions - Archive of obsolete content
in a convenient location.
....
...le 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.
...And 2 more matches

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".
...a string "hello".
...n observer to listen to the notification topic "xulschoolhello-test-topic" when the window loads.
...And 2 more matches

Index - Archive of obsolete content
g lists commands which might be usable by <command> or command dispatchers/controllers.
...menu where the items on the menu are specific to the context in which the menu was opened.
...e containers for toolbar buttons and other user interface objects.
...And 2 more matches

XUL Structure - Archive of obsolete content
h the same way.
...able to add features to the browser.
...nstalled onto the user's machine.
...And 2 more matches

prefpane - Archive of obsolete content
e set of preferences that will be modified, and the user interface for adjusting those preferences.
...nterface for adjusting those preferences.
...ded as an overlay to the main preferences window.
...And 2 more matches

Displaying Places information using views
nctionality so that you can focus on building your extension or application.
...ion or application.
... instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places".
...And 2 more matches

mix-blend-mode - CSS: Cascading Style Sheets
f the element's parent and the element's background.
...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.
...u need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners.
...eners.
...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
.
...nents), you need to package them up as part of your extension.
...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...

Adding menus and submenus - Archive of obsolete content
« previousnext » the hello world example in the previous sections shows the two most common ways to add menus.
...or it to fill up before displaying anything.
... something going on, and asynchronously fill its contents.
...onously fill its contents.

User Notifications and Alerts - Archive of obsolete content
y"); acceptbutton.popup = null; acceptbutton.callback = function() { that.acceptrequest(); }; // similarly for decline button.
...t works on firefox 3 on ubuntu linux, but we haven't tested all distributions and firefox versions.
... custom solutions for alerting the user is not complicated, given the advantages of xul overlays and css positioning.
...so that it is displayed to the user.

Add-ons - Archive of obsolete content
is in japanese and distributed via the xuldev.org website.
... 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).
...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.
...tom dom events.

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".
...us sample; simply replace the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher".
... the id of the first sample, "status-bar-sample-1", with the name of the new sample, "stockwatcher".
...y id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the javascript function that will be executed whenever the user clicks on the status bar panel.

Extensions - Archive of obsolete content
adding a new menu the main menu bar in firefox has the id 'main-menubar'.
...menuitem label="mail"/> </menupopup> </menu> </menubar> this menu is added to the main menu bar just before the tools menu.
... menus.
...y when certain content is selected.

Updating Commands - Archive of obsolete content
hecking if the command was enabled or not, although we probably shouldn't do that.
...ibrary which does just that.
...dater listens for.
....

XUL element attributes - Archive of obsolete content
en type: boolean if set to true, the element is not displayed.
... insertafter type: id when an element is in an overlay, the insertafter attribute specifies the id of the element in the base window that the element should appear after.
...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).
... may provide support for additional datasources.

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.
...resents ui for adding a new feed reader.
... updated to include new styles.
... mozapps/extensions/extensions.css css for the add-ons manager window.

Updating an extension to support multiple Mozilla applications - Archive of obsolete content
ications what to do with the chrome provided by the extension.
...ies when we created our chrome manifest, which we haven't touched since?
... may not) recall, that file tells the application what xul code your extension's interface needs to overlay onto.
...dd 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.

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.
...ks, 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.
... 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.
...er causes the observer service to use a strong reference to the observer object, which will cause it to hold onto the whole window.

Image gallery - Learn web development
t or further help section at the bottom of this page.
...e've already provided a line that stores a reference to the <button> in a constant called btn.
... on the <button> — you can again achieve this by using getattribute().
...ten", and the background-color of the overlay <div> to "rgba(0,0,0,0.5)".

Index
d in mozilla/mail.
...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.
...t understands how to display a combination of user activity and history.
... has no content.

Working with windows in chrome code
this article describes working with multiple windows in mozilla chrome code (xul applications and extensions).
...ages if you need to interact with the content page.
... 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.
...y useful when you're sure that your window was opened from one of a few well-known places.

msthumbnailclick - Web APIs
thumbnailclick event is available only to documents that are launched from a pinned site shortcut.
...ned site shortcut.
...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.
...eated using the grid-area property, then a layout created in grid-template-areas.
...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">...
... { z-index: 10; grid-column: main-start / main-end; grid-row: hd-start / ft-end; border: 4px solid rgb(92,148,13); background-color: rgba(92,148,13,.4); color: rgb(92,148,13); font-size: 150%; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> <div class="overlay">overlay</div> </div> given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout.

<blend-mode> - CSS: Cascading Style Sheets
a black layer leads to no change, and a white layer leads to a white final layer.
...he result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
..."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.
...und images set on it — a firefox logo on top of a linear gradient.

Interaction between privileged and non-privileged pages - Archive of obsolete content
sending data from unprivileged document to chrome an easy way to send data from a web page to an extension is by using custom dom events.
... on the event handler for the correct namespaceuri property, or as per the dom specification, use initevent() with an event name that is itself namespaced (xml name characters only): "it is also strongly recommended that third parties adding their own events use their own prefix to avoid confusion and lessen the probability of conflicts with other new events.") in the case where your extension's overlay does not interact directly with browser.xul, such as in a sidebar, it might be easier to add the event listener to the top-level document directly as shown below (also see: accessing the elements of the top-level document from a child window).
... with callback</button> <button onclick="return something.send_request({baz: 3}, something.callback)">send {baz: 3} with callback</button> <button onclick="return something.send_request({mozilla: 3})">send {mozilla: 3} without callback</button> <button onclick="return something.send_request({firefox: 4}, something.callback)">send {firefox: 4} with callback</button> </body> </html> overlay on browser.xul in your extension: var something = { listen_request: function(callback) { // analogue of chrome.extension.onrequest.addlistener document.addeventlistener("something-query", function(event) { var node = event.target; if (!node || node.nodetype != node.text_node) return; var doc = node.ownerdocument; callback(json.parse(node.nodevalue), doc, fu...

Adding 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.
...ovide a frame where you can add elaborate data and controls.
...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.

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

Creating a Mozilla Extension - Archive of obsolete content
webtool for tracking source code status, to get the status of the code.
...installation by others.
... 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.
...host application, there are some prism-specific issues that you need to handle when creating your extension.
...ements to merge in your extension ui.

Menus - Archive of obsolete content
opup.
...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.
...an overlay and apply it to all of the windows.

XUL Changes for Firefox 1.5 - Archive of obsolete content
o-based behaviour should be changed.
...ndle> the <stringbundle> element has a strings property which may be used to retrieve an enumeration of all of the strings in the bundle.
...ings property which may be used to retrieve an enumeration of all of the strings in the bundle.

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).
...edit it to force the last modified time to be updated.
..._blank", winopts); } i can't see my pages, functions ...

XULRunner tips - Archive of obsolete content
me://mozapps/content/extensions/extensions.xul?type=themes extension:manager-themes javascript console chrome://global/content/console.xul global:console about:config chrome://global/content/config.xul developer extensions venkman need a custom build or a compatible extension need to edit compatibility in needs a method to start venkman (usually by overlaying the main xul file, similar to existing code for firefox, suite, etc.) the function toopenwindowbytype() needs to be defined.
...open your chrome.manifest file and add these lines: content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no locale inspector en-us jar:inspector.jar!/locale/inspector/ skin inspector modern/1.0 jar:inspector.jar!/skin/modern/inspector/ skin inspector classic/1.0 jar:inspector.jar!/skin/classic/inspector/ overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/dom/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/stylerules/commandoverlay.xul overlay chrome://inspector/content/keysetoverlay.xul chrome://inspector/content/viewers/dom/keysetoverlay.xul overlay chrome://inspector/content/popupoverlay.xul chrome://...
...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...

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.
... build that offers some support for xul editing and awesome support for extension packaging.
...ing and packaging an extension very easy.

nsISessionStore
is the last one that was closed.
...; see example #3 in working_with_windows_in_chrome_code.
...terfacerequestor) { var win = xul_win.docshell.getinterface(nsidomwindow); ...

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

Porting the Library Detector - Archive of obsolete content
loaded jquery.
...rary that it finds, the library detector adds an icon representing that library to the status bar.

SDK and XUL Comparison - Archive of obsolete content
owser to attack by malicious web pages.
... with the usability guidelines for firefox, giving your users a better, more consistent experience.

/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.
...ed in detail in the built-in modules section.

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.
... hidden xul iframe (alternate example) sometimes, a browser element is overkill, or does not meet your needs, or you can't fulfill its requirements.

Extension Theming Guidelines - Archive of obsolete content
ement for your skin package allowing them to provide their own styles for all of your content.
...clude 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.

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.
... features that are only available depending on user preferences.

Appendix B: Install and Uninstall Scripts - Archive of obsolete content
.
...e add-on will use for storage.

The Box Model - Archive of obsolete content
, one with the text-link class.
...'ll also need to do some css work on the labels so that the inner spacing in the text looks right.

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

Special per-platform menu considerations - Archive of obsolete content
in the tools menu on other platforms.
... menu item when it is activated by the user.

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.
...he currently focused element.

toolbarpalette - Archive of obsolete content
available toolbar items.
...lbar items.

XUL - Archive of obsolete content
ble xul controls.
... the joy of xul describes the key features and components of xul.

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

Window.importDialog() - Archive of obsolete content
ialog(null, "chrome://myextension/content/dialog.xul", myobject); notes the xul passed to importdialog() is very similar to xul passed to window.opendialog(), with some limitations and caveats: only <dialog> top level elements are permitted.
...sed to importdialog() is very similar to xul passed to window.opendialog(), with some limitations and caveats: only <dialog> top level elements are permitted.

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.
...s extensions for firefox for android in 2020, mozilla will release a new firefox for android experience.

about:memory
fier.
...particular identifier belongs to.

Demo Addon
utton into the toolbar.
...oolbar.

Step through code - Firefox Developer Tools
on, unless on a function call, in which case enter the function being called step out: run to the end of the current function, in which case, the debugger will skip the return value from a function, returning execution to the caller split console when paused, you can press the esc key to open and close the split console to gain more insight into errors and variables: pause on breakpoints overlay since firefox 70, when your code is paused on a breakpoint an overlay appears on the viewport of the tab you are debugging.
...step button and a play button.

Index - Firefox Developer Tools
inspector internals code, tools, internals, organisation, source there are three main facets to dom inspector.
...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.

CanvasRenderingContext2D.globalAlpha - Web APIs
drawing translucent shapes this example uses the globalalpha property to draw two semi-transparent rectangles.
...y to draw two semi-transparent rectangles.

Compositing example - Web APIs
compositing example this code sets up the global values used by the rest of the program.
...iply)', 'a combination of multiply and screen.

Hit regions and accessibility - Web APIs
tags can be used as a fallback for browsers which don't support canvas rendering.
...s (like screen readers) which can read and interpret the sub dom in it.

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

Web Video Text Tracks Format (WebVTT) - Web APIs
web video text tracks format (webvtt) is a format for displaying timed text tracks (such as subtitles or captions) using the <track> element.
... 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.

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

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.
...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...
... <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <use id="outer-petals" xlink:href="#petals"/> <use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> </g> </svg> what next?

Miscellaneous - Archive of obsolete content
oper.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: getbrowserselection(); // |window| object is implied; i.e., window.getbrowserselection() this final option massages the selection to remove leading and trailing whitespace.

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

Toolbar - Archive of obsolete content
there are two tutorials available: an elaborate step by step tutorial for beginners: custom toolbar button a tutorial describing the steps needed to add a toolbar button assuming you already have a working extension and know the basics of extension development: creating toolbar buttons adding button by default when you create and deploy your extension and include a toolbar button for it by overlaying the customize toolbarpalette, it is not available by default.

Inline options - Archive of obsolete content
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.

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

Intercepting Page Loads - Archive of obsolete content
on your needs.

Performance best practices in extensions - Archive of obsolete content
e benefits, they should be used wisely.

Setting up an extension development environment - Archive of obsolete content
fs can now be found at https://github.com/noitidart/devprefs.

Firefox addons developer guide - Archive of obsolete content
add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter 3 or 5 more informations about overlay (how to overlay some interesting part of firefox like status bar, menus or toolbar) add previous/next at the end of each chapter questions: opensource appendix.

Localizing an extension - Archive of obsolete content
ode to use the entities instead of the strings, so that the substitutions take place based on the currently active locale.

Enabling the behavior - updating the status periodically - Archive of obsolete content
ype="application/javascript" src="chrome://navigator/content/navigator.js"/> <script type="application/javascript" src="chrome://navigator/content/navigatordd.js"/> <script type="application/javascript" src="chrome://navigator/content/sessionhistoryui.js"/> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js"/> <!-- hook for stringbundle overlays --> ...

Finding the file to modify - Archive of obsolete content
based user interface language (and is pronounced like "zool"), is an xml-based language specifically designed for describing application interfaces.

Proxy UI - Archive of obsolete content
selection and the proxy mode (network.proxy.type) selecting a disabled item is not allowed.

insertafter - Archive of obsolete content
« xul reference home insertafter type: id when an element is in an overlay, the insertafter attribute specifies the id of the element in the base window that the element should appear after.

insertbefore - Archive of obsolete content
« xul reference home insertbefore type: id when an element is in an overlay, the insertbefore attribute specifies the id of the element in the base window that the element should appear before.

position - Archive of obsolete content
« xul reference home position type: string (representing an integer) when an element is in an overlay, the position is an index where the child is inserted.

prefpane.src - Archive of obsolete content
« xul reference home src type: uri the uri of the overlay contents of preference pane.

removeelement - Archive of obsolete content
« xul reference home removeelement type: id when placed on an element in an overlay, it indicates that the element in the base file should be removed from the window.

Menus - Archive of obsolete content
an extension will often wish to attach a new command to a menu.

Toolbars - Archive of obsolete content
documentation xul school: adding toolbars and toolbar buttons a helpful tutorial to creating toolbars and toolbar buttons.

Introduction - Archive of obsolete content
lts.

More Wizards - Archive of obsolete content
as you switch pages.

XUL Tutorial - Archive of obsolete content
in skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using css and xbl xbl example specialized window types features of a window creating dialogs open and save dialogs creating a wizard more wizards overlays cross package overlays installation creating an installer install scripts additional install features this xul tutorial was originally created by neil deakin.

Using the Editor from XUL - Archive of obsolete content
ir changes, or cancel.

XUL Questions and Answers - Archive of obsolete content
possible?

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.

XULRunner Hall of Fame - Archive of obsolete content
ons, many of which use xulrunner.

2006-11-03 - Archive of obsolete content
and also further discussion on lastmodifieddate.

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.

RDF in Mozilla FAQ - Archive of obsolete content
statements.

Overflowing content - Learn web development
yout) manage overflow.

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.

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.

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.

Accessibility information for UI designers and developers
t lets people type a character, say ‘k’, to jump directly to options starting with ‘k’.

Creating a Firefox sidebar
mplemented in firefox 29 as part of the add-on sdk.

Interface Compatibility
jetpack sdk and apis are not yet complete.

JavaScript Tips
xul tips when inserting code with an xul overlay, wrap functions and variables inside an object with a unique name to avoid conflicting with existing or future function and variable names.

XPCOMUtils.jsm
self and have them load one another.

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.

Preferences system
..

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.

AT APIs Support
e note that the web docs are sometimes out of date, and the latest at-spi is available on cvs.

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

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

mozilla::services namespace
ervice nsichromeregistryservice chrome registry service getioservice nsiioservice io service getobserverservice nsiobserverservice observer service getstringbundleservice nsistringbundleservice string bundle service gettoolkitchromeregistryservice nsitoolkitchromeregistry toolkit chrome registry service getxulchromeregistryservice nsixulchromeregistry xul chrome registry service getxuloverlayproviderservice nsixuloverlayprovider xul overlay provider service more services will be added as needed.

Index
the nsimsgcompfields interface provides properties for an composition of an outgoing message.

nsIMsgCustomColumnHandler
the nsimsgcustomcolumnhandler interface allows you to create custom handlers for columns.

nsIThreadObserver
maywait, in unsigned long recursiondepth ); parameters thread the nsithread on which the event is going to be processed.

nsIWinTaskbar
rrespond to tabs within the application; they can vary in size, shape, and location.

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.

Address Book examples
handler with these identifiers and a custom photo handler.

Building a Thunderbird extension 1: introduction
t for newer information.

Building a Thunderbird extension 2: extension file layout
his tutorial is finished, our extension will look like this: myfirstext.xpi: //created in step 8 /install.rdf //created in step 3 /chrome.manifest //created in step 4 /chrome/ /content/ /content/myhelloworld.xul //created in step 5 /content/overlay.js //created in step 6 /chrome/locale/* //building an extension# localization /chrome/skin/ /defaults/preferences/ //building an extension# defaults files the following tutorial pages will explain how to write each of these files (except locale/ and defaults/) and package them into an xpi (zippy) file.

Building a Thunderbird extension 6: Adding JavaScript
ill create a small piece of javascript code that inserts the current date into our statusbar widget.

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 Tour - Firefox Developer Tools
o jump directly to a function, class or method definition.

Rulers - Firefox Developer Tools
you can overlay horizontal and vertical rulers on a web page: the units are in pixels.

Firefox Developer Tools
storage, indexeddb, and session storage present in a page.

Manipulating video using canvas - Web APIs
foo.png.

Applying styles and colors - Web APIs
and 1.0 (fully opaque).

Drawing shapes with canvas - Web APIs
iarity with some of the basic shapes.

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.

Targeting and hit detection - Web APIs
hich makes direct tracing of rays to polygons impractical in most cases.

WebXR Device API - Web APIs
he real world, (augmented reality, or ar).

Window.controllers - Web APIs
hrome window.

ARIA: dialog role - Accessibility
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.

WAI-ARIA Roles - Accessibility
the end of every page of a website, including copyright information, navigation links, and privacy statements.

Accessibility documentation index - Accessibility
ion links, and privacy statements.

:target - CSS: Cascading Style Sheets
ightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in that specification.

Styling Columns - CSS: Cascading Style Sheets
rule.

Using CSS gradients - CSS: Cascading Style Sheets
to hilight the difference the color hint can make: <div class="colorhint-gradient"></div> <div class="regular-progression"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } .colorhint-gradient { background: linear-gradient(to top, black, 20%, cyan); } .regular-progression { background: linear-gradient(to top, black, cyan); } overlaying gradients gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects.

Overview of CSS Shapes - CSS: Cascading Style Sheets
alue border-box to any of the other allowed values to see how the shape moves closer or further away from the box.

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.

overflow - CSS: Cascading Style Sheets
y scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes.

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.

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.

SVG: Scalable Vector Graphics
raction with javascript.