places/favicon - Archive of obsolete content
helper functions for working with favicons.
... globals functions getfavicon(object, callback) takes an object that represents a page's url and returns a promise that resolves with the favicon url for that page.
...the platform service (moziasyncfavicons) retrieves favicon data stored from previously visited sites, and as such, will only return favicon urls for visited sites.
...And 2 more matches

imgIContainerObserver
image/public/imgicontainerobserver.idlscriptable an interface to implement to listen to activities on an imgicontainer object.
... 1.0 66 introduced gecko 1.7 inherits from: nsisupports last changed in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9) if you wish to listen for activities on an imgicontainer, you should implement the framechanged() method.
... method overview void framechanged(in imgirequest arequest, in imgicontainer acontainer, [const] in nsintrect adirtyrect); native code only!
...And 2 more matches

icon - Archive of obsolete content
« xul reference home icon mozilla 1.8 type: string this attribute should be used to set the usage for common buttons.
... some platforms display these buttons with a small icon indicating their usage.
...if you are using a button that matches one of these common usages, use the icon attribute to indicate this.
... see the appearance of the different icons on some available platforms.

Favicon - MDN Web Docs Glossary: Definitions of Web-related terms
a favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.
... note, however, that most modern browsers replaced the favicon from the address bar by an image indicating whether or not the website is using https.
... usually, a favicon is 16 x 16 pixels in size and stored in the gif, png, or ico file format.
...when a familiar icon is seen in the browser's address bar, for example, it helps users know they are in the right place.

Notification.icon - Web APIs
the icon read-only property of the notification interface contains the url of an icon to be displayed as part of the notification, as specified in the icon option of the notification() constructor.
... syntax var icon = notification.icon; value a usvstring.
... examples in our to-do list app (view the app running live), we use the notification() constructor to fire a notification, passing it arguments to specify the body, icon and title we want.
... var notification = new notification('to do list', { body: text, icon: img }); specifications specification status comment notifications apithe definition of 'icon' in that specification.

-moz-force-broken-image-icon - CSS: Cascading Style Sheets
the -moz-force-broken-image-icon extended css property can be used to force the broken image icon to be shown even when a broken image has an alt attribute.
... syntax values <integer> a value of 1 means that the broken image icon is shown even if the image has an alt attribute.
... note: even if the value is set to 1 the alt attribute will still be displayed, alongside the broken image icon.
... formal definition initial value0applies toimagesinheritednocomputed valueas specifiedanimation typediscrete formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'> css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if -moz-force-broken-image-icon is set to 1.

getIcon - Archive of obsolete content
« xul reference home geticon( atab ) return type: string returns the url of the specified tab's favicon.
... if atab is null, the current tab's icon is returned.
... see seticon to set the icon.

nsIConsoleListener
xpcom/base/nsiconsolelistener.idlscriptable this interface allows you to listen for messages sent to the console.
... inherits from: nsisupports last changed in gecko 1.7 method overview void observe(in nsiconsolemessage amessage); methods observe() called by the nsiconsoleservice when a message is posted to the console.
... listeners must first be attached to the service using nsiconsoleservice.registerlistener() void observe( in nsiconsolemessage amessage ); parameters amessage the nsiconsolemessage being posted.

nsIContentFrameMessageManager
frame scripts can send either synchronous or asynchronous messages to the chrome process: for details on these messaging apis see the documentation for the nsicontentframemessagemanager's parent classes nsisyncmessagesender and nsimessagesender.
... var acfmm = gbrowser.selectedbrowser._docshell.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsicontentframemessagemanager); get content message manager from content window window here is a html window or any window inside a tab, this code would run from a framescript.
... var acfmm = window.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidocshell) .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsicontentframemessagemanager); ...

nsIContentPrefCallback2
dom/interfaces/base/nsicontentprefservice2.idlscriptable callback used by nsicontentprefservice2 methods 1.0 66 introduced gecko 20.0 inherits from: nsisupports last changed in gecko 20.0 (firefox 20.0 / thunderbird 20.0 / seamonkey 2.17) method overview void handlecompletion(in unsigned short reason); void handleerror(in nsresult error); void handleresult(in nsicontentpref pref); constants constant value description complete_ok 0 complete_error 1 methods handlecompletion() called when the method finishes.
...void handleresult( in nsicontentpref pref ); parameters pref the retrieved preference.
... see also nsicontentprefservice2 ...

nsIContentViewer
docshell/base/nsicontentviewer.idlscriptable handles displaying content.
...to create an instance, use: var contentviewer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsicontentviewer); method overview void clearhistoryentry(); void close(in nsishentry historyentry); void destroy(); [noscript,notxpcom,nostdcall] nsiviewptr findcontainerview(); void getbounds(in nsintrectref abounds); native code only!
... previousviewer nsicontentviewer the previous content viewer, which has been closed but not destroyed.

nsIConverterInputStream
xpcom/io/nsiconverterinputstream.idlscriptable a unichar input stream that wraps an input stream.
...to create an instance, use: var converterinputstream = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); method overview void init(in nsiinputstream astream, in string acharset, in long abuffersize, in prunichar areplacementchar); constants constant value description default_replacement_character 0xfffd default replacement character value.
... see also nsiconverteroutputstream see reading textual data for an example.

nsIConverterOutputStream
xpcom/io/nsiconverteroutputstream.idlscriptable this interface allows writing strings to a stream, doing automatic character encoding conversion.
...to create an instance, use: var converteroutputstream = components.classes["@mozilla.org/intl/converter-output-stream;1"] .createinstance(components.interfaces.nsiconverteroutputstream); method overview void init(in nsioutputstream aoutstream, in string acharset, in unsigned long abuffersize, in prunichar areplacementcharacter); methods init() initialize this stream.
... see also nsiconverterinputstream see writing textual data for an example.

MIDIConnectionEvent - Web APIs
the midiconnectionevent interface of the web midi api is the event passed to the onstatechange event handler of the midiaccess interface and the onstatechange event of the midiports interface.
... constructor midiconnectionevent.midiconnectionevent creates a new midiconnectionevent object.
... properties midiconnectionevent.port returns a reference to a midiport instance for a port that has been connected or disconnected." examples specifications specification status comment web midi api working draft initial definition.

PasswordCredential.iconURL - Web APIs
the iconurl read-only property of the passwordcredential interface returns a usvstring containing a url pointing to an image for an icon.
... syntax url =passwordcredential.iconurl value a usvstring containing a url.
... specifications specification status comment credential management level 1the definition of 'iconurl' in that specification.

iconsize - Archive of obsolete content
« xul reference home iconsize type: string indicates whether the toolbar should display large icons or small icons; this should be the string "large" or "small", respectively.
... these can vary from one toolbar to another within a given toolbox, whose iconsize attribute defines the default for all toolbars that don't specify an icon size.

setIcon - Archive of obsolete content
« xul reference home seticon( atab, auri ) return type: no return value sets the specified tab's favicon to the image specified by auri.
... see geticon to get the current icon.

alert-icon - Archive of obsolete content
« xul reference home alert-icon class that adds an alert icon.
...this and the other icon classes may be used by image elements or other elements which can have an image.

error-icon - Archive of obsolete content
« xul reference home error-icon class that adds an error icon.
... this will typically be a red "x" icon.

nsIConsoleMessage
xpcom/base/nsiconsolemessage.idlscriptable this interface is a base interface for messages passed to or from the nsiconsoleservice.
... see also nsiconsoleservice ...

nsIContentPref
nsicontentpref dom/interfaces/base/nsicontentprefservice2.idlscriptable a content preference 1.0 66 introduced gecko 20.0 inherits from: nsisupports last changed in gecko 20.0 (firefox 20.0 / thunderbird 20.0 / seamonkey 2.17) attributes attribute type description domain astring read only.
... see also nsicontentprefservice2 nsicontentprefcallback2 ...

nsIContentPrefObserver
dom/interfaces/base/nsicontentprefservice.idlscriptable this interface allows code to easily watch for changes to the values of content preferences.
... see also nsicontentprefservice using content preferences ...

nsIController
content/xul/document/public/nsicontroller.idlscriptable an interface that can be implemented to receive and process commands and events.
...see also nsicommandcontroller nsicontrollers xul tutorial/commands ...

listcell-iconic - Archive of obsolete content
« xul reference home listcell-iconic use this class to have an image appear on the listcell.

listitem-iconic - Archive of obsolete content
« xul reference home listitem-iconic use this class to have an image appear on the listitem.

menu-iconic - Archive of obsolete content
« xul reference home menu-iconic use this class to have an image appear on the menu.

menuitem-iconic - Archive of obsolete content
« xul reference home menuitem-iconic use this class to have an image appear on the menuitem.

menuitem-non-iconic - Archive of obsolete content
« xul reference home menuitem-non-iconic normally, menuitems have a margin to the left for an image or checkmark.

message-icon - Archive of obsolete content
« xul reference home message-icon class that adds a message box icon.

question-icon - Archive of obsolete content
« xul reference home question-icon class that adds a question icon, which usually looks like a question mark.

statusbarpanel-iconic-text - Archive of obsolete content
« xul reference home statusbarpanel-iconic-text use this class to have an image appear on the statusbarpanel as well as a text label.

statusbarpanel-iconic - Archive of obsolete content
« xul reference home statusbarpanel-iconic use this class to have an image appear on the statusbarpanel.

statusbarpanel-menu-iconic - Archive of obsolete content
« xul reference home statusbarpanel-menu-iconic use this class to have an image appear on the statusbarpanel, and also allow a popup menu.

Urlbar-icons - Archive of obsolete content
(the url bar is also known as the address bar and the navigation bar.) example the default contents of browser.xul: <hbox id="urlbar-icons"> <button be="" chromedir="ltr" class="urlbar-icon" click="" for="" id="safebrowsing-urlbar-icon" img="" level="safe" might="" onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button" onclick="placesstarbutton.onclick(event);" /> <img address="" chromedir="ltr" class="urlbar-icon" id="go-button" in="" location=""...

nsIContainerBoxObject
layout/xul/base/public/nsicontainerboxobject.idlscriptable please add a summary to this article.

nsIContentSecurityPolicy
content/base/public/nsicontentsecuritypolicy.idlscriptable describes an xpcom component used to model and enforce content security policies.

nsIContentSniffer
netwerk/base/public/nsicontentsniffer.idlscriptable content sniffer interface.

Theme changes in Firefox 2 - Archive of obsolete content
browser/browser.css needs to be updated to include new css for microsummaries, search fields, iconic bookmark menu items, and more.
... browser/dropmark-nav-small.png new file; used as the drop-down menu arrow on the navigation buttons, when using small icons.
... browser/feeds/feedicon.png new file; the rss feed icon.
...And 38 more matches

Index
168 iaccessibleimage interfaces, xpcom, xpcom interface reference this interface is used for a representation of images like icons on buttons.
... 184 imgicontainer interfaces, interfaces:scriptable, needscontent, needsupdate, reference, thebes, xpcom interface reference, needsattention implemented by: ?????????????????????????????????????.
... to create an instance, use: 185 imgicontainerobserver interfaces, interfaces:scriptable, needscontent, reference, xpcom interface reference, needsattention if you wish to listen for activities on an imgicontainer, you should implement the framechanged() method.
...And 27 more matches

ui/button/toggle - Archive of obsolete content
toggle buttons have all the same features as action buttons: they can display icons and respond to click events.
... usage creating buttons to create a button you must give it an id, an icon, and a label: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onchange: function(state) { console.log(state.label + " checked state: " + state.checked); } }); by default, the button appears in the firefox toolbar: ho...
...by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...And 26 more matches

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
<window id="main-window"> <toolbox id="navigator-toolbox"> <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarname.label;" accesskey="&xulschoolhello.toolbar.accesskey;" customizable="true" mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window.
... the mode attribute is set to icons, which is the usual value.
... the defaultset attribute lists the ids of the icons you want to include on your toolbar by default.
...And 26 more matches

Index - Archive of obsolete content
97 places/favicon helper functions for working with favicons.
...this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e.
... 386 adding the structure add-ons, extensions the ui for our extension is an icon in the status bar.
...And 25 more matches

ui/button/action - Archive of obsolete content
with this module you can create buttons that display icons and can respond to click events.
... usage creating buttons to create a button you must give it an id, an icon, and a label: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: function(state) { console.log("button '" + state.label + "' was clicked"); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel using the toolbar customization feature: badged buttons new in firefox 36.
...by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png", onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...And 22 more matches

Firefox UI considerations for web developers
top sites the top sites box lists a user-configurable number of rows of icons serving as quick links to sites the user commonly visits, or that the user has chosen to pin to the top sites list in order to have quick access to them.
... each site is represented by an icon and, below it, a name for the site.
... while both of these can be edited by the user, you may wish to ensure that your site provides a good icon to use in places like this.
...And 21 more matches

Index - Archive of obsolete content
this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages.
... 147 icon xul attributes, xul reference no summary!
... 148 iconsize toolbar, xul, xul attribute no summary!
...And 17 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
mac os x os x lion missing toolbar button icons due to firefox bug 679708 and bug 702558, some toolbar buttons icons may be missing on firefox 8 and later running on mac os x lion.
... in order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows.
...the common cause of this is style rules that reference [iconsize="small"] without excluding [mode="text"].
...And 14 more matches

Work with animations - Firefox Developer Tools
the box below contains a grayscale icon, representing firefox developer edition.
... if you click the icon, it enlarges and changes to color, and the name of the browser appears.
... click the icon again to reverse the effect.
...And 13 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
link link link icon icon representing the current document.
... values if there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon.
... if several icons are equally appropriate, the last one is used.
...And 13 more matches

Install Manifests - Archive of obsolete content
examples <em:homepageurl>https://www.example.com/</em:homepageurl> iconurl a chrome:// url to an icon to display in the add-ons list.
... the icon will be displayed at 32x32 in firefox 3.6 and lower.
... in firefox 4.0 and later the icon can be up to 48x48 pixels in size.
...And 12 more matches

Theme changes in Firefox 4 - Archive of obsolete content
controlling the actual icon size used by add-on toolbar buttons the iconsize attribute of the browser's toolbar elements now has a different default value on each toolbar independently.
... the iconsize attribute of the toolbox element in the main browser window (#navigator-toolbox) still reflects the user preference in the toolbar customization palette.
... use of the iconsize attribute on toolbar elements add-ons use the iconsize attribute to determine which icon they should display when a button is placed in a specific toolbar.
...And 12 more matches

Video and Audio APIs - Learn web development
you'll see a number of features; the html is dominated by the video player and its controls: <div class="player"> <video controls> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div></div> <span aria-label="timer">00:00</span> </div> <button class="rwd" data-icon="b" aria-label="rewind"></button> <button class="fwd" data-icon="f" aria-label="fast forward"></button> </div> </div> the whole player is wrapped ...
... each <button> has a class name, a data-icon attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an aria-label attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags.
... next, let's look at our button icons: @font-face { font-family: 'heydingscontrolsregular'; src: url('fonts/heydings_controls-webfont.eot'); src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/heydings_controls-webfont.woff') format('woff'), url('fonts/heydings_controls-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } button:befor...
...And 12 more matches

package.json - Archive of obsolete content
some of its entries, such as icon, name, and description, have direct analogues in the install manifest format, and entries from package.json are written into the install manifest when the add-on is built using jpm xpi.
... icon the path to an image file containing the icon for the add-on.
... optional: you can have no icon field in package.json and put your icon named "icon.png" in the root directory of your add-on.
...And 11 more matches

Finishing the Component
the interface that we need for this project is something called nsicontentpolicy.
...(for weblock, all you need are the headers for nsicontentpolicy and the nsicontentpolicy.idl.) then, using the same steps you used to create the weblock.h, create a header from this idl file using the xpidl compiler.
... once you have these interface and header files, you can modify the weblock class to implement the nsicontentpolicy interface.
...And 11 more matches

nsIAnnotationService
expire_months 3 something that the user will be interested in seeing in their history like favicons.
... the annotation "favicon" is special.
... favicons are stored in the favicon service, but are special cased in the protocol handler so they look like annotations.
...And 11 more matches

Image file type and format guide - Web media technologies
browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp chrome, edge, firefox, internet explorer, opera, safari gif graphics interchange format image/gif .gif chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable...
...as of july 7, 2004, all relevant patents have expired and the gif format may be used freely ico (microsoft windows icon) the ico (microsoft windows icon) file format was designed by microsoft for desktop icons of windows systems.
... however, early versions of internet explorer introduced the ability for a web site to provide a ico file named favicon.ico in a web site's root directory to specify a favicon — an icon to be displayed in the favorites menu, and other places where an iconic representation of the site would be useful.
...And 11 more matches

What’s in the head? Metadata in HTML - Learn web development
it contains information such as the page <title>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup.
...for example, if you try bookmarking the page (bookmarks > bookmark this page or the star icon in the url bar in firefox), you will see the <title> contents filled in as the suggested bookmark name.
...for example: <meta name="twitter:title" content="mozilla developer network"> adding custom icons to your site to further enrich your site design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.
...And 10 more matches

Network request list - Firefox Developer Tools
the mouse pointer changes to a resize icon when you move it over the border of a column.
... there's an icon next to the domain that gives you extra information about the security status of that request.
... see security icons.
...And 10 more matches

In-Depth - Archive of obsolete content
click on the inspect icon and then click on the back button in the browser window.
...this is the portion of the icon with only the image.
...click the icon located above the dom information and choose css style rules.
...And 9 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
...for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked.
... these provide useful hints to allow the browser to choose the most appropriate icon available.
...And 9 more matches

Add to Home screen - Progressive web apps (PWAs)
part of this is the simple gesture of accessing an app by tapping its icon on your home screen, and then having it appear neatly in its own window.
...you'll see fox pictures, but more important, you'll see a "home" icon with a plus (+) icon inside it — this is the "add to home screen" icon displayed for any site that has the necessary features in place.
... if you choose not to add it to your home screen at this point, you can do so later using the add to home screen icon in the main chrome menu.
...And 9 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
you can even display icons in menus by adding class="menuitem-iconic" to a menuitem element, along with a src attribute that gives an image uri.
... figure 7: menu items with icons executing commands when selecting menu items much like dynamic html, event handlers are used to execute a command when a menu item is selected.
...to show one with an icon as shown in figure 8, define an image's uri as the value for the image attribute.
...And 8 more matches

Deploying XULRunner - Archive of obsolete content
in the end, most users are afraid of links that don't have a pretty icon so you may want to have a look at the branding section of xulrunner tips.
...additional application files such as icons, etc myapplicationname.exe (this is the "stub executable"...
...here's how the entire application bundle looks: myapp.app/ contents/ info.plist pkginfo resources/ application.ini app_icon.icns components/ ...
...And 8 more matches

Build your own function - Learn web development
the alert function is limited: you can alter the message, but you can't easily vary anything else, such as the color, icon, or anything else.
...this one is going to involve slightly more work — we are going to set it so that depending on what the msgtype parameter is set to, the function will display a different icon and a different background color.
... first of all, download the icons needed for this exercise (warning and chat) from github.
...And 8 more matches

DevTools API - Firefox Developer Tools
a definition is a js light object that exposes different information about the tool (like its name and its icon), and a build method that will be used later-on to start an instance of this tool.
...if undefined the icon should be specified.
...default: devtools.{id}.enabled icon string, optional.
...And 8 more matches

How to make PWAs installable - Progressive web apps (PWAs)
requirements to make the web site installable, it needs the following things in place: a web manifest, with the correct fields filled in the web site to be served from a secure (https) domain an icon to represent the app on the device a service worker registered, to allow the app to work offline (this is required only by chrome for android currently) currently, only the chromium-based browsers such as chrome, edge, and samsung internet require the service worker.
...it contains useful information, such as the app’s title, paths to different-sized icons that can be used to represent the app on an os (such as an icon on the home screen, an entry in the start menu, or an icon on the desktop), and a background color to use in loading or splash screens.
... the content of the file looks like this: { "name": "js13kgames progressive web app", "short_name": "js13kpwa", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, // ...
...And 8 more matches

Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
nsiuricontentlistener implementations we try to find one of these which can handle data of the type we're looking at (that is, it can give us an nsistreamlistener to pump data into).
... most often, the one we find is nsdsuricontentlistener, which corresponds to a docshell and handles most of the data types that mozilla handles internally.
...ce" coords="527,305,839,339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="683,467,807,527" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="371,71,635,185" href="#nsdocumentopeninfo"> <area alt="necko" coords="721,113,821,157" href="#necko"> <area alt="nsuriloader" coords="23,335,215,455" href="#nsuriloader"> <area coords="227,515,485,575" href="#nsiuricontentlistener"> <area alt="nsdocshell" coords="47,83,203,153" href="#nsdocshell"></map> this block diagram is out of date as of january 2012 with regard to some minor control flow shuffling in nsuriloader.
...And 7 more matches

Venkman Introduction - Archive of obsolete content
the toolbar contains icons for stop, continue, step over, step into, step out, profile, and pretty print commands.
...file names are displayed after a color coded, single letter icon representing the file extension.
... figure 6 shows the table of icon and file types.
...And 7 more matches

MenuItems - Archive of obsolete content
adding icons to menu items an icon may be added to a menu item using the image attribute.
... the icon will appear to the left of the menuitem label.
... in addition to the image, a special class "menuitem-iconic" must be used on the menuitem to indicate that an icon is expected.
...And 7 more matches

CustomizableUI.jsm
.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the html window of the currently selected tab thiswindowsselectedtabswindow.alert('alert from html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); giving the button an icon non-style sheet method the style sheet method (below) is one way to add an icon.
... the other way is to watch for when your widget is dropped into an area, and give an appropriate icon.
... var mywidgetlistener = { onwidgetadded: function(awidgetid, aarea, aposition) { console.log('a widget moved to an area, arguments:', arguments); if (awidgetid != 'noida') { return } console.log('my widget moved'); var useicon; if (aarea == customizableui.area_panel) { useicon = 'chrome://branding/content/icon32.png'; } else { useicon = 'chrome://branding/content/icon16.png'; } var myinstances = customizableui.getwidget('noida').instances; for (var i=0; i<myinstances.length; i++) { myinstances[i].node.setattribute('image', useico...
...And 7 more matches

dev/panel - Archive of obsolete content
you can use the class utility function: const { panel } = require("dev/panel"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool", icon: "./my-devtool.png", url: "./my-devtool.html", setup: function(options) { // my setup goes here }, dispose: function() { // my teardown goes here }, onready: function() { // i can send messages to // the panel document here } }); alternatively, you can use the extend function: const { extend } = require("sdk/core/heritage"); function mypanel() {}; mypanel.protot...
... mandatory icon string the icon to display in the toolbox toolbar, specified as a resource:// url pointing to an icon file, typically in your add-on's "data" directory.
... you can use the notation "./my-icon.png" as an alias for the url pointing to "data/my-icon.png".
...And 6 more matches

Building the WebLock UI
specifically, the user interface we create in this chapter will be overlaid into the statusbar of the browser component, where it will provide a small icon the user can click to access the web lock interface.
... weblock indicator in browser user interface package list the user interface described in this section is comprised of four files: weblockoverlay.xul is the file that defines the little status icon in the browser.
...like the secure page icon, the weblock icon that appears in the lower right corner of the browser should indicate whether the browser is currently locked or unlocked.
...And 6 more matches

Edit Shape Paths in CSS - Firefox Developer Tools
once you have selected your element, you should see the shape icon alongside any valid value, e.g.
... clicking the icon will cause the editor to highlight the shape.
... to deactivate the shape path editor click on the icon again, or select another element or a different editor.
...And 6 more matches

Examine and edit CSS - Firefox Developer Tools
a warning icon appears next to unsupported css properties or rules that have invalid values.
... highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector.
... inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked.
...And 6 more matches

Link types - HTML: Hypertext Markup Language
icon defines a resource for representing the page in the user interface, usually an icon (auditory or visual).
... in the browser, it is usually referred to as the favicon.
... if there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon.
...And 6 more matches

Porting the Library Detector - Archive of obsolete content
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.
...each test also contains a chrome:// url pointing to the icon associated with its library.
...And 5 more matches

image - Archive of obsolete content
attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image.
...nsertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes alert-icon class that adds an alert icon.
...this and the other icon classes may be used by image elements or other elements which can have an image.
...And 5 more matches

tabbrowser - Archive of obsolete content
werfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithflags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, sh...
... contentvieweredit type: nsicontentvieweredit this read-only property contains the nsicontentvieweredit which handles clipboard operations on the document.
... contentviewerfile type: nsicontentviewerfile reference to the nsicontentviewerfile interface for the document.
...And 5 more matches

Index
13 autoconfig: how to create a configuration file autoconfiguration, thunderbird authoritative definition 14 autoconfiguration in thunderbird moved to autoconfiguration 15 buddy icons in mail seth spitzer mozilla is now able to show icons in the message header area and the addressbook card pane.
... for the message pane, the icon we will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for sender email address>.gif when trying to determine the screenname for the sender, we search the addressbook that we are using for collection.
... (see this document for info about that.) for the addressbook card pane, the icon will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for card>.gif if aim.session.screenname is not set, the icon will not appear.
...And 5 more matches

Tips - Firefox Developer Tools
click the "ev" icon besides a node to see all event listeners attached to it.
... in the rules view: click the inspector icon () next to any selector to highlight all elements that match it.
... click the inspector icon () next to the element{} rule to lock the highlighter on the current element.
...And 5 more matches

Installing and uninstalling web apps - Progressive web apps (PWAs)
this makes it simple for a user to use a gesture to access an app by tapping or clicking its icon.
... unfortunately, there isn't a standard for icons and symbols used for operations such as this.
... firefox for android on an android device using firefox, you'll see a "home" icon with a plus (+) icon inside it—this is the "add to home screen" icon displayed for any site that has the necessary features in place.
...And 5 more matches

widget - Archive of obsolete content
they can be simple icons or complex web pages.
... for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-icon", label: "my mozilla widget", contenturl: "http://www.mozilla.org/favicon.ico" }); you can make contenturl point to an html or icon file which you have packaged inside your add-on.
... the widget's content is specified using html like this: <html> <body> <img src="play.png" id="play-button"> <img src="pause.png" id="pause-button"> <img src="stop.png" id="stop-button"> </body> </html> we just include three icons, and assign an id to each one.
...And 4 more matches

Adding a Button to the Toolbar - Archive of obsolete content
create a directory called "data", mkdir data and save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png then open the file called "index.js" in the root of your addon directory and add the following code to it: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, ...
... specifying the icon the icon property may specify a single icon or a collection of icons in different sizes, as in the example above.
... if you specify a collection of icons in different sizes the browser will automatically choose the best fit for the screen resolution and the place in the browser ui that hosts the button.
...And 4 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
download the files icon.png and icon-small.png from the resources website and place them appropriately.
...lines 1–3 define the icon image to use with full-sized icons, and lines 4–6 define the icon image to use when small toolbar icons have been selected.
... listing 12: content for overlay.css #helloworldbutton { list-style-image: url(chrome://helloworld/skin/icon.png); } toolbar[iconsize="small"] #helloworldbutton { list-style-image: url(chrome://helloworld/skin/icon-small.png); } operations check since we have edited the chrome manifest, as we did in phase 3, we need to relaunch firefox.
...And 4 more matches

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding.
... let button = doc.createelement("toolbarbutton"); button.setattribute("id", button_id); button.setattribute("label", "replace bookmark"); button.setattribute("class", "toolbarbutton-1 chromeclass-toolbar-additional"); button.setattribute("tooltiptext", "replace an existing bookmark"); button.style.liststyleimage = "url(" + icon + ")"; button.addeventlistener("command", main.action, false); toolbox.palette.appendchild(button); this code is thanks to dgutov and is seen in full context at his repository here at github: dgutov / bmreplace / bootstrap.js.
... styling the button most toolbar buttons have icons.
...And 4 more matches

Creating a Skin - Archive of obsolete content
adding toolbar icons it is somewhat difficult to distinguish the buttons on the toolbar from the commands on the menu.
... we could add some icons to the buttons to make them clearer.
... mozilla composer provides some icons for open and save buttons, which we'll just use here to save time.
...And 4 more matches

Multiple Firefox profiles
using the profiles windows if you want to have the profile manager to pop up each time you start firefox, so you can choose a profile, you will need to edit the "target" of the launch icon.
... to do this: right-click the icon and choose "properties".
... now whenever you double click that icon, the profile manager should appear, allowing you to choose which profile you'd like to use.
...And 4 more matches

Using popup notifications
in addition, notifications can be dismissed and recalled by clicking anywhere outside the notification, then clicking on the notification icon to bring it back again.
... this notification looks like this: that's not very pretty; where's the icon?
... adding an icon to your notification adding an icon to a notification is simple.
...And 4 more matches

Console messages - Firefox Developer Tools
this is not shown by default: you can opt to see timestamps by selecting show timestamps in the console settings menu (gear icon in the console toolbar).
... icon not all console messages contain icons.
... the following icons may be used: informational message warning error blocked; for network messages in addition, a disclosure triangle indicates that further information is available; clicking it displays or collapses that information.
...And 4 more matches

HTMLImageElement.alt - Web APIs
if the image doesn't require a fallback (such as for an image which is simply decorative or an advisory icon of minimal importance), you may specify an empty string ("").
... for example, in the snippet of html below, a toolbar which uses icon images as link labels provides alt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used.
... <li class="toolbar" aria-role="toolbar"> <a href="songs.html" aria-role="button"><img src="songicon.svg" alt="songs"</a> <a href="albums.html" aria-role="button"><img src="albumicon.svg" alt="albums"</a> <a href="artists.html" aria-role="button"><img src="artisticon.svg" alt="artists"</a> <a href="playlists.html" aria-role="button"><img src="playlisticon.svg" alt="playlists"</a> </li> images containining diagrams or maps when an image contains information presented as a diagram, chart, graph, or map, the alt text should provide the same information, at least in summary form.
...And 4 more matches

Key Values - Web APIs
keyboardevent.key value description virtual keycode windows mac linux android "launchcalculator" [5] the calculator key, often labeled with an icon.
...often labeled with an icon.
...often labeled with an icon.
...And 4 more matches

OpenSearch description format
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <inputencoding>[utf-8]</inputencoding> <image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</image> <url type="text/html" template="[searchurl]"> <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:searchform>[https://example.com/search]</moz:searchform>...
... image uri of an icon for the search engine.
... when possible, include a 16×16 image of type image/x-icon (such as /favicon.ico) and a 64×64 image of type image/jpeg or image/png.
...And 4 more matches

Getting Started (jpm) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.
... next, create a directory called "data" in your add-on's root, mkdir data and save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png back at the command prompt, type: jpm run this is the jpm command to run a new instance of firefox with your add-on installed.
...for example, in ubuntu: jpm run -b /usr/bin/firefox when firefox launches, in the top-right corner of the browser you'll see an icon with the firefox logo.
...And 3 more matches

Getting started (cfx) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file.
... next, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png back at the command prompt, type: cfx run this is the sdk command to run a new instance of firefox with your add-on installed.
... when firefox launches, in the top-right corner of the browser you'll see an icon with the firefox logo.
...And 3 more matches

Modifying the Page Hosted by a Tab - Archive of obsolete content
here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory.
... you could download this icon: .
... this add-on creates a button with mozilla favicon as an icon.
...And 3 more matches

Installing Extensions and Themes From Web Pages - Archive of obsolete content
web script example <script type="application/javascript"> <!-- function install (aevent) { for (var a = aevent.target; a.href === undefined;) a = a.parentnode; var params = { "foo": { url: aevent.target.href, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.example.com/foo.xpi" iconurl="http://www.example.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d40770b326a13" onclick="return install...
... the install first creates a parameter block: var params = { "foo": { url: aevent.target.href, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } }; this specifies the display name (foo) for use in the confirmation dialog, the url to the extension (which is the link href, recall), the icon url to display in the confirmation dialog, a hash of the xpi file contents (to protect against corrupt...
...you could also use the old style parameter block ({ "foo": aevent.target.href }) if you wanted - and didn't have an icon to use for the confirmation dialog.
...And 3 more matches

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
classic.jar locations linux: /usr/lib/mozillafirefox/chrome/classic.jar or /usr/lib/firefox-*.*.*/chrome/classic.jar windows: \program files\mozilla firefox\chrome\classic.jar for mac os x: go to your applications folder control click application icon(firefox icon), choose show package contents.
... directories inside classic.jar is one directory, skin, as well as two files, preview.png and icon.png.
... skin\classic\browser browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
...And 3 more matches

Configuration - Archive of obsolete content
this identifier becomes the name of the profile folder where your webapp is installed: google.mail@your.name uri the uri/url of the web app: http://mail.google.com name the display name of the application: gmail icon the icon you want to use for the prism window when running this web app.
... the actual icon file should be stored in the webapp bundle.
...trayicon indicates that a system tray (notification area) icon should be displayed for the application on windows: yes or no.
...And 3 more matches

window - Archive of obsolete content
to set an icon for the window, create a platform-specific icon file <windowid>.ico and/or <windowid>.xpm and place or install these files into the <mozilla-directory>/chrome/icons/default/ directory.
...this allows you to have a different icon for each window.
... related elements prefwindow, dialog, dialogheader related topics user notes to change the icon to a window's title bar check this page on window icons.
...And 3 more matches

XULRunner tips - Archive of obsolete content
in addition, a branding content package must be registered to include the application logos: content branding chrome/branding/ 3 files should be provided in this folder: about.png, icon48.png and icon64.png.
... making windows display correct application name and icon when buttons are grouped by default, the task bar on windows might group windows belonging to the same process into one button to save space.
... this button is usually called "xulrunner.exe" and has xulrunner's icon.
...And 3 more matches

Practical positioning examples - Learn web development
a sliding hidden panel the final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.
... note: we've put a special question mark character into our html to act as our info icon — this represents the button that will be pressed to show/hide the panel.
... styling the form elements first let's deal with the form elements — add the following css in between your <style> tags: label[for="toggle"] { font-size: 3rem; position: absolute; top: 4px; right: 5px; z-index: 1; cursor: pointer; } input[type="checkbox"] { position: absolute; top: -100px; } the first rule styles the <label>; here we've: set a large font-size to make the icon nice and big.
...And 3 more matches

Embedding Tips
alternatively, implement a nsiuricontentlistener as described below.
... implement the nsiuricontentlistener interface, and register it with the appropriate web browser object via the nsiwebbrowser::parenturicontentlistener attribute.
... watch for changes in nsiuricontentlistener::onstarturiopen().
...And 3 more matches

The Places database
each entry has an optional reference to the moz_favicon table to identify the favicon of the page.
... favicon table moz_favicons: this contains a list of unique favicon uris and data.
...when no pages reference a favicon, the icon entry will be deleted.
...And 3 more matches

nsIBrowserSearchService
method overview void addengine(in astring engineurl, in long datatype, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcallback callback); void addenginewithdetails(in astring name, in astring iconurl, in astring alias, in astring description, in astring method, in astring url); void getdefaultengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearchengine engines); nsi...
...void addengine( in astring engineurl, in long datatype, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcallback callback ); parameters engineurl the url to the search engine's description file.
... iconurl a url string to an icon file to be used as the search engine's icon.
...And 3 more matches

XPCOM Interface Reference by grouping
browser autocomplete nsiautocompletecontroller nsiautocompleteinput nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomch...
... nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsijetpack nsijetpackservice offlinestorage nsiapplicationcache nsiapplicationcachechannel nsiapplicationcachecontai...
... nsiinprocesscontentframemessagemanager nsiscriptableio nsixpcscriptable future nsixmlhttprequestupload obsolete nsixmlrpcclient nsixmlrpcfault security auth nsiauthmodule nsiauthprompt nsiauthpromptprovider nsiauthpromptwrapper nsiasyncverifyredirectcallback content nsicontentpolicy credentials nsilogininfo nsiloginmanager using nsiloginmanager nsiloginmanagerstorage nsiloginmetainfo history nsiglobalhistory nsiglobalhistory2 nsiglobalhistory3 ssl nsibadcertlistener2 system action nsicancel...
...And 3 more matches

Introduction to DOM Inspector - Firefox Developer Tools
one common use of the dom inspector is to find the name and location of particular icon being used in the user interface, which is not an easy task otherwise.
...you can traverse the structure and go from the topmost parts parts of the dom tree to lower level nodes, such as the "search-go-button" icon that lets users perform a query using the selected search engine.
... in order to find out what the actual name of the file is being used to provide the search go icon, you can select the css rules viewer from this menu and see the various selectors and rules that have been applied.
...And 3 more matches

Privileged features - Web APIs
if minimizable is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable.
... dialog the dialog feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button.
... mozilla 1.2+ and netscape 7.1 will render the other menu system commands (in ff 1.0 and in ns 7.0x, the command system menu is not identified with the firefox/ns 7.0x icon on the left end of the titlebar: that's probably a bug.
...And 3 more matches

Color picker tool - CSS: Cascading Style Sheets
</div> </div> <div id="picker" class="block"> <div class="ui-color-picker" data-topic="picker" data-mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff;...
...nter; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #picker-samples .sample[data-active='true'] { border-color: #999; } #picker-samples .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; position: relative; box-shadow: inset 0px 0px 2px 0px #ddd; } #picker-samples #add-icon:hover { cursor: pointer; border-color: #ddd; box-shadow: inset 0px 0px 5px 0px #ccc; } #picker-samples #add-icon:before, #picker-samples #add-icon:after { content: ""; position: absolute; background-color: #eee; box-shadow: 0 0 1px 0 #eee; } #picker-samples #add-icon:...
...before { width: 70%; height: 16%; top: 42%; left: 15%; } #picker-samples #add-icon:after { width: 16%; height: 70%; top: 15%; left: 42%; } #picker-samples #add-icon:hover:before, #picker-samples #add-icon:hover:after { background-color: #ddd; box-shadow: 0 0 1px 0 #ddd; } /** * controls */ #controls { width: 110px; padding: 10px; float: right; } #controls #picker-switch { text-align: center; float: left; } #controls .icon { width: 48px; height: 48px; margin: 10px 0; background-repeat: no-repeat; background-position: center; border: 1px solid #ddd; display: table; float: left; } #controls .icon:hover { cursor: pointer; } #controls .picker-icon { background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample { margin-ri...
...And 3 more matches

panel - Archive of obsolete content
attaching panels to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); }...
... the add-on consists of six files: main.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes "main.js" is saved in your add-on's lib directory, and the other files go in your add-on's data directory: my-addon/ data/ get-text.js icon-16.png icon-32.png icon-64.png text-entry.html lib/ main.js the "main.js" looks like this: var data = require("sd...
...var textentrypanel = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
...And 2 more matches

Intercepting Page Loads - Archive of obsolete content
content policy finally, there is the option of implementing nsicontentpolicy.
... you can create an xpcom component that extends nsicontentpolicy and register it to the "content-policy" category using the nsicategorymanager.
... the nsicontentpolicy.shouldload() method is the only one in this interface that is really useful.
...And 2 more matches

Adding the structure - Archive of obsolete content
« previousnext » the ui for our extension is an icon in the status bar.
... <statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel class="statusbarpanel-iconic" id="security-button" onclick="browserpageinfo(null, 'securitytab')"/> </statusbar> the statusbar xul element defines a horizontal...
...the lock icon in mozilla that shows whether or not a loaded document was encrypted with ssl).
...And 2 more matches

Getting Started - Archive of obsolete content
skin\classic\communicator communicator contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
...skin\classic\mozapps mozapps contains all the styles and icons for the browser peripherals, such as the extension manager or update wizard.
... skin\classic\navigator navigator contains some icons and styles for all sm components.
...And 2 more matches

Prism - Archive of obsolete content
this includes the ability to create desktop shortcuts, to place the application icon in the tray or dock and to display pop-up notifications.
... shortcut creation ui: a dialog box lets the user specify attributes of the web app (name, uri, icon, shortcut locations).
... operating-system integration: binary components provided access to os-specific features like shortcut creation and dock/tray icons.
...And 2 more matches

Reading textual data - Archive of obsolete content
getservice(components.interfaces.nsiutf8converterservice); var data = utf8converter.converturispectoutf8 (str, "utf-8"); gecko 1.8 and newer reading strings starting with gecko 1.8 (seamonkey 1.0, firefox 1.5), you can use nsiconverterinputstream to read strings from a stream (nsiinputstream).
...using utf-8 for this example: */ "utf-8"; const replacementchar = components.interfaces.nsiconverterinputstream.default_replacement_character; var is = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); is.init(fis, charset, 1024, replacementchar); now you can read string from is: var str = {}; var numchars = is.readstring(4096, str); if (numchars != 0 /* eof */) var read_string = str.value; to read the entire stream and do something with the data: var str = {}; while (is.readstring(4096, str) != 0) { processdata(str.value); } don't forget to close the stream when you're done wi...
...the last (4th) argument to init specifies which character they get replaced with; nsiconverterinputstream.default_replacement_character is u+fffd replacement character, which is often a good choice.
...And 2 more matches

The life of an HTML HTTP request - Archive of obsolete content
[note: passes nswebshell.mobserver as nsistreamobserver and the webshell as nsicontentviewercontainer to the docloader.] (2) the document loader calls ns_openuri with the url to begin transfering the requested file.
...this factory is then told to create a nsicontentviewer.
... (5) the document (nshtmldocument) also creates a nsicontentsink (nshtmlcontentsink) and connects it to the parser and the document.
...And 2 more matches

The Implementation of the Application Object Model - Archive of obsolete content
examples of these interfaces include nsidomelement, nsidomnode, nsixmlcontent, and nsicontent.
...nsicontent, nsidomelement, and all of those interfaces mentioned at the beginning of this document are just that: interfaces!
...nsicontent, nsidomnode, nsidomelement, and nsixmlelement must be implemented at a minimum.
...And 2 more matches

button - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a sh...
... icon mozilla 1.8 type: string this attribute should be used to set the usage for common buttons.
... some platforms display these buttons with a small icon indicating their usage.
...And 2 more matches

<statusbarpanel> - Archive of obsolete content
this element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages.
... attributes crop, image, label properties image, label style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
... « xul reference home statusbarpanel-iconic use this class to have an image appear on the statusbarpanel.
...And 2 more matches

Visual typescript game engine - Game development
main dependency file // symbolic for now const plarformergameinfo = { name: "crypto-runner", title: "play platformer crypto runner!", }; // symbolic for now const gameslist: any[] = [ plarformergameinfo, ]; const master = new ioc(gameslist); const appicon: appicon = new appicon(master.get.browser); master.singlton(platformer, master.get.starter); console.log("platformer: ", master.get.platformer); master.get.platformer.attachappevents(); project structure builds/ is autogenerated.
... ├── package.json ├── package-lock.json ├── webpack.config.js ├── tsconfig.json ├── tslint.json ├── launch.json ├── workplace.code-workspace logo.png license ├── build/ (this is auto generated) | ├── externals/ | ├── templates/ | ├── imgs/ | ├── styles/ | | └── favicon.ico | ├── visualjs2.js | ├── app.html ├── src/ | ├── style/ | | ├── styles.css | ├── libs/ | | ├── class/ | | | ├── networking/ | | | | ├── rtc-multi-connection/ | | | | | ├── filebufferreader.js | | | | | ├── rtcmulticonnection2.js | | | | | ├── rtcmulticonnection3.
...├── drawi.ts | | | ├── global.ts | | | ├── visual-components.ts | | ├── multiplatform/ | | | ├── mobile/ | | | | ├── player-controls.ts | | | ├── global-event.ts | | ├── types/ | | | ├── global.ts | | ├── engine-config.ts | | ├── ioc.ts | | ├── starter.ts | ├── icon/ ...
...And 2 more matches

Introduction to automated testing - Learn web development
clicking on one of those browser icons will load up your choice of platform/device/browser — choose one now, and give it a try.
... note: the blue device icon next to some of the mobile device choices signals that you will be testing on a real device; choices without that icon will be run on an emulator.
... orientation (looks like a reload icon) — switch orientation between portrait and landscape.
...And 2 more matches

Creating localizable web applications
make icons flippable for rtl image 1.
... this icon should have its right-to-left equivalent, with the "؟" character which is used in some rtl languages, like arabic and persian (note that hebrew uses "?").
... you should then display the right icon depending on the locale.
...And 2 more matches

Gecko Roles
role_splitbutton represents a button on a toolbar that has a drop-down list icon directly adjacent to the button.
... role_desktop_icon an iconified internal frame in an role_desktop_pane.
...a pane that supports internal frames and iconified versions of those internal frames.
...And 2 more matches

Using the Places annotation service
the annotation service also provides special-case handling of favicons.
... when the annotation name is "favicon," the annotation protocol handler will pass the request through to the favicon service for handling.
... to get a favicon annotation uri for a given favicon, use nsifaviconservice.getfaviconlinkforicon and to get the favicon annotation uri for a given page, use nsifaviconservice.getfaviconlinkforpage.
...And 2 more matches

imgIDecoderObserver
1.0 66 introduced gecko 12.0 inherits from: imgicontainerobserver last changed in gecko 1.7 we make the distinction here between "load" and "decode" notifications.
... void ondiscard(in imgirequest arequest); void onimageisanimated(in imgirequest arequest); void onstartcontainer(in imgirequest arequest, in imgicontainer acontainer); void onstartdecode(in imgirequest arequest); void onstartframe(in imgirequest arequest, in unsigned long aframe); void onstartrequest(in imgirequest arequest); void onstopcontainer(in imgirequest arequest, in imgicontainer acontainer); void onstopdecode(in imgirequest arequest, in nsresult status, in wstring statusarg); voi...
...void onstartcontainer( in imgirequest arequest, in imgicontainer acontainer ); parameters arequest the request on which data is available, or null if being called for an imgidecoder object.
...And 2 more matches

nsIAccessibleRole
role_splitbutton 62 represents a button on a toolbar that has a drop-down list icon directly adjacent to the button.
... role_desktop_icon 70 an iconified internal frame in an role_desktop_pane.
...a pane that supports internal frames and iconified versions of those internal frames.
...And 2 more matches

nsINavHistoryResultNode
icon autf8string this uri can be used as an image source uri and will give you the favicon for the page.
... it is not the actual uri of the favicon, but, rather, is something that will resolve to the actual image.
... in most cases, this is an annotation uri that will query the favicon service.
...And 2 more matches

nsIScriptError
66 introduced gecko 1.0 inherits from: nsiconsolemessage last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/scripterror;1.
... note: nsiconsolemessage.message will return the error formatted with file/line information.
... examples logging a message with additional information in this example nsiscripterror, which implements nsiconsolemessage, is used to log information to the console including information about the source file and line number of the error.
...And 2 more matches

Settings - Firefox Developer Tools
opening settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ...
... available toolbox buttons this group of checkboxes determines which tools get an icon in the toolbox's toolbar.
... as of firefox 62, if the option to "select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the settings tab is displayed, even if the current page doesn't include any iframes.
...And 2 more matches

Index - Web APIs
2276 midiconnectionevent api, draft, interface, midi, midiconnectionevent, reference, web midi api the midiconnectionevent interface of the web midi api is the event passed to the onstatechange event of the midiaccess interface and the onstatechange event of the midiports interface.
... 2770 notification.icon api, dom, notification, notifications, property, reference, icon the icon read-only property of the notification interface contains the url of an icon to be displayed as part of the notification, as specified in the icon option of the notification() constructor.
... 2883 passwordcredential.iconurl api, credential management api, needsexample, passwordcredential, property, reference, credential management the iconurl read-only property of the passwordcredential interface returns a usvstring containing a url pointing to an image for an icon.
...And 2 more matches

Cognitive accessibility - Accessibility
consistent button labels, alternative text for icons, and iconography for similar interactions and so on, even on different sections of your site, help all your users.
... be consistent and predictable, and use norms while unlabeled iconography is not the most effective method of conveying information, keeping the use of the icons (and if labeled, their label text) consistent helps people to understand what the icon represents.
... include text along with use of icons, images, color and so on.
...And 2 more matches

Structural overview of progressive web apps - Progressive web apps (PWAs)
the file and folder hierarchy looks like this: app.js data/ games.js img/ favicon.ico fonts/ icons/ img/ bg.png js13kgames.png index.html js13kpwa.webmanifest style.css sw.js the html the html in the file index.html creates the structure of the app.
...s13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgame...
...; }); the randomnotification() function follows, rounding out the last of the code in the file: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, options); settimeout(randomnotification, 30000); } the service worker the last file we'll briefly look at here is the service worker, which is found in the file sw.js.
...And 2 more matches

Using shadow DOM - Web Components
this takes an image icon and a text string, and embeds the icon into the page.
... when the icon is focused, it displays the text in a pop up information box to provide further in-context information.
... creating the shadow root we first attach a shadow root to the custom element: // create a shadow root let shadow = this.attachshadow({mode: 'open'}); creating the shadow dom structure next, we use some dom manipulation to create the element's internal shadow dom structure: // create spans let wrapper = document.createelement('span'); wrapper.setattribute('class', 'wrapper'); let icon = document.createelement('span'); icon.setattribute('class', 'icon'); icon.setattribute('tabindex', 0); let info = document.createelement('span'); info.setattribute('class', 'info'); // take attribute content and put it inside the info span let text = this.getattribute('data-text'); info.textcontent = text; // insert icon let imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('...
...And 2 more matches

XUL Migration Guide - Archive of obsolete content
ndow/utils: function removeforwardbutton() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var forward = window.document.getelementbyid('forward-button'); var parent = window.document.getelementbyid('urlbar-container'); parent.removechild(forward); } require("sdk/ui/button/action").actionbutton({ id: "remove-forward-button", label: "remove forward button", icon: "./icon-16.png", onclick: removeforwardbutton }); there are more useful examples of this technique in the jetpack wiki's collection of third party modules.
...erwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require().
... getservice(ci.nsipromptservice); require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", onclick: function() { promptsvc.alert(null, "my add-on", "hello from xpcom"); } }); it's good practice to encapsulate code which uses xpcom by packaging it in its own module.
... getservice(ci.nsipromptservice); exports.alert = function(title, text) { promptsvc.alert(null, title, text); }; if we save this as "alert.js" in our add-on's lib directory, we can rewrite main.js to use it as follows: require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", onclick: function() { require("./alert").alert("my add-on", "hello from xpcom"); } }); one of the benefits of this is that we can control which parts of the add-on are granted chrome privileges, making it easier to review and secure the code.

context-menu - Archive of obsolete content
optional options: name type image string the item's icon, a string url.
... optional options: name type image string the menu's icon, a string url.
... image the item's icon, a string url.
... image the menu's icon, a string url.

notifications - Archive of obsolete content
} }); this one displays an icon that's stored in the add-on's data directory.
... var notifications = require("sdk/notifications"); var self = require("sdk/self"); var myiconurl = self.data.url("myicon.png"); notifications.notify({ text: "i have an icon!", iconurl: myiconurl }); from firefox 34, you can use "./myicon.png" as an alias for self.data.url("myicon.png").
... so you can rewrite the above code like this: var notifications = require("sdk/notifications"); var myiconurl = "./myicon.png"; notifications.notify({ text: "i have an icon!", iconurl: myiconurl }); this module depends on the underlying system's notification service.
... iconurl string the url of an icon to display inside the message.

tabs - Archive of obsolete content
the stylesheet is called "style.css" and is located in the add-on's "data" directory: var tabs = require("sdk/tabs"); var { attach, detach } = require('sdk/content/mod'); var { style } = require('sdk/stylesheet/style'); var { togglebutton } = require("sdk/ui/button/toggle"); var style = style({ uri: './style.css' }); var button = togglebutton({ id: "stylist", label: "stylist", icon: "./icon-16.png", onchange: function(state) { if (state.checked) { attach(style, tabs.activetab); } else { detach(style, tabs.activetab); } } }); private windows if your add-on has not opted into private browsing, then you won't see any tabs that are hosted by private browser windows.
... properties relating to the tab's content (for example: title, favicon, and url) will not be correct at this point.
... favicon the url of the favicon for the page currently loaded in the tab.
...from version 1.15, use the favicon module's getfavicon() function instead.

Implementing the widget - Archive of obsolete content
the widget will have two icons: one to display when it's active, one to display when it's inactive.
... so there are three files we'll need to create: the widget's content script and its two icons.
... the widget's icons you can copy the widget's icons from here: or, if you're feeling creative, you can make your own icons.
...you should see the widget in the add-on bar: left- and right-clicks should produce the appropriate debug output, and a left-click should also change the widget icon to signal that it is active.

Extension Etiquette - Archive of obsolete content
to maintain the default theme, avoid the use of an icon next to the menu items.
... theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that reloads and stops — use icons from the browser's theme.
... the icons makes the extension lighter, while providing more consistency, especially for users using different themes.
... extension icons unique icons are usually worth their download weight.

How to convert an overlay extension to restartless - Archive of obsolete content
step 8: window icons firefox does not scan the chrome/icons/default directory of restartless or extrationless extensions for window icons.
... if you are using custom window icons, they will need to be moved to %mozdir%/icons/default/ upon load of your extension.
...further, this is a generic location for icons and the icon may still be in use by a different profile.
... thus, you will probably want to use version numbers in the icon name (the id of the window for which the icon exists).

Specifying the appearance - Archive of obsolete content
now that we have defined a panel in which to display an icon, we use css to specify which icon to display.
... for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image: url("chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have ...
...make your own icons for the four states or use the following icons: no status , success , test failed and busted .
... if you restart mozilla now you should see the "no status" icon appear in the browser's status bar.

Menu - Archive of obsolete content
icon string the url of an icon to display in the menuitem.
... note that some environments, notably gnome 2.28, do not support menuitem icons either by default or at all.
...note that the submenu contains many items, including a menu separator: jetpack.menu.context.page.add({ label: "ice cream", icon: "http://example.com/ice-cream.png", menu: new jetpack.menu(["vanilla", "chocolate", "pistachio", null, "none"]), command: function (menuitem) jetpack.notifications.show(menuitem.label) }); add an item to the hyperlink context menu that tweets the link: jetpack.menu.context.page.on("a").add(function (context) { return { label: "tweet", command: function () jetpack.lib.twitter.statu...
...replace that item with a menu that lets the user search either google or wikipedia: jetpack.menu.context.page.replace("search", function (context) { return { label: "search for " + jetpack.selection.text, menu: new jetpack.menu([ { label: "google", icon: "http://www.google.com/favicon.ico", data: "http://www.google.com/search?q=" }, { label: "wikipedia", icon: "http://en.wikipedia.org/favicon.ico", data: "http://en.wikipedia.org/wiki/" } ]), command: function (menuitem) { context.window.location.href = menuitem.data + jetpack.selection.text; } }; }); create some div buttons (...

windowsShortcut - Archive of obsolete content
method of file object syntax int windowsshortcut( folderobject atarget, folderobject ashortcutpath, string adescription, folderobject aworkingpath, string aparams, folderobject aicon, number aiconid); parameters the windowsshortcut method has the following parameters: atarget a filespecobject representing the absolute path (including filename) to file that the shortcut will be created for.
... aicon a filespecobject representing the absolute path (including fiilename) to a file that contains icons.
... can be either .ico, .dll, .exe, or any other binary file that contains icons.
... aiconid index of the icon from aicon to use for this shortcut.

Custom toolbar button - Archive of obsolete content
w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://developer.mozilla.org/en/docs/custom_toolbar_button" em:iconurl="chrome://custombutton/content/icon.png" > <em:targetapplication><!-- firefox --> <description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minversion="1.4" em:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" em:minversion="1.5" ...
...paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton {-moz-image-region: rect( 0px 24px 24px 0px);} .custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);} [iconsize="small"] .custombutton {-moz-image-region: rect( 0px 40px 16px 24px);} [iconsize="small"] .custombutton:hover {-moz-image-region: rect(24px 40px 40px 24px);} there is nothing to customize.
...ensure that the name of the saved file is: icon.png explanation: this image is displayed in the application's extension manager window.
... optionally change: the button image or images the extension icon, icon.png the version and home page in your install.rdf file use a jar tool or zip tool to pack the contents of the directory.

XUL Questions and Answers - Archive of obsolete content
using the "icon" attribute on a button from xulplanet.com reference: this attribute should be used to set the usage for common buttons.
... some platforms display these buttons with a small icon indicating their usage.
...if you are using a button that matches one of these common usages, use the icon attribute to indicate this.
...d event is confirmed // or when the user switches tabs listobj.onlocationchange = function(aprogress, arequest, auri) { // do whatever you want to do return 0; } // for definitions of the remaining functions see xulplanet.com listobj.onprogresschange = function() { return 0 }; listobj.onstatuschange = function() { return 0 }; listobj.onsecuritychange = function() { return 0 }; listobj.onlinkiconavailable = function() { return 0 }; /* i use the progress listener to trap the end of a local html "template" file loading, and run xslt transormations.

menuitem - Archive of obsolete content
attributes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (acceler...
... note: the menuitem must have a class of menuitem-iconic for the image to appear.
..., insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes menuitem-iconic use this class to have an image appear on the menuitem.
... menuitem-non-iconic normally, menuitems have a margin to the left for an image or checkmark.

toolbar - Archive of obsolete content
attributes autohide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, height, iconsize, mode, toolbarname properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" accesskey="u" label="users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id...
... iconsize type: string indicates whether the toolbar should display large icons or small icons; this should be the string "large" or "small", respectively.
... these can vary from one toolbar to another within a given toolbox, whose iconsize attribute defines the default for all toolbars that don't specify an icon size.
... icons show only icons.

Mozilla release FAQ - Archive of obsolete content
rt a highly configurable appearance (courtesy of xul) publicly available source code :) http compression exists on more platforms mathml support (somewhat limited at the moment) a significantly faster rendering engine better html support (css 1 and partial css 2, dom 1 and partial dom 2) plug-in jvm support tabbed browsing message filtering an irc client why is the animated icon different?
...the icon that's distributed in the source will be used in mozilla.org distributions of mozilla.
... the first 3 tarballs had a simple sample logo, whereas the current source includes an icon from the community that won a contest.
...there are some important things that you can do if you don't code or care to document: ideas - if you have an idea for what you'd like to see in mozilla, post a feature request to bugzilla artwork - design new icons and other resources for mozilla use talkback - talkback-enabled builds help the community by letting mozilla.org members where in the code crashes occur.

Sunbird Theme Tutorial - Archive of obsolete content
for example, a theme can change the size and colour of the toolbar buttons, and provide different icons on the buttons.
...note: if you do not know where the program directory is, look at the properties of the shortcut or launcher icon that you use to start sunbird.
... making an icon and preview the themes window can display an icon and a preview graphic.
...make an image file 32 by 32 pixels, and save it as <tt>icon.png</tt> in your theme directory.

Styling links - Learn web development
hovering a link makes the mouse pointer change to a little hand icon.
...n color: #437a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", drawoutput); including icons on links a common practice is to include icons on links to provide more of an indicator as to what kind of content the link points to.
... let's look at a really simple example that adds an icon to external links (links that lead to other sites.) such an icon usually looks like a little arrow pointing out of a box — for this example, we'll use this great example from icons8.com.
... we also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes.

Advanced form styling - Learn web development
note: you may have noticed that in the search field, the "x" delete icon disappears when the input loses focus in edge and chrome, but stays put in safari.
...however, this seems to get rid of the icon with focus too, with no apparent way to get it back.
...first of all, the select's "arrow" icon that indicates it is a dropdown differs across browsers.
...to fix this in our example we first used our old friend appearance: none to get rid of the icon altogether: select { -webkit-appearance: none; appearance: none; } we then created our own icon using generated content.

Overview of Mozilla embedding APIs
contract-id: ns_uri_loader_contractid implemented interfaces: nsiuriloader related interfaces: nsiuricontentlistener nsunknowncontenttypehandler the unknowncontenttypehandler service is the last resort of the uriloader when no other content handler can be located.
...mplemented interfaces: nsiwebbrowser nsiwebnavigation nsiwebbrowsersetup nsiwebbrowserpersist nsiwebbrowserfind nsiwebbrowserprint nsiwebbrowserfocus nsibasewindow requestor interfaces: nsidomwindow nsidomdocument nsiwebprogress nsiclipboardcommands nsiprompt related interfaces: nsiprompt nsiwebbrowserchrome nsiwebbrowsersitewindow nsiwebprogresslistener nsicontextmenulistener nsiprintoptions overview: most of gecko's functionality is exposed through the nswebbrowser component.
...context menu notifications right-click context menu notifications are passed up to the embedding application through the nsicontextmenulistener interface.
...interface definition: nsiuricontentlistener interface status...

PopupNotifications.jsm
if you specify null, the notification will be anchored to the popupnotification object's icon box.
... this anchorid must point to an element contained inside the popupnotification object's icon box (for firefox windows, the global popupnotifications object uses the notification-popup-box element).
... popupiconurl a string specifying the url of the image to be displayed in the popup.
... this is normally specified in css using list-style-image and the .popup-notification-icon[popupid=...] selector.

Reporting a Performance Problem
visit https://profiler.firefox.com/ click on "enable profiler menu button" the profiler toolbar button will show up in the top right of the url bar as a small stopwatch icon you can right-click on the button and remove it from the toolbar when you're done with it.
...recording can be done by clicking on the toolbar icon to open its panel.
...the toolbar icon turns blue when it is recording.
... press ctrl+shift+2 or click on the profiler toolbar icon in the top right and select 'capture'.

nsIDocShell
method overview void addsessionstorage(in nsiprincipal principal, in nsidomstorage storage); void addstate(in nsivariant adata, in domstring atitle, in domstring aurl, in boolean areplace); void beginrestore(in nsicontentviewer viewer, in boolean top); void createaboutblankcontentviewer(in nsiprincipal aprincipal); void createloadinfo(out nsidocshellloadinfo loadinfo); void detacheditorfromwindow(); violates the xpcom interface guidelines void finishrestore(); void firepagehidenotification(in boolean isunload); native code only!
... contentviewer nsicontentviewer content viewer that is currently loaded for this docshell.
... parenturicontentlistener nsiuricontentlistener uri content listener parent.
...void beginrestore( in nsicontentviewer viewer, in boolean top ); parameters viewer the content viewer whose document we are starting to load.

nsIFocusManager
changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) implemented by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidomwindow awindow); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only!
... void focusplugin(in nsicontent aplugin); native code only!
...void contentremoved( in nsidocument adocument, in nsicontent aelement ); parameters adocument aelement native code only!firedelayedevents fire any events that have been delayed due to synchronized actions.
...void focusplugin( in nsicontent aplugin ); parameters aplugin getfocusedelementforwindow() nsidomelement getfocusedelementforwindow( in nsidomwindow awindow, in prbool adeep, out nsidomwindow afocusedwindow ); parameters awindow if equal to the current value of focusedwindow, then the returned element will be the application-wide focused element (the value of focusedelement).

nsIHTMLEditor
inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring ...
...ong aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void removeinlineproperty(in nsiatom aproperty, in astring aattribute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelement); void setc...
... void addinsertionlistener( in nsicontentfilter infilter ); parameters infilter function which callers want called during insertion.
... void removeinsertionlistener( in nsicontentfilter infilter ); parameters infilter function which callers do not want called during insertion.

nsIWebappsSupport
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void installapplication(in wstring title, in wstring uri, in wstring iconuri, in wstring icondata); boolean isapplicationinstalled(in wstring uri); methods installapplication() this method installs a web application.
... void installapplication( in wstring title, in wstring uri, in wstring iconuri, in wstring icondata ); parameters title the user-friendly name of the application.
...iconuri the uri of icon of the web application.
... icondata a base64 encoded representation of the application's icon.

Flash Activation: Browser Comparison - Plugins
an icon also appears on the left side of the location bar.
... the user can click on the flash object or the location bar icon to activate flash: users have the choice to allow flash just for the current session, or to remember their choice: google chrome in-page ui is displayed when the site attempts to use flash without fallback content: a user can click the plugin element to show a prompt for allowing flash: if the site provides fallback content for an object element, chrome will display that content and will not prompt the user to enable flash.
... a user can click the information icon on the left side of the location bar on any site to open the site information and allow flash on that site: microsoft edge in-page ui is displayed when the site attempts to use flash.
... an icon also appears on the right side of the location bar.

UI Tour - Firefox Developer Tools
when a file is ignored, it has a small eye icon next to it in place of its regular icon.
...all child files acquired the eye icon, and the folder menu option changes to unignore files in this directory.
...all such files acquire the eye icon, and the menu option for that folder changes to unignore files outside this directory.
...when it displays a "play" icon, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
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.
... a target icon that when clicked immediately selects the html element that this grid entry relates to, inside the html pane.
... a color picker icon that allows you to change the primary color of the grid overlay.

The JavaScript input interpreter - Firefox Developer Tools
multi-line mode for multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press ctrl+b (windows/linux) or cmd+b (macos).
... to switch back to single-line mode, click the x icon at the top of the multi-line editing pane, or press ctrl+b (windows/linux) or cmd+b (macos).
... in multi-line mode, use the ⋀ and ⋁ icons in the editing panel's toolbar.
...you can also use the ⋀ and ⋁ icons in the expression search bar.

Web Console UI Tour - Firefox Developer Tools
toolbar the toolbar across the top contains a number of features: garbage can: click this icon to clear the contents of the console.
... funnel: click this icon to filter the messages that are displayed in the console.
... settings ("gear" menu): new in firefox 71, you can click the gear icon to access the new settings menu, where you can toggle the following features on and off: persist logs: when enabled, the console doesn't clear on page reload, or new page load.
... in firefox 71 onwards, there is a new "split pane" icon on the right hand side of the command line — clicking this will open the new console multi-line mode.

ContentIndex.add() - Web APIs
homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
... if icons images are not of image type.
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { con...
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; self.registration.index.add(item); specifications specification status comment unknownthe definition of 'add' in that specification.

<button>: The Button element - HTML: Hypertext Markup Language
example <button name="button">press me</button> accessibility concerns icon buttons buttons that only show an icon to represent do not have an accessible name.
... to give an icon button an accessible name, put text in the <button> element that concisely describes the button's functionality.
... however, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose.
... this is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses.

<input type="search"> - HTML: Hypertext Markup Language
the first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired.
...div> <input type="search" id="mysearch" name="q" placeholder="search the site..."> <button>search</button> </div> </form> you can see how the placeholder is rendered below: search form labels and accessibility one problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (this example shows a typical pattern).
... input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons.
... this was necessary because some input types on some browsers don't display icons placed directly after them very well.

<menuitem> - HTML: Hypertext Markup Language
a command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an indirect command whose behavior is defined by a separate element.
...may not be used within a menu item that also includes the attributes checked, disabled, icon, label, radiogroup or type.
... icon image url, used to provide a picture to represent the command.
... example html content <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.

Progressive web app structure - Progressive web apps (PWAs)
s13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgame...
... creates notifications that display a randomly-selected item from the games list: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, options); settimeout(randomnotification, 30000); } the service worker the last file we will quickly look at is the service worker: sw.js — it first imports data from the games.js file: self.importscripts('data/games.js'); next, it creates a list of all the files to be cached, both from the app shell and the content: var cache...
...name = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa...
.../icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); the next block installs the service worker, which then actually caches all the files contained in the above list: self.addeventlistener('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then(function(cache) { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); last of all, the service worker fetches content from the cache if it is available there, providing offline functionality: self.addeventlistener('fetch', function(e) { e.respondwith( caches.match(e.r...

Introduction to progressive web apps - Progressive web apps (PWAs)
you can install a native app so that it works offline, and users love tapping their icons to easily access their favorite apps, rather than navigating to it using a browser.
... a look and feel that is more integrated with the native platform—app icons on the home screen or app launcher, applications that automatically run in full screen mode, etc.
... the relevant web standard here is the web app manifest, which defines features of an app such as name, icon, splash screen, and theme colors in a json-formatted manifest file.
... installability a core part of the web app experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform.

Navigator.mozNotification - Archive of obsolete content
method overview notification createnotification(in domstring title, in domstring description, in domstring iconurl optional); methods createnotification() creates and returns a notification object that can be used to display the specified message with an optional url.
... notification createnotification( in domstring title, in domstring description, in domstring iconurloptional ); parameters title the notification title.
... iconurl optional a url identifying the image to display in the notification.

Reddit Example - Archive of obsolete content
this is the complete add-on script: var data = require("sdk/self").data; var button = require("sdk/ui/button/action").actionbutton({ id: "reddit-panel", label: "reddit panel", icon: "./icon-16.png", onclick: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, contenturl: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.url("jquery-2.1.0.min.js"), data.url("panel.js")] }); reddit_panel.port.on("click", function(url) { require("sdk/tabs").open(ur...
... to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-on's "data" directory.
... you could download this icon: .

simple-storage - Archive of obsolete content
for example, this add-on tries to store the urls of pages the user visits: var ss = require("sdk/simple-storage"); ss.storage.pages = []; require("sdk/tabs").on("ready", function(tab) { ss.storage.pages.push(tab.url); }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { console.log(ss.storage.pages); } }); but this isn't going to work, because it empties the array each time the add-on runs (for example, each time firefox is started).
...here's an add-on that adds three buttons to write, read, and delete a value: var ss = require("sdk/simple-storage"); require("sdk/ui/button/action").actionbutton({ id: "write", label: "write", icon: "./write.png", onclick: function() { ss.storage.value = 1; console.log("setting value"); } }); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { console.log(ss.storage.value); } }); require("sdk/ui/button/action").actionbutton({ id: "delete", label: "delete", icon: "./delete.png", onclick: funct...
...ion() { delete ss.storage.value; console.log("deleting value"); } }); if you run it, you'll see that after clicking "read" after clicking "delete" gives you the expected output: info: undefined note that to run this add-on you'll have to save icon files named "write.png", "read.png", and "delete.png" to the add-on's "data" directory.

ui - Archive of obsolete content
you give it an icon, a label, and a click handler: var ui = require("sdk/ui"); var action_button = ui.actionbutton({ id: "my-button", label: "action button!", icon: "./icon.png", onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar.
...so they have a checked property which is toggled when the user clicks the button, and the icon gets a "pressed" look when the button is checked.
...you initialize a toolbar with an array of buttons and frames: var ui = require("sdk/ui"); var { actionbutton } = require("sdk/ui/button/action"); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = ui.actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = ui.actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = ui.actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = ui.frame({ url: "./frame-player.html" }); var toolbar = ui.toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the con...

Display a Popup - Archive of obsolete content
the add-on consists of seven files: package.json: created when you run jpm init index.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.
... var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
...) { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png try it out: "index.js" is saved in the top level, and the other five files go in your add-on's data directory: my-addon/ data/ get-text.js icon-16.png icon-32.png icon-64.png text-entry.html index.js run the add-on, click the button, ...

List Open Tabs - Archive of obsolete content
the following add-on adds an action button that logs the urls of open tabs when the user clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-16.png".
... you can download the icon here: .
...the script adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.

Unit Testing - Archive of obsolete content
to show the module in use, edit the "index.js" file as follows: var base64 = require("./base64"); var button = require("sdk/ui/button/action").actionbutton({ id: "base64", label: "base64", icon: "./icon-16.png", onclick: function() { encoded = base64.btoa("hello"); console.log(encoded); decoded = base64.atob(encoded); console.log(decoded); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-ons "data" directory.
... you could download this icon: .
... at this point your add-on ought to look like this: /base64 /data icon-16.png package.json readme.md index.js base64.js /test test-base64.js now execute jpm --verbose test from the add-on's root directory.

Adding menus and submenus - Archive of obsolete content
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.
... menus with images to add an icon to a menu or menuitem, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the image attribute or the list-style-image css property.
... menu icons are typically 16px by 16px.

Updating addons broken by private browsing changes - Archive of obsolete content
if your code refers to any of the following interfaces: ff 15: nsidomstoragemanager ff 16: nsitransferable ff 18: imgicache moziasyncfavicons nsifaviconservice nsiwebbrowserpersist ff 19: nsicontentprefservice nsidownloadmanager nsidownload nsihttpauthmanager nsistricttransportsecurityservice ff 20: nsiprivatebrowsingservice nsirecentbadcertservice furthermore, if your code uses any of these common chrome apis: ff 19: saveurl saveinternal openlinkin ff 20: openbrowserwindow gprivatebrowsingui finally, if your code watches for ...
... moziasyncfavicons/nsifaviconservice: setandfetchfaviconforpage/setandloadfaviconforpage now take a required privacy status argument, either nsifaviconservice.favicon_load_private or nsifaviconservice.favicon_load_non_private.
... nsicontentprefservice: getpref, setpref, haspref, hascachedpref, removepref, removegroupedprefs, removeprefsbyname, getprefs, and getprefsbyname all take a required nsiloadcontext argument to indicate the privacy status of the pref in question.

Using content preferences - Archive of obsolete content
the content preferences service, implemented by nsicontentprefservice, offers functions for setting and retrieving preferences for specific sites or in the global preference space; global preferences are used whenever a site-specific preference isn't available.
...var iosvc = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var prefservice = components.classes["@mozilla.org/content-pref/service;1"] .getservice(components.interfaces.nsicontentprefservice); // create a uri object referencing the site to save a preference for var uri = iosvc.newuri("http://developer.mozilla.org/", null, null); // set the value of the "devmo.somesetting" preference to "foo".
...see also nsicontentprefservice nsicontentprefobserver tosource() (potentially useful for serializing objects for later use with eval()) ...

Tooltips - Archive of obsolete content
<tooltip id="iconic"> <image src="help.png"/> <label value="save a file to a remote site"/> </tooltip> <button label="save" tooltip="iconic"/> in this example, a tooltip with the id 'iconic' contains an image and a label.
...the value of the tooltip attribute should be set to the id of a tooltip element, in this case, 'iconic'.
...for example: <tooltip id="iconic" onpopupshowing="this.lastchild.value = document.tooltipnode.label;"/> the document.tooltipnode property of the document holds the element that the mouse is hovering over.

Complete - Archive of obsolete content
restart the application using the command line switch: -uilocale fr-fr (of course, if your application is already in french, specify en-us here to switch the extension to english.) notes: if you use a shortcut or launcher icon to start the application, then you can add the command line switch by editing the icon's properties.
...in this extension, the only things that depend on the theme are the icon images on the buttons and the css style rules.
...the allcustom directory contains the icon images and the css stylesheet.

XUL Changes for Firefox 1.5 - Archive of obsolete content
a set of icons will appear across the top of the dialog allowing the user to switch panels.
... button: icon property the icon property on a button may be used to set stock icons on a button, used on some platforms.
... for instance <button icon="help"> will create a button with a help icon.

listcell - Archive of obsolete content
by default it only contains text but iconic and checkbox listcells are also available.
... attributes crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
..., insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes listcell-iconic use this class to have an image appear on the listcell.

Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
default.ico and default.xpm - icons for your app on windows and linux.
...you will, however, need to change the name of the icon file in info.plist.in.
... and, of course you'll need to replace mccoy.icns with the icon file to be used by your app on os x.

Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
[setup] appname=my app appvername=my app 1.0 apppublisher=mark finkle apppublisherurl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appsupporturl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appupdatesurl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner defaultdirname={pf}\my app defaultgroupname=my app allownoicons=yes outputdir=..\build\output outputbasefilename=myapp-1.0-win32 ; setupiconfile= compression=lzma solidcompression=yes [languages] name: english; messagesfile: compiler:default.isl [components] name: main; description: my app; types: full compact custom; flags: fixed name: runtime; description: xul runner runtime; types: full custom [tasks] name: desktopicon; description: {cm:createdesktopic...
...on}; groupdescription: {cm:additionalicons}; flags: unchecked name: quicklaunchicon; description: {cm:createquicklaunchicon}; groupdescription: {cm:additionalicons}; flags: unchecked [files] source: c:\develop\xulrunnerinstaller\myapp\myapp.exe; destdir: {app}; components: main; flags: ignoreversion source: c:\develop\xulrunnerinstaller\myapp\application.ini; destdir: {app}; components: main; flags: ignoreversion source: c:\develop\xulrunnerinstaller\myapp\chrome\*; excludes: .svn; destdir: {app}\chrome; components: main; flags: ignoreversion recursesubdirs createallsubdirs source: c:\develop\xulrunnerinstaller\myapp\defaults\*; excludes: .svn; destdir: {app}\defaults; components: main; flags: ignoreversion recursesubdirs createallsubdirs source: c:\develop\xulrunnerinstaller\myapp\xulrunner\...
...*; destdir: {app}\xulrunner; components: runtime; flags: ignoreversion recursesubdirs createallsubdirs ; note: don't use "flags: ignoreversion" on any shared system files [icons] name: {group}\my app; filename: {app}\myapp.exe name: {group}\{cm:uninstallprogram,xul explorer}; filename: {uninstallexe} name: {userdesktop}\my app; filename: {app}\myapp.exe; tasks: desktopicon name: {userappdata}\microsoft\internet explorer\quick launch\my app; filename: {app}\myapp.exe; tasks: quicklaunchicon [run] filename: {app}\myapp.exe; description: {cm:launchprogram,my app}; onlybelowversion: 0,6; flags: nowait postinstall skipifsilent step 4: building an installer once your script is ready, start the inno setup compiler, load the script file, and compile it.

Windows and menus in XULRunner - Archive of obsolete content
when you launch your xul application, you’ll notice that xulrunner gives your windows a default icon (top left corner on windows).
... you’ll most likely want to specify your own icons.
... you can learn how to do it in the article window icons.

Syndicating content with RSS - Archive of obsolete content
linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon.
... it is recommended that you too use this icon when creating the special <a> link to your feed.
... the icon looks like the following: you can get more icons like this from feed icons.

Theme changes in Firefox 3 - Archive of obsolete content
the rule that's needed to show and hide the go button and other location bar icons is: #urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) , #urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button { visibility: collapse; } images to add add the following images: chrome://global/skin/icons/information-16.png used when presenting information notices.
... chrome://global/skin/icons/warning-16.png used when displaying warnings.
... image changes chrome://global/skin/icons/loading_16.gif was replaced with chrome://global/skin/icons/loading_16.png .

Building up a basic demo with PlayCanvas editor - Game development
now we can apply the colored material to the shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene.
... click diffuse, then click the color picker — give it an orange color (we used ff9500.) drag and drop the cylindermaterial icon onto the cylinder object on the sceene to apply that color.
... double click the script icon to launch the code editor.

HTML basics - Learn web development
take the <img> element that we already have in our html page: <img src="images/firefox-icon.png" alt="my test image"> this contains two attributes, but there is no closing </img> tag and no inner content.
...let's revisit the code we put into our index.html example (which we first met in the dealing with files article): <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="images/firefox-icon.png" alt="my test image"> </body> </html> here, we have the following: <!doctype html> — the doctype.
... images let's turn our attention to the <img> element again: <img src="images/firefox-icon.png" alt="my test image"> as we said before, it embeds an image into our page in the position it appears.

Third-party APIs - Learn web development
adding a custom marker adding a marker (icon) at a certain point on the map is easy — you just use the l.marker() method (which seems to be documented in the related leaflet.js docs).
... add the following code to your example, again inside window.onload: l.marker([53.480759, -2.242631], { icon: l.mapquest.icons.marker({ primarycolor: '#22407f', secondarycolor: '#3b5998', shadow: true, size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to display the marker, and an options object containing an icon property that defines the icon to display at that point.
... the icon is defined using an mapquest.icons.marker() method, which as you can see contains information such as color and size of marker.

Getting started with Svelte - Learn web development
your browser will display something like this: application structure the starter template comes with the following structure: moz-todo-svelte ├── readme.md ├── package.json ├── package-lock.json ├── rollup.config.js ├── .gitignore ├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ ├── global.css │ └── build │ ├── bundle.css │ ├── bundle.css.map │ ├── bundle.js │ └── bundle.js.map └── src ├── app.svelte └── main.js the contents are as follows: package.json and package-lock.json: contains information about the project that node.js/npm use...
... favicon.png: this is the favicon for your app.
... finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link rel='icon' type='image/png' href='/favicon.png'> <link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component.

Accessibility API cross-reference
definition <dd>, <dfn> <lbody> iconified version of an app (n/a - use either pushbutton or listitem) desktop_icon desktop_icon n/a a specific kind of a graphic - a diagram.
...note the reversed logic in some apis invisible visible visible aria-hidden hidden (boolean attribute) indicates whether the object is in an iconified or minimized state.
... minimized n/a iconified iconified can be expressed with aria-expanded marqueed n/a n/a 3rd state in a tri-state checkbox mixed n/a n/a aria-checked=mixed n/a must do something with control before leaving it n/a modal modal aria-modal=true edit control that can take multiple lines n/a multi_line multi_line aria-multiline=true can select more than one of the children multiselectable multiselectable multi_selectable aria-multiselectable=true currently off-screen offscreengrouping n/a n/a n/a indicates that every pixel is painted within the o...

Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterm...
...firefox will use the above search engine description to construct the following search url: http://search.yahoo.com/search?p=mozilla&ei=utf-8&fr=moz2 if the user clicks the magnifying glass icon in the search bar, or chooses the web search option in the tools menu when the search bar isn't visible, the browser will take them to http://search.yahoo.com/, the value of the <searchform> element.
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4...

Displaying Places information using views
the following stylesheet is optional and only applies styles and icons to the built-in tree view: <?xml-stylesheet href="chrome://browser/skin/places/places.css" ?> for examples of instantiating a tree view from javascript rather than xul, see programmatic generation of the built-in tree view.
...es and their corresponding nsinavhistoryresultnode properties: treecol id or anonid corresponding nsinavhistoryresultnode property title title url uri date time visitcount accesscount keyword * description * dateadded dateadded lastmodified lastmodified tags tags ** icon *keyword and description are looked up in the places database using the nsinavhistoryresultnode property itemid.
... **the title column (and only the title column) automatically receives the favicon referenced by the nsinavhistoryresultnode property icon.

Limitations of chrome scripts
nsicontentpolicy without the shim in multiprocess firefox, if you register the nsicontentpolicy in the chrome process then it will never see any attempts to load web content, because they happen in the content process.
...it transparently registers an nsicontentpolicy in the content process, whose shouldload just forwards to the chrome process.
... to make the shim unnecessary: define and register nsicontentpolicy in the content process.

Process scripts
for example, in multiprocess firefox, if you need to use nsicontentpolicy to register a content policy, you must do this in the content process.
...ocshell tree up to the top window and then retrieving its content message manager, as follows: function contentmmfromcontentwindow(window) { let tree = window.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidocshelltreeitem); let top = tree.sametyperoottreeitem; let iface = queryinterface(ci.nsidocshell).queryinterface(ci.nsiinterfacerequestor); return iface.getinterface(ci.nsicontentframemessagemanager); } this is intended for unprivileged pages running in a content process.
... if the above doesn't work try this: function contentmmfromcontentwindow_method2(acontentwindow) { return acontentwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidocshell) .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsicontentframemessagemanager); } ...

Using the Browser API
as in a traditional browser, this is a single button that acts as a reload button when the page has finished loading, and a stop button while the page is loading (each with a different icon displayed).
...when the mozbrowserloadend event fires, the latest page request has finished loading, and at this point we want to change the icon back to the reload icon (in this case we are just using a capital "r").
... back to the stop/reload button — updating the icon is nice, but we also need to update the functionality that is invoked when each icon is displayed.

HTML parser threading
references to dom nodes in tree ops are of type nsicontent** and are called content handles.
...only when the tree op executor executes a node creation tree op, the nsicontent* that points to the node gets written to the memory location pointed to by the nsicontent**.
...nodes created by tree ops are owned by the parser for the lifetime of the parser, so for refcounting purposes, the parser owns each nsicontent object it creates by one reference no matter how many copies of the content handle for the node exist inside the parser.

Localizing with Koala
there is also a tooltip that appears when you hover over the magnifying glass icon on the right side of the bar.
...this entity is used in the tooltip that appears when you hover over the magnifying glass icon in the search bar.
... click on any of the files to see more detail, including the exact list of missing (green "+" icon), obsolete and translated (white circle icon) entities.

Patches and pushes
<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" />*** <url type="text/html" method="get" template="http://search.yahoo.com/search"> <para...
... each plugin has an icon image which is linked within the xml file as an uri id.
... upload your plugins icon image to data kitchen to obtain its uri id and add to the xml file within the image tag.

History Service Design
each visit is associated with a favicon, to allow for better recognizability and groupable by common timeframes or domains.
...for this reason visits and favicons are added lazily on a timer.
...at the moment this is used when catching favicons or bookmarks for redirected pages.

Places Developer Guide
it encompasses history, bookmarks, tags, favicons, and annotations.
... var title = node.title; var url = node.uri; var visited = node.accesscount; var lastvisitedtimeinmicrosecs = node.time; var iconuri = node.icon; // is null if no favicon available } result.root.containeropen = false; querying history for redirects and from_visit results of type result_type_full_visit have information about the visit, such as the referring visit, and how the transition happened (typed, redirect, link, etc).
...these saved searches appear as folders in your bookmarks, with a special icon to signify their difference from normal folders.

Introduction to XPCOM for the DOM
here is a simple problem i encountered recently: in a member function of the nshtmlanchorelement class, i had to get a pointer to the nsicontent interface implemented by the nshtmlanchorelement object.
...i had to use the second solution: nscomptr<nsicontent> content = getter_addrefs(ns_static_cast(nsicontent*, this)); // or, if you want to do the refcounting yourself, nsicontent *content = ns_static_cast(nsicontent*, this); the second form should be used with care, and is recommended only for advanced xpcom'ers.
...the interface inheritance chain for nsihtmlcontent looks like this: nsisupports -> nsicontent -> nsistyledcontent -> nsixmlcontent -> nsihtmlcontent nsgenericelement has to implement all of the above interfaces, and all the real classes inheriting from nsgenericelement will automatically implement all those interfaces.

amIWebInstaller
ts last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview boolean installaddonsfromwebpage(in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, [optional] in amiinstallcallback acallback, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amimetype, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow.
...boolean installaddonsfromwebpage( in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, in amiinstallcallback acallback, optional in pruint32 ainstallcount optional ); parameters amimetype the mimetype for the add-ons.
... aicons the icons for the add-ons to be installed.

jsdIStackFrame
unique tag among all valid jsdicontext objects, useful as a hash key.
...retrieve the underlying context wrapped by this jsdicontext.
... executioncontext jsdicontext executon context.

nsIIOService
any of the content types defined in nsicontentpolicybase.idl.
...any of the content types defined in nsicontentpolicy.idl return value an nsichannel for the uri.
...any of the content types defined in nsicontentpolicy.

nsIInProcessContentFrameMessageManager
1.0 66 introduced gecko 2.0 inherits from: nsicontentframemessagemanager last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsicontent getownercontent(); violates the xpcom interface guidelines methods violates the xpcom interface guidelines getownercontent() nsicontent getownercontent(); parameters none.
... return value the nsicontent object representing the owner's content.
... see also content process event handling nsicontentframemessagemanager ...

nsINavHistoryResultObserver
state); void invalidatecontainer(in nsinavhistorycontainerresultnode acontainernode); void nodeannotationchanged(in nsinavhistoryresultnode anode, in autf8string aannoname); void nodedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); void nodeiconchanged(in nsinavhistoryresultnode anode); void nodeinserted(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode, in unsigned long anewindex); void nodekeywordchanged(in nsinavhistoryresultnode anode, in autf8string anewkeyword); void nodelastmodifiedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodemoved(in nsinavhistoryresultnode anode, in...
... nodeiconchanged() called right after a node's icon property has changed.
... void nodeiconchanged( in nsinavhistoryresultnode anode ); parameters anode the node whose icon has changed.

nsINavHistoryResultViewer
(in nsinavhistoryresultnode anode, in autf8string aannoname); void nodedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodelastaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); void nodeiconchanged(in nsinavhistoryresultnode anode); void nodekeywordchanged(in nsinavhistoryresultnode anode, in autf8string anewkeyword); void nodemoved(in nsinavhistoryresultnode anode, in nsinavhistorycontainerresultnode aoldparent, in unsigned long aoldindex, in nsinavhistorycontainerresultnode anewparent, in unsigned long anewindex); void nodetitlechanged(in nsinavhistoryr...
... nodeiconchanged() called right after the icon of a node has changed.
... void nodeiconchanged( in nsinavhistoryresultnode anode ); parameters anode the node whose icon has changed.

nsISHEntry
nsdocshelleditordataptr forgeteditordata(); violates the xpcom interface guidelines nsicontentviewer getanycontentviewer(out nsishentry ownerentry); void getscrollposition(out long x, out long y); void getviewerbounds(in nsintrect bounds); native code only!
... contentviewer nsicontentviewer content viewer, for fast restoration of presentation.
...nsicontentviewer getanycontentviewer( out nsishentry ownerentry ); parameters ownerentry return value getscrollposition() void getscrollposition( out long x, out long y ); parameters x y native code only!getviewerbounds saved position and dimensions of the content viewer; we must adjust the root view's widget accordingly if this has changed when the presentation is restored.

nsIUpdateItem
method overview void init(in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring targetappid); attributes attribute type description iconurl astring the url of the icon that can be shown for this item.
... void init( in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring targetappid ); parameters id the item's guid.
... iconurl the url of the icon that can be shown for the item.

nsIWebBrowser
the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive additional notifications from the browser object.
... parenturicontentlistener nsiuricontentlistener uri content listener parent.
... see also nsibasewindow nsicontextmenulistener nsidomwindow nsiembeddingsitewindow nsiinterfacerequestor nsishistorylistener nsitooltiplistener nsiuricontentlistener nsiweakreference nsiwebbrowserchrome nsiwebbrowserchromefocus nsiwebprogresslistener ...

nsIXULTemplateBuilder
lt, in nsidomnode aquerynode); void resultbindingchanged(in nsixultemplateresult aresult); nsixultemplateresult getresultforid(in astring aid); nsixultemplateresult getresultforcontent(in nsidomelement aelement); boolean hasgeneratedcontent(in nsirdfresource anode, in nsiatom atag); void addrulefilter(in nsidomnode arule, in nsixultemplaterulefilter afilter); [noscript] void init(in nsicontent aelement); [noscript] void createcontents(in nsicontent aelement, in boolean aforcecreation); void addlistener(in nsixulbuilderlistener alistener); void removelistener(in nsixulbuilderlistener alistener); attributes attribute type description root nsidomelement readonly: the root node in the dom to which this builder is attached.
...[noscript] void init( in nsicontent aelement ); parameters aelement the root element from which to derive the data.
...[noscript] void createcontents( in nsicontent aelement, in boolean aforcecreation ); parameters aelement the element whose contents need to be built.

XPCOM Interface Reference
toolkit)iaccessible2iaccessibleactioniaccessibleapplicationiaccessiblecomponentiaccessibleeditabletextiaccessiblehyperlinkiaccessiblehypertextiaccessibleimageiaccessiblerelationiaccessibletableiaccessibletable2iaccessibletablecelliaccessibletextiaccessiblevalueidispatchijsdebuggeramiinstallcallbackamiinstalltriggeramiwebinstallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentativecolorcallbackmozispellcheckingenginemozistorageaggregatefunctionmozistorageasyncstatementmozistoragebindingparamsmozistoragebind...
...sichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthesizernsiconsolelistenernsiconsolemessagensiconsoleservicensicontainerboxobjectnsicontentframemessagemanagernsicontentprefnsicontentprefcallback2nsicontentprefobservernsicontentprefservicensicontentprefservice2nsicontentsecuritypolicynsicontentsniffernsicontentviewnsicontentviewmanagernsicontentviewernsicontrollernsicontrollersnsiconverterinputstreamnsiconverteroutputstreamnsicookiensicookie2nsicookieacceptdi...
...tnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2nsiframeloadernsiframeloa...

XUL Overlays
the installation of a media plug-in, for example, may add new icons and menu items to the interface: in the navigatoroverlay.xul file or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wave" src="mavericks.ssp"/> <menuitem na...
...in the base file, the html image element points to a netscape gif icon: <html:img id="foo" src="netscapeimage.gif"/> in the overlay, an element with the same id attribute specifies a different image, and that image is superimposed on top of the original netscape image as part of the merge process: <html:img id="foo" src="mozillaimage.gif"/> when the base file references an overlay file which contains the html image element above, the new src attribute is superimpose...
...d over the original, and the mozilla icon replaces the netscape icon.

Use watchpoints - Firefox Developer Tools
choose break on, and then one of property set property get property get or set a watchpoint icon appears to the right of the property in the scopes pane.
... set watchpoint icons are blue, get watchpoint icons are reddish, and get or set watchpoint icons are dark yellow.
... click the watchpoint icon, or right-click and choose remove watchpoint.

Index - Firefox Developer Tools
arrays and objects are shown collapsed, and you can expand them using the "+" icons.
... 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 ...
... 125 open the debugger there are three ways to open the debugger: 126 pretty-print a minified file javascript to prettify a minified file, click the pretty print source icon () at the bottom of the source pane.

Basic operations - Firefox Developer Tools
taking a heap snapshot to take a snapshot of the heap, click the "take snapshot" button, or the camera icon on the left: the snapshot will occupy the large pane on the right-hand side.
... on the left, you'll see an entry for the new snapshot, including its timestamp, size, and controls to save or clear this snapshot: clearing a snapshot to remove a snapshot, click the "x" icon: saving and loading snapshots if you close the memory tool, all unsaved snapshots will be discarded.
... to create a diff, click the button that looks like a venn diagram next to the camera icon (before firefox 47, this looked like a "+/-" icon): you'll be prompted to select the snapshot to use as a baseline, then the snapshot to compare.

Network monitor toolbar - Firefox Developer Tools
(prior to firefox 77, this toolbar was arranged somewhat differently.) it provides: an icon to clear the network request list.
... a set of tool icons: pause (or resume) recording network log search the log request blocking an array of buttons to filter the network request list by type: by the content type of the response xhr requests websocket upgrades and messages (labeled ws) other requests a checkbox that allows you to disable caching.
... a second toolbar area at the bottom of the network monitor provides: an icon to launch performance analysis.

Network request details - Firefox Developer Tools
clicking the icon at the right-hand end of the toolbar closes the details pane and returns you to the list view.
... this includes: information about the request status: the response status code for the request; click the "?" icon to go to the reference page for the status code.
...(see referrer-policy for a description of possible values) blocking: if the request is to a site that is associated with a known tracker, an icon and a message are shown; otherwise, this field is not shown.

Animation inspector example: Web Animations API - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%...
...)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimation = icon.animate(iconkeyframeset, iconkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } if (e...
....target.id != "icon") { return; } if (firsttime) { iconanimation.play(); noteanimation.play(); firsttime = false; } else { iconanimation.reverse(); noteanimation.reverse(); } } document.addeventlistener("click", animatechannel); ...

Taking screenshots - Firefox Developer Tools
taking a screenshot of the page use the screenshot icon: to take a full-page screenshot of the current page.
... by default, the screenshot icon is not enabled.
... you'll now see the icon in the toolbar: click the icon to take a screenshot of the current page.

CustomElementRegistry.define() - Web APIs
// create a class for the element class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create spans var wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); var icon = document.createelement('span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info = document.createelement('span'); info.setattribute('class','info'); // take attribute content and put it inside the info span var text = this.getattribute('text'); info.textcontent = text; // insert icon var imgurl; if(this.hasattribute('img'))...
... { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } var img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); // create some css to apply to the shadow dom var style = document.createelement('style'); style.textcontent = '.wrapper {' + 'position: relative;' + '}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + 'border: 1px solid black;' + 'padding: 10px;' + 'background: white;' + 'border-radius: 10p...
... 'transition: 0.6s all;' + 'position: absolute;' + 'bottom: 20px;' + 'left: 10px;' + 'z-index: 3;' + '}' + 'img {' + 'width: 1.2rem' + '}' + '.icon:hover + .info, .icon:focus + .info {' + 'opacity: 1;' + '}'; // attach the created elements to the shadow dom shadow.appendchild(style); shadow.appendchild(wrapper); wrapper.appendchild(icon); wrapper.appendchild(info); } } // define the new element customelements.define('popup-info', popupinfo); <popup-info img="img...

HTMLCanvasElement.toBlob() - Web APIs
var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href = window.url.createobjecturl(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save toblob to...
... var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var r = new filereader(); r.onloadend = function () { // r.result contains the arraybuffer.
... cu.import('resource://gre/modules/osfile.jsm'); var writepath = os.path.join(os.constants.path.desktopdir, iconname + '.ico'); var promise = os.file.writeatomic(writepath, new uint8array(r.result), {tmppath:writepath + '.tmp'}); promise.then( function() { console.log('successfully wrote file'); }, function() { console.log('failure writing file') } ); }; r.readasarraybuffer(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); specifications specification status comment html living standardthe definition of 'htmlcanvaselement.toblob' in that specifica...

Notification.Notification() - Web APIs
icon: a usvstring containing the url of an icon to be displayed in the notification.
...the function is passed parameters to specify the body, icon, and title we want, and then it creates the necessary options object and triggers the notification by using the notification() constructor.
... function spawnnotification(thebody,theicon,thetitle) { var options = { body: thebody, icon: theicon } var n = new notification(thetitle,options); } specifications specification status comment notifications apithe definition of 'notification() constructor' in that specification.

Using the Notifications API - Web APIs
this constructor expects a title to display within the notification and some options to enhance the notification such as an icon or a text body.
... for example, in the to-do-list example we use the following snippet to create a notification when required (found inside the createnotification() function): var img = '/to-do-notifications/img/icon-128.png'; var text = 'hey!
... your task "' + title + '" is now overdue.'; var notification = new notification('to do list', { body: text, icon: img }); closing notifications used close() to remove a notification that is no longer relevant to the user (e.g.

PasswordCredential - Web APIs
passwordcredential.iconurl read only secure context a usvstring containing a url pointing to an image for an icon.
... examples var cred = new passwordcredential({ id: id, password: password, name: name, iconurl: iconurl }); navigator.credentials.store(cred) .then(function() { // do something else.
... samsung internet android full support 5.0iconurl experimentalchrome full support 52edge full support ≤79firefox ?

ServiceWorkerRegistration.showNotification() - Web APIs
icon: a usvstring containing the url of an icon to display with the action.
... dir : the direction of the notification; it can be auto, ltr or rtl icon: a usvstring containing the url of an image to be used as an icon by the notification.
...buzz!', icon: '../images/touch/chrome-touch-icon-192x192.png', vibrate: [200, 100, 200, 100, 200, 100, 200], tag: 'vibration-sample' }); }); } }); } to invoke the above function at an appropriate time, you could use the serviceworkerglobalscope.onnotificationclick event handler.

msthumbnailclick - Web APIs
the msthumbnailclick event occurs when a user clicks a button or thumbnail icon in the taskbar.
... example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnpl...
...ay = window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the taskbar window.external.mssitemodeshowthumbbar(); // call a javascript function when the button is pressed function onbuttonclicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extensions ...

font - CSS: Cascading Style Sheets
if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar.
... icon the system font used to label icons.
...<'font-family'> ] | caption | icon | menu | message-box | small-caption | status-barwhere <font-variant-css21> = [ normal | small-caps ] examples setting font properties /* set the font size to 12px and the line height to 14px.

Template literals (Template strings) - JavaScript
' icon-expander' : ' icon-collapser'); in es2015 with template literals and without nesting: const classes = `header ${ islargescreen() ?
...'icon-expander' : 'icon-collapser') }`; in es2015 with nested template literals: const classes = `header ${ islargescreen() ?
... '' : `icon-${item.iscollapsed ?

Web app manifests
pwa manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).
...click each one for more information about it: background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "s...
...this splashscreen is auto-generated from properties in the web app manifest, specifically: name background_color the icon in the icons array that is closest to 128dpi for the device.

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/ic...
...ons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; next, the links to images to be loaded along with the content from the data/games.js file are generated in the second array.
...the version number in the cache name is key to this: var cachename = 'js13kpwa-v1'; when this updates to v2, we can then add all of our files (including our new files) to a new cache: contenttocache.push('/pwa-examples/js13kpwa/icons/icon-32.png'); // ...

Graphic design for responsive sites - Progressive web apps (PWAs)
using fonts for icons another technique to consider is using web fonts for icons.
... text is infinitely scalable on the web, and you can also use css text properties to style your web font icons, such as text-shadow and color.
... making your own font file can be a bit fiddly, but there are a number of good icon font services available such as font awesome.

Using custom elements - Web Components
this takes an image icon and a text string, and embeds the icon into the page.
... when the icon is focused, it displays the text in a pop up information box to provide further in-context information.
... // create a shadow root this.attachshadow({mode: 'open'}); // sets and returns 'this.shadowroot' // create (nested) span elements const wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); const icon = wrapper.appendchild(document.createelement('span')); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); // insert icon from defined attribute or default icon const img = icon.appendchild(document.createelement('img')); img.src = this.hasattribute('img') ?

Working with Events - Archive of obsolete content
ent emitted by that object, and its argument will be the name of the event: var ui = require("sdk/ui"); var panels = require("sdk/panel"); var self = require("sdk/self"); var panel = panels.panel({ contenturl: self.data.url("panel.html") }); panel.on("*", function(e) { console.log("event " + e + " was emitted"); }); var button = ui.actionbutton({ id: "my-button", label: "my button", icon: "./icon-16.png", onclick: handleclick }); function handleclick(state) { panel.show({ position: button }); } this wildcard feature does not yet work for the tabs or windows modules.
...the listener loads https://developer.mozilla.org/: require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").open("https://developer.mozilla.org/"); } }); this is exactly equivalent to constructing the button and then calling the button's on() method: var button = require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png" }); button.on("click", function() { require("sdk/...

page-mod - Archive of obsolete content
the following add-on creates a button which, when clicked, highlights all the div elements in the document loaded into the active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-divs", label: "highlight divs", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'var divs = document.getelementsbytagname("div");' + 'for (var i = 0; i < divs.length; ++i) {' + 'divs[i].setattribute("style", "border: solid red 1px;");' + '}' }); } }); to run this example you'll also have to have an icon file named "icon-16.png" sa...
...you could use this icon: .

ui/toolbar - Archive of obsolete content
ggle buttons frames this add-on builds part of the user interface for a music player using action buttons for the controls and a frame to display art and the currently playing song: var { actionbutton } = require('sdk/ui/button/action'); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({ url: "./frame-player.html" }); var toolbar = toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content wind...
...this add-on creates a toolbar containing one button and a frame: var { actionbutton } = require('sdk/ui/button/action'); var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var button = actionbutton({ id: "my-button", label: "my-button", icon: "./my-button.png" }); var frame = new frame({ url: "./my-frame.html" }); var toolbar = toolbar({ title: "player", items: [button, frame] }); this add-on creates a toolbar with one frame, that's hidden initially, and that logs show and hide events: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); va...

jpmignore - Archive of obsolete content
for example: .* * !/data/** !/lib/** !/locale/** !/node_modules/** !/package.json !/icon.png !/icon64.png !/copying !/bootstrap.js !/install.rdf this would include all editor backup files and similar in the whitelisted subdirectories, to avoid that you can append another blacklist after the whitelist.
... this one would work for xemacs: .* * !/data/** !/lib/** !/locale/** !/node_modules/** !/package.json !/icon.png !/icon64.png !/copying !/bootstrap.js !/install.rdf *~ \#* ...

Add a Context Menu Item - Archive of obsolete content
this is a url pointing to a 16x16 icon that's displayed at the left side of the context menu item.
... var self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35.

Creating Reusable Modules - Archive of obsolete content
} return path; } require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, onclick: function() { console.log(md5file(promptforfile())); } }); this works , but index.js is now getting longer and its logic is harder to understand.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } exports.hashfile = md5file; index.js finally, update index.js to import these two new modules and use them: var filepicker = require("./filepicker.js"); var md5 = require("./md5.js"); require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png" }, onclick: function() { console.log(md5.hashfile(filepicker.promptforfile())); } }); distributing modules with jpm, we use npm as the package manager for sdk modules that don't ship inside firefox.

File I/O - Archive of obsolete content
createinstance(components.interfaces.nsiconverterinputstream); fstream.init(file, -1, 0, 0); cstream.init(fstream, "utf-8", 0, 0); // you can use another encoding here if you wish let (str = {}) { let read = 0; do { read = cstream.readstring(0xffffffff, str); // read as much as we can and put it in str.value data += str.value; } while (read != 0); } cstream.close(); // this closes fstream alert(data); reading line by line ...
... createinstance(components.interfaces.nsiconverteroutputstream); converter.init(fostream, "utf-8", 0, 0); converter.writestring(data); converter.close(); // this closes fostream note: the file status flags used in the nsifileoutputstream.init() function are documented in pr_open.

Listening to events in Firefox extensions - Archive of obsolete content
domlinkhandler the domlinkhandler object is called by the domlinkadded event in order to detect any rss feeds, site icons, or opensearch plugins for the web site.
...it is used to update the ui for many different reasons: update the progress bar and status messages as pages load turn on and off the throbber as pages load set the site icon when available update the address bar as the user navigates hide notification bars when appropriate as the user navigates apply the site zoom preferences to newly loading pages update the bookmarking star button ui update the identity display as the site's security changes tabsprogresslistener this object is a tabs progress listener and receives events for all browsers in the window.

Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
withpath('c:\\temp\\temp.txt'); var charset = 'shift_jis'; var filestream = components.classes['@mozilla.org/network/file-input-stream;1'] .createinstance(components.interfaces.nsifileinputstream); filestream.init(file, 1, 0, false); var converterstream = components.classes['@mozilla.org/intl/converter-input-stream;1'] .createinstance(components.interfaces.nsiconverterinputstream); converterstream.init(filestream, charset, filestream.available(), converterstream.default_replacement_character); var out = {}; converterstream.readstring(filestream.available(), out); var filecontents = out.value; converterstream.close(); filestream.close(); alert(filecontents); outputting text files fixme: not sure this example is...
...'c:\\temp\\temp.txt'); file.create(file.normal_file_type, 0666); var charset = 'euc-jp'; var filestream = components .classes['@mozilla.org/network/file-output-stream;1'] .createinstance(components.interfaces.nsifileoutputstream); filestream.init(file, 2, 0x200, false); var converterstream = components .classes['@mozilla.org/intl/converter-output-stream;1'] .createinstance(components.interfaces.nsiconverteroutputstream); converterstream.init(filestream, charset, string.length, components.interfaces.nsiconverterinputstream.default_replacement_character); converterstream.writestring(string); converterstream.close(); filestream.close(); character encoding conversion firefox's internal representation of all text is in unicode.

Extensions support in SeaMonkey 2 - Archive of obsolete content
- history menu popup bookmarksmenupopup menu_bookmarkspopup menu_bookmarkspopup bookmarks menu popup menu_toolspopup taskpopup taskpopup tools menu popup - windowpopup windowpopup window menu popup menu_helppopup helppopup helppopup help menu popup urlbar icons to display a button with a menupopup in the urlbar-icons for both firefox and seamonkey 2.0, use this code: <hbox id="urlbar-icons"> <image popup="myext-menu"/> </hbox> <window id="main-window"> <menupopup id="myext-menu"> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </window> instead of <h...
...box id="urlbar-icons"> <button type="menu"> <menupopup> <menuitem label="menuitem"/> <menuitem label="menuitem"/> <menuitem label="menuitem"/> </menupopup> </button> </hbox> technical note: the code that opens the url history popup just looks for any menupopup, so it goes wrong if you add your own.

Session store API - Archive of obsolete content
extension wants to be able to restore data when tabs are restored, you can install a listener like this: function myextensionhandlerestore(aevent) { var tab = event.originaltarget; /* the tab being restored */ var uri = tab.linkedbrowser.contentdocument.location; /* the tab's uri */ components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage("restoring tab: " + uri); }; document.addeventlistener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myextensionhandlerestore() with whatever you need to do when the tab is restored.
... in this example, nsiconsoleservice is used to display a message to the console.

Search Extension Tutorial (Draft) - Archive of obsolete content
cu.import("resource://gre/modules/services.jsm"); // the details of the engine to add const engine_details = { name: "example engine", iconurl: "data:image/png;base64,...", alias: "example-engine", description: "an example search engine", method: "get", // the http request method url: "https://www.example.com/?q=_searchterms_" }; // keep track of whether this is the first run.
... if (!services.search.getenginebyname(engine_details.name)) { services.search.addenginewithdetails.apply(services.search, ["name", "iconurl", "alias", "description", "method", "url"].map( function (k) engine_details[k])) } let engine = services.search.getenginebyname(engine_details.name); // if the engine is not hidden and this is the first run, move // it to the first position in the engine list and select it if (selectsearch && !engine.hidden) { services.search.moveengine(engine, 0);...

CSS3 - Archive of obsolete content
support for icons, defined by the css icon property simultaneously with the new icon value of the css content property.
... at risk: due to insufficient browser support, standardization of the icon property and the icon value may be postponed to css4.

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
function displayerror(title, msg) { log.debug(title + ": " + msg); alerts.showalertnotification("chrome://branding/content/icon48.png", title, msg); } firefox it's the same principles as for firefox as it was described above for thunderbir.
... 1 10:18 icons drwxr-xr-x 3 root root 4096 juil.

Conclusion - Archive of obsolete content
how would you use javascript to determine whether the tree is open or closed and css to style the icon accordingly?
... how could you modify the extension to load the tinderbox page when you click on the status icon?

Enabling the behavior - updating the status bar panel - Archive of obsolete content
function updatetinderboxstatus() { var icon = document.getelementbyid('tinderbox-status'); if (gxmlhttprequest.responsetext.match("ee0000")) icon.setattribute("status", "busted"); else if (gxmlhttprequest.responsetext.match("ffaa00")) icon.setattribute("status", "testfailed"); else if (gxmlhttprequest.responsetext.match("11dd11")) icon.setattribute("status", "success"); else icon.setattribute("status", ""); } updatetinderboxstatus() retrieves a reference to the statusbarpanel element then searches through the retrieved html document (stored in the responsetext property of the xmlhttprequest instance) for one of several color references.
...when it finds a color, it sets the panel's status attribute to the corresponding status, which causes the previously defined css rules to switch to the icon appropriate for that status.

Making it into a static overlay - Archive of obsolete content
?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an xml processing instruction that identifies the file as xml (all xul files need to include this).
... <statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel class="statusbarpanel-iconic" id="security-button" onclick="browserpageinfo(null, 'securitytab')"/> </statusbar> ...

Tinderbox - Archive of obsolete content
if any clients have failed to build, we will display a red icon that signifies a build failure; if all clients built successfully but some failed tests we will display an orange icon that signifies a test failure.
... only if all clients reported both successful builds and successful tests will we display a green icon that signifies all is well with the code.

Basics - Archive of obsolete content
methods show(titlestringbodystringiconstring)draws a notification box.
... titlethe head of the notification message.string bodythe messagestringfalse iconthe url of an .ico file.string jetpack.notifications.show("hello world");var mybody = " my first message body on jetpack";var myicon = "http://www.mozilla.com/favicon.ico";jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); class tabs in this class you can find information about the tabs in your firefox window.

Notifications - Archive of obsolete content
methods show(titlestring, [body as string] iconstring)draws a notification box.
... titlethe head of the notification message.string bodythe message itself.stringfalse iconthe url of an .ico file.string jetpack.notifications.show("hello world"); var mybody = " my first message body on jetpack"; var myicon = "http://www.mozilla.com/favicon.ico"; jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); ...

slideBar - Archive of obsolete content
jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
... iconhref oficon to show in the slidebaruri htmlhtml content for the featurehtml/xml urlurl to load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...

Bundles - Archive of obsolete content
the bundle can hold additional resources currently limited to: application ini settings application icon script for the application chrome, not the web content installing a bundle when prism opens a webapp bundle it will unpack it into the webapps/{webapp-id} folder.
.../ webapp.ini webapp.js webapp.css winnt/ webapp.css darwin/ webapp.css linux/ webapp.css [icon].ico [icon].png [icon].icns ...

New Skin Notes - Archive of obsolete content
direct external links have icons to differentiate them from internal links, so i think we'll just leave the internal/external links colours the same.
...--dria external link icons missing on ie version of skin.

Writing textual data - Archive of obsolete content
writing to a stream in gecko 1.8 (seamonkey 1.0, firefox 1.5), you can use nsiconverteroutputstream: var charset = "utf-8"; // can be any character encoding name that mozilla supports var os = components.classes["@mozilla.org/intl/converter-output-stream;1"] .createinstance(components.interfaces.nsiconverteroutputstream); // this assumes that fos is the nsioutputstream you want to write to os.init(fos, charset, 0, 0x0000); os.writestring("umlaute: \u00fc...
... versions before gecko 1.8 firefox 1.0.x, mozilla 1.7.x and older versions do not support nsiconverteroutputstream.

A XUL Bestiary - Archive of obsolete content
skin/ default/ navigator.css nav-icon.gif ...
... skin/ default/ navigator.css nav-icon.gif ...

appendNotification - Archive of obsolete content
if "" then an icon appropriate for the priority level is used.
... popup: null }; buttons.push(button2); //appendnotification( label , value , image (url) , priority , buttons, eventcallback ) notifybox.appendnotification("my notification text", "test notification unique id", "chrome://browser/content/aboutrobots-icon.png", notifybox.priority_info_high, buttons, testnotificationcallback); } ...

Menus - Archive of obsolete content
menuitems also support displaying shortcuts associated with the menuitem, as well as icons beside the label.
...for details about adding icons to menus, see adding icons to menu items.

Writing Skinnable XUL and CSS - Archive of obsolete content
it should only describe the icon.
...examples of overlays that should take place using the chrome registry include the security padlock icon and any messenger ui in the navigator window.

XML - Archive of obsolete content
when we say language, we mean that developers create a set of terms, orlexicon, and a relationship between these terms, or what some people call agrammar.
...it will consist of a lexicon of four terms: memo, to, from, body -- all of which fit together into a syntax represented in most xml circles as: <!element memo (from, to, body)> for developers accustomed to reading and using xml, this definition indicates that the root element "memo" is constituted by a "from" element, then a "to" element, then a "body" element.

browser - Archive of obsolete content
contentvieweredit type: nsicontentvieweredit this read-only property contains the nsicontentvieweredit which handles clipboard operations on the document.
... contentviewerfile type: nsicontentviewerfile reference to the nsicontentviewerfile interface for the document.

listitem - Archive of obsolete content
attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... listitem-iconic use this class to have an image appear on the listitem.

menu - Archive of obsolete content
celtext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuite...
... style classes menu-iconic use this class to have an image appear on the menu.

Debugging a XULRunner Application - Archive of obsolete content
with the red stop icon next to it).
... jsdump(str) (function defined below) will output str as a "message" with a speech bubble icon next to it: function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } for more information about the error console see the error console and browser console article.

Building a Theme - Archive of obsolete content
an example of the content within a typical xpi file for a theme: example.xpi: /install.rdf /chrome.manifest /preview.png /icon.png /chrome/ browser/ communicator/ global/ mozapps/ we'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your theme somewhere on your hard disk (e.g.
...the file icon.png is used as an icon in the same panel.

Making sure your theme works with RTL locales - Archive of obsolete content
example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
... toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.

Theme changes in Firefox 3.5 - Archive of obsolete content
under the autoscroll icon or the identity panel.
...to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([active="true"]) menubar>menu:nth-child(1n) { color:threedshadow } private browsing: show private browsing state by coloring the url bar, or by adding an icon to the toolbox/tabbrowserbar.

Scratchpad - Archive of obsolete content
usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "scratchpad".
...you'll see the autocomplete box, as shown below: the icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information.

Index - MDN Web Docs Glossary: Definitions of Web-related terms
142 favicon glossary, intro, favicon, user agent a favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.
... 401 screen reader accessibility, glossary, screen reader, voice over, voiceover screen readers are software applications that attempt to convey what is seen on a screen display in a non-visual way, usually as text to speech, but also into braille or sound icons.

HTML: A good basis for accessibility - Learn web development
empty alt attributes <h3> <img src="article-icon.png" alt=""> tyrannosaurus rex: the king of the dinosaurs </h3> there may be times where an image is included in a page's design, but its primary purpose is for visual decoration.
... link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.

HTML: A good basis for accessibility - Learn web development
empty alt attributes <h3> <img src="article-icon.png" alt=""> tyrannosaurus rex: the king of the dinosaurs </h3> there may be times where an image is included in a page's design, but its primary purpose is for visual decoration.
... link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.

Mobile accessibility - Learn web development
keeping menus accessible because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile.
... this is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".

Typesetting a community school homepage - Learn web development
starting point to get this assessment started, you should: go and grab the html and css files for the exercise, and the provided external link icon.
... make it so that external links have the external link icon inserted next to them.

The HTML5 input types - Learn web development
additionally, on devices with dynamic keyboards, the keyboard's enter key may read "search", or display a magnifying glass icon.
...note that the clear icon only appears if the field has a value, and, apart from safari, it is only displayed when the field is focused.

Deployment and next steps - Learn web development
to do this, we just remove the leading slashes (/) from the /global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link rel='icon' type='image/png' href='favicon.png'> <link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now.
...total 5 (delta 3), reused 0 (delta 0) to gitlab.com:opensas/mdn-svelte-todo.git 7dac9f3..5725f46 master -> master whenever there's a job running gitlab will display an icon showing the process of the job.

Handling common accessibility problems - Learn web development
click the gear icon that will appear, then select css > disable all styles.
... check out the description of the accessibility problems on the results page (the icons you can click to see what problems are occuring where are rather useful).

Eclipse CDT
now when you hit the build button (the little hammer icon), you should see the source build in the console tab at the bottom of the window.
...in the case of the latter you can click on the marker to jump to the problem line and then hover over the "bug" icon to get an explanation of what's wrong.

Listening to events on all tabs
onlinkiconavailable notification that the site icon for a browser has been found.
... void onlinkiconavailable( nsidomxulelement abrowser, ); parameters abrowser the browser that fired the notification.

SVG Guidelines
this can be particularly true for icons.
... while svg may scale well enough for flat-ish icons without a lot of detail, for icons that try to pack in a lot of detail graphic artists generally want to be able to pixel tweak.

Message manager overview
addeventlistener() : listen to dom events addmessagelistener() : receive messages from the chrome process sendasyncmessage() : send asynchronous messages to the chrome process sendsyncmessage() : send synchronous messages to the chrome process interfaces nsidomeventtarget nsimessagelistenermanager nsimessagesender nsisyncmessagesender nsicontentframemessagemanager how to access the content frame message manager is the global object in frame scripts.
...d functions are: components : access privileged objects and apis addmessagelistener() : receive messages from the parent process sendasyncmessage() : send asynchronous messages to the parent process sendsyncmessage() : send synchronous messages to the parent process interfaces nsimessagelistenermanager nsimessagesender nsisyncmessagesender nsicontentprocessmessagemanager how to access code running in a child process can access the cpmm with code like this: // child process script let cpmm = cc["@mozilla.org/childprocessmessagemanager;1"] .getservice(ci.nsisyncmessagesender); you can also access it as the cpmm property of services.jsm, if you are in the child process.

Performance
} object.assign(contentypolicy.prototype, { classdescription: ..., classid: ..., contractid: ..., queryinterface: xpcomutils.generateqi([ci.nsicontentpolicy]), shouldload: function(type, location, origin, context) { let resultlist = services.cpmm.sendsyncmessage("my-addon:check-load", {destination: location, source: origin}) // <=== sync message!
... if(resultlist.every((r) => r == true)) return ci.nsicontentpolicy.accept; return ci.nsicontentpolicy.reject_request; } }); // more boilerplate code here this example is a (somewhat condensed) content policy which gets triggered for every network request in a child process to either allow or deny the request.

mozbrowsercontextmenu
icon the menu item's icon, if the context menu being accessed is a menu item.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserloadend
example in this example the mozbrowserloadstart and mozbrowserloadend events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate.
...); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserloadstart
example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

Browser API
mozbrowserfindchange sent when a search operation is performed on the browser <iframe> content (see htmliframeelement search methods.) mozbrowserfirstpaint sent when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank.) mozbrowsericonchange sent when a new icon (e.g.
... <link rel="icon"> or <link rel="apple-touch-icon">) is available in the browser <iframe>'s content.

Introduction to Layout in Mozilla
rame construction style resolution reflow painting setting up assume basic knowledge of embedding and network apis (doc shell, streams) content dll auto-registers a document loader factory (dlf) @mozilla.org/content-viewer-factory/view;1?type=text/html all mime types mapped to the same class, nscontentdlf nsdocshell receives inbound content via nsdsuricontentlistener invokes nsidlf::createinstance, passes mime type to dlf nscontentdlf creates a nshtmldocument object, invokes startdocumentload.
... creates a parser, returned as nsistreamlistener back to the docshell creates a content sink, which is linked to the parser and the document creates a documentviewerimpl object, which is returned as nsicontentviewer back to the docshell documentviewerimpl creates pres context and pres shell content model construction content arrives from network via nsistreamlistener::ondataavailable parser tokenizes & processes content; invokes methods on nsicontentsink with parser node objects some buffering and fixup occurs here opencontainer, closecontainer, addleaf content sink creates and attaches content nodes using nsicontent interface content sink maintains stack of “live” elements more buffering and...

Addon
iconurl read only string the url of the icon that represents this add-on.
... fulldescription read only string developercomments read only string eula read only string icon64url read only string supporturl read only string contributionurl read only string contributionamount read only string averagerating read only number reviewcount read only integer reviewurl read only string totaldownloads read only integer weeklydownloads...

AddonManager
callback, in string mimetype, in string hash, in string name, in string iconurl, in string version, in nsiloadgroup loadgroup) promise?
...callback, in string mimetype, in string hash, in string name, in string iconurl, in string version, in nsiloadgroup loadgroup ) parameters url the url the add-on is located at callback a callback to pass the addoninstall to mimetype the mimetype of the add-on hash an optional hash of the add-on name an optional placeholder name while the add-on is being downloaded iconurl an optional placeholder icon url while the add-on is being downloaded version a...

Examples
finedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var mysubpromises = []; var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('succesfully loaded image at path = "' + path + '" the width ...
...change this line: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; change it to: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png', 'blah blah']; i added 'blah blah' to that array, it will cuase the whole promise to reject.

Localizing with Pontoon
to begin localizing the project, click on the persona icon and sign in.
...by clicking on the hamburger icon in the main toolbar, a list of all strings and available translations will open in the sidebar.

Creating localizable web content
images check that images are not going to be a problem for the audience (cultural references, positionning, mirroring for rtl, text in images...) and spot what sizes/margins can be tweaked by css or have to be fixed for all locales but english don't use text in icons images 1&2.
...good: this icon is recognized as the international symbol for information.

DMD
launch launch fennec either by tapping on the icon as usual, or from the command line (as before, be sure to replace org.mozilla.fennec_$username with the app identifier as appropriate).
...gautorefcnt::incr(void*, nscyclecollectionparticipant*) (/home/njn/moz/mi5/go64dmd/dom/xul/../../dist/include/nsisupportsimpl.h:250) #05: nsxulelement::create(nsxulprototypeelement*, nsidocument*, bool, bool,mozilla::dom::element**) (/home/njn/moz/mi5/dom/xul/nsxulelement.cpp:287) #06: nsxblcontentsink::createelement(char16_t const**, unsigned int, mozilla::dom::nodeinfo*, unsigned int, nsicontent**, bool*, mozilla::dom::fromparser) (/home/njn/moz/mi5/dom/xbl/nsxblcontentsink.cpp:874) #07: nscomptr<nsicontent>::startassignment() (/home/njn/moz/mi5/go64dmd/dom/xml/../../dist/include/nscomptr.h:753) #08: nsxmlcontentsink::handlestartelement(char16_t const*, char16_t const**, unsigned int, unsigned int, bool) (/home/njn/moz/mi5/dom/xml/nsxmlcontentsink.cpp:1007) } } it tells yo...

Profiling with the Firefox Profiler
tip: focus on one section of the tree by clicking on the "arrow-in-a-circle" icon that appears to the right of the tree element as you hover over it.
...this will add a icon in the top right of the browser.

Places
it also includes new features including favicon storage and the ability to annotate pages with arbitrary information.
... using the places favicon service how to manipulate favicons using the places api.

XPCOM Stream Guide
nsconverterinputstream @mozilla.org/intl/converter-input-stream;1 nsiconverterinputstream .init(stream, charset, buffersize, replacechar) mime separate headers from data.
... nsconverteroutputstream @mozilla.org/intl/converter-output-stream;1 nsiconverteroutputstream .init(stream, charset, buffersize, replacechar) additional stream interfaces the nsilineinputstream interface supports a .readline() method for reading a single line from an input stream.

Components.utils.reportError
however you should use nsiconsoleservice for logging, as it logs the messages with normal severity, unlike reporterror.
... function mydump(amessage) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); consoleservice.logstringmessage("my component: " + amessage); } firefox 3: the error console will not display chrome errors by default.

Observer Notifications
places-favicons-expired sent when all favicons have been expired.
... message manager topic subject data description message-manager-disconnect nsicontentframemessagemanager null this notification is sent when a message manager disconnects.

IAccessibleImage
other-licenses/ia2/accessibleimage.idlnot scriptable this interface represents images and icons.
... 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface is used for a representation of images like icons on buttons.

imgIRequest
image imgicontainer the image container.
...imgicontainer has a requestdecode method, but callers may want to request a decode before the container has necessarily been instantiated.

nsIAccessibilityService
onaccessible(in nsisupports aframe); nsiaccessible getaccessible(in nsidomnode anode, in nsipresshell apresshell, in nsiweakreference aweakshell, inout nsiframe framehint, out boolean aishidden); nsiaccessible addnativerootaccessible(in voidptr aatkaccessible); void removenativerootaccessible(in nsiaccessible arootaccessible); void invalidatesubtreefor(in nsipresshell apresshell, in nsicontent achangedcontent, in pruint32 aevent); methods removenativerootaccessible() void removenativerootaccessible( in nsiaccessible arootaccessible ); invalidatesubtreefor() invalidate the accessibility cache associated with apresshell, for accessibles that were generated for acontainercontent and it's subtree.
... void invalidatesubtreefor( in nsipresshell apresshell, in nsicontent achangedcontent, in pruint32 aevent ); parameters <tt>apresshell</tt> the presshell where changes occured.

nsIAlertsService
getservice(components.interfaces.nsialertsservice); try { alertsservice.showalertnotification("chrome://mozapps/skin/downloads/downloadicon.png", "alert title", "alert text goes here.", false, "", null, ""); } catch (e) { // this can fail on mac os x } listening for callbacks you can be notified when the notification window disappears or the user clicks on the message by passing an object implementing nsiobserver as the alertlistener parameter: var list...
...ces.prompt.alert(services.wm.getmostrecentwindow('navigator:firefox'), 'focus firefox', 'will now focus fireox and then focus the tab'); } else if (atopic == 'alertshow') { console.log('just showed notification'); } else if (atopic == 'alertfinished') { console.log('just alertfinished') } } }; as.showalertnotification('chrome://branding/content/icon64.png', 'stackoverflow - new messages', 'there are ## new messages.

nsIBrowserBoxObject
inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul browser element implements this interface.
... note: please consider using nsicontainerboxobject instead.

nsIChannelPolicy
attributes attribute type description contentsecuritypolicy nsisupports a nsicontentsecuritypolicy object to determine if the load should be allowed.
... loadtype unsigned long indicates what type of content is being loaded, for example nsicontentpolicy::type_image.

nsICommandController
content/xul/document/public/nsicontroller.idlscriptable an enhanced controller interface that supports passing parameters to commands.
... see also nsicontroller nsicontrollercontext ...

nsIDOMWindowUtils
the attribute's value must be one of the animationmode values from imgicontainer.
...the event is dispatched to atarget, which should be an object which implements nsicontent interface (#element, #text, etc).

nsIDOMXULElement
controllers nsicontrollers read only.
... returns an nsicontrollers object that additional controllers may be appended to so as to provide focus-specific actions for commands.

nsIDocumentLoader
destroy(); obsolete since gecko 1.8 void fireonlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri); obsolete since gecko 1.8 void fireonstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); obsolete since gecko 1.8 void getcontentviewercontainer(in nsisupports adocumentid, out nsicontentviewercontainer aresult); native code only!
...void getcontentviewercontainer( in nsisupports adocumentid, out nsicontentviewercontainer aresult ); parameters adocumentid aresult getloadgroup() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) nsiloadgroup getloadgroup(); parameters none.

nsIEditor
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) method overview [noscript] void init(in nsidomdocument doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes);...
... [noscript] void init( in nsidomdocument doc, in nsipresshellptr shell, obsolete since gecko 5 in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags ); parameters doc the document to observe.

nsIEditorBoxObject
inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul editor element implements this interface.
... note: please consider using nsicontainerboxobject instead.

nsIIFrameBoxObject
inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul iframe element implements this interface.
... note: please consider using nsicontainerboxobject instead.

nsIMacDockSupport
method summary void activateapplication(in boolean aignoreotherapplications); attributes attribute type description badgetext astring text to display in a badge on the application's dock icon.
... dockmenu nsistandalonemenu the menu to display when the user right-clicks on the application's icon in the dock.

nsISelectionImageService
inherits from: nsisupports last changed in gecko 1.7 method overview void getimage(in short selectionvalue, out imgicontainer container); void reset(); methods getimage() retrieve the image for alpha blending.
... void getimage( in short selectionvalue, out imgicontainer container ); parameters selectionvalue container reset() the current image is marked as invalid.

nsISelectionPrivate
obsolete since gecko 12.0 long gettableselectiontype(in nsidomrange range); void removeselectionlistener(in nsiselectionlistener listenertoremove); void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); void setancestorlimiter(in nsicontent acontent); native code only!
... native code only!setancestorlimiter void setancestorlimiter( in nsicontent acontent ); parameters acontent native code only!setpresshell internal utility method to set the pres shell on a newly created selection.

nsIXULSortService
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void insertcontainernode(in nsirdfcompositedatasource db, in nsrdfsortstate sortstateptr, in nsicontent root, in nsicontent trueparent, in nsicontent container, in nsicontent node, in boolean anotify); native code only!
...void insertcontainernode( in nsirdfcompositedatasource db, in nsrdfsortstate sortstateptr, in nsicontent root, in nsicontent trueparent, in nsicontent container, in nsicontent node, in boolean anotify ); parameters db sortstateptr root trueparent container node anotify sort() sort the contents of the widget containing anode using asortkey as the comparison key, and asorthints as how to sort.

nsPIPromptService
eiconclass the value is 2.
... this is the class attribute value of the icon image.

Theme Packaging
theme file layout thunderbird themes are packaged in an xpi file with the following structure: theme.xpi: install.rdf preview.png icon.png chrome/ browser/files communicator/files global/files mozapps/files ...
... icon.png is a 32x32 (max.

Accessibility Inspector - Firefox Developer Tools
you can click on the "target" icon that comes after it to select the node in the page inspector.
... hovering over the "target" icon highlights the dom node in the page content.

Disable breakpoints - Firefox Developer Tools
to disable all breakpoints, click this icon: in the toolbar.
... after you click the icon to disable breakpoints, the appearance of the breakpoints will change to a lighter color with a dark-colored border.

Pretty-print a minified file - Firefox Developer Tools
to prettify a minified file, click the pretty print source icon () at the bottom of the source pane.
... after you click the icon, the source code looks like this: the pretty print source icon is available only if the source file is minified (i.e., not an original file), and is not already "prettified".

Performance Analysis - Firefox Developer Tools
using the performance analysis tool to run the performance analysis tool click the stopwatch icon in the toolbar.
... (alternatively, if you have only just opened the network monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.) the network monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache.

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
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.

Examine and edit HTML - Firefox Developer Tools
now children are indicated in the tree with this icon: at the right side of some nodes there are markers shown indicating different pieces of information related to it: event the element has one or several event listeners attached to it.
... inserting new nodes there's a "+" icon at the top of the markup view: click this icon to insert an empty <div> into the document as the last child of the currently selected element.

Animation inspector example: CSS transitions - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selec...
...ted { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...

Paint Flashing Tool - Firefox Developer Tools
using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page.
... in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a style applied using the :hover pseudo-class scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right to deactivate paint flashing, click the "highlight painted area" icon in the toolbox again.

CredentialsContainer.create() - Web APIs
name: optional usvstring tbd iconurl: optional usvstring tbd password: (required) usvstring tbd federated: optional an federatedcredentialinit object.
... name: optional usvstring tbd iconurl: optional usvstring tbd provider: (required) usvstring tbd protocol: optional usvstring tbd publickey: optional an publickeycredentialcreationoptions object that describes the options for creating a webauthn credential.

HTMLCanvasElement.mozFetchAsStream() - Web APIs
so uses netutil.jsm var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); var netutilcallback = function() { return function(result) { if (!components.issuccesscode(result)) { alert('failed to create icon'); } else { alert('succesfully made'); } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcallback()); ...
... } } canvas.mozfetchasstream(mfascallback('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.

MediaDevices.getUserMedia() - Web APIs
for example in firefox, the url bar displays a pulsing red icon to indicate that recording is underway.
... the icon is gray if the permission is in place but recording is not currently underway.

MediaSession.setActionHandler() - Web APIs
let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon.
... audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon.

Media Session action types - Web APIs
let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon.
... audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon.

MediaSessionActionDetails - Web APIs
let skiptime = 10; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon.
... audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon.

MediaStreamTrack: ended event - Web APIs
examples this example sets up an event handler for the ended event, which changes an on-screen icon to indicate that the track is no longer active.
... track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'ended' in that specification.

MediaStreamTrack.onended - Web APIs
examples this example sets up an event handler for the ended event which changes an on-screen icon to indicate that the track is no longer active.
... track.onended = function(event) { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onended' in that specification.

MediaStreamTrack.onunmute - Web APIs
example this example creates an unmute event handler which changes the state of a visual indicator to display the emoji character representing a "speaker" icon.
... mytrack.onunmute = function(evt) { playstateicon.innerhtml = "&#x1f508;"; }; specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onunmute' in that specification.

PublicKeyCredentialCreationOptions.rp - Web APIs
syntax relyingpartyobj = publickeycredentialcreationoptions.rp properties icon optional an url as a usvstring value which points to an image resource which can be the logo/icon of the relying party.
... examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com", icon: "https://login.example.com/login.ico" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed wi...

PublicKeyCredentialCreationOptions.user - Web APIs
icon optional an url as a usvstring value which points to an image resource which can be the avatar image for the user.
... examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { // to be changed for each user id: new uint8array.from(window.atob("laegmlkjnrlkgnamlafalfka="), c=>c.charcodeat(0)); name: "jdoe@example.com", displayname: "john doe", icon: "https://gravatar.com/avatar/jdoe.png" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); ...

Window.open() - Web APIs
always identify links that will create (or will re-use) a new, secondary window identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.
...omething like that will happen." world wide web consortium accessibility initiative regarding popups "use link titles to provide users with a preview of where each link will take them, before they have clicked on it." ten good deeds in web design, jakob nielsen, october 1999 using link titles to help users predict where they are going, jakob nielsen, january 1998 example "new window" icons & cursors always use the target attribute if javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g.

Web APIs
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnn...
...stallevent installtrigger intersectionobserver intersectionobserverentry interventionreportbody k keyboard keyboardevent keyboardlayoutmap keyframeeffect keyframeeffectoptions l largestcontentfulpaint layoutshift layoutshiftattribution linearaccelerationsensor linkstyle localfilesystem localfilesystemsync localmediastream location lock lockmanager lockedfile m midiaccess midiconnectionevent midiinput midiinputmap midimessageevent midioutputmap mscandidatewindowhide mscandidatewindowshow mscandidatewindowupdate msgestureevent msgraphicstrust msmanipulationevent msrangecollection mssitemodeevent magnetometer mathmlelement mediacapabilities mediacapabilitiesinfo mediaconfiguration mediadecodingconfiguration mediadeviceinfo mediadevices mediaelementaudiosourcenod...

Web Accessibility: Understanding Colors and Luminance - Accessibility
for more on color contrast in animation, see three flashes or below threshold understanding sc 2.3.1 icons also need sufficient contrast for perception.
...trast ratio math and related visual issues #695 luminance / luma confusion #236 outdated threshold for srgb companding in the "relative luminance" definition #308 non-srgb color spaces, outdated srgb threshold, and other issues in the "relative luminance" definition #360 w3c resources css color module level 3 css color module level 4 ensuring that a contrast ratio of 3:1 is provided for icons understanding success criterion 1.4.3: contrast (minimum) wcag working group's wiki page on relative luminance contributers many, many thanks to wayne dick of the low vision task force of the w3c and the intense discussions on luminance; to teal for his help and discussions on human perception of the color blue and how software companies create algorithms for image output based on it; and t...

display-mode - CSS: Cascading Style Sheets
you can use it to provide a consistent user experience between launching a site from a url and launching it from a desktop icon.
...this can include the application having a different window, its own icon in the application launcher, etc.

content - CSS: Cascading Style Sheets
html <a href="http://www.mozilla.org/">mozilla home page</a> css a::before { content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " mozilla: "; font: x-small arial, sans-serif; color: gray; } result targeting classes this example inserts additional text after special items in a list.
... html <ul> <li><a id="moz" href="http://www.mozilla.org/"> mozilla home page</a></li> <li><a id="mdn" href="https://developer.mozilla.org/"> mozilla developer network</a></li> </ul> css a { text-decoration: none; border-bottom: 3px dotted navy; } a::after { content: " (" attr(id) ")"; } #moz::before { content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); } #mdn::before { content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png"); } li { margin: 1em; } result element replacement this example replaces an element's content with an image.

Event reference
lding incoming resuming statechange voicechange sensor events compassneedscalibration devicemotion deviceorientation orientationchange smartcard events icccardlockerror iccinfochange smartcard-insert smartcard-remove stkcommand stksessionend cardstatechange sms and ussd events delivered received sent ussdreceived frame events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserlocationchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange dom mutation events domattributenamechanged domattrmodified domcharacterdatamodified domcontentloaded domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified touc...
... mozbrowserfindchange firefox os browser api-specific sent when a search operation is performed on the browser <iframe> content (see htmliframeelement search methods.) mozbrowserfirstpaint firefox os browser api-specific sent when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank.) mozbrowsericonchange firefox os browser api-specific sent when the favicon of a browser <iframe> changes.

Video player styling basics - Developer guides
since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image.
... simple :hover and :focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the web.

HTML attribute reference - HTML: Hypertext Markup Language
enterkeyhint <textarea>, contenteditable the enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards.
... icon <command> specifies a picture which represents the command.

<command>: The HTML Command element - HTML: Hypertext Markup Language
icon gives a picture which represents the command.
... examples <command type="command" label="save" icon="icons/save.png" onclick="save()"> specifications specification status comment html5the definition of '<command>' in that specification.

<img>: The Image Embed element - HTML: Hypertext Markup Language
browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp chrome, edge, firefox, internet explorer, opera, safari gif graphics interchange format image/gif .gif chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable...
...visual browsers will also hide the broken image icon if the alt is empty and the image failed to display.

<input type="date"> - HTML: Hypertext Markup Language
we make use of the :valid and :invalid pseudo-elements to add an icon next to the input, based on whether or not the current value is valid.
... we had to put the icon on a <span> next to the input, not on the input itself, because in chrome at least the input's generated content is placed inside the form control, and can't be styled or shown effectively.

<input type="number"> - HTML: Hypertext Markup Language
the following example exhibits all of the above features, as well as using some css to display valid and invalid icons, depending on the input's value: <form> <div> <label for="balloons">number of balloons to order (multiples of 10):</label> <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> <span class="validity"></span> </div> <div> <input type="submit"> </div> </form> try submitting the form with different invalid values entered — e.g., no va...
... the css applied to this example is as follows: div { margin-bottom: 10px; } input:invalid+span:after { content: '✖'; padding-left: 5px; } input:valid+span:after { content: '✓'; padding-left: 5px; } here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <span> element, as a visual indicator of validity.

<input type="text"> - HTML: Hypertext Markup Language
div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons.
... this was necessary because some input types on some browsers don't display icons placed directly after them very well.

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
may include a delete icon in supporting browsers that can be used to clear the field.
... displays a search icon instead of enter key on some devices with dynamic keypads.

HTML elements reference - HTML: Hypertext Markup Language
this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
... <dir> the obsolete html directory element (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent.

HTML documentation index - HTML: Hypertext Markup Language
92 <dir>: the directory element (obsolete) directory, element, html, html lists, obsolete, reference, web, dir, lists the obsolete html directory element (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent.
...this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

display - Web app manifests
this can be used to provide a consistent user experience between launching a site from an url and launching it from a desktop icon.
...this can include the application having a different window, its own icon in the application launcher, etc.

The building blocks of responsive design - Progressive web apps (PWAs)
svg and other vector graphics for some image requirements (not photographs, but icons and user interface elements are a good fit), a good solution is to use vector graphics.
... using web fonts for displaying icons is an effective technique for keeping file size and http requests down, and this is supported well across modern and older browsers.

Cross-domain Content Scripts - Archive of obsolete content
it is clicked // main.js var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height: 50, contenturl: data.url("panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> block for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffic...

port - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is clicked: // main.js pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script listens for "get-first-para".

Communicating using "port" - Archive of obsolete content
the button sends the content script a message called "get-first-para" when it is clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script "listener.js" listens for "get-first-para".

Content Scripts - Archive of obsolete content
user clicks the button, the add-on attaches a content script to the active tab, sends the content script a message called "my-addon-message", and listens for a response called "my-script-response": //main.js var tabs = require("sdk/tabs"); var buttons = require("sdk/ui/button/action"); var self = require("sdk/self"); buttons.actionbutton({ id: "attach-script", label: "attach the script", icon: "./icon-16.png", onclick: attachscript }); function attachscript() { var worker = tabs.activetab.attach({ contentscriptfile: self.data.url("content-script.js") }); worker.port.on("my-script-response", function(response) { console.log(response); }); worker.port.emit("my-addon-message", "message from the add-on"); } // content-script.js self.port.on("my-addon-message", hand...

indexed-db - Archive of obsolete content
keyrange); cursorrequest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; items.push(result.value.name); result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = require("sdk/ui/button/action").actionbutton({ id: "add", label: "add", icon: "./add.png", onclick: function() { additem(require("sdk/tabs").activetab.title); } }); var list = require("sdk/ui/button/action").actionbutton({ id: "list", label: "list", icon: "./list.png", onclick: function() { getitems(listitems); } }); note that to run this add-on you'll need to provide icons named "add.png" and "list.png" in the add-on's "data" directory.

windows - Archive of obsolete content
} }); returns the window that was opened: var windows = require("sdk/windows").browserwindows; var example = windows.open("http://www.example.com"); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { example.close(); } }); this example uses the action button api, which is only available from firefox 29 onwards.

Low-Level APIs - Archive of obsolete content
places/favicon helper functions for working with favicons.

cfx to jpm - Archive of obsolete content
permanently removed fields data fullname - use title instead lib packages tests icon64 package.json escaping where with cfx you might have had to escape with 2 upto 3 backslashes ( \ ), jpm only needs one now.

Developing for Firefox Mobile - Archive of obsolete content
frame/utils supported io/byte-streams supported io/file supported io/text-streams supported lang/functional supported lang/type supported loader/cuddlefish supported loader/sandbox supported net/url supported net/xhr supported places/bookmarks not supported places/favicon not supported places/history not supported platform/xpcom supported preferences/service supported stylesheet/style supported stylesheet/utils supported system/environment supported system/events supported system/runtime supported system/unload supported system/xul-app support...

Using third-party modules (jpm) - Archive of obsolete content
to show the menu bar, click on the open menu icon and select "customize".

Localization - Archive of obsolete content
dd a data-l10n-id attribute to the html tag where you want the localized string to appear, and assign the identifier to it: <html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./icon-16.png", onclick: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 75, width: 150, contenturl: require("sdk/self").data.url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hello_id, the panel will now display "hello!" or "bonjour !", according to the current locale: the translation is inserted ...

Boxes - Archive of obsolete content
this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...

Miscellaneous - Archive of obsolete content
if you wish to block selected scripts based on their uri, implement nsicontentpolicy.

On page load - Archive of obsolete content
forum") > -1) alert("a forum page is loaded"); // add event listener for page unload aevent.originaltarget.defaultview.addeventlistener("unload", function(event){ myextension.onpageunload(event); }, true); }, onpageunload: function(aevent) { // do something } }; current firefox trunk nightlies will fire the onpageload function for not only documents, but xul:images (favicons in tabbrowser).

Progress Listeners - Archive of obsolete content
instead, you receive those events that the tabbrowser is interested in, except that the onlinkiconavailable and onrefreshattempted notifications are optional.

Tabbox - Archive of obsolete content
examples: .tabs-closebutton { list-style-image: url(http://mozilla.org/favicon.ico); } .tabs-closebutton { list-style-image: url("chrome://global/skin/icons/close.gif"); } ...

Extension Theming Guidelines - Archive of obsolete content
branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package.

Appendix: What you should know about open-source software licenses - Archive of obsolete content
the firefox web browser, developed by the mozilla foundation, does not permit modifications of its name or trademarked icon.

Handling Preferences - Archive of obsolete content
the tabs at the top of the window will need icons, and just like with toolbar buttons there are subtle differences between operating systems.

XPCOM Objects - Archive of obsolete content
cc[@mozilla.org/categorymanager;1].getservice(ci.nsicategorymanager); acompmgr.queryinterface(ci.nsicomponentregistrar); acompmgr.registerfactorylocation( class_id, class_name, contract_id, alocation, aloaderstr, atype); categorymanager.addcategoryentry( "content-policy", "xulschool hello world", contract_id, true, true); }, in this case the component would need to implement nsicontentpolicy.

Setting up an extension development environment - Archive of obsolete content
you can use nsiconsoleservice instead of dump() from a privileged script.

Tabbed browser - Archive of obsolete content
en no longer needed container.removeeventlistener("tabattrmodified", exampletabattrmodified, false); notification when a tab is pinned or unpinned requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) starting in gecko 2.0, tabs can be "pinned"; that is, they become special application tabs ("app tabs"), which are pinned to the beginning of the tab bar, and show only the favicon.

Firefox addons developer guide - Archive of obsolete content
if you use the interface template when mentioning interfaces by name, mdc will automatically format them and generate links to their documentation, like this: nsiconsoleservice.

Promises - Archive of obsolete content
don.getdatadirectory((directory, error) => { if (error) reject(error); else accept(directory); }); }); }, }; }, getinstallforurl: function getinstallforurl(url, mimetype, hash, name, iconurl, version, loadgroup) { return new promise(accept => this.addonmanager.getinstallforurl(url, accept, mimetype, hash, iconurl, version, loadgroup)); }, getinstallforfile: function getinstallforfile(url, mimetype) { return new promise(accept => this.addonmanager.getinstallforfile(url, accept, mimetype)...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
this includes rules and guidelines applying to everything from headers, footers, page hierarchy, titles, typography, iconography, navigation, and others.

Index of archived content - Archive of obsolete content
event/target frame/hidden-frame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks places/favicon places/history platform/xpcom preferences/event-target preferences/service remote/child remote/parent stylesheet/style stylesheet/utils system/child_process system/environment system/events system/runtime system/unloa...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
within the textthere is an icon <img src="icon2.gif"> that indicates a link to another site.

No Proxy For configuration - Archive of obsolete content
entry points: preferences | advanced | proxies control-click menu for off line-online icon (network plug) configuration the no proxy list is composed of either domain elements or ipv4 address elements.

Structure of an installable bundle - Archive of obsolete content
(>=2.0) /chrome.manifest chrome registration manifest (>=1.8) /components/* xpcom components (*.js, *.dll), and interface files from *.xpt (>=1.7) /defaults/preferences/*.js default preferences (>=1.7) /plugins/* npapi plugins (>=1.8) /chrome/icons/default/* window icons (>=1.8) /icon.png extension icon, for display in the add-ons manager, 32px × 32px (>=1.9.2) /icon64.png extension icon, for display in the add-ons manager, 64px × 64px (>=2.0) /options.xul extension options, for display in the add-ons manager (>=7.0) ...

Chromeless - Archive of obsolete content
firefox users could choose to turn a web page into a "prism application" and have an icon added to their desktop to launch it without the firefox user interface surrounding the page.

Enabling the behavior - updating the status periodically - Archive of obsolete content
now that we have code to retrieve tinderbox status and update the icon, we need to run it periodically.

Finding the file to modify - Archive of obsolete content
to add a tinderbox status icon to mozilla, we need to find the xul file that defines the structure of the browser window.

Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
ersion="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-style-image: url("chrome://tinderstatus/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://tinderst...

Creating a Mozilla Extension - Archive of obsolete content
this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e.

toolbarBindings.xml - Archive of obsolete content
oolbar-primary" extends="chrome://global/content/bindings/toolbar.xml#toolbar-primary"> <content> <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle"> <xul:hbox class="toolbar-button-box" flex="1"> <children/> </xul:hbox> <xul:image class="toolbar-primary-icon" xbl:inherits="buttonstyle"/> </xul:hbox> </content> </binding> </bindings> ...

Drag and Drop - Archive of obsolete content
for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to.

File access - Archive of obsolete content
click on the paper-clip icon below for a demonstration of the file upload dialog.

Makefile.mozextension.2 - Archive of obsolete content
d> <name>$(project_name)</name> <version>$(project_version)</version> <description>$(project_desc)</description> <creator>$(project_author)</creator> <contributor>here is a place for you who helped me</contributor> <homepageurl>http://$(project).mozdev.org/</homepageurl> <optionsurl>chrome://$(project)/content/settings.xul</optionsurl> <abouturl>chrome://$(project)/content/about.xul</abouturl> <iconurl>chrome://$(project)/skin/mainicon.png</iconurl> <updateurl>http://$(project).mozdev.org/update.rdf</updateurl> <type>2</type> <targetapplication> <description> <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generat...

New Security Model for Web Services - Archive of obsolete content
reports errors (validation, wellformedness, file not found, etc.) to the console via nsiconsoleservice.

URIScheme - Archive of obsolete content
moz-icon://.ext?size=32 : you can replace ext by your some file extension like js, css, xul, xml, etc.

Learn XPI Installer Scripting by Example - Archive of obsolete content
first, a quick scan of the contents of the xpi file (which you can open using with any unzip utility) reveals the following high-level directory structure: install.js bin\ chrome\ components defaults\ icons\ plugins\ res\ note that this high-level structure parallels the directory structure of the installed browser very closely: as you will see in the installation script, the contents of the archive are installed onto the file system in much the same way that they are stored in the archive itself, though it's possible to rearrange things arbitrarily upon installation--to create new directo...

image - Archive of obsolete content
example <menuitem label="foo" class="menuitem-iconic" image="something.png"/> see also image element ...

panel.type - Archive of obsolete content
for example, the site identity panel that appears when you click on the favicon in the url bar in firefox is an arrow panel: note: the arrow will draw as long as the panel doesn't overlap the anchor.

toolbar.mode - Archive of obsolete content
icons show only icons.

Attribute (XUL) - Archive of obsolete content
type element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight min...

Deprecated and defunct markup - Archive of obsolete content
tion> (old/experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecolpicker> (internal use only; part of xbl for <tree>) <treefoot> (old/experimental and unsupported xul tags) <treeindentation> (old/experimental and unsupported xul tags) was a part of the old <tree> that predated <outliner> that was not converted to <listbox>--neil 03 march 2011 <treeicon> (old/experimental and unsupported xul tags) <treerows> (internal use only; part of xbl for <tree>) attributes @debug="true" provided struts and springs around boxes to facilitate identification of flex issues but does not seem to work now you need a special debug_layout build --neil 03 march 2011 references xul element reference by neal deakin rapid application development with...

MenuButtons - Archive of obsolete content
<button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected.

contentViewerEdit - Archive of obsolete content
« xul reference contentvieweredit type: nsicontentvieweredit this read-only property contains the nsicontentvieweredit which handles clipboard operations on the document.

contentViewerFile - Archive of obsolete content
« xul reference contentviewerfile type: nsicontentviewerfile reference to the nsicontentviewerfile interface for the document.

controllers - Archive of obsolete content
« xul reference controllers type: nsicontrollers a controllers list attached to the element.

Style classes - Archive of obsolete content
« xul reference home alert-icon chromeclass-toolbar error-icon groove header indent listcell-iconic listitem-iconic menuitem-iconic menuitem-non-iconic message-icon monospace plain question-icon small-margin statusbarpanel-iconic statusbarpanel-iconic-text statusbarpanel-menu-iconic text-link thin tree-splitter treecol-image ...

Building Hierarchical Trees - Archive of obsolete content
if the items are containers, the tree builder will mark the right rows as containers, so that they can be opened and closed with the small icon twisties on the left of the column.

Building Trees - Archive of obsolete content
it’s not normal to put photos in a tree like this—instead, the images would be used for icons.

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
(for example, drag the file's icon and drop it in seamonkey, or choose file – open file...

Commands - Archive of obsolete content
nsicontrollers has a number of methods that may be used to manipulate the controllers.

Creating a Window - Archive of obsolete content
troubleshooting if the xul window fails to show up on the desktop but has an icon on the desktop tool bar, check the xml-stylesheet declaration.

More Tree Features - Archive of obsolete content
the tree will draw the open and close icons to open and close a parent item as well as lines connecting the children to their parents.

The Chrome URL - Archive of obsolete content
chrome://messenger/content/messenger.xul chrome://messenger/content/attach.js chrome://messenger/skin/icons/folder-inbox.gif chrome://messenger/locale/messenger.dtd to refer to subdirectories, you can just add them to the end of the chrome url.

Tree View Details - Archive of obsolete content
for instance, a container may have a folder icon beside it.

Using the Editor from XUL - Archive of obsolete content
one thing to note about editor initialization is that we pass into the editor's init() method an nsicontent* that corresponds to the root of the content tree that the editor is allowed to work with.

notificationbox - Archive of obsolete content
if "" then an icon appropriate for the priority level is used.

Application Update - Archive of obsolete content
application settings you will need to configure the following settings in your application: branding the update process uses branding information, setup branding for your application as described here: xulrunner tips icons the updater process for linux systems requires updater.png to be in your <application folder>/icons/, see https://bugzilla.mozilla.org/show_bug.cgi?id=706846 preferences // whether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.mode and allows automatic download and // install to take place.

Building XULRunner with Python - Archive of obsolete content
ndow-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); wwatch.openwindow(null, "chrome://global/content/console.xul", "_blank", "chrome,dialog=no,all", null); } // dump to the js console (xulrunner -jsconsole) function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } function jserror(str) { components.utils.reporterror(str); } a final tip is to use task manager to check for a zombie xulrunner process after a crash.

Custom app bundles for Mac OS X - Archive of obsolete content
simple text file and is created along with the info.plist file) macos/ (the macos folder will contain your xulrunner executable) xulrunner (this is the xulrunner stub) resources/ (this is where you place your xul application code and support files) application.ini (xulrunner-related application settings) example.icns (this is the icon which will be used by your application bundle) chrome/ content/ example.xul (this directory contains your application's chrome) example.manifest defaults/ preferences/ app-prefs.js (this provides some default values for preferences) ...

Getting started with XULRunner - Archive of obsolete content
installing the application creates an os x application bundle: /library/frameworks/xul.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip once installed, you can run the application: /library/frameworks/xul.framework/xulrunner-bin "/applications/finkle/testapp.app/contents/resources/application.ini" you may run it without installing (but with the menu bar and dock icon missing) in os x by typing: /library/frameworks/xul.framework/xulrunner-bin "/<full path>/testapp/application.ini" note: the full path is required or a "error: couldn't parse application.ini."-message will be returned.

MacFAQ - Archive of obsolete content
0" height="0" persist="screenx screeny width height sizemode" > <!-- load the mozilla helpers --> <script type="application/javascript" src="chrome://global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { var mconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) mconsoleservice.logstringmessage("myxul: " + alogstring + "\n"); } function checkotherwindows() { var singletonwindowtype = nspreferences.copyunicharpref("toolkit.singletonwindowtype"); var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); v...

Archived Mozilla and build documentation - Archive of obsolete content
this tutorial walks you through the process of building a mozilla extension that adds an icon to mozilla's status bar showing the current status of the mozilla source code (i.e.

2006-11-10 - Archive of obsolete content
favicon as microsummary/feed/other stuff indicator suggestion about making the favicon create a bookmark for the page with a microsummary.

2006-10-06 - Archive of obsolete content
../../dist/host/bin/host_xpidl -m header -w -i~mozilla/xpcom/base -i../../dist/idl -o _xpidlgen/nsiconsolelistener ~/mozilla/xpcom/base/nsiconsolelistener.idl gmake[2]: *** [_xpidlgen/nsiconsolelistener.h] bus error gmake[2]: *** deleting file `_xpidlgen/nsiconsolelistener.h' gmake[1]: *** [export] error 2 make: *** [all] error 2:: on octorber 4th ludwig hügelschäfer responded to his original post with the solution to his own problem.

2006-11-10 - Archive of obsolete content
this can be defined within the nsicontentpolicy.

2006-12-01 - Archive of obsolete content
discussions nsicontentpolicy and user interaction the proper way to get user confirmation before trying to load certain file types.

Settings - Archive of obsolete content
the debugger has its own settings menu, which you can access from an icon in the toolbar: each setting is a simple on/off switch: auto prettify minified sources with this option enabled, the debugger will automatically detect minified js files and pretty-print them.

LiveConnect Overview - Archive of obsolete content
you can specify an environment variable in windows nt by double-clicking the system icon in the control panel and creating a user environment variable called classpath with a value similar to the following: c:\program files\java\jre1.4.1\lib\plugin.jar see the sun jdk documentation for more information about classpath.

Troubleshooting XForms Forms - Archive of obsolete content
in order to fix this, go to the noscript options dialog (right-click on the 's' icon on the status bar and select 'options...') and select the advanced tab.

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
it was an elegant workstation with an iconic desktop developed by the engineers at parc (palo alto research center).

RDF in Fifty Words or Less - Archive of obsolete content
e</sm:subject> <sm:body> http://www.mozilla.org/smart-mail/get-body.cgi?id=4025294 </sm:body> </sm:message> </rdf:description> </rdf:rdf> upon receipt of the above monstrosity, the rdf engine folds the rdf into the graph at the appropriate place, and the tree control that actually implements the ui to the bookmarks is notified that it should begin drawing some icons for the latest message about yam soup from aunt helga.

Implementing controls using the Gamepad API - Game development
note: easter egg time: there's a hidden option to launch super turbo hungry fridge on the desktop without having a gamepad connected — click the gamepad icon in the top right corner of the screen.

Visual-js game engine - Game development
manual start from cmd : server_folder/node editor.js after starting on-page-editor open browser icon to open internet browser in editor mode .

Raster image - MDN Web Docs Glossary: Definitions of Web-related terms
raster image files usually contain one set of dimensions, but the ico and cur formats, used for favicons and css cursor images, can contain multiple sizes.

Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
screen readers are software applications that attempt to convey what is seen on a screen display in a non-visual way, usually as text to speech, but also into braille or sound icons.

MDN Web Docs Glossary: Definitions of Web-related terms
nguage dynamic typing e ecma ecmascript effective connection type element empty element encapsulation encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint first-class function flex flex container flex item flexbox forbidden header name...

CSS and JavaScript accessibility best practices - Learn web development
in addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when focused (e.g.

Pseudo-classes and pseudo-elements - Learn web development
a more valid use of these pseudo-elements is to insert an icon, for example the little arrow added in the example below, which is a visual indicator that we wouldn't want read out by a screenreader: these pseudo-elements are also frequently used to insert an empty string, which can then be styled just like any element on the page.

Introduction to CSS layout - Learn web development
this means you could achieve a task such as moving an icon down a bit so it lines up with a text label.

Using CSS generated content - Learn web development
this rule adds a space and an icon after every link that has the class glossary: html <a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> css a.glossary::after { content: " " url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif"); } ...

Test your skills: Advanced styling - Learn web development
another thing that commonly denotes a search box is a magnifying glass icon.

UI pseudo-classes - Learn web development
this is really useful when you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies.

Dealing with files - Learn web development
for example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png.

JavaScript basics - Learn web development
javascript from the earlier exercise.) let myimage = document.queryselector('img'); myimage.onclick = function() { let mysrc = myimage.getattribute('src'); if(mysrc === 'images/firefox-icon.png') { myimage.setattribute('src','images/firefox2.png'); } else { myimage.setattribute('src','images/firefox-icon.png'); } } save all files and load index.html in the browser.

What will your website look like? - Learn web development
click the "plus" (add to) icon next to the font you want.

Introduction to HTML - Learn web development
it contains information such as the page <title>, links to css (if you want to style your html content with css), links to custom favicons, and metadata (data about the html, such as who wrote it, and important keywords that describe the document).

Mozilla splash page - Learn web development
along with mdn.svg, these images will be your icons to link to further resources, inside the further-info area.

Index - Learn web development
metadata in html beginner, codingscripting, guide, html, meta, favicon, head, lang, metadata that marks the end of our quickfire tour of the html head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now!

Multimedia: Images - Learn web development
examples for these types of motifs are logos, illustrations, charts or icons (note: svgs are far better than icon fonts!).

Web performance resources - Learn web development
icon web fonts if possible avoid icon web fonts and use compressed svgs.

Getting started with React - Learn web development
its initial file structure looks like this: moz-todo-react ├── readme.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── app.css ├── app.js ├── app.test.js ├── index.css ├── index.js ├── logo.svg └── serviceworker.js the src directory is where we'll spend most of our time, as it's where the source code for our application lives.

Working with Svelte stores - Learn web development
we also added an svg icon above the alert paragraph, to make it look a bit nicer.

Getting started with Vue - Learn web development
favicon.ico: this is the favicon for your app.

Setting up your own test automation environment - Learn web development
ambdatest\n').then(function() { driver.gettitle().then(function(title) { settimeout(function() { console.log(title); driver.quit(); }, 5000); }); }); }); } searchtextongoogle(); visit your lambdatest automation dashboard, to fetch your lambdatest's username and access key by clicking on the key icon on the top-right(see username and access keys).

Command line crash course - Learn web development
below is a screenshot with a “vanilla” macos terminal at the top, and a customised terminal with some extra icons and colors to keep it looking lively — both showing the results of running ls -l: note: to find out exactly what options each command has available, you can look at its man page.

Information for users
firefox accessibility skins and themes at the excellent access firefox website, you will find many valuable resources, including a list of firefox themes that have been specially designed for those with low vision: themes with high color constrast themes with big icons themes with extra large and bright icons themes with extra large and extra bold text join the mozilla accessibility community live chat both end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.

Mozilla’s UAAG evaluation report
(p3) p can turn on and off toolbars under show/hide can customize personal bookmarks toolbar bug 15144 is for the ability to add/remove toolbar icons bug 47418 is for the ability to rearrange toolbars guideline 12.

Index
the content you add to a listing is therefore vital: from making effective use of keywords in your descriptions, to get visibility in external search engine results, through having an icon that attracts a user’s attention from a category list, to screenshots that show how useful your add-on is.

Creating a Login Manager storage module
getservice(ci.nsiconsoleservice); return this.__logservice; }, log: function (message) { dump("sampleloginmanager: " + message + "\n"); this._logservice.logstringmessage("sampleloginmanager: " + message); }, // logs function name and arguments for debugging stub: function(arguments) { var args = []; for (let i = 0; i < arguments.length; i++) args.push(arguments[i]) this.log("ca...

Creating a spell check dictionary add-on
in addition to these required files, you may add optional files, for example to give your add-on an icon or to describe the license of the dictionary.

Debugging on Mac OS X
click the plus icon under the "arguments" list and type "-p <profile name>" (e.g.

Debugging on Windows
by default vc++ displays "{...}" and you need to click the small + icon to expand the members.

Installing headers using EXPORTS
here is an example <tt>makefile.in</tt> which has both c++ and idl headers: module = content xpidl_module = content_base exports = \ nsicontent.h \ nsidocument.h \ nsistylesheet.h \ $(null) xpidlsrcs = \ nsicontentpolicy.idl \ nsiselectioncontroller.idl \ $(null) include $(topsrcdir)/config/rules.mk ...

The Firefox codebase: CSS Guidelines
this is especially useful in conjunction with icons using -moz-context-properties: fill; where the icon can adjust to the right platform color automatically from the text color.

Obsolete Build Caveats and Tips
features that depend on this sdk include: windows vista parental controls file associations and application registration on vista and above ability to display the uac shield icon in the ui thunderbird windows search integration text services framework support there are two ways to obtain it: download the windows vista sdk from the microsoft download center.

Experimental features in Firefox
nightly 59 no developer edition 59 no beta 59 no release 59 no preference name security.mixed_content.block_object_subrequest insecure page labeling these two preferences add a "not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using http rather than https).

Index
10 firefox ui considerations for web developers activity stream, firefox, icons, mozilla, new tab, newtab, ui, web, web development, favicon there are a number of places within the firefox user interface where web sites are listed for the user to choose a destination to visit or a site to manage in some way.

Message manager
guides message manager overview frame script loading and lifetime communicating with frame scripts performance best practices frame script environment limitations of frame scripts process scripts api reference nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster nsimessagesender nsisyncmessagesender nsicontentframemessagemanager nsiprocessscriptloader ...

Storage access policy: Block cookies from trackers
this indicator is shown as a shield icon in the domain column.

Site Identity Button
depending on the configuration of your website, this button may display a number of different icons.

mozbrowseractivitydone
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserasyncscroll
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsercaretstatechanged
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserclose
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsererror
proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserfindchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserlocationchange
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsermanifestchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsermetachange
its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowseropensearch
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...

mozbrowseropentab
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowseropenwindow
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserresize
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserresize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserscroll
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscroll", function( event ) { console.log("the new scroll position is " + event.details.left + " across and " + event.details.top + "down."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserscrollareachanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollareachanged", function( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserscrollviewchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsersecuritychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowserselectionstatechanged
var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserselectionstatechanged", function( event ) { if(event.details.visible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsershowmodalprompt
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...

mozbrowserusernameandpasswordrequired
example var browser = document.queryselector("iframe[mozbrowser]"); browser.addeventlistener("mozbrowserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...

mozbrowservisibilitychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowservisibilitychange", function( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...

::-moz-tree-image
associated elements <xul:treeitem> <xul:treecell> style properties margin list-style position examples bookmark icons in the places window - mozillazine forum ...

How to Report a Hung Firefox
(simple) use the menu button to find the crash me icon and click the icon.

IME handling guide
imestatemanager asks desired ime state by calling nsicontent::getdesiredimestate() of the node.

AddonInstall
iconurl string the icon of the add-on being installed.

Services.jsm
appinfo nsixulappinfo nsixulruntime application information service appshell nsiappshellservice application shell service blocklist nsiblocklistservice blocklist service cache nsicacheservice cache service cache2 nsicachestorageservice cache storage service clipboard nsiclipboard clipboard console nsiconsoleservice error console service contentprefs nsicontentprefservice content preferences service cookies nsicookiemanager2 cookie manager 2 service cpmm nsimessagesender child process message manager4 crashmanager crashmanager.jsm dirsvc nsidirectoryservice nsiproperties directory service domstoragemanager...

WebRequest.jsm
you can use this api to implement a content policy in an add-on (for example, an ad or script blocker), as you could using nsicontentpolicy.

Webapps.jsm
) revertdownloadpackage: function(aid, aoldapp, anewapp, aisupdate, aerror) uninstall: function(amanifesturl) _promptforuninstall: function(adata) confirmuninstall: function(adata) denyuninstall: function(adata, areason = "error_unknown_failure") getself: function(adata, amm) checkinstalled: function(adata, amm) getinstalled: function(adata, amm) getnotinstalled: function(adata, amm) geticon: function(adata, amm) getall: function(acallback) isreceipt: function(data) addreceipt: function(adata, amm) removereceipt: function(adata, amm) replacereceipt: function(adata, amm) setenabled: function(adata) getmanifestfor: function(amanifesturl, aentrypoint) getappbymanifesturl: function(amanifesturl) getfullappbymanifesturl: function(amanifesturl, aentrypoint, alang) getmanifestcspb...

XPCOMUtils.jsm
examples definelazygetter var myservices = {}; cu.import('resource://gre/modules/xpcomutils.jsm'); //set it up xpcomutils.definelazygetter(myservices, 'as', function () { return cc['@mozilla.org/alerts-service;1'].getservice(ci.nsialertsservice) }); //when you need to use it myservices.as.showalertnotification('chrome://branding/content/icon64.png', 'this was lazyloaded', 'this is a notification from myservices.as', null, null); ...

L10n testing with xcode
press the run button in the upper left-hand corner (the button has a playback icon).

Localizing with Mercurial
in order to do so, right-click on your computer icon, choose properties > advanced > environmental variables, select path and click edit.

Localizing without a specialized tool
there is also a tooltip that appears when you hover over the magnifying glass icon on the right side of the bar.

Mozilla Quirks Mode Behavior
images (img elements) without alt attributes sometimes display placeholder icons in quirks mode.

Activity Monitor, Battery Status Menu and top
if a laptop is closed for several hours and then reopened, those hours are not included in the calculation.) battery status menu when you click on the battery icon in the os x menu bar you get a drop-down menu that includes a list of “apps using significant energy”.

Gecko Profiler FAQ
[ehsan] try clicking the toolbar icon for the extension, expanding the settings section, and enter the secret cheat code “,” in the threads field and click on “apply (restart profiler)”.

TimerFirings logging
86:3:3389 94 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] https://ad.doubleclick.net/ddm/adi/n7921.1283839cadreon.com.au/b9038144.122190976;sz=300x600;click=http://pixel.mathtag.com/click/img?mt_aid=2744535504761193354&mt_id=1895890&mt_adid=148611&mt_sid=973379&mt_exid=9&mt_inapp=0&mt_uuid=353d5460-19f6-4400-9bbd-d0fcc3bcf595&mt_3pck=http%3a//beacon-apac-hkg1.rubiconproject.com/beacon/t/d1f9921d-4e47-448f-b6ba-36cae1c31b65/&redirect=;ord=2744535504761193354?:83:0 94 801266240[7f7c1f248000]: [7163] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler 92 -495057024[7f74e105ba00]: [7108] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler the first column shows how many times the particular line appeared.

Midas editor module security preferences
if you have quick launch running (on windows, this is an icon in the toolbar), quit that too.

PKCS11 Implement
to do so, the user should follow these steps: click the security icon near the top of any communicator window.

NSS functions
and later port_free mxr 3.2 and later port_freearena mxr 3.2 and later port_geterror mxr 3.2 and later port_newarena mxr 3.2 and later port_realloc mxr 3.2 and later port_seterror mxr 3.2 and later port_setucs2_asciiconversionfunction mxr 3.2 and later port_setucs2_utf8conversionfunction mxr 3.2 and later port_setucs4_utf8conversionfunction mxr 3.2 and later port_strdup mxr 3.5 and later port_ucs2_asciiconversion mxr 3.2 and later port_ucs2_utf8conversion mxr 3.2...

Utility functions
and later port_free mxr 3.2 and later port_freearena mxr 3.2 and later port_geterror mxr 3.2 and later port_newarena mxr 3.2 and later port_realloc mxr 3.2 and later port_seterror mxr 3.2 and later port_setucs2_asciiconversionfunction mxr 3.2 and later port_setucs2_utf8conversionfunction mxr 3.2 and later port_setucs4_utf8conversionfunction mxr 3.2 and later port_strdup mxr 3.5 and later port_ucs2_asciiconversion mxr 3.2 and later port_ucs2_utf8conversion mxr 3.2...

Places utilities for JavaScript
bookmarks nsinavbookmarksservice history nsinavhistoryservice globalhistory nsibrowserhistory livemarks nsilivemarkservice annotations nsiannotationservice favicons nsifaviconservice microsummaries nsimicrosummaryservice tagging nsitaggingservice rdf nsirdfservice ptm nsiplacestransactionsservice clipboard nsiclipboard urifixup nsiurifixup special places these are essentially references to the id's of special folders within places.

Querying Places
uri, title, time, icon...) // see : https://developer.mozilla.org/en/nsinavhistoryresultnode dump(node.title+ "\n"); } // close container when done // see : https://developer.mozilla.org/en/nsinavhistorycontainerresultnode cont.containeropen = false; see also places query uris displaying places information using views ...

FUEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javasc...

SMILE
objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.

STEEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.

extIApplication
console readonly attribute exticonsole the console object for the application.

XPCOM array guide
example: a content node's list of nsicontent children.

Creating the Component Code
web lock user interface shows the icon that is used to activate the web lock mode (leftmost in the status bar) once you have installed the weblock component and the extra user interface.

Preface
finish implementing the weblock component: nsicontentpolicy, file i/o, locking, etc.

Using XPCOM Components
it registers itself for use when the browser starts up, and provides a factory that creates an instance of it for use when the user or administrator clicks the weblock icon in the browser's user interface.

Creating XPCOM components
y service modifying paths with nsifile manipulating files with nsifile using nsilocalfile for reading data processing the white list data iweblock method by method lock and unlock addsite removesite setsites getnext getsites hasmoreelements finishing the component using frozen interfaces copying 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 ...

Mozilla internal string guide
do not use iconv on *nix.

amIInstallTrigger
the value of the property should either be a string url, or an object with the following properties: url for the add-on's url iconurl for an icon for the add-on hash for a hash of the add-on.

mozIColorAnalyzer
this is intended to be used on favicon images.

nsIAnnotationObserver
see also places using the places annotation service using the places favicon service nsiannotationservice ...

nsIAppStartup
var aconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); var startupinfo = components.classes["@mozilla.org/toolkit/app-startup;1"] .getservice(ci.nsiappstartup_mozilla_2_0).getstartupinfo(); var keys = object.keys(startupinfo); keys.sort(function(a, b) { return startupinfo[a] - startupinfo[b]; }); for each (var name in keys) { aconsoleservice.logstringmessage(name + ": " + startupinfo[name]); } to calculate ho...

nsIAutoCompleteItem
inherits from: nsisupports last changed in gecko 1.7 attributes attribute type description classname string class name used to define some style through css like the colors, an icon url, and so on.

nsIBlocklistPrompt
these are javascript objects with properties: name - the plugin or extension name version - the version of the extension or plugin icon - the plugin or extension icon disable - can be used by the nsiblocklistprompt to allows users to decide whether a soft-blocked add-on should be disabled blocked - true if the item is hard-blocked, false otherwise item - the nsiplugintag or addon object acount optional the number of addons.

nsIChannel
see nsicontentsniffer [en-us] note: channels may ignore this flag; however, new channel implementations should only do so with good reason.

nsIChromeFrameMessageManager
see also content process event handling nsicontentframemessagemanager nsiframeloader nsiframemessagelistener ...

nsIClassInfo
content_node 1 << 6 specifies that this class implements nsicontent.

nsICookieService
, in nsiuri afirsturi, in nsichannel achannel); void setcookiestring(in nsiuri auri, in nsiprompt aprompt, in string acookie, in nsichannel achannel); void setcookiestringfromhttp(in nsiuri auri, in nsiuri afirsturi, in nsiprompt aprompt, in string acookie, in string aservertime, in nsichannel achannel); attributes attribute type description cookieiconisvisible boolean this attribute really doesn't belong on this interface.

nsIDOMMozNetworkStatsManager
browsingtrafficonly a boolean set to filter network stats by browsing traffic.

nsIDOMWindowInternal
controllers nsicontrollers readonly: returns the xul controllers of the chrome window.

nsIFrameLoader
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: this interface works in tandem with the nsicontentview interface to manage frames across processes if electrolysis is in use to support per-frame processes.

nsIMarkupDocumentViewer
obsolete since gecko 6.0 bidicontrolstextmode octet the order of bidirectional text in form controls.

nsIMessageListener
if the message was sent from a frame script using a nsicontentframemessagemanager, then this property is the xul <browser> element for the frame from which the message was sent.

nsINavBookmarkObserver
"title" the new title for the item "favicon" the "moz-anno" url for the new favicon image.

nsINavHistoryObserver
awholeentry); obsolete since gecko 2.0 void ontitlechanged(in nsiuri auri, in astring apagetitle); void onvisit(in nsiuri auri, in long long avisitid, in prtime atime, in long long asessionid, in long long areferringid, in unsigned long atransitiontype, in acstring aguid, out unsigned long aadded); constants constant value description attribute_favicon 3 the page's favicon changed.

nsIPrincipal
obsolete since gecko 1.8 csp nsicontentsecuritypolicy a content security policy associated with this principal.

nsISearchEngine
iconuri nsiuri a nsiuri corresponding to the engine's icon, stored locally.

nsITaggingService
tagcontainericonspec autf8string retrieves the url spec for the tag container icon methods taguri() this method tags a uri with the given set of tags.

nsITaskbarPreviewButton
image imgicontainer the icon displayed in the button.

nsITaskbarTabPreview
method overview void ensureregistration(); violates the xpcom interface guidelines nativewindow gethwnd(); violates the xpcom interface guidelines void move(in nsitaskbartabpreview anext); attributes attribute type description icon imgicontainer the icon displayed next to the title in the preview.

nsITaskbarWindowPreview
for example, the title and icon for each preview always match the title and icon of the corresponding window.

nsITreeView
for defining an icon for a cell.

nsIWinTaskbar
among these is the addition of the method getoverlayiconcontroller().

nsIXMLHttpRequest
you only want this if your url is to a zip file or some file you want to download and make a nsiarraybufferinputstream out of it or something xhr.send(null); } xhr('https://www.gravatar.com/avatar/eb9895ade1bd6627e054429d1e18b576?s=24&d=identicon&r=pg&f=1', data => { services.prompt.alert(null, 'xhr success', data); var file = os.path.join(os.constants.path.desktopdir, "test.png"); var promised = os.file.writeatomic(file, new uint8array(data)); promised.then( function() { alert('succesfully saved image to desktop') }, function(ex) { alert('failed in saving image to desktop')...

Setting HTTP request headers
var headername = "x-hello"; var headervalue = "world"; function log(text) { // var consoleservice = components.classes["@mozilla.org/consoleservice;1"].getservice(components.interfaces.nsiconsoleservice); // consoleservice.logstringmessage(text); } function myhttplistener() { } myhttplistener.prototype = { observe: function(subject, topic, data) { if (topic == "http-on-modify-request") { log("----------------------------> (" + subject + ") mod request"); var httpchannel = subject.queryinterface(components.interfaces.nsihttpchannel); ...

XPCOM category image-sniffing-services
if mozilla's built-in image code cannot identify an image, then any xpcom components implementing the nsicontentsniffer interface may register under the "image-sniffing-services" category, and will be queried to determine the mime type of the image being downloaded.