nsIFaviconDataCallback
toolkit/components/places/public/nsifaviconservice.idlscriptable please add a summary to this article. 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 oncomplete(in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amimetype); methods oncomplete() called when the required favicon's information is available. it's up to the invoking method to state if the callback is always invoked, or called on success only. check the method documentation to ensure that. the caller will receive the most information we can gather on the icon, but it's not guaranteed that all of them will be set. for some...
...it's up to the caller to check adatalen > 0 before using any data-related information like mime-type or data itself. ...
...st be too expensive to get it, or the method does not require we actually have any data). it's up to the caller to check adatalen > 0 before using any data-related information like mime-type or data itself. void oncomplete( in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amimetype ); parameters auri receives the "favicon uri" (not the "favicon link uri") associated to the requested page. this can be null if there is no associated favicon uri, or the callback is notifying a failure. adatalen size of the icon data in bytes. notice that a value of 0 does not necessarily mean that we don't have an icon. adata icon data, or an empty array if adatalen is 0. amimetype mime type...
...ot the "favicon link uri") associated to the requested page. this can be null if there is no associated favicon uri, or the callback is notifying a failure. adatalen size of the icon data in bytes. notice that a value of 0 does not necessarily mean that we don't have an icon. adata icon data, or an empty array if adatalen is 0. amimetype mime type of the icon, or an empty string if adatalen is 0. ...

PasswordCredential.iconURL - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...
...credential interface returns a usvstring containing a url pointing to an image for an icon. this image is intended for display in a credential chooser. the url must be accessible without authentication. syntax url =passwordcredential.iconurl value a usvstring containing a url. specifications specification status comment credential management level 1the definition of 'iconurl' in that specification. working draft initial definition. ...

nsIContentFrameMessageManager
interface provides the environment for scripts that are loaded into content frames using the nsiframescriptloader interface. it enables these scripts to receive messages from the chrome process and send messages back to the chrome process. 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. methods void dump(in domstring astr); domstring atob(in domstring aasciistring); domstring btoa(in domstring abase64data); dump() prints the specified string to standard output. parameters name type description astr string the message to log. ...
... nsidocshell: the top level docshell or null. read only. examples once you obtain the conten frame messge manager, you can send messages to listeners who registered with services.mm.addmessagelistener get content message manager from browser this could would run in a nsidomwindow scope. 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) .get...
...emanager); 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); ...

nsIContentViewer
docshell/base/nsicontentviewer.idlscriptable handles displaying content. inherits from: nsisupports last changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7) implemented by: ?????????????????????????????????????. ...
...ase/nsicontentviewer.idlscriptable handles displaying content. inherits from: nsisupports last changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7) implemented by: ?????????????????????????????????????. ...
.... native code only! note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7), this attribute was part of nsidocumentviewer. presshell nsipresshellptr read only. native code only! note: prior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7), this attribute was part of nsidocumentviewer. previousviewer nsicontentviewer the previous content viewer, which has been closed but not destroyed. native code only! sticky boolean methods clearhistoryentry() clears the current history entry. this is used to clear out the saved presentation state. void clearhistoryentry(); parameters none. close() all users of a content viewer are responsible for calling both close() and destroy(), in t...

nsIConverterInputStream
xpcom/io/nsiconverterinputstream.idlscriptable a unichar input stream that wraps an input stream. this allows reading unicode strings from a stream, automatically converting the bytes from a selected character encoding. 1.0 66 introduced gecko 1.8 inherits from: nsiunicharinputstream last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/converter-input-stream;1. ...
....0 66 introduced gecko 1.8 inherits from: nsiunicharinputstream last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/converter-input-stream;1. 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. methods init() initialize this stream. void init( in nsiinputstream astream, in string acharset, in long abuffersize, in...
...ream. in case of a buffer size of less than or equal to 0, the default size converter_buffer_size will be used. this is currently set to 8192 bytes. areplacementchar any unknown byte sequence will be replaced with this character. the default replacement character is u+fffd. a value of 0x0000 will cause an exception to be thrown if unknown byte sequences are encountered in the stream. see also nsiconverteroutputstream see reading textual data for an example. ...

Buddy icons in mail
warning: the content of this article may be out of date. it was imported from mozilla.org and last updated in 2003. 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. ...
...nname 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. if there is no card matching the email, the icon will not appear. if there is a card, but no screenname, the icon will not appear. and finally, if there is no icon, the icon will not appear. the reason this file name scheme was chosen was is this is how netscape 7.0 im stores buddy icons on disk. so if you use nim, and you use buddy icons, this will just work for free. notes: you do not have to be online to use this feature. we ...
... there is a card, but no screenname, the icon will not appear. and finally, if there is no icon, the icon will not appear. the reason this file name scheme was chosen was is this is how netscape 7.0 im stores buddy icons on disk. so if you use nim, and you use buddy icons, this will just work for free. notes: you do not have to be online to use this feature. we do not show any buddy icon if you are in "collapsed" header mode. ...

message-icon - Archive of obsolete content
...
... ...

question-icon - Archive of obsolete content
...
... ...

Window icons - Archive of obsolete content
note: this feature was removed at firefox 67. see also bug 1531836 for more details. starting with firefox 1.5, thunderbird 1.5, and xulrunner 1.8, you can specify an icon for a xul window by putting files named mywindow.ico (for windows) and mywindow.xpm or mywindow16.xpm (linux), where mywindow is the id of the <window> you want to attach the icon to, in the chrome/icons/default subfolder of your bundle. these icons will override the global icon files, which are located in app_dir/browser/chrome/icons/default. note: the global icons override does not currently work due to bug bug 543490. global icon files currently take precedence and bundles are only searched for icons which are not provided by the application. starting with firefox 3.0, xulrunner 3.0, thunderbird 3.0 and se...
... the global icon files, which are located in app_dir/browser/chrome/icons/default. note: the global icons override does not currently work due to bug bug 543490. global icon files currently take precedence and bundles are only searched for icons which are not provided by the application. starting with firefox 3.0, xulrunner 3.0, thunderbird 3.0 and seamonkey 2.0 you can now specify png format icons instead of xpm format on linux. you can specify up to 4 different sizes of png icons using the suffixes .png, 16.png, 32.png and 48.png. older versions to support older applications, such as firefox 1.0, you need to copy the icons to app_dir/chrome/icons/default manually on the first start (example code). ...

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! methods native code only!framechanged called when the frame for an image container has changed. void framechanged( in imgirequest arequest, in imgicontainer acontainer, [const] in nsintrect adirtyrect ); parameters arequest the...
...ntrect adirtyrect ); parameters arequest the image request for which the change occurred. acontainer the image container that changed. adirtyrect a rectangle indicating the portion of the image container that changed. notes the arequest parameter was added to this method in gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9). see also imgidecoderobserver imgicontainer ...

nsIConsoleMessage
xpcom/base/nsiconsolemessage.idlscriptable this interface is a base interface for messages passed to or from the nsiconsoleservice. inherits from: nsisupports last changed in gecko 1.7 implementations may provide an object that can be query interfaced, nsisupports.queryinterface(), to provide more specific message information. see nsiscripterror for an example. attributes attribute type description message wstring the message in a string format. [binaryname(messagemoz)] read only. ...
...anged in gecko 1.7 implementations may provide an object that can be query interfaced, nsisupports.queryinterface(), to provide more specific message information. see nsiscripterror for an example. attributes attribute type description message wstring the message in a string format. [binaryname(messagemoz)] read only. 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. name astring read only. value nsivariant read only. ...
... 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. name astring read only. value nsivariant read only. see also nsicontentprefservice2 nsicontentprefcallback2 ...

nsIContentPrefObserver
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void oncontentprefremoved(in astring agroup, in astring aname); void oncontentprefset(in astring agroup, in astring aname, in nsivariant avalue); methods oncontentprefremoved() called when a content preference is removed. void oncontentprefremoved( in astring agroup, in astring aname ); parameters agroup the group to which the removed preference belonged; this may be the uri of a web site. ...
...g the preference). ...

nsIController
inherits from: nsisupports last changed in gecko 1.7 method overview void docommand(in string command); boolean iscommandenabled(in string command); void onevent(in string eventname); boolean supportscommand(in string command); methods docommand() when this method is called, your implementation should execute the command with the specified name. void docommand( in string command ); parameters command the name of the command to execute. iscommandenabled() implement this method to indicate whether or not the specified command is enabled. ...
...ame the name of the event to process. ...

nsIConverterOutputStream
xpcom/io/nsiconverteroutputstream.idlscriptable this interface allows writing strings to a stream, doing automatic character encoding conversion. 1.0 66 introduced gecko 1.8 inherits from: nsiunicharoutputstream last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/converter-output-stream;1. 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. must be called bef...
... parameter. areplacementcharacter the replacement character to use when an unsupported character is found. a value of 0x0000 will cause an exception to be thrown upon attempts to write unsupported characters. exceptions thrown ns_error_loss_of_significant_data if areplacementcharacter is not encodable in the selected character encoding and an attempt is made to write the character. see also nsiconverterinputstream see writing textual data for an example. ...

-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. when the value 0 is used the image will act as usual and only display the alt attribute. note: even if the value is set to 1 the alt attribute will still be displayed, alongside the broken image icon. ...
...and only display the 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. notes this property will only work in gecko-based browsers. the use of this property is not recommended. a proper alt attribute should b...

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. this should be used in place of the image attribute. possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network. 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. ...

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

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

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 typically looks like an exclamation mark. 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. ...

listcell-iconic - Archive of obsolete content
specify the image using the image attribute. note that both an image and a label are added when this style is set. the label will take up extra space even when no label text is set. ...

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

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

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

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. this class may be used to remove this margin so that the menuitem appears on the left edge of the menupopup. ...

statusbarpanel-iconic-text - Archive of obsolete content
specify the image using the src attribute. specify the text using the label attribute. ...

statusbarpanel-iconic - Archive of obsolete content
specify the image using the src attribute. ...

statusbarpanel-menu-iconic - Archive of obsolete content
specify the image using the src attribute, and place a menupopup element inside the statusbarpanel. ...

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. they are used to improve user experience and enforce brand consistency. when a familiar icon is seen in the browser's address bar, for example, it helps users know they are in the right place. ...

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

nsIContainerBoxObject
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul browser, editor or iframe element implements this interface. attributes attribute type description docshell nsidocshell read only. the nsidocshell object that manages the contained document. the browser.xml, editor.xml and general.xml bindings use this property to gain access to other properties such as webnavigation, contentdocument and contentwindow. ...

nsIContentSecurityPolicy
content/base/public/nsicontentsecuritypolicy.idlscriptable describes an xpcom component used to model and enforce content security policies. 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 boolean permitsancestry(in nsidocshell docshell); void refinepolicy(in astring policystring, in nsiuri selfuri); void scanrequestdata(in nsihttpchannel achannel); void sendreports(in astring blockeduri, in astring violateddirective); short shouldload(in unsigned long acontenttype, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amimetypeguess, in nsisupports aextra); short shouldprocess(in unsigned long acontenttype, in nsiuri...

nsIContentSniffer
components implementing this interface can determine a mime type from a chunk of bytes. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to implement this interface use net-content-sniffers category. see netwerk/build/nsnetcid.h about ns_content_sniffer_category. method overview acstring getmimetypefromcontent(in nsirequest arequest, [const,array,size_is(alength)] in octet adata, in unsigned long alength); methods getmimetypefromcontent() given a chunk of data, determines a mime type. information from the given request may be used in order to make a better decision. note: implementations should consider the request read-only. ...

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. this occurs any time a new port becomes available, or when a previously available port becomes unavailable. for example, this event is fired whenever a midi device is either plugged in to or unplugged from a computer. 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. ...

Notification.icon - Web APIs
note: this feature is available in web workers. 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. living standard living standard ...

Theme changes in Firefox 2 - Archive of obsolete content
ng point for figuring out the changes you need to make. file description of change browser/bookmarks/addbookmark.css updated to include microsummary-related css changes. browser/bookmarks/bookmarksproperties.css new file; includes microsummary-related css. 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/dropmark-nav.png new file; used as the drop-down menu arrow on the navigation buttons. browser/enginemanager.css new file; css used for the search engine manager. browser/feeds/addfeedread...
...e drop-down menu arrow on the navigation buttons, when using small icons. browser/dropmark-nav.png new file; used as the drop-down menu arrow on the navigation buttons. browser/enginemanager.css new file; css used for the search engine manager. browser/feeds/addfeedreader.css new file; css used for the window to add a new feed reader. browser/feeds/feedicon.png new file; the rss feed icon. browser/feeds/feedicon16.png new file; the 16x16 pixel version of the rss feed icon. browser/feeds/subscribe.css new file; css used for the window to subscribe to a news feed. browser/go-rtl.png new file; go icon to use if it's positioned at the left end of the url field. browser/preferences/preferences.css file t...
...ndow to subscribe to a news feed. browser/go-rtl.png new file; go icon to use if it's positioned at the left end of the url field. browser/preferences/preferences.css file that skins the preferences window. browser/safebrowsing/browser-protection.css new file; css for the window that appears to warn the user that a site may be fraudulent, as well as the url bar icon that indicates a site may be fraudulent. browser/safebrowsing/close16x16.png new file; this is the icon displayed in the safe browsing warning window as a close box for the window. browser/safebrowsing/dim.png new file; this is a graphic overlaid on top of the contents of the window to "dim" it when the safe browsing warning window is displayed. it should use translucency ...
...And 40 more matches

ui/button/toggle - Archive of obsolete content
like action buttons, you can control their state on a per-window or per-tab basis as well as globally. toggle buttons have two extra features: they emit a change event when clicked, as well as a click event. ...
...ve two extra features: they emit a change event when clicked, as well as a click event. they have an extra attribute checked that is automatically toggled when the button is clicked. when a button is checked it gets a "pressed" look in the user interface (note that the "pressed" look currently does not work in mac os x). ...
...gled when the button is clicked. when a button is checked it gets a "pressed" look in the user interface (note that the "pressed" look currently does not work in mac os x). 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: however, users can move it to the firefox menu panel: badged buttons new in firefox 36. you can add a "badge" to a button using its badge property. t...
...And 33 more matches

ui/button/action - Archive of obsolete content
experimental add a button to the firefox user interface. 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. you can add a "badge" to a button using its bad...
... you can add a "badge" to a button using its badge property. this can be a number or a string, and you can update it at any time. ...
...add a "badge" to a button using its badge property. this can be a number or a string, and you can update it at any time. ...
...And 25 more matches

Index
t interface is the main interface to expose hyperlinks in a document, typically a text document, that are used to reference other documents. a typical implementation is to implement this interface on the smallest text object such as a paragraph of text. 168 iaccessibleimage interfaces, xpcom, xpcom interface reference this interface is used for a representation of images like icons on buttons. iaccessibleimage only needs to be implemented in certain situations. some examples are: 169 iaccessiblerelation interfaces, needscontent, xpcom, xpcom interface reference returns a localized version of the relation type. 170 iaccessibletable interfaces, xpcom, xpcom interface reference typically all accessible objects that represent cells or ...
...firmation that the user wants to start the installs. 182 amiwebinstaller extension manager, interfaces, interfaces:scriptable, reference, xpcom interface reference installs an array of add-ons at the request of a webpage. 183 imgicache interfaces, interfaces:scriptable, needscontent, xpcom interface reference evict images from the cache. ...
... 183 imgicache interfaces, interfaces:scriptable, needscontent, xpcom interface reference evict images from the cache. 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. 186 imgidecoder this interface is the base class for decoders for specific image formats. 187 imgidecoderobserver interfaces, inte...
...And 22 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
o support aero glass. @media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread. 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.pn...
... the problem is commonly caused by a -moz-appearance:menulist style rule in chrome://global/skin/menulist.css. ...
...ing mode when in private browsing mode there needs to be a visual difference to the firefox app button that is displayed when tabs are on top and the menu bar is disabled. text only toolbar buttons not aligned properly when text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons may not align properly. ...
...And 18 more matches

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
o discover your buttons. keep in mind most users don't know how to customize toolbars in firefox. let's add our own toolbar. this is done in the overlay as well. <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 toolbox is the collection of toolbars in firefox, including the main menu bar. le...
...ain menu bar. let's look at the attributes we used: the toolbarname is the name that will appear on the view > toolbars menulist. this menu allows hiding and showing any toolbar. the customizable attribute determines if the user can customize the toolbar. you should normally set this to true, unless you have strong reasons not to want users changing your toolbar. the mode attribute is set to icons, which is the usual value. this can be changed in the customize dialog by the user. the context attribute should also be set if you want a customizable toolbar. it points to the id of a popup element that holds the customization options that are displayed when the user right-clicks on the toolbar. this popup is already part of the main window, so it doesn't need to be implemented again. the de...
... changed in the customize dialog by the user. the context attribute should also be set if you want a customizable toolbar. it points to the id of a popup element that holds the customization options that are displayed when the user right-clicks on the toolbar. this popup is already part of the main window, so it doesn't need to be implemented again. the defaultset attribute lists the ids of the icons you want to include on your toolbar by default. it's a comma-separated list of ids, and it can also include other special values: spacer, separator and spring. spacer represents an empty button space, separator a vertical separation line and spring a flexible empty area that stretches. finally, the insertbefore attribute places our toolbar above the bookmarks toolbar. this is a matter of person...
...And 16 more matches

Firefox UI considerations for web developers
u visit that firefox thinks you're likely to want to visit again, as well as potentially some sites that have been pinned to always appear in that space. firefox's top sites box in this article, we take a look at how to influence the appearance of your site in firefox user interface elements such as the top sites box. ...
...article, we take a look at how to influence the appearance of your site in firefox user interface elements such as the top sites box. 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. how an icon is selected the new tab page chooses icons to use for top sites by trying a series of methods until it obtains an icon to use: a global "top sites" list is checked. this list is created by a mozilla service calle...
...y the user, you may wish to ensure that your site provides a good icon to use in places like this. how an icon is selected the new tab page chooses icons to use for top sites by trying a series of methods until it obtains an icon to use: a global "top sites" list is checked. this list is created by a mozilla service called tippy top. the data store provided by tippy top includes an optimized icon for each of the sites in the list; if the site is on this list, that icon is used. if tippy top doesn't include the site, firefox looks in its places data store for icons specified in the page's <head> element; if an svg icon is available, that icon is selected. otherwise, bitmapped icons which are at least 96 pixels wide are considered. if one is found to have a width of exactly 96 pix...
...And 16 more matches

<link>: The External Resource Link element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 16 more matches

Index - Archive of obsolete content
loader/cuddlefish add-on sdk, cfx the sdk's module loader. 93 loader/sandbox create javascript sandboxes and execute scripts in them. 94 net/url no summary! 95 net/xhr provides access to xmlhttprequest functionality. 96 places/bookmarks create, modify, and retrieve bookmarks. 97 places/favicon helper functions for working with favicons. 98 places/history access the user's browsing history. 99 platform/xpcom implement xpcom objects, factories, and services. 100 preferences/event-target add-on sdk listen to changes to the preferences system in firefox. 101 preferences/service add-on sdk, jetpack, s...
...ey apply. 385 creating a mozilla extension add-ons, extensions a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). 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. whether or not the latest version of the code is compiling successfully and passing tests). the extension will access tinderbox, mozilla.org's webtool for tracking source code status, to get the status of the code. 386 adding the structure add-ons, extensions the ui for our extension is an ico...
...installer that users can run from within mozilla to add the extension to their mozilla installation. 396 prerequisites add-ons, extensions in order to complete this tutorial you need to have and know how to use the following programs on your computer: 397 specifying the appearance add-ons, extensions 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: 398 tinderbox add-ons, extensions tinderbox is a web tool for tracking the status of the mozilla source code. it con...
...And 15 more matches

Theme changes in Firefox 4 - Archive of obsolete content
to find all the skin resources you need. /chrome/browser/skin contains application-specific skin resource files. /chrome/toolkit/skin contains toolkit skin files. note: when extracting omni.jar, you may incorrectly get false warnings from some virus protection software. in addition, due to the way the archive is optiimized, some zip utilities don't work with it. ...
...chrome/browser/skin contains application-specific skin resource files. /chrome/toolkit/skin contains toolkit skin files. note: when extracting omni.jar, you may incorrectly get false warnings from some virus protection software. in addition, due to the way the archive is optiimized, some zip utilities don't work with it. ...
...work with it. 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 value does not necessarily reflect the user preference in the toolbar customization palette anymore. the theme can now override the value by setting a special css property on the toolbar. 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 14 more matches

panel - Archive of obsolete content
or to its show() method. ...
...od. ...
...ttons 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}); } updating panel content you can update the p...
...And 13 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
ng 9 each item in a menu is marked up with the menuitem tag. use the menuseparator element to insert a separator bar that groups items together. both menu and menuitem elements take the label attribute to set their labels. insert menu elements into a menubar element to create multiple menus. you can easily create hierarchical menus by inserting menupopup and menu elements. 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 shows an example of how this is displayed. 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 respond to mouse and keyboard inputs in html...
...erence that menupopup element by its id, and display its contents as a contextual menu. listing 12 shows an example. <button label="send" oncommand="send();" context="button-context"/> <menupopup id="button-context"> <menuitem label="send with new tab" oncommand="sendinnewtab();"/> </menupopup> buttons buttons that users can click on are defined using the button element. ...
...em label="send with new tab" oncommand="sendinnewtab();"/> </menupopup> buttons buttons that users can click on are defined using the button element. to show one with an icon as shown in figure 8, define an image's uri as the value for the image attribute. note: to see this sample in operation, use any image as the one to display and place it in the same folder as the xul document. using the icon attribute instead of the image attribute allows you to display buttons with icons that are standard for the platform. possible values for the icon attribute are given in table 2. ...
...And 11 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
not allowed dns-prefetch tells the browser to preemptively perform dns resolution for the target resource's origin external resource not allowed not allowed external referenced document is not part of the same site as the current document. not allowed annotation annotation help link to context-sensitive help. link link link icon icon representing the current document. external resource not allowed not allowed license indicates that the main content of the current document is covered by the copyright license described by the referenced document. link link link manifest web app manifest link not allowed not allowed modulepreload tells to browser to preemptiv...
...etween the two. in this case, on <link> and <form>, if the rel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. <a> and <area> will still created links, but without a defined relationship. like all html keyword attribute values, these values are case-insenstive. 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. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, n...
... alternate indicates an alternate representation of the current document. ...
...And 11 more matches

What’s in the head? Metadata in HTML - Learn web development
previous overview: introduction to html next the head of an html document is the part that is not displayed in the web browser when the page is loaded. 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. prerequisites: basic html familiarity, as covered in getting started with html. objective: to learn about the html head, its purpose, the most important items it can contain, and what effect it can have on the html document. what is the html...
...ly obvious where the <h1> content appears, and where the <title> content appears! you should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. have some fun with it. the <title> element contents are also used in other ways. 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. the <title> contents are also used in search results, as you'll see below. metadata: the <meta> element metadata is data that describes data, and html has an "official" way of adding metadata to a document — the <meta> element. of course, the other stuff we are talking about in this arti...
... effect of this is that when you link to mdn web docs on facebook, the link appears along with an image and description: a richer experience for users. twitter also has its own similar proprietary metadata called twitter cards, which has a similar effect when the site's url is displayed on twitter.com. ...
...And 10 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...
... true color with alpha n/a gif does not support true color pixels. compression lossless (lzw) licensing while the gif format itself is open, the lzw compression algorithm was covered by patents until the early 2000s. ...
... gif does not support true color pixels. compression lossless (lzw) licensing while the gif format itself is open, the lzw compression algorithm was covered by patents until the early 2000s. 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. an ico file can co...
...And 10 more matches

dev/panel - Archive of obsolete content
rious properties . you can set the constructor up manually if you like, or you can use the add-on sdk core/heritage module to simplify the mechanics of inheriting from panel. ...
...require("sdk/core/heritage"); function mypanel() {}; mypanel.prototype = extend(panel.prototype, { label: "my panel", tooltip: "...", .... }); in the constructor definition there are a number of mandatory and optional parameters for you to supply. name type description label string the string to display in the toolbox toolbar. 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". mandatory url string a resource:// url pointing to an html file, typically in your add-on's "data" directo...
...odule, initializing it with the newly defined constructor. ...
...And 9 more matches

Index - Archive of obsolete content
ased language for building user interfaces of applications like firefox. 2 &lt;statusbarpanel&gt; deprecated, xul, xul elements, xul reference an individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. 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. 3 a xul bestiary add-ons, extensions, needstechnicalreview, xul this xulnote presents some of the key concepts and terms in the xul development environment. the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms. i ...
... summary! 142 hidespinbuttons xul attributes, xul reference no summary! 143 highlightaccesskey no summary! 144 highlightnonmatches xul attributes, xul reference no summary! 145 homepage xul attributes, xul reference no summary! 146 href xul attributes, xul reference no summary! 147 icon xul attributes, xul reference no summary! 148 iconsize toolbar, xul, xul attribute no summary! 149 id xul attributes, xul reference no summary! 150 iframe.transparent no summary! 151 ignoreblurwhilesearching xul attributes, xul reference no summary! 152 ignorecase xul attributes, xul refe...
... xul methods, xul reference no summary! 484 getelementsbyattributens xul methods, xul reference no summary! 485 getformattedstring xul methods, xul reference if you need to handle substitutions involving plurals, take a look at localization and plurals. ...
...And 9 more matches

Video and Audio APIs - Learn web development
xploring the html open the html index file. ...
... the <video> ...
...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 in a <div> element, so it can all be styled as one unit if needed. the <video> element contains two <source> elements so that different formats can be loaded depending on the browser viewing the site. the controls html is probably the most i...
...And 9 more matches

How to make PWAs installable - Progressive web apps (PWAs)
ify that the app be launched in fullscreen or standalone mode, thus removing the default browser user interface that would otherwise be present, creating an even more seamless and native-like feel. 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. if developing your app using firefox, be aware that you will need a service worker to be compatible with chromium-based browser...
...er. if developing your app using firefox, be aware that you will need a service worker to be compatible with chromium-based browsers. the manifest file the key element is a web manifest file, which lists all the information about the website in a json format. it usually resides in the root folder of a web app. 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. this information is needed for the browser to present the web app properly during the installation process, as well as within the device's app-launching interface, such as the home screen of a mobil...
...ed in a json structure. however, the .webmanifest file format is explicitly mentioned in the w3c manifest specification, so that's what we'll use here. ...
...And 9 more matches

Adding a Button to the Toolbar - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. to add a button to the toolbar, use the action button or toggle button modules. create a new directory, navigate to it, and execute jpm init, accepting all the defaults. ...
... to follow this tutorial you'll need to have learned the basics of jpm. to add a button to the toolbar, use the action button or toggle button modules. create a new directory, navigate to it, and execute jpm init, accepting all the defaults. ...
... to follow this tutorial you'll need to have learned the basics of jpm. to add a button to the toolbar, use the action button or toggle button modules. create a new directory, navigate to it, and execute jpm init, accepting all the defaults. ...
...And 8 more matches

Getting started (cfx) - Archive of obsolete content
"cfx run". have fun!" implementing the add-on now you can write the add-on's code, which goes in the "main.js" file in your "lib" directory. this file was created for you in the previous step. ...
..." implementing the add-on now you can write the add-on's code, which goes in the "main.js" file in your "lib" directory. this file was created for you in the previous step. ...
... now you can write the add-on's code, which goes in the "main.js" file in your "lib" directory. this file was created for you in the previous step. ...
...And 8 more matches

Deploying XULRunner - Archive of obsolete content
be easier to create a self contained portable application, as described here, and deploy it with a generic installer that would create shortcuts to scripts that launch your application in the unregistered bundled xulrunner. the responsibility still lies with the developer to provide the correct version of xulrunner per platform. 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. windows on windows, xulrunner does not yet have a complete built-in installation solution; app developers should use pre-existing solutions for a native windows installer. an example of one such solution may be found in the article: creating a windows inno setup installer for xulrunner applications. the installed files s...
...in the article: creating a windows inno setup installer for xulrunner applications. the installed files should be arranged in the following directory structure: installdir/ application.ini components/ ... components which are part of the application chrome/ ... chrome which is part of the application ... additional application files such as icons, etc myapplicationname.exe (this is the "stub executable"... you should copy and rename this file from xulrunner-stub.exe in your xulrunner installation.) xulrunner/ ... copy xulrunner/ to this directory when deploying with xulrunner 2.0 and above do the following: move chrome.manifest to the root directory, and adjust resource paths inside chrome.manifest ...
... starting with xulrunner 39 the xulrunner library files are no longer able to reside in a xulrunner framework directory. instead, the library files are placed directly into the macos directory alongside the main executable file. here's how the entire application bundle looks: myapp.app/ contents/ info.plist pkginfo resources/ application.ini app_icon.icns components/ ... components which are part of the application chrome/ ... chrome which is part of the application ... additional application files such as icons, etc macos/ xulrunner (this is the "stub executable"... you should copy this file from /library/frameworks/xul.
...And 8 more matches

Finishing the Component
use unfrozen interfaces, you should contact the developers who are responsible for the code you're trying to use (i.e., module owners) and ask them how best to do what you are trying to do. be as precise you possibly can. they may be able to suggest a supported alternative, or they may be able to notify you about pending changes. the interface that we need for this project is something called nsicontentpolicy. at the time this book was written, this interface was under review. an interface reaches this state when a group of module owners and peers are actively engaged in discussion about how best to expose it. usually there are only minor changes to interfaces marked with such a tag. even with interfaces marked "under review," however, it's still a good idea to contact the module owners resp...
... are interested in using. copying interfaces into your build environment to get and implement interfaces that are not part of gecko in your component, simply create a new directory in the gecko sdk named unfrozen. copy the headers and idl files that you need from the content/base/public source directory of the gecko build into this new directory. ...
... copying interfaces into your build environment to get and implement interfaces that are not part of gecko in your component, simply create a new directory in the gecko sdk named unfrozen. copy the headers and idl files that you need from the content/base/public source directory of the gecko build into this new directory. (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. the weblock class will then support four interfaces: nsisupports, nsiobserver, nsicontentpolicy, and iweblock. weblock interfaces ...
...And 8 more matches

Install Manifests - Archive of obsolete content
veloper>koos van der merwe</em:developer> hasembeddedwebextension if present and given the value "true", this indicates that this add-on contains an embedded webextension. <em:hasembeddedwebextension>true</em:hasembeddedwebextension> homepageurl a link to the add-on's home page - intended for display in the user interface. ...
...developer> hasembeddedwebextension if present and given the value "true", this indicates that this add-on contains an embedded webextension. <em:hasembeddedwebextension>true</em:hasembeddedwebextension> homepageurl a link to the add-on's home page - intended for display in the user interface. 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. if this property is not specified, a default icon is used. <em:iconurl>chrome://myext/skin/icon.png</em:iconurl> note: for the above example to work you will also have to add a skin package line to your chrome.manifest file. see chr...
...yed at 32x32 in firefox 3.6 and lower. in firefox 4.0 and later the icon can be up to 48x48 pixels in size. if this property is not specified, a default icon is used. <em:iconurl>chrome://myext/skin/icon.png</em:iconurl> note: for the above example to work you will also have to add a skin package line to your chrome.manifest file. see chrome registration#skin. alternatively you can place your icon in the directory specified in your content package line. gecko 1.9.2 note starting in gecko 1.9.2 (firefox 3.6), you can also simply include your icon, named icon.png, in the base directory of the add-on. ...
...And 7 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
ckage, but putting them in the skin package has the benefit of making it possible to design guis that match specific firefox themes, and allowing theme developers to create special visual effects for extensions. first, add the skin directory and its subordinate files to your helloworld directory as shown in figure 10. the purpose of each of these files is explained in table 4. download the files icon.png and icon-small.png from the resources website and place them appropriately. fixme: figure 10: directory structure with skin package added add the skin package update chrome.manifest with the contents of listing 10. listing 10: additional content for chrome.manifest skin helloworld classic/1.0 skin/classic/ style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css st...
... label="hello, world!" class="toolbarbutton-1" command="helloworldcommand" /> </toolbarpalette> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" command="helloworldcommand" /> </menupopup> </overlay> create the style sheet update the file overlay.css with the contents of listing 12. ...
...barbutton-1" command="helloworldcommand" /> </toolbarpalette> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" command="helloworldcommand" /> </menupopup> </overlay> create the style sheet update the file overlay.css with the contents of listing 12. ...
...And 7 more matches

window - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] describes the structure of a top-level window. it is the root node of a xul document. it is by default a horizontally oriented box. as it is a box, all box attributes can be used. by default, the window will have a platform-specific frame around it. 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. the <windowid> is the value of the id attribute on the window. this allows you to have a different icon for each window. without including the css file at "chrome://global/skin/", the window will not be stylized and will be invisible and glitchy when ...
...parsing error: undefined entity...<window" can be caused by a missing or unreachable dtd file referenced in the xul file. a filename following the system keyword in a doctype declaration may silently fail to load and the only error message will be an undefined entity error on the next xul element. ...
...d by a missing or unreachable dtd file referenced in the xul file. a filename following the system keyword in a doctype declaration may silently fail to load and the only error message will be an undefined entity error on the next xul element. 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 7 more matches

CustomizableUI.jsm
this way is simpler because you don't have to maintain a style sheet. var mywidgetlistener = { onwidgetadded: function(awidgetid, aarea, aposition) { console.log('a widget moved to an area, ...
...ndowsselectedtabswindow = 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. this way is simpler because you don't have to maintain a style sheet. var mywidgetlistener = { onwidgetadded: function(awidgetid, aarea, aposition) { console.log('a widget moved to an area, arguments:', arguments); if (awidgetid != 'noida') { ...
... appropriate icon. this way is simpler because you don't have to maintain a style sheet. ...
...And 7 more matches

Using popup notifications
convenient times. for example, this popup notification is displayed when a web site requests geolocation information: this lets the user decide whether or not to share their location when it's convenient to do so, instead of being compelled to do it at once. 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. a popup notification can include a text message, a button action, and zero or more additional actions provided in a drop-down menu accessed through the notification's button. creating a popup notification popup notifications can be created using the popupnotifications.jsm javascript code module. this code module is imported by the browser, so you don't need to do it exp...
...label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to the user through the drop-down menu. ...
...ing", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to the user through the drop-down menu. ...
...And 7 more matches

Work with animations - Firefox Developer Tools
, with a draggable widget you can use to move to any point in the timeline and see the page at that point. it displays animations created using css transitions, css @keyframes rules, or the web animations api. starting in firefox 48, it will show animations applied to the ::before and ::after pseudo-elements. to see how it works, we'll walk through an example. 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. these animations are made using the web animations api. let's use the animation inspector to see what's going on in this example. right-click in the box and select "inspect element" make sure the selected element...
...ed with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed). animation bars each animation or transition is shown as a horizontal bar laid across the timeline. the bar is: blue if a transition was used to animate a property orange if a @keyframes animation was used green if the web animations api was used the bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different css properties). the bar is shaped to reflect the easing effect used for the animation. in the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out. if the animation used css transitions, there is one bar for each pro...
...mation's easing (or timing function). the animation's fill the playback rate of the animation information about the animated element to the left of each bar is a selector for the element that the animation applies to. if you hover over this selector, the element is highlighted in the page. click the selector to select the element in the inspector. to the left of the selector is a "target" icon (). clicking this icon locks the highlighter on the element. animation details if you click one of the bars, you'll see details of all the properties that were changed in the animation. for example, try clicking on the bar for img#icon's animation: this is telling us that two properties were modified: filter and transform. each dot represents an entry for that property in the set of keyframe...
...And 7 more matches

Add to Home screen - Progressive web apps (PWAs)
single tap. this guide explains how a2hs is used, and what you need to do as a developer to allow your users to take advantage of it. why a2hs? a2hs is thought to be part of the progressive web app philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. 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. a2hs makes this possible. what browsers support a2hs? a2hs is supported in all mobile browsers, except ios webview. it's also supported in some chromium desktop browsers. firefox has had mobile support since v58 and is working on desktop support. see caniuse.com for exact details. how do you use it? we've written a ver...
... that doesn't do much, but was developed with the necessary code to allow it to be added to a home screen, as well as a service worker to enable it to be used offline. the example displays a series of fox pictures. if you have firefox for android available, use it to navigate to our demo at https://mdn.github.io/pwa-examples/a2hs/. 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. tapping this will show a confirmation banner — pressing the big + add to home screen button completes the action, adding the app to the home screen. (note: in android 8 and higher, a system-level "add to home screen" permission dialog will be shown first.)...
... chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen. note: you can find out a lot more about chrome install banners from the article web app install banners. 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. regardless of which browser you are using, when you choose to add the app to your home screen, you'll see it appear along with a short title, in the same way that native apps do. tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser ui around it. how do you make an app a2hs-ready? to enable your app to be added to a home screen, it...
...And 7 more matches

Getting Started (jpm) - Archive of obsolete content
d-on's code. unless you've changed the value of "entry point" ("main" in package.json), this goes in "index.js" file in the root of your add-on. this file was created for you in the previous step. 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. in cfx, the entry point defaults to "main.js", and is located...
...://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. in cfx, the entry point defaults to "main.js", and is located in the "lib" directory under the add-on's root. save the file. 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. if firefox can not be located, or you have installed firefox developer as an alternate browser, you may need to provide the path to it. for example, in ubu...
... 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. if firefox can not be located, or you have installed firefox developer as an alternate browser, you may need to provide the path to it. ...
...And 6 more matches

Updating addons broken by private browsing changes - Archive of obsolete content
this document, contact josh matthews with further questions or clarifications, or file a bug if your extension has stopped working due to a change described here and you are having trouble updating it. ...
...nt, contact josh matthews with further questions or clarifications, or file a bug if your extension has stopped working due to a change described here and you are having trouble updating it. ...
...tions or clarifications, or file a bug if your extension has stopped working due to a change described here and you are having trouble updating it. ...
...And 6 more matches

Adding the structure - Archive of obsolete content
« previousnext » the ui for our extension is an icon in the status bar. to implement this ui, we'll add a statusbarpanel element to the statusbar element in the navigator.xul file. ...
...in the navigator.xul file. ...
...it...
...And 6 more matches

Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
one is chosen. this is the class that handles deciding where the data from the load should go. supporting roles necko this is the mozilla networking library. this handles actually going out and getting the data. it also handles determining the mime type of the data, which is used to decide who gets the data. category manager this is used in a last-ditch attempt to find a content listener. 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. nsiexternalhelperappservice if we can't do anything else with a load, w...
...the prose description below has been updated. the changes do not affect functionality and the step numbers in the diagram are still accurate. guided tour during startup and component initializ...
... which does some more flag massaging and then calls into the uriloader. nsuriloader::openuri gets a channel to open, a boolean indicating whether this load is the result of a link click, and an nsisupports "window context" (the docshell triggering the load, actually, but in drag and heavy makeup). it immediately hands off to nsuriloader::openchannel. nsuriloader::openchannel notifies the nsiuricontentlistener hanging off the window context, if any, of the start of the load; this gives embedders a chance to abort the load if this uri type is something they want to handle in the embedding app. if the load is not aborted, we create an nsdocumentopeninfo object for this load, passing it the "this is a link click" boolean and the window context. we then set the channel's nsiloadgroup to the one...
...And 6 more matches

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
abel;" tooltiptext="&toolbarbutton.tooltip;" oncommand="myextension.ontoolbarbuttoncommand(event);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button). see below for the list of common palette ids. class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text mode; it also adjusts padding. set the command to be executed when the button is clicked in the oncommand attribute. if you need to handle middle-click, add this line after the oncommand line. onclick="checkformiddleclick(this, event)" you can also handle middle-click and right-click using onclick handler and check event.button in it like this: <toolbarpalette id="browsertoolba...
...rtoolbarpalette') will not work. this is the code to create and add it in. 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. watch for a snippet that you can copy and paste into scratchpad, and then run on gists@github here: _ff-addon-snippet-addtoolbarbuttontopalette.js . it is based on the co...
...g the toolbar button to the palette rather than creating an element and then appendchild to the toolbar (document.getelementbyid('nav-bar')) or appendchild to the addon bar (document.getelementbyid('addon-bar')) is that once in the toolbar palette, users can configure it through the customize menu. they can drag it to the addon bar or to the toolbar. ...
...And 6 more matches

Network request list - Firefox Developer Tools
est columns you can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu. a reset columns command is available on the context menu to reset the columns to their initial configuration. you can also change the width of the columns to help make the information you are looking for easier to view. the mouse pointer changes to a resize icon when you move it over the border of a column. you can drag to manually set the size of column. starting in firefox 76 you can double-click a column divider to resize the column to the left of it to fit its contents. the reset columns command on the context menu also resets the width of the columns to the default values. clicking the column header label sorts the request list by that column. y...
... might see a red circle with a diagonal slash for responses that were blocked by the browser or the server. method: the http request method used. domain: domain of the path requested. if the request used ssl/tls and the connection had security weaknesses such as weak ciphers, you'll see a warning triangle next to the domain. y hover over the domain to see the ip address. there's an icon next to the domain that gives you extra information about the security status of that request. see security icons. file: the basename of the file requested. (starting in firefox 80) on the right edge of the file column, a turtle icon appears if the server waiting time exceeds a threshhold (default: 500 ms). a tooltip explains the problem. you can configure the threshhold in the config...
...ature is called race cache with network (rcwn). if the resource was blocked, the message indicates why it was blocked. for example, "csp", "malware", "cors missing allow origin", "blocked by [name of extension]". size: the size of the transferred resource. ...
...And 6 more matches

HTMLImageElement.alt - Web APIs
of the page. syntax htmlimageelement.alt = alttext; let alttext = htmlimageelement.alt; value a domstring which contains the alternate text to display when the image is not loaded or for use by assistive devices. the alt attribute is officially mandatory; it's meant to always be specified. 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 compatibility reasons, browsers generally will accept an image without an alt attribute, but you should try to get into the habit of using it. usage notes the fundamental guideline for the alt attribute is that every image's alternate text should be able to replace the image without altering the meaning of the page. you should ne...
...ht: 1em; } result images used as buttons when using an image as a button (by using it as the only visible child of an <a> element representing a hyperlink), the alt attribute must be used to convey the purpose of the button. in other words, it should be the same text you would use in a textual button to serve the same purpose. ...
...isible child of an <a> element representing a hyperlink), the alt attribute must be used to convey the purpose of the button. in other words, it should be the same text you would use in a textual button to serve the same purpose. 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. ...
...And 6 more matches

OpenSearch description format
ets] should be customized for the specific plugin you're writing. ...
...the specific plugin you're writing. ...
.../opensearchdescription> shortname a short name for the search engine. it must be 16 or fewer characters of plain text, with no html or other markup. description a brief description of the search engine. it must be 1024 or fewer characters of plain text, with no html or other markup. inputencoding the character encoding to use when submitting input to the search engine. ...
...And 6 more matches

Porting the Library Detector - Archive of obsolete content
res. the add-on is paul bakaus's library detector. the library detector tells you which javascript frameworks the current web page is using. it does this by checking whether particular objects that those libraries add to the global window object are defined. for example, if window.jquery is defined, then the page has loaded jquery. for each library that it finds, the library detector adds an icon representing that library to the status bar. it adds a tooltip to each icon, which contains the library name and version. you can browse and run the ported version in the sdk's examples directory. how the library detector works all the work is done inside a single file, librarydetector.xul this contains: a xul overlay a script the xul overlay adds a box element to the browser's status ba...
... the browser's status bar: the script does everything else. the bulk of the script is an array of test objects, one for each library. each test object contains a function called test(): if the function finds the library, it defines various additional properties for the test object, such as a version property containing the library version. each test also contains a chrome:// url pointing to the icon associated with its library. the script listens to gbrowser's domcontentloaded event. when this is triggered, the testlibraries() function builds an array of libraries by iterating through the tests and adding an entry for each library which passes. once the list is built, the switchlibraries() function constructs a xul statusbarpanel element for each library it found, populates it with the ico...
...tiple times when a single page containing multiple iframes is loaded. so main.js needs to filter out any duplicates, in case a page contains more than one iframe, and those iframes use the same library. implementing the user interface showing the library array the widget module is a natural fit for displaying the library list. ...
...And 5 more matches

Venkman Introduction - Archive of obsolete content
a label, a float button that lets you display the view in its own window, and a close button that puts the view away until you want to display it again, as seen in figure 2. the following section describes these views and their use within the interface as a whole. getting acquainted with venkman's user interface toolbar the toolbar is located at the top of the debugger. the toolbar contains icons for stop, continue, step over, step into, step out, profile, and pretty print commands. these commands should be self explanatory, with the possible exception of stop, which causes the debugger to stop when the next line of javascript is executed, and the profile button, which can be used to measure execution times for your scripts. when you enable profiling by clicking this button, a green chec...
...en check mark on the toolbar button, and the menu item will be checked as well. the loaded scripts view the loaded scripts view is in the top left portion of the window. when a file is loaded by the browser it will appear in this view, and when unloaded it will be removed. files are listed in alphabetical order, grouped by file type. ...
...cked as well. the loaded scripts view the loaded scripts view is in the top left portion of the window. when a file is loaded by the browser it will appear in this view, and when unloaded it will be removed. files are listed in alphabetical order, grouped by file type. 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 5 more matches

MenuItems - Archive of obsolete content
so, you can also set a custom label for the keyboard shortcut on the menu using the acceltext attribute. you might do this if the key associated with the item changes, for instance a list of open windows displayed on a window menu. <menuitem label="first window" acceltext="1"/> here the keyboard shortcut label will be '1', however you will need to write code to handle the key as well. ...
...custom label for the keyboard shortcut on the menu using the acceltext attribute. you might do this if the key associated with the item changes, for instance a list of open windows displayed on a window menu. <menuitem label="first window" acceltext="1"/> here the keyboard shortcut label will be '1', however you will need to write code to handle the key as well. ...
...eltext attribute. you might do this if the key associated with the item changes, for instance a list of open windows displayed on a window menu. <menuitem label="first window" acceltext="1"/> here the keyboard shortcut label will be '1', however you will need to write code to handle the key as well. 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. <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> as the image appears on a menu item, you will want to ensure you use a fairly small image. although the exact size will var...
...And 5 more matches

XPCOM Interface Reference by grouping
ains application level interfaces including calls to external support elements (such as device calls). this is the root element and may contain some functions defined in other groups. user this section contains elements specific to a given user's data storage. ...
...interfaces including calls to external support elements (such as device calls). this is the root element and may contain some functions defined in other groups. user this section contains elements specific to a given user's data storage. ...
...alls to external support elements (such as device calls). this is the root element and may contain some functions defined in other groups. user this section contains elements specific to a given user's data storage. ...
...And 5 more matches

DevTools API - Firefox Developer Tools
s undocked). a toolbox (and all the tools it contains) is linked to a target, which is the object the tools are debugging. a target is usually a web page (a tab), but can be other things (a chrome window, a remote tab,…). in terms of code, each tool has to provide a tooldefinition object. 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. the gdevtools global object provides methods to register a tool definition and to access tool instances. an instance of a tool is called a toolpanel. the toolpanel is built only when the tool is selected (not when the toolbox is opened). there is no way to "close/destroy" a toolpanel. the only way to close a toolp...
...he tooldefinition object can contain following properties. most of them are optional and can be used to customize the presense of the tool in the browser and the toolbox. id string, required. an unique identifier for the tool. it must be a valid id for an html element. url string, required. an url of the panel document. label string, optional. the tool's name. ...
...ed the icon should be specified. tooltip string, optional. the tooltip for the tool's tab. panellabel string, optional. an accessibility label for the panel. ordinal integer, optional. the position of the tool's tab within the toolbox. default: 99 visibilityswitch string, optional. a preference name that controls the visiblity of the tool. default: devtools.{id}.enabled icon string, optional. an url for the icon to show in the toolbox tab. if undefined the label should be defined. highlightedicon string, optional. an url for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). default: {icon} icononly boolean, optional. if true, the label won't be shown in the tool's tab. ...
...And 5 more matches

msthumbnailclick - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the msthumbnailclick event occurs when a user clicks a button or thumbnail icon in the taskbar. this proprietary method is specific to internet explorer and microsoft edge. syntax event property object.onmsthumbnailclick = handler; addeventlistener method object.addeventlistener("msthumbnailclick", handler, usecapture) general info synchronous no bubbles no cancelable no note the onmsthumbnailclick event is available only to documents that are launched...
...lclick event is available only to documents that are launched from a pinned site shortcut. parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. ...
... pinned site shortcut. parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. ...
...And 5 more matches

widget - Archive of obsolete content
deprecated from firefox 29 onwards. please see the ui module for replacements. in particular, for a simple button, try the action button or toggle button apis, and for a more complex widget try the toolbar or sidebar apis. create a simple user interface for an add-on in firefox's add-on bar. usage "widgets" are small pieces of content that live in the firefox 4 add-on bar. they can be simple icons or complex web pages. you can attach panels to them that open when they're clicked, or you can define a custom click handler to perform some other action, like opening a web page in a tab. there are a few advantages to using widgets over an ad hoc user interface. first, your users will be accustomed to interacting with add-ons via widgets and the add-on bar. second, it allows firefox to treat y...
... by using the content property, or point to content using a url with the contenturl property. upon creation, the widget is automatically added to the add-on bar. you can set the width of a widget, but the height is fixed so as to fit in the add-on bar. if the content is an image, it is automatically scaled to be 16x16 pixels. 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. just save the file in your add-on's data directory, and reference it using the data.url() method of the self module: var data = require("sdk/self").data; requ...
...e the sdk's apis, we'll want the content script to send messages to the main add-on code, which can then implement the media player functions using the sdk. ...
...And 4 more matches

Installing Extensions and Themes From Web Pages - Archive of obsolete content
ng the installtrigger object. extension and web authors are encouraged to use the method described below to install xpis, as it provides the best experience to users. ...
...ion and web authors are encouraged to use the method described below to install xpis, as it provides the best experience to users. ...
...the html <a> is the install link. ...
...And 4 more matches

In-Depth - Archive of obsolete content
illa and one browser window. then open the dom inspector (tools->web development->dom inspector). click file->inspect and select the browser window. what appears in a tree view below is the actual code for the interface. using this, we can figure out what objects are where, what classes/id's they have applied to them, and most importantly, which file the style is located in. click on the inspect icon and then click on the back button in the browser window. what this will do is find the code for the back button and display it in the dom inspector. selected in the tree view will be xul:toolbarbutton. this is the portion of the icon with only the image. but the back button is made up of two parts (the back portion and the history portion), so if we move one level up in the tree we'll see toolbar...
...the side bar will now be split into two parts. at the top, there is a list of all the groups of styles that are applied to this object. when you select an item in the list the bottom portion will display the actual styles that are applied. ...
...lem with the display in mozilla 1.2 what it means is \navigator\navigator.css (most of the time it displays the file correctly, but sometimes, like in this case, it does not). go into \myskin\navigator and load navigator.css. you'll notice that the .toolbar-1 class is located here. now you can point the image to wherever you like. the image that is listed there by default (chrome://navigator/skin/icons/btn1.gif) is actually a bunch of images grouped together in one file, so somewhere one of the css attributes is telling it what portion of the larger image to cut out and display. if you go back into the dom inspector and look at the rule column again, you'll see the #back-button id. select that one and it lists a bunch of -x-image-region-left type styles in chrome://navigator/skin/. open up nav...
...And 4 more matches

Build your own function - Learn web development
et's just refresh our memories. type the following in your browser's javascript console, on any page you like: alert('this is a message'); the alert function takes a single argument — the string that is displayed in the alert box. try varying the string to change the message. 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. we'll build one that will prove to be more fun. note: this example should work in all modern browsers fine, but the styling might look a bit funny in slightly older browsers. we'd recommend you doing this exercise in a modern browser like firefox, opera, or chrome. the basic function to begin with, let's put together a basic function. note: for function naming convention...
...e code again and you'll see that it still works just fine, except that now you can also vary the message inside the parameter to get different messages displayed in the box! a more complex parameter on to the next parameter. ...
...t now you can also vary the message inside the parameter to get different messages displayed in the box! a more complex parameter on to the next parameter. 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. save them in a new folder called icons in the same location as your html file. note: the warning and chat icons were originally found on iconfinder.com, and designed by nazarrudin ansyari — thanks! (the actual icon pages were since moved or removed.) next, find the css inside your html file. we'll make a few changes to make way for...
...And 4 more matches

Building the WebLock UI
wser[other-mozlike-browsers]. it uses xul, which is an xml language that gecko knows how to render as user interface, but it also interacts with particular parts of the mozilla user interface, where it must install itself as an extension to the 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. weblock.xul defines the web lock manager dialog. weblock.css provides style rules for both of the xul files. weblock.js pr...
...y that instantiates and controls the weblock component). client code overview before we get started on the actual user interface, we should establish how the client code is to access the weblock component and use its interfaces to control the web locking of the browser. first of all, it's important to be able to represent the basic state of the lock as soon as it's loaded. 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. since the weblock component is always initialized as unlocked, we can have the client code - the javascript code in the interface - represent this state and track it as the user manipulates the iweblock interface. a boolean wlocked variable can do this: // ...
...issite() { var tf = document.getelementbyid("dialog.input"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element. you also need to create the function that displays the weblock window itself when the user clicks the weblock icon in the statusbar. that function uses the opendialog method from the window object and takes the url to the xul file in which the dialog is defined: function loadweblock() { window.opendialog("chrome://weblock/weblock.xul"); } xul the entire user interface of the mozilla browser and all of the applications that go with it, including the mail client, the irc client, and others, have been defi...
...And 4 more matches

Examine and edit CSS - Firefox Developer Tools
w you to change the display of certain css and rules view features. you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print media rules. a warning icon appears next to unsupported css properties or rules that have invalid values. this can help you understand why certain styles are not being applied. in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declara...
...lues. this can help you understand why certain styles are not being applied. in the following example, a spelling error, "background-colour" instead of "background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations. highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector. overridden declaration: declarations that are overridden by later rules are crossed out. see overridden declarations. 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. filter rules containing this ...
...see overridden declarations. ...
...And 4 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:...
... 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; margi...
...And 4 more matches

Using custom elements - Web Components
or example <p is="word-count">, or document.createelement("p", { is: "word-count" }). working through some simple examples at this point, let's go through some more simple examples to show you how custom elements are created in more detail. autonomous custom elements let's have a look at an example of an autonomous custom element — <popup-info-box> (see a live example). 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. to begin with, the javascript file defines a class called popupinfo, which extends the generic htmlelement class. class popupinfo extends htmlelement { constructor() { // always call super first in constructor super...
...pulation to create the element's internal shadow dom structure — which is then attached to the shadow root — and finally attach some css to the shadow root to style it. ...
...re — which is then attached to the shadow root — and finally attach some css to the shadow root to style it. ...
...And 4 more matches

XUL Migration Guide - Archive of obsolete content
accessing tabbrowser this example uses the action button api, which is only available from firefox 29 onwards. the tabs/utils module gives you direct access to the tabbrowser object and the xul tab objects it contains. this simple ex...
... accessing tabbrowser this example uses the action button api, which is only available from firefox 29 onwards. the tabs/utils module gives you direct access to the tabbrowser object and the xul tab objects it contains. this simple example mod...
...this is useful, because it means that if a malicious web page is able to inject code into your add-on's context, it is only able to use the apis you have imported. for example, if you have only importe...
...And 3 more matches

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. ...
... now that we have defined a panel in which to display an icon, we use css to specify which icon to display. ...
... now that we have defined a panel in which to display an icon, we use css to specify which icon to display. ...
...And 3 more matches

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
file contains the skin, among other resources. see theme changes in firefox 4 for details on how to extract skin files from firefox 4 or later. 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. go to contents/macos/chrome/classic.jar copy classic.jar to another easily accessible folder -- classic is recommended -- extract the contents of that folder, being sure to maintain the directory structure. directories inside classic.jar is one directory, skin, as well as two files, preview.png and icon.png. skin skin simply contains another d...
... skin\classic\communicator doesn't do a whole lot and can typically be forgotten about promptly. ...
... skin\classic\communicator doesn't do a whole lot and can typically be forgotten about promptly. ...
...And 3 more matches

Notifications - Archive of obsolete content
hich is no longer under active development. read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! the notification box appears at the bottom right corner of the browser and displays important information to the user. the namespace for this class is jetpack.notifications. ...
...ing the first sdk release for what we're up to next! the notification box appears at the bottom right corner of the browser and displays important information to the user. the namespace for this class is jetpack.notifications. methods show(titlestring, [body as string] iconstring)draws a notification box. ...
...important information to the user. the namespace for this class is jetpack.notifications. methods show(titlestring, [body as string] iconstring)draws a notification box. ...
...And 3 more matches

Reading textual data - Archive of obsolete content
it to utf-8 // sstream is nsiscriptableinputstream var str = sstream.read(4096); var utf8converter = components.classes["@mozilla.org/intl/utf8converterservice;1"]. ...
...toutf8 (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). this work was done in bug 295047. usage: var charset = /* need to find out what the character encoding is. ...
...iinputstream). this work was done in bug 295047. usage: var charset = /* need to find out what the character encoding is. ...
...And 3 more matches

<statusbarpanel> - Archive of obsolete content
ference home [ examples | attributes | properties | methods | related ] firefox 4 note the status bar has been removed. refer to the add-on bar. an individual element of a statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. ...
...statusbar. this is a special type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. 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. ...
...ecial type of button which is drawn differently. unlike normal buttons, a statusbarpanel can only have a label or an image but not both. 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. ...
...And 3 more matches

Third-party APIs - Learn web development
which is a string specifying a position for the control. try this, for example: map.addcontrol(l.mapquest.control({ position: 'bottomright' })); there are other types of control available, for example mapquest.searchcontrol() and mapquest.satellitecontrol(), and some are quite complex and powerful. have a play around and see what you can come up with. ...
...control(), and some are quite complex and powerful. have a play around and see what you can come up with. 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). ...
...me are quite complex and powerful. have a play around and see what you can come up with. 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). ...
...And 3 more matches

imgIDecoderObserver
load notifications are fired as the image is loaded from the network or filesystem. ...
...t passed, all, some, or none of the notifications may fire before the call returns. ...
...called when there is more to paint. void ondataavailable( i...
...And 3 more matches

nsIAnnotationService
xpire_session 0 for temporary data that can be discarded when the user exits. removed at application exit. expire_weeks 2 for general page settings, things the user is interested in seeing if they come back to this page some time in the near future. removed at 30 days. expire_months 3 something that the user will be interested in seeing in their history like favicons. if they haven't visited a page in a couple of months, they probably aren't interested in many other annotations, the positions of things, or other stuff you create, so put that in the weeks policy. removed at 180 days. expire_never 4 for data that should never expire as long as the uri is in the database. expire_with_history 5 for annotations that only live as long...
... previous annotation with the same url/name. it is your job to namespace your annotation names. use the form "namespace/value", so your name would be like "bills_extension/page_state" or "history/thumbnail". do not use characters that are not valid in urls such as spaces, ":", commas, or most other symbols. you should stick to ascii letters and numbers plus "_", "-", and "/". 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. do not set favicons using this service, it will not work. binary annotations should be set using setitemannotationbinary() or setpageannotationbinary(). for other types, only c++ consumers may use the type-specific methods. void setpageannotation( in nsiuri aur...
... previous annotation with the same url/name. it is your job to namespace your annotation names. use the form "namespace/value", so your name would be like "bills_extension/page_state" or "history/thumbnail". do not use characters that are not valid in urls such as spaces, ":", commas, or most other symbols. you should stick to ascii letters and numbers plus "_", "-", and "/". 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. do not set favicons using this service, it will not work. binary annotations should be set using setitemannotationbinary() or setpageannotationbinary(). for other types, only c++ consumers may use the type-specific methods. void setitemannotation( in long long ...
...And 3 more matches

Key Values - Web APIs
7, this key generated the key value "unidentified". application selector keys some keyboards offer special keys for launching or switching to certain common applications. key values for those are listed here. keyboardevent.key value description virtual keycode windows mac linux android "launchcalculator" [5] the calculator key, often labeled with an icon. this is often used as a generic application launcher key (appcommand_launch_app2). appcommand_launch_app2 gdk_key_calculator (0x1008ff1d) qt::key_calculator (0x010000cb) keycode_calculator (210) "launchcalendar" [5] the calendar key. often labeled with an icon. gdk_key_calendar (0x1008ff20) qt::key_calendar (0x010000e4) keycode_calendar (208) ...
... vk_launch_mail (0xb4) appcommand_launch_mail gdk_key_mail (0x1008ff19) qt::key_launchmail (0x010000a0) keycode_envelope (65) "launchmediaplayer" [1] the media player key. ...
...::key_launchmail (0x010000a0) keycode_envelope (65) "launchmediaplayer" [1] the media player key. vk_launch_media_select (0xb5) appcommand_launch_media_select gdk_key_cd (0x1008ff53) gdk_key_video (0x1008ff87) gdk_key_audiomedia (0x1008ff32) qt::key_launchmedia (0x010000a1) "launchmusicplayer" [5] the music player key. often labeled with an icon. gdk_key_music (0x1008ff92) qt::key_music (0x010000fd) keycode_music (209) "launchmycomputer" [5] the my computer key on windows keyboards. this is often used as a generic application launcher key (appcommand_launch_app1). appcommand_launch_app1 gdk_key_mycomputer (0x1008ff33) gdk_key_explorer (0x1008ff5d) "launchphone" the phone key. op...
...And 3 more matches

Structural overview of progressive web apps - Progressive web apps (PWAs)
working examples and more information, see the streams api documentation. structure of a sample application the js13kpwa web site's structure is quite simple. it consists of a single html file (index.html), with basic css styling provided in style.css. also included are a few images, scripts, and fonts. 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. the parts that are directly relevant to the app shell model are found outside the <section> with the id content within this page. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kga...
...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...
...this script begins by importing data from the file games.js in the data directory: self.importscripts("data/games.js"); then it creates a list of all the files that th...
...And 3 more matches

Working with Events - Archive of obsolete content
adding listeners in constructors event emitters may be modules, as is the case for the ready event above, or they may be objects returned by constructors. in the latter case the options object passed to...
... adding listeners in constructors event emitters may be modules, as is the case for the ready event above, or they may be objects returned by constructors. in the latter case the options object passed to the cons...
... object's on() method. for example: the actionbutton object emits an event when the button is clicked. the following add-on creates a button and assigns a listener to the onclick property of the options object supplied to the button's constructor. ...
...And 2 more matches

page-mod - Archive of obsolete content
nt's dom structure. using the attach method of the tab object, you can attach a set of content scripts to a particular tab. the scripts are executed immediately. ...
...structure. using the attach method of the tab object, you can attach a set of content scripts to a particular tab. the scripts are executed immediately. ...
... private windows if your add-on has not opted into private browsing, then your page-mods will not attach content scripts to documents loaded into private windows, even if their urls match the pattern you have specified. ...
...And 2 more matches

simple-storage - Archive of obsolete content
jects conditionally in your code, or you may zero them each time the construction code runs. 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). line 2 needs to be made conditional, so the array is only constructed if it does not already exist: if (!ss.storage.pages) ss.storage.pages = []; deleting data you can delete proper...
...made conditional, so the array is only constructed if it does not already exist: if (!ss.storage.pages) ss.storage.pages = []; deleting data you can delete properties using the delete operator. ...
...tor. ...
...And 2 more matches

ui - Archive of obsolete content
access to button, toolbar, and sidebar ui objects. this module exports constructors for the following: actionbutton togglebutton frame toolbar sidebar each object has its own reference page, linked above: for all the details please refer to the reference page. this page just provides a quick overview. actionbutton an action button is a button in the main firefox toolbar. 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. if it's standalone, it appears in the toolbar at the top right of the browser windo...
...clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar. if it's standalone, it appears in the toolbar at the top right of the browser window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a checkbox. 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. it's otherwise identical to the action button. attaching panels to buttons is only supported from firefox 30 onwards. from firefox 30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a frame enables you to create an html iframe, using bundled html, css and java...
... horizontal strip of space which you can use for presenting a more complex user interface. ...
...And 2 more matches

package.json - Archive of obsolete content
the package.json file contains manifest data for your add-on, providing not only descriptive information about the add-on for presentation in the add-ons manager, but other metadata required of add-ons. 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. others, such as lib, permissions, and preferences, represent instructions to the jpm tool itself to generate and include particular code and data structures in your add-on. creating a manifest the package.json file is initially generated in your add-on's root directory the first time you run jpm init. it looks like this (assuming the add-on's directory is "my-addon"): { ...
...id of the "harness service" xpcom component. defaults to a random guid generated by cfx. hasembeddedwebextension new in jpm 1.2.0. boolean value: true if the add-on contains an embedded webextension. homepage the url of the add-on's website. this value will be used as the add-on's em:homepageurl element in its install.rdf. 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. if no icon is specified, the standard add-on icon will be used by default. when using jpm, using a relative path to the data directory (to make it re-usable for add-on html content) does not wo...
... 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. if no icon is specified, the standard add-on icon will be used by default. when using jpm, using a relative path to the data directory (to make it re-usable for add-on html content) does not work. you can generate the url to your add-on icon in the data directory using the url format below, where "your-addon-name" is the value in the name field of package.json. resource://@your-addon-name/data/your-icon-name.png this value will be used as the add-on's em:iconurl element in its install.rdf. the icon may be up to 48x48 pixels in size. ...
...And 2 more matches

Modifying the Page Hosted by a Tab - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. to modify the page hosted by a particular tab, load one or more content scripts into it using attach() method of tab object. the job of these scripts is to interact with web 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. it has a click handler which fetches the active tab and...
...tain, debug, and review. to do this, provide option contentscriptfile not contentscript, whose value is a url pointing to one or more content script files. for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); 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({ contentscriptfile: self.data.url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other. so you can load jquery, and then your content script can use that. loading several content script files the data assigned to contentscriptfile can be...
...he vector. in the following example, we are loading two scripts, first.js & second.js. both scripts will be executed in the same context, so everything publicly defined in first.js will be accessible from second.js. // index.js var self = require("sdk/self"); var tabs = require("sdk/tabs"); require("sdk/ui/button/action").actionbutton({ id: "load-several", label: "load several scripts", icon: "./icon-16.png", onclick: function () { tabs.activetab.attach({ contentscriptfile: [self.data.url('first.js'), self.data.url('second.js')] }); } }); communicating with the content scripts your add-on script and content scripts can't directly access each other's variables or call each other's functions, but they can send each other messages. to send...
...And 2 more matches

Menu - Archive of obsolete content
for menus in the menu bar only, command functions defined on menuitems with submenus are not called when descendant menuitems are clicked. see bug 534014 for details and a workaround. data string an arbitrary string that the feature may associate with the menuitem. disabled boolean if true, the menuitem is disabled. 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. label string the label of the menuitem. menu jetpack.menu if defined, the menuitem expands into a submenu. mnemonic string a character th...
...he content context menu: jetpack.menu.context.page.add({ label: "show current date and time", command: function () jetpack.notifications.show(new date()) }); create a submenu within the content context menu. when the user clicks an item, she's notified of her choice. ...
...}); when the user selects some text on a page, the context menu normally displays a simple item that searches for it. ...
...And 2 more matches

slideBar - Archive of obsolete content
o next! slidebar is a reinvention of the old sidebar features of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser window. when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. ...
...er window. when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...
...when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...
...And 2 more matches

The life of an HTML HTTP request - Archive of obsolete content
warning: the content of this article may be out of date. it was last updated in 1999. (1) the loading of the url is started in nswebshell::doloadurl (called from some loadurl or loaduri variant in the webshell). the webshell then tells its documentloader to load (command "view") the specified url. [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. necko (the network library) checks the url scheme (the first part of the url, http: in this case) and locates the correct nsiprotocolhandler (in this case nshttphandler) and asks it for a nsichannel (nshttpchannel). the channel represents the connection to the server, an...
...n to the server, and is the source of the html data stream. (3) when data is starting to come from the webserver the nsichannel calls the onstartrequest in the documenloader. now the channel knows the content type of the incoming data, so the documentloader can find an nsidocumentloaderfactory for the "text/html" content type (in this case an nslayoutdlf). this factory is then told to create a nsicontentviewer. the factory creates a contentviewer. in most cases (including this) it also creates a nsidocument (nshtmldocument) and binds it to the contentviewer. the contentviewer is then embed():ed into the contentviewercontainer (the webshell). (4) the document then creates a nsiparser for parsing the input stream. for html document this is an nsparser, which also implements nsistreamlistener. ...
...viewer. the contentviewer is then embed():ed into the contentviewercontainer (the webshell). (4) the document then creates a nsiparser for parsing the input stream. for html document this is an nsparser, which also implements nsistreamlistener. this streamlistener is returned to the documentloader and connected to the nsichannel of the request. (5) the document (nshtmldocument) also creates a nsicontentsink (nshtmlcontentsink) and connects it to the parser and the document. the parser then parses the stream it gets via its streamlistener interface and converts it to nsiparsernodes which it places in the contentsink. the parser typically gets data from the stream in 8kb blocks and parses these blocks, block by block. after every parsed block it passes the parsed data as nsiparsernodes to the...
...And 2 more matches

The Implementation of the Application Object Model - Archive of obsolete content
to represent a single node in a content tree for an xml language. in the absence of any modifications to xul, etc., this is what would be used by default to hold the tree for a remote xul file. this nsxmlelement implements a whole slew of interfaces, since raptor has multiple apis for referring to these objects. examples of these interfaces include nsidomelement, nsidomnode, nsixmlcontent, and nsicontent. what is rdf? rdf (pronounced r-d-f) has never been a ravening demon intent upon taking over the earth, although that does depend on who you ask. rdf stands for resource description framework, a rather intimidating name that doesn't do much to help the layman understand exactly what it does. rdf provides a very general mechanism for representing relationships between different disparate ty...
...ming. it's now or never. if this approach isn't taken now, then we'll fall back into our old pattern. this is the pivotal point, because the apps are all being re-written from scratch. for this particular codebase, if we don't do this from start, we won't do it at all. why use rdf at all? ok, ok. so you've convinced me that xul is the way and the light. but why do you need to use rdf at all? nsicontent, nsidomelement, and all of those interfaces mentioned at the beginning of this document are just that: interfaces! couldn't you just make mail content and bookmarks content etc. and have them implement those interfaces? the approach that i took in the past when faced with this question was to say, "rdf exists now. much of it is written. to implement some sort of pluggable system that could do...
...elves as the appropriate content to be instantiated for a given uri. we could do this using a registry that can map strings to cids, so we have a story for instantiating our different content nodes. but now let's consider one of these nodes, e.g., nsmailelement. let's look at the set of interfaces that nsmailelement needs to implement in order to exist in a xul tree as fully scriptable content. nsicontent, nsidomnode, nsidomelement, and nsixmlelement must be implemented at a minimum. four interfaces with over 100 methods combined, a significant portion of which are redundant. every new kind of content node would have to implement all of these interfaces. several of the implemented functions would even have identical implementations, i.e. duplicate code that would be doing the same thing in the...
...And 2 more matches

menuitem - Archive of obsolete content
ion is available in the xul tutorial. ...
...he xul tutorial. ...
...property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. note: the menuitem must have a class of menuitem-iconic for the image to appear. key type: id set to the id of a key element whose key shortcut is displayed in the menuitem. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. name type: stri...
...And 2 more matches

Visual typescript game engine - Game development
is for now just symbolic for now. (wip) in ioc, you can make strong class dependency relations. use it for your own structural changes. 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. don't edit or add content in this folder. src,/ is the main client part (browser web application). main file: app.ts src/libs/ is a common and smart pack of class...
...g is not common. i just like it like that. ...
... ├── imgs/ | ├── styles/ | | └── favicon.ico | ├── visualjs2.js | ├── app.html ├── src/ | ├── style/ | | ├── styles.css | ├── libs/ | | ├── class/ | | | ├── networking/ | | | | ├── rtc-multi-connection/ | | | | | ├── filebufferreader.js | | | | | ├── rtcmulticonnection2.js | | | | | ├── rtcmulticonnection3.js | | | | | ├── linkify.js | | | | | ├── gethtmlmediaelement.js | | | | | ├── socket.io.js | | | | ├── broadcaster-media.ts | | | | ├── broadcaster.ts | | | | ├── connector.ts | | | | ├── network.ts | | | ├── visual-metho...
...And 2 more matches

Practical positioning examples - Learn web development
padding as the info-box panels. we then give it a large margin-left to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else. this marks the end of the second example; we hope you'll find the third just as interesting. 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. our finished example will look like this: note: you can see the finished example running live at hidden-info-panel.html (source code). check it out to get an idea of what...
...ot a <label> element and an <input> element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). here it is associated with the <input> checkbox using the for and id attributes. 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. here we are going to use these elements for a slightly different purpose — another useful side effect of <label> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. this has led to the well-known checkbox hack, which provides a javascript-free way of controllin...
... used the cursor property to change the mouse cursor when it is hovering over t...
...And 2 more matches

Styling links - Learn web development
e included, clicking on them would break the examples (you'd end up with an error, or a page loaded in the embedded example that you couldn't get back from.) # just links to the current page. you'll notice a few things as you explore the default styles: links are underlined. unvisited links are blue. visited links are purple. hovering a link makes the mouse pointer change to a little hand icon. focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles a...
... let's look at so...
... let's look at some html and css that will give us the effect we ...
...And 2 more matches

Multiple Firefox profiles
rt firefox. select this option to allow firefox to load the selected profile, without prompting at startup. note: to access other profiles after selecting this option, you must start the profile manager first. 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". when the properties dialog box pops up, you should see a "target" text field that you can edit, and it should show the current file path. after the closing quote, add -profilemanager. click ok. now whenever you double click that icon, the profile manager should appear, allowing you to choose which profile you'd like to use. if yo...
... when the properties dialog box pops up, you should see a "target" text field that you can edit, and it should show the current file path. ...
...ops up, you should see a "target" text field that you can edit, and it should show the current file path. after the closing quote, add -profilemanager. click ok. now whenever you double click that icon, the profile manager should appear, allowing you to choose which profile you'd like to use. if you want individual icons to launch specific profiles, you will need to edit the "target" of each icon. to do this: right-click the icon and choose "properties". when the properties dialog box pops up, you should see a "target" text field that you can edit, and it should show the current file path. to permanently set a specific profile, add -p profile_name to the target path, but outside of the quotes, replacing "profile_name" with the actual profile name you chose. if you would also like to...
...And 2 more matches

The Places database
e replacement for the firefox bookmarks and history systems using storage. the places schema looks like so: core url table moz_places: this is the main table of uris and is managed by the history service (see also history service design). any time a places component wants to reference a url, whether visited or not, it refers to this table. each entry has an optional reference to the moz_favicon table to identify the favicon of the page. no two entries may have the same value in the url column. moz_hosts: one entry in this table is created each time you visit a new host. it contains the host url, frequency of access, if typed or not, and it's prefix (https://, ftp://, etc). history tables moz_historyvisits: one entry in this table is created each time you visit a page. it contains ...
...s the values of page annotations. it maps a page (reference to moz_places) and an annotation name (reference to moz_anno_attributes) to the value of the annotation. moz_items_annos: contains the values of bookmark item annotations. it maps a bookmark, folder or separator (reference to moz_bookmarks) and an annotation name (reference to moz_anno_attributes) to the value of the annotation. favicon table moz_favicons: this contains a list of unique favicon uris and data. one or more pages in moz_places refer to each entry. when no pages reference a favicon, the icon entry will be deleted. if the mime type of the image is image/png, the data blob must be reencoded from base16 (the format in which it is stored) to base64 in order to display correctly. expiration expiration i...
...toolkit/components/places/nsplacesexpiration.js. this algorithm determines the lifetime of all objects in the places system. periodically at runtime, the following happens to expire pages: expire visits that are older than the history expiration threshold. delete the history entries that were referenced by the expired visits and not referenced by any non-expired visit or bookmark. ...
...And 2 more matches

nsIBrowserSearchService
o a user interaction, as initialization is complete by then, but this is an issue if your code is executed during startup. if you need to write code that is executed during startup and makes use of nsibrowsersearchservice, you should make sure that this code is executed from the callback to init(). ...
...e that is executed during startup and makes use of nsibrowsersearchservice, you should make sure that this code is executed from the callback to init(). ...
...ods addengine() adds a new search engine from the file at the supplied uri, optionally asking the user for confirmation first. if a confirmation dialog is shown, it will offer the option to begin using the newly added engine right away; if no confirmation dialog is shown, the new engine will be used right away automatically. 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. datatype an integer representing the plugin file format. must be one of the supported search engine data types defined above. iconurl a url string to an icon file to be used as the search engine's icon. thi...
...And 2 more matches

nsIInProcessContentFrameMessageManager
content/base/public/nsiframemessagemanager.idlnot scriptable ??? add brief description of interface here! ...
... content/base/public/nsiframemessagemanager.idlnot scriptable ??? add brief description of interface here! ...
...not scriptable ??? add brief description of interface here! ...
...And 2 more matches

nsIScriptError
to create an instance, use: var scripterror = components.classes["@mozilla.org/scripterror;1"] .createinstance(components.interfaces.nsiscripterror); note: the nsiscripterror2 interface was merged into this interface in gecko 12.0. ...
...ing a string indicating the category of error that occurred see categories for a list. read only. columnnumber pruint32 the column number where the error occurred. this is used to draw the arrow pointing to the problem character. read only. errormessage astring the error message in a string format without any context/line number information. note: nsiconsolemessage.message will return the error formatted with file/line information. read only. flags pruint32 flags; see flag constants for a list. read only. innerwindowid unsigned long long the inner window id with which the error is associated. this is zero if the error was initialized by calling nsiscripterror.init() instead of initwithwindowid(). read only.
...windowid the id of the inner window associated with the error. tostring() outputs a string representing the error message described by the object. autf8string tostring(); parameters none. return value a string representing the error message described by the nsiscripterror object. 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. function mylogtoconsole(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interf...
...And 2 more matches

Introduction to DOM Inspector - Firefox Developer Tools
m inspector to find and inspect nodes you are interested in. one of the biggest and most immediate advantages that this brings to your web and application development is that it makes it possible to find the markup and the nodes in which the interesting parts of a page or a piece of the user interface are defined. 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. if you're inspecting a chrome document, as you select nodes in the dom nodes viewer, the rendered versions of those nodes are highlighted in the user interface itself. (note that there are bugs which prevent the flasher from dom inspector apis from working correctly on certain platforms.) if you inspect the main browser windo...
...the dom nodes viewer (other than the elements which have no visible ui as is the case with the endless list of script elements that are loaded into browser.xul), you will see the various parts of the browser interface being highlighted with a blinking red border. 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. now, once you have selected a node like the "search-go-button" node, you can select any one of several viewers to display information about that node in the object pane of the dom inspector application window, all of which are available from the menupopup accessed from the upper left corner of the the object pane. in order to...
...u have selected a node like the "search-go-button" node, you can select any one of several viewers to display information about that node in the object pane of the dom inspector application window, all of which are available from the menupopup accessed from the upper left corner of the the object pane. 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. the rule that applies the search icon to the element uses a class simple selector and uses a list-style-image property to point to a file in the current theme. the list of viewers available from the viewer menu gives you some idea about how extensive the dom inspector's inspecting ...
...And 2 more matches

Edit Shape Paths in CSS - Firefox Developer Tools
edit shapes created using clip-path and also the css shape-outside property and <basic-shape> values. this guide walks you through all of the available options. activate / deactivate the shape path editor the shape path editor is accessed via the css rules panel, which can be opened as described in the guide to opening the inspector. once you have selected your element, you should see the shape icon alongside any valid value, e.g. one for shape-outside. 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. note that the shape path editor does not persist between page reloads — if you reload your page you will need to select the element again. understanding the line...
...box reference; this is the area that will be clipped by the margin box. to understand the margin box, and other boxes used by css shapes see our guide to shapes from box values. editing basic shapes the options given to you by the tool will differ depending on the type of basic shape that you are editing. options can be accessed by activating the shape path editor with a regular click on the icon, and you can use the context menu (ctrl/cmd + click) to access additional functionality. circle() if the value of shape-outside is circle(), you are creating a circle basic shape. clicking on the shapes icon next to the value of circle() will highlight the shape, and also give you the option to resize the circle or move its center. if you move or resize the circle past the margin box, the edges...
...then copy these values back into your stylesheet to create the new, tweaked shape path. ellipse() if the value of shape-outside is ellipse() then you are using the ellipse basic shape. the ellipse() value works in much the same way as circle() in the shape path editor. an ellipse is a squashed circle and therefore has the option to resize horizontally and vertically when you click on the shapes icon. inset() if the value of shape-outside is inset() then you are using the inset basic shape, which enables the creation of offset values pulling the content in from the margin box. each side of the rectangle can be targeted after clicking on the shapes icon to activate the shape path editor, and dragging each side will update the values for the top, right, bottom, and left offset values. p...
...And 2 more matches

Animation inspector example: Web Animations API - Firefox Developer Tools
firefox-logo-animation example animation using the web animations api. ...
... animation using the web animations api. ...
...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'...
...And 2 more matches

Tips - Firefox Developer Tools
t tools to enable or disable them. (there are more than the default tools!) page inspector in the markup view: press h with a node selected to hide/show it. press backspace or del with a node selected to delete it. alt + click on a node to expand or collapse it and all its descendants. click on the last breadcrumb button to scroll the selection into view in the inspector. click the "ev" icon besides a node to see all event listeners attached to it. press s with a node selected to see it in the page (same as right-click a node and click "scroll into view"). right-click a node and click "use in console" to command line as tempn variable. when selecting elements: shift + click to select an element but keep selecting (picker mode doesn't disengage). use ←/→ to navigate to par...
...it in the page (same as right-click a node and click "scroll into view"). right-click a node and click "use in console" to command line as tempn variable. when selecting elements: shift + click to select an element but keep selecting (picker mode doesn't disengage). use ←/→ to navigate to parents/children elements (if they're hard to select). 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. right-click any property and select "show mdn docs" to view the mdn docs for this property. click on the filter icon () next to an overridden property to find which other property overrides it. right-click on a name, value, or ...
...name is included, the file name will be in this format: screen shot date at time.png the --fullpage parameter is optional. if you include it, the screenshot will be of the whole page, not just the section visible in the browser windows. the file name will have -fullpage appended to it as well. see web console helpers for all parameters. in the console output: click on the inspector icon () next to an element in the output to select it within the inspector. check "enable persistent logs" in the settings to keep logged messages from before even after navigation. check "enable timestamps" in the settings to show timestamps besides the logged messages. debugger skip javascript libraries in debugging sessions via the black box icon (). press ctrl+alt+f to search in all script...
...And 2 more matches

CustomElementRegistry.define() - Web APIs
ox-web-component example (see it live also). ...
.... ...
...e 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 ...
...And 2 more matches

HTMLCanvasElement.toBlob() - Web APIs
ead. a download link is created by setting the download attribute. the value of the download attribute is the name it will use as the file name. ...
...'); 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 disk with os.file (chrome/add-on context only) this technique saves it to the desktop and is only useful in firefox chrome context or add-on code as os apis are not present on web sites. ...
...) this technique saves it to the desktop and is only useful in firefox chrome context or add-on code as os apis are not present on web sites. ...
...And 2 more matches

Index - Web APIs
her or both a maximum and minimum value specified. the constrainlongrange dictionary is based on this, augmenting it to support exact and ideal values as well. 2275 midiaccess api, interface, reference, web midi api the midiaccess interface of the web midi api provides methods for listing midi input and output devices, and obtaining access to those devices. 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. this occurs any time a new port becomes available, or when a previously available port becomes unavailable. for exampl...
...red clone of the notification's data, as specified in the data option of the notification() constructor. 2769 notification.dir api, dom, notifications, property, reference, dir the dir read-only property of the notification interface indicates the text direction of the notification, as specified in the dir option of the notification() constructor. 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. 2771 notification.image api, dom, image, notifications, property, reference the image read-only property ...
...he passwordcredential constructor creates a new passwordcredential object. 2882 passwordcredential.additionaldata api, credential management api, passwordcredential, property, reference, credential management the additionaldata property of the passwordcredential interface takes one of a formdata instance, a urlsearchparams instance, or null. 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. this image is intended for display in a credential chooser. the url must be accessible without authentication. 2884 passwordcred...
...And 2 more matches

Installing and uninstalling web apps - Progressive web apps (PWAs)
he option to install a web application is part of the progressive web app philosophy—giving web apps the same user experience advantages as native apps so they can be competitive. installed applications are more conveniently invoked as they have a presence in a device’s home screen or app list or bar. this makes it simple for a user to use a gesture to access an app by tapping or clicking its icon. the application itself may then manifest as in a chromeless view (without the full browser chrome) but it nevertheless is executing effectively as a tab within the browser. for users, the experience of a seemingly-native pwa is more comfortable and convenient than a typical web site. by reducing the user experience differential between the web app and native apps on the user's device, you reduc...
...res.if you have a web application compatible device available, use it to navigate to our demo at https://mdn.github.io/pwa-examples/a2hs/. you'll see fox pictures, but more importantly, some form of user interface will be available to let you install the site as a web app. the ui for this varies from browser to browser, but the general idea is the same. 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. tapping this will show a confirmation banner—pressing the banner's big "+ add to home screen" button completes the action, addi...
...ry features in place. tapping this will show a confirmation banner—pressing the banner's big "+ add to home screen" button completes the action, adding the app to the home screen. note that in android 8 and higher, a system-level "add to home screen" permission dialog will be shown first. samsung internet browser if you have samsung internet in your mobile device you will see a different icon. tapping that icon should then take you to the same confirmation banner shown in firefox above. google chrome for android if you have google chrome for android available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen. note: you can find out a lot more about chrome install banner...
...And 2 more matches

Using shadow DOM - Web Components
m to an element, manipulating it is a matter of just using the same dom apis as you use for the regular dom manipulation: let para = document.createelement('p'); shadow.appendchild(para); // etc. working through a simple example now let's walk through a simple example to demonstrate the shadow dom in action inside a custom element — <popup-info> (see a live example also). 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. to begin with, in our javascript file we define a class called popupinfo, which extends htmlelement: class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // wr...
...stantiated. ...
...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('img'); } else { imgurl = 'img/default...
...And 2 more matches

context-menu - Archive of obsolete content
structors item(options) creates a labeled menu item that can perform an action when clicked. parameters options : object required options: name type label string the item's label. it must either be a string or an object that implements tostring(). optional options: name type image string the item's icon, a string url. the url can be remote, a reference to an image in the add-on's data directory, or a data uri. data string an optional arbitrary value to associate with the item. it must be either a string or an object that implements tostring(). it will be passed to click listeners. accesskey single-character string new in firefox 35. ...
...uired options: name type label string the item's label. it must either be a string or an object that implements tostring(). items array an array of menu items that the menu will contain. each must be an item, menu, or separator. optional options: name type image string the menu's icon, a string url. the url can be remote, a reference to an image in the add-on's data directory, or a data uri. context value if the menu is contained in the top-level context menu, this declaratively specifies the context under which the menu will appear; see specifying contexts above. contentscript string,array if the menu is contained in the top-lev...
...on when clicked. methods destroy() permanently removes the item from its parent menu and frees its resources. the item must not be used afterward. if you need to remove the item from its parent menu but use it afterward, call removeitem() on the parent menu instead. properties label the menu item's label. you can set this after creating the item to update its label later. image the item's icon, a string url. the url can be remote, a reference to an image in the add-on's data directory, or a data uri. you can set this after creating the item to update its image later. to remove the item's image, set it to null. data an optional arbitrary value to associate with the item. it must be either a string or an object that implements tostring(). it will be passed to click listeners. you can s...
...enu instead. properties label the menu's label. you can set this after creating the menu to update its label later. items an array containing the items in the menu. the array is read-only, meaning that modifications to it will not affect the menu. however, setting this property to a new array will replace all the items currently in the menu with the items in the new array. image the menu's icon, a string url. the url can be remote, a reference to an image in the add-on's data directory, or a data uri. you can set this after creating the menu to update its image later. to remove the menu's image, set it to null. context a list of declarative contexts for which the menu will appear in the context menu. contexts can be added by calling context.add() and removed by called context.remove()...

jpmignore - Archive of obsolete content
pi. using .jpmignore to allow files everything in your add-on directory will be included in the xpi file you make with jpm xpi. if your project folder contains a lot of files that aren't necessary for the xpi to run, like documentation, jshint, etc., you can use .jpmignore as a whitelist instead of a blacklist. ...
....jpmignore to allow files everything in your add-on directory will be included in the xpi file you make with jpm xpi. if your project folder contains a lot of files that aren't necessary for the xpi to run, like documentation, jshint, etc., you can use .jpmignore as a whitelist instead of a blacklist. ...
...le: .* * !/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. ...
.../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. ...

How to convert an overlay extension to restartless - Archive of obsolete content
ponents.interfaces.nsistylesheetservice); for (let i=0,len=stylesheets.length;i<len;i++) { let stylesheeturi = services.io.newuri(stylesheets[i], null, null); if (stylesheetservice.sheetregistered(stylesheeturi, stylesheetservice.author_sheet)) { stylesheetservice.unregistersheet(stylesheeturi, stylesheetservice.author_sheet); } } ... 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. removal upon unload is not required, but you must be able to handle overwriting them upon load. this is because your unload() will not always be called pri...
... step 9: bootstrap.js a bootstrap.js file in the root of your xpi, next to your chrome.manifest and install.rdf, will be the heart of your restartless add-on. ...
... step 9: bootstrap.js a bootstrap.js file in the root of your xpi, next to your chrome.manifest and install.rdf, will be the heart of your restartless add-on. ...
...l upon unload is not required, but you must be able to handle overwriting them upon load. this is because your unload() will not always be called prior to an upgrade (e.g. upgrade might take place while the application is not running). 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). step 9: bootstrap.js a bootstrap.js file in the root of your xpi, next to your chrome.manifest and install.rdf, will be the heart of your restartless add-on. think of it as main.c, but for javascript based firefox restartless add-ons. a basic bootstrap.js file: components.utils.import("resource://gre/modules/services.jsm"); function startu...

Getting Started - Archive of obsolete content
asily accessible folder -- classic is recommended -- extract the contents of that folder, being sure to maintain the directory structure. directories inside classic.jar is one directory, skin. skin skin simply contains another directory, classic which holds all the good stuff. skin\classic classic contains the following directories. skin\classic\communicator communicator contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window. skin\classic\editor editor contains files of composer. skin\classic\global global contains almost all of the important css files that define the appearance of the suite. this is the most critical directory in a theme. skin\classic\help help contains all the files for theming the help dialog window. skin\classic\messenger ...
...the important css files that define the appearance of the suite. this is the most critical directory in a theme. skin\classic\help help contains all the files for theming the help dialog window. skin\classic\messenger messenger contains styles of the mail client. skin\classic\messenger-newsblog messenger-newsblog contains the only css file. 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. install your new theme before you can see the changes you make to a seamonkey theme (since live edits are restrictively difficult to set up) you must first learn how to repackage the classic theme to make it installable. for the sake...
... so create a new directory called my_theme. create a directory called chrome inside it. into this directory put a zip archive called my_theme.jar containing navigator, global, communicator, editor, help, messenger, messenger-newsblog and mozapps directories from above. (yes, this means that the structure of your new directory and classic.jar will be slightly different.) creating the install files icon.png and preview.png these are some png images containing the icon and the preview of the theme. chrome.manifest make a copy of chrome.manifest and place it in \my_theme and open it up in your text editor. this file is a small manifest file which is used to describe the skin. in the code search for all instances of "my_theme" and replace them with the name of your theme. the packages section lists...
...once you have put the files in the zip folder, rename it to myskin.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript. <a href='javascript:insta...

Prism - Archive of obsolete content
t necessary or appropriate for most web apps. it is more efficient to provide a ui that is specific to the application. this also cuts down on ui clutter (hence the term distraction-free browser). basic desktop integration: support of desktop features can make using the app more natural and convenient for end users. this includes the ability to create desktop shortcuts, to place the application icon in the tray or dock and to display pop-up notifications. customization: apps can be run using a shared browser runtime and customized using client-side script (similar to greasemonkey). custom stylesheets can be used to tweak the ui. architectural overview prism is a xulrunner application. in addition to the browser engine included in xulrunner, it consists of: web app bundle management: co...
...similar to greasemonkey). custom stylesheets can be used to tweak the ui. architectural overview prism is a xulrunner application. in addition to the browser engine included in xulrunner, it consists of: web app bundle management: code for creating new web app bundles and loading existing bundles. shortcut creation ui: a dialog box lets the user specify attributes of the web app (name, uri, icon, shortcut locations). javascript api: an api that can be used by scripts inside the bundle to customize the application. we are refining this approach to make the api applicable in as many environments as possible (e.g. it might be useful even for applications running in a normal browser). it should be possible for developers to include prism-style extension directly in their web app. we would ...
...g. it might be useful even for applications running in a normal browser). it should be possible for developers to include prism-style extension directly in their web app. we would like to harmonize our api with those of similar projects such as adobe air and google gears. operating-system integration: binary components provided access to os-specific features like shortcut creation and dock/tray icons. we intend to propose these extensions for inclusion in future versions of xulrunner. firefox extension: a firefox extension, code-named "refractor", can be used to spin out new prism apps from inside the web browser. refractor adds a new menu item to call up the shortcut creation dialog for inside firefox. web apps can also point to a complete web app bundle or some elements of a web app (lik...
...ose these extensions for inclusion in future versions of xulrunner. firefox extension: a firefox extension, code-named "refractor", can be used to spin out new prism apps from inside the web browser. refractor adds a new menu item to call up the shortcut creation dialog for inside firefox. web apps can also point to a complete web app bundle or some elements of a web app (like higher resolution icons). refractor automatically takes this information into account. documentation frequently asked questions bundles a web application bundle is a zip archive that holds a configuration file, icons and an optional webapp js script. bundles can be installed locally, or direct...

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" ...
... copy the following content, making sure that you scroll to get all of it. 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. save the file. explanation: this css stylesheet specifies how the button is displayed. it links to the button image, specifying the dimensions of the four parts of the image. 8. create a plain tex...
...he mouse pointer is over the button. the parts on the right are used when you set the toolbar to use small buttons. 10. download the extension image. get a context menu for the image that you see here (for example, by right-clicking it). choose save image as... from the context menu, and save it in the same directory as the files you have just created. ensure that the name of the saved file is: icon.png explanation: this image is displayed in the application's extension manager window. testing your new button restart the application. either get a context menu for the application's toolbar (for example, by right-clicking it) and choose customize..., or choose view – toolbars – customize... from the application's menu bar. drag your new button to where you want it on the toolbar. ...
...tall.rdf file, remove the sections for applications where your button does not work. for example, if your button only works in thunderbird, remove the sections for firefox and sunbird. do the same in button.xul and chrome.manifest. change "custombutton", "custom-button" and "custombutton" to something else throughout all the files. 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. name the packed file with the extension .xpi and make it available to other users. users can install the xpi file in an application's extensions window in the normal way. ...

Creating a Skin - Archive of obsolete content
ch is equivalent to no rounding. increase the values here for more rounding and decrease them for a more rectangular look. the last rule only applies to tabs that have their selected attribute set to true. it makes the text in the selected tab appear bold, underlined and dark blue. note in the image that this style has applied only to the first tab, because it's the selected one. 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. we can set the image for a button using the list-style-image css property. #opensearch { list-style-image: url("chrome://editor/ski...
... 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. we can set the image for a button using the list-style-image css property. #opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 16px 64px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image. you can think of it as a clip reg...
... the -moz-box-orient property is used to orient the button vertically, so that the image appears above the label. this property has the same meaning as the orient attribute. this is convenient because the skin cannot change the xul. most of the box attributes have corresponding css properties. other changes next, we'll make a couple of changes to the buttons along the bottom, again reusing some icons from mozilla to save time. if creating your own skin, you will need to create new icons or copy the icons to new files. if following the example in this section, just copy the files to your new skin and change the urls accordingly. #find-button { list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg"); font-weight: bold; } #cancel-button { list-style-image: url("chro...
...the last rule applies to buttons when the mouse is hovering over them. we set the text color to dark blue in this case. ...

button - Archive of obsolete content
d by the user. event handlers can be used to trap mouse, keyboard and other events. it is typically rendered as a grey outset rectangle. you can specify the label of the button using the label attribute or by placing content inside the button. more information is available in the xul tutorial. ...
...r a disclosure triangle. extra1 an optional additional button. extra2 a second optional additional button. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. only one button from each group can be checked at a time. if the user selects one the buttons, the others in the group are unchecked. 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. this should be used in place of the image attribute. possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, se...
... image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. ...
...ir usage. this should be used in place of the image attribute. possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network. 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. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this ...

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...
...ue if there is a page to go forward to in the session history and the forward button should be enabled. contentdocument type: document this read-only property contains the document object in the element. contenttitle type: string this read-only property contains the title of the document object in the browser. 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. contentwindow type: todo use the contentwindow.wrappedjsobject to obtain a dom(html) window object currenturi type: ...
...ted when the tab ordering changes. it should not be used to track per-tab data during a session; the use of linkedpanel on the corresponding tab is preferred instead. getbrowserfordocument( document ) return type: browser element returns a browser for the specified document. getbrowserfortab( tab ) return type: browser element returns a browser for the specified tab element. 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. getnotificationbox( browser ) return type: notificationbox element returns a notificationbox for the specified browser element. gettabforbrowser( browser ) return type: tab returns the xul tab which contains the specified ...
... be optionally used to set the referrer page. this method returns an array of the session history objects for the tabs that were removed. selecttabatindex( index, event ) return type: no return value selects the tab at the given index. index values may be positive or negative. if the event argument is supplied, the default event handling will be prevented and propagation stopped. 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. showonlythesetabs( atabs ) return type: no return value makes all tabs in the atabs array visible, and all other tabs hidden. stop() return type: no return value equivalent to pressing the stop button, this method stop...

toolbar - Archive of obsolete content
as created and placed on the toolbar. this means that the palette now only contains items not already in the toolbar. this introduces a potential compatibility problem for extensions that depend on being able to identify all possible toolbar items by looking in the toolbarpalette. ...
...toolbar's grippy when the toolbar is collapsed. this would be used to label the grippy so that the user knows which toolbar it represents. height type: string (representing an integer) the preferred height of the element in pixels. the actual displayed height may be different if the element or its contents have a minimum or maximum height. the css height property may also be used. 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. mode not in seamonkey 1.x type: one of the values below how the toolbarbutto...
... text show only text. full show both. toolbarname not in seamonkey 1.x type: string the name of the toolbar, which is listed on the show/hide toolbars menu. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
... text show only text. full show both. toolbarname not in seamonkey 1.x type: string the name of the toolbar, which is listed on the show/hide toolbars menu. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
no setup script files! ...
...her=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:createdesktopicon}; groupdescription: {cm:additionalicons}; flags: unchecked name: quicklaunc...
...ile= 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:createdesktopicon}; 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: .
...dirs 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}; onlybel...

Accessibility API cross-reference
contentinfo <footer> page footers are often tagged as an artifact (not "real" content) with the 'contentinfo' provided as document level xmp metadata instead the mouse pointer - when and how is this used? cursor n/a n/a n/a a definition of a term or concept. 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. diagram n/a n/a figure <figure> a dial or a knob. msaa only. dial n/a n/a n/a a dialog or message box. dialog dialog dialog dialog <d...
... especially used for sliders, scrollbars, toolbars, tablists... n/a horizontal horizontal aria-orientation=horizontal indicates whether the element is exposed to an accessibility api. ...
..., tablists... n/a horizontal horizontal aria-orientation=horizontal indicates whether the element is exposed to an accessibility api. 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. ...
... n/a horizontal horizontal aria-orientation=horizontal indicates whether the element is exposed to an accessibility api. 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. ...

Displaying Places information using views
ce and trees tutorial for general information about trees. if you would like your tree view to be styled in the same manner that firefox styles its uses of the view, you should include the following stylesheet. note that this stylesheet is different from the one given above, which must be included if you use a built-in places view. 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. column binding the built-in tree view makes it easy to hook up specific columns of your tree to specific properties of the result. it does so by recognizing certain magi...
... you may specify as few or as many of these magic columns as you want, and your tree may of course contain other columns as well. in lieu ...
... you may specify as few or as many of these magic columns as you want, and your tree may of course contain other columns as well. ...
... you may specify as few or as many of these magic columns as you want, and your tree may of course contain other columns as well. in lieu of setting an id on a treecol, you may specify an anonid attribute. ...

Overview of Mozilla embedding APIs
nterfaces: nsifactory nsuriloader the nsuriloader service is responsible for targeting a uri at an appropriate content handler. a content handler may be an existing or new window, a helper application or the unknown content handler - if no other handler can be found for the content-type. 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. if no registered content handlers are available, the unknowncontenttypehandler is notified. the default implementation of this service displays a dialog box asking the user if the content should be saved to disk... contract-id: ns_iunknow...
...the webbrowser provides a simple mechanism for other applications to leverage gecko functionality. each instance of a webbrowser encapsulates a full featured html content area. the embedding application receives notifications from gecko through a set of callback interfaces it ...
...focus interface. this interface serves two purposes. first, it provides methods for the embedding application to notify a webbrowser of activation/deactivation and to control tabbing order... this interface also allows access to the currently focused domwindow and domelement. context menu notifications right-click context menu notifications are passed up to the embedding application through the nsicontextmenulistener interface. these notifications allow the embedding application to display context menus based on user activity within the webbrowser (such as a right-click on a hypertext link). saving documents notification interfaces which the embedding application should implement nsfile public interfaces nsisupports base component object model interface. this interface provides runtime interfa...
...extensions, and so forth. nsidirectoryserviceprovider interface status... interface definition: nsilocalfile interface status... interface definition: nsifile interface status... interface definition: nsiclipboardcommands interface status... interface definition: nsiselection interface status... interface definition: nsiuriloader interface status... interface definition: nsiuricontentlistener interface status... interface definition: defining new xpcom components original document information author(s): rpotts, alecf, oeschger at netscape.com last updated date: march 5, 2003 copyright information: creative commons ...

HTML parser threading
nding normal main-thread dynamically-allocated atom has to be obtained for the same string and used instead of the nshtml5atom. nshtml5atom objects are guaranteed to be immutable and to stay alive for the lifetime of the parser instance, so it's safe for the main thread to call their methods (as is necessary to find the corresponding normal atom). ...
...for any given content handle, the node creation tree op is always the first tree op in queue that uses that handle, so subsequent non-creation tree ops can safely dereference the handle to obtain a real node. ...
... points to memory allocated by the tree builder and guaranteed to stick around for the life time of the parser. the tree builder never dereferences a content handle. in fact, a content handle won't have an actual node behind it initially. 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**. ...
...(this indeed means that removing parser-created nodes from the dom during parsing doesn't release memory until the parser stops parsing, which is, in theory, a problem for long polling using html in an iframe e.g. ...

nsIDocShell
document container element. note that out-of-process browsers do not have an nsidocshell; instead you can access the nsidocshell object from a frame script. ...
... chromeeventhandler nsidomeventtarget events generated in the frame bubble up to its chromeeventhandler. in the case of a content frame or subframe this is the containing chrome frame. in the case of a chrome frame this is the same as the frame element. this attribute allows chrome to tie in to handle dom events that may be of interest to chrome. contentviewer nsicontentviewer content viewer that is currently loaded for this docshell. this may change as the underlying content changes. read only. currentdocumentchannel nsichannel gets the channel for the currently loaded document, if any. for a new document load, this will be the channel of the previous document until after onlocationchange fires. read only. documentcharsetinfo n...
...rt of a separate nsidoccharsetinfo interface. parentcharsetsource print32 indicates the source from which the character set being used was obtained. higher numbers override lower ones. see character set source constants for defined values. note: prior to gecko 12.0, this attribute was part of a separate nsidoccharsetinfo interface. parenturicontentlistener nsiuricontentlistener uri content listener parent. this is not refcounted and is assumed to be nulled out by the parent when the parent is going away. obsolete since gecko 1.8 prescontext nsprescontext presentation context for the currently loaded document. this may be null. read only. native code only! presshell nsipresshell presentation shell for ...
...nce, if the user tries to reload the page, then this is the url that will be reloaded. areplace whether to modify the current history entry instead of creating a new one. beginrestore() begin firing webprogresslistener notifications for restoring a page presentation. this method will post an event to complete the simulated load after returning to the event loop. void beginrestore( in nsicontentviewer viewer, in boolean top ); parameters viewer the content viewer whose document we are starting to load. if null, it defaults to the docshell's current content viewer, creating one if necessary. top should be true for the toplevel docshell that is being restored; it will be set to false when this method is called for child docshells. createaboutblankcontentviewer() cr...

nsIFocusManager
nsidomelement getfocusedelementforwindow(in nsidomwindow awindow, in prbool adeep, out nsidomwindow afocusedwindow); pruint32 getlastfocusmethod(in nsidomwindow window); ...
...ozilla.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! obsolete since gecko 2.0 void firedelayedevents(in nsidocument adocument); native code only! void focusplugin(in nsicontent aplugin); native code only! nsidomelement getfocusedelementforwindow(in nsidomwindow awindow, in prbool adeep, out nsidomwindow afocusedwindow); pruint32 getlastfocusmethod(in nsidomwindow window); void movecarettofocus(in nsidomwindow awindow); void elementisfocusable(in nsidomelement aelement, in unsigned long aflags); nsidomelement movefocus(in...
...ns_error_invalid_arg if awindow is null. native code only!contentremoved obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. called when content has been removed. 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 firedelayedevents( in nsidocument adocument ); parameters adocument native code only!focusplugin indicate that a plugin wishes to take the focus. this is similar to a normal focus except that the widget foc...
... events that have been delayed due to synchronized actions. void firedelayedevents( in nsidocument adocument ); parameters adocument native code only!focusplugin indicate that a plugin wishes to take the focus. this is similar to a normal focus except that the widget focus is not changed. updating the widget focus state is the responsibility of the caller. 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). the return value wi...

nsIHTMLEditor
editor/idl/nsihtmleditor.idlscriptable please add a summary to this article. ...
...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...
...rameters aproperty the property to set by default. aattribute the attribute of the property, if applicable. may be null. example: aproperty="font", aattribute="color" avalue if aattribute is not null, the value of the attribute. example: aproperty="font", aattribute="color", avalue="0x00ffff" addinsertionlistener() add listener for insertion override. void addinsertionlistener( in nsicontentfilter infilter ); parameters infilter function which callers want called during insertion. align() document me! void align( in astring aalign ); parameters aalign breakisvisible() checks whether a br node is visible to the user. boolean breakisvisible( in nsidomnode anode ); parameters anode return value candrag() decides if a drag should be started (fo...
...editorproperty.href(). aattribute the attribute of the property, if applicable. may be null. example: aproperty=nsieditorproptery.font(), aattribute="color" nsieditproperty.allattributes() is special. it indicates that all content-based text properties are to be removed from the selection. removeinsertionlistener() remove listener for insertion override. void removeinsertionlistener( in nsicontentfilter infilter ); parameters infilter function which callers do not want called during insertion. removelist() document me! void removelist( in astring alisttype ); parameters alisttype replaceheadcontentswithhtml() replace all children of <head> with string of html source. void replaceheadcontentswithhtml( in astring asourcetoinsert ); parameters asourcetoinser...

nsIWebBrowser
st create one chrome object for each browser object that is instantiated. the embedder must associate the two by setting this property to point to the chrome object before creating the browser window via the browser's nsibasewindow interface. the chrome object must also implement nsiembeddingsitewindow. the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive additional notifications from the browser object. the chrome object may optionally implement nsiwebprogresslistener instead of explicitly calling addwebbrowserlistener() and removewebbrowserlistener() to register a progress listener object. if the implementation does this, it must also implement nsiweakreference. note: the implementation s...
...alue. read only. isactive boolean indicates whether this web browser is active. active means that it's visible enough that we want to avoid certain optimizations like discarding decoded image data and throttling the refresh driver. in firefox, this corresponds to the visible tab. defaults to true. for optimal performance, set it to false when appropriate. parenturicontentlistener nsiuricontentlistener uri content listener parent. the embedder may set this property to their own implementation if they intend to override or prevent how certain kinds of content are loaded. note: if this attribute is set to an object that implements nsisupportsweakreference, the implementation should get the nsiweakreference and hold that. otherwise, the implementati...
...e alistener, in nsiidref aiid ); parameters alistener the listener to be removed. aiid the iid of the interface on the listener that will no longer be called. return value ns_ok listener was successfully added. ...
...ce on the listener that will no longer be called. return value ns_ok listener was successfully added. ns_error_invalid_arg one of the arguments was invalid or the object did not implement the interface specified by the iid. ...

XUL Overlays
located in "base" xul files and what kind should be put in overlays, xul overlays generally define items that are not present in the basic versions of the ui, such as additional components. when plug-ins, browser extensions, or other applications provide new ui elements to the browser, these elements should be defined in overlay files. ...
...directory. overlaying attributes in addition to new elements and subtrees, you can also overlay attributes into existing elements. in xul, attributes control important features of the skin like image sources, as in the following example, where an overlay destructively overwrites the image source in the base file with a replacement. ...
...overlay positioning xul overlays also support positioning of nodes. you can specify a position attribute on a node in the overlay to provide a hint for insertion into the master document. in the following example, the last menu item, example four, will be placed just after the "new" menu item instead of being appended to the end of the menu like the other kids. <overla...
...n 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 superimposed over the original, and the mozilla icon replaces the netscape icon. overlay positioning xul overlays also support positioning of nodes. you can specify a position attribute on a node in the overlay to provide a hint for insertion into the master document. in the following example, the last menu item, example four, will be placed just after the "new" menu item instead of being appended to the end of the menu like the other kids. <overlay id="main-overlay" xmlns:h...

Index
t no summary! 12 autoconfig file format definition please see https://wiki.mozilla.org/thunderbird:autoconfiguration:configfileformat. ...
...ion please see https://wiki.mozilla.org/thunderbird:autoconfiguration:configfileformat. 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. 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. if there is no card matching the email, the icon will not appear. if there is a card, but no screenname, the icon will not appear. and finally, if there is no icon, the icon will not appear. the reason t...
...nname>/picture/<screenname for card>.gif if aim.session.screenname is not set, the icon will not appear. if there is no card matching the email, the icon will not appear. if there is a card, but no screenname, the icon will not appear. and finally, if there is no icon, the icon will not appear. the reason this file name scheme was chosen was is this is how netscape 7.0 im stores buddy icons on disk. so if you use nim, and you use buddy icons, this will just work for free. notes: 16 cached compose window faq seth spitzer (sspitzer@mozilla.org) what is the "cached" compose window? instead of destroying the mail compose window on send (or close) just to create a new one the next time, mozilla mail will "cache" the compose window on send (or close), and use...

Console messages - Firefox Developer Tools
most of the web console is occupied by the message display pane: each message is displayed as a separate row: time the time the message was recorded. 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. message the message itself. number of occurrences if a line that generates a warning or error is executed more than ...
...umber for javascript, css and console api messages, the message can be traced to a specific line of code. the console then provides a link to the filename and line number that generated the message. by default, the console is cleared each time you navigate to a new page or reload the current page. to override this behavior, enable persist logs in the console settings menu (gear icon). the context menu options listed below are available on all message categories. additional context menu options are described in the subsection for the message category they apply to. copy message copies the selected message to the clipboard. select all selects all messages available in the message display pane. export visible messages to clipboard copies all messages available in th...
...in the 400-499 (client error) or 500-599 (server error) ranges are considered errors. their display is controlled by the errors button, not the requests button. filtering by text to see only messages that contain a specific string, type in the text box labeled "filter output". for example, if you entered the string img into the text box, you would have a list something like this: a small "x" icon appears at the right end of the text box when you have entered a string on which to filter the output. click the "x" icon to clear the filter and show the entire list again. you can negate a text search by prefixing it with the - character. for example, -img shows only items that do not contain the string img. filtering with regular expressions you can also use a valid regular expression to fi...
...ar expression to filter the console output. for example, the following video shows the results when filtering on two simple regular expressions: /(cool|rad)/ and /(cool)/. you can negate a regular expression search by prefixing it with the - character. for example, -/(cool|rad)/ shows only items that do not match the expression /(cool|rad)/. clearing the log finally, you can use the trashcan icon on the left to clear the contents of the console. when you clear the console, the console cache is also cleared. this prevents errors that have already been loged from reappearing when you reopen the console. ...

The JavaScript input interpreter - Firefox Developer Tools
pear to be complete when you press enter, then the console treats this as shift+enter , enabling you to finish your input. for example, if you type: function foo() { and then enter, the console does not immediately execute the input, but behaves as if you had pressed shift+enter , so you can finish entering the function definition. 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). the multi-line editing pane opens on the left side the of web console. you can enter multiple lines of javascript by default in this mode, pressing enter after each one. to execute the snippet that is currently in the editing pane, click the run button or press ctrl+enter (or cmd+return on...
... open files when in multi-line mode, and save the current contents of the editing pane to a file. to open a file, press ctrl+o (cmd+o on macos). a file dialog box opens so you can select the file to open. to save the contents of the editing pane, press ctrl+s (cmd+s on macos). a file dialog box opens so you can specify the location to save to. 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). accessing variables you can access variables defined in the page, both built-in variables like window and variables added by javascript libraries like jquery: autocomplete the editor has autocomplete: enter the first few letters and a popup appears with possible completions: press enter, tab, o...
...e meanings of the "words". the output is highlighted as well where appropriate. note: syntax highlighting is not visible in your browser if accessibility features have been enabled. execution history the interpreter remembers expressions you've typed. to move back and forward through your history: in single-line mode, use the up and down arrows. in multi-line mode, use the ⋀ and ⋁ icons in the editing panel's toolbar. the expression history is persisted across sessions. to clear the history, use the clearhistory() helper function. you can initiate a reverse search through the expression history, much like you can in bash on linux and mac or powershell on windows. on windows and linux press f9. on mac press ctrl+r (note: not cmd+r!) to initiate the reverse search. enter th...
... the console. start typing part of the expression you are looking for and the first match is displayed in the console. repeatedly typing f9 on windows and linux ( ctrl+r on mac) cycles backwards through the matches. once you have initiated the reverse search, you can use shift + f9 on windows or linux ( ctrl+s on mac) to search forward in the list of matches. you can also use the ⋀ and ⋁ icons in the expression search bar. when you find the expression you want, press enter (return) to execute the statement. working with iframes if a page contains embedded iframes, you can use the cd() function to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. there are three ways to select an iframe using cd(): you...

ContentIndex.add() - Web APIs
ntent. description: a string description of the item. used in user-visible lists of content. url: a string containing the url of the corresponding html document. needs to be under the scope of the current service worker. category: optional a string defining the category of content. can be: '' an empty string, this is the default. 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. sizes: optional a string representation of the image size. type: optional the mime type of the image. return value returns a promise that resolves with undefined exceptions typeerror if the service worker's registration is not present or t...
... optional a string representation of the image size. type: optional the mime type of the image. return value returns a promise that resolves with undefined exceptions typeerror if the service worker's registration is not present or the service worker does not contain a fetchevent. if the id, title, description or url are missing, not of type string, or an empty string. if icons images are not of image type. examples here we're declaring an item in the correct format and creating an asynchronous function which uses the add method to register it with the content index. // 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.', ...
... images are not of image type. examples here we're declaring an item in the correct format and creating an asynchronous function which uses the add method to register it with the content index. ...
...t try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } the add method can also be used within the service worker scope. // 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. unknown initial definition. ...

Privileged features - Web APIs
open function that requires chrome-privilege in firefox. this is not for web content. the following features require the chrome-privilege. centerscreen centers the window in relation to its parent's size and position. minimizable this setting can only apply to dialog windows; minimizable requires dialog=yes. if minimizable is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. any non-dialog window is always minimizable and minimizable=no will be ignored. dependent if on, the new window is said to be dependent of its parent window. a dependent window closes when its parent window closes. a dependent window is minimized on the windows task bar only when its parent window is minimized. on windows platforms, a dependent window...
...s window's only content, without any of the browser's interface elements. there will be no context menu defined by default and none of the standard keyboard shortcuts will work. the page is supposed to provide a user interface of its own, usually this feature is used to open xul documents (standard dialogs like the javascript console are opened this way). 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. you can access the command system menu with a right-click on the titlebar). dialo...
...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. you can access the command system menu with a right-click on the titlebar). dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. they are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. on mac systems, dialog windows have a different window border and they may get turned into a sheet. modal if on, the new window is said to be modal. the user ...
...indows, regardless of whether it is active or not. alwayslowered if on, the new created window floats below, under its own parent when the parent window is not minimized. alwayslowered windows are often referred as pop-under windows. the alwayslowered window can not be on top of the parent but the parent window can be minimized. in ns 6.x, the alwayslowered window has no minimize system command icon and no restore/maximize system command. alwaysontop if on, the new window will always be displayed on top of all other windows (browser windows and otherwise), regardless of whether it is active or not. this was added in firefox 66 (see bug 1519893). z-lock same as alwayslowered. close when set to no or 0, this feature removes the system close command icon and system close menu item. it wil...

<button>: The Button element - HTML: Hypertext Markup Language
g>), and use ::after and ::before pseudo-elements for complex rendering. if your buttons are not for submitting form data to a server, be sure to set their type attribute to button. otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document. ...
...-elements for complex rendering. if your buttons are not for submitting form data to a server, be sure to set their type attribute to button. otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document. ...
... me</button> accessibility concerns icon buttons buttons that only show an icon to represent do not have an accessible name. accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree. assistive technology then uses the accessibility tree to navigate and manipulate page content. to give an icon button an accessible name, put text in the <button> element that concisely describes the button's functionality. example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0 10 10"><path d="m7 9l5 8 3 9v6l1 4h3l1-3 1 3h3l7 6z"/></svg> add to favorites </button> if you want to visually hide the button's text, an accessible way to do so is to use a combination of css properties to ...
...9l5 8 3 9v6l1 4h3l1-3 1 3h3l7 6z"/></svg> add to favorites </button> if you want to visually hide the button's text, an accessible way to do so is to use a combination of css properties to remove it visually from the screen, but keep it parseable by assistive technology. 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. what is an accessible name? | the paciello group mdn understanding wcag, guideline 4.1 explanations understanding success criterion 4.1.2 | w3c understanding wcag 2.0 size and proximi...

<menuitem> - HTML: Hypertext Markup Language
commands can also optionally include a checkbox or be grouped to share radio buttons. ...
...cular title can be used to describe the command, or provide usage hints. checked boolean attribute which indicates whether the command is selected. may only be used when the type attribute is checkbox or radio. command specifies the id of a separate element, indicating a command to be invoked indirectly. may not be used within a menu item that also includes the attributes checked, disabled, icon, label, radiogroup or type. default this boolean attribute indicates use of the same command as the menu's subject element (such as a button or input). disabled boolean attribute which indicates that the command is not available in the current state. note that disabled is distinct from hidden; the disabled attribute is appropriate in any context where a change in circumstances might render th...
...r type. default this boolean attribute indicates use of the same command as the menu's subject element (such as a button or input). disabled boolean attribute which indicates that the command is not available in the current state. note that disabled is distinct from hidden; the disabled attribute is appropriate in any context where a change in circumstances might render the command relevant. icon image url, used to provide a picture to represent the command. label the name of the command as shown to the user. required when a command attribute is not present. radiogroup this attribute specifies the name of a group of commands to be toggled as radio buttons when selected. may only be used where the type attribute is radio. type this attribute indicates the kind of command, and can be...
... one selection from a group of commands that can be toggled as radio buttons. 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. </menuitem> <menuitem type="command" label="this command has javascript" onclick="alert('command clicked')"> commands don't render their contents. </menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem type="radio" radiogroup="group1">ra...

Link types - HTML: Hypertext Markup Language
<area>, <link> <form> help if the element is <a> or <area>, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants. if the element is <link> it indicates that the hyperlink leads to a resource giving further help about the page as a whole. <a>, <area>, <form>, <link> none. 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. if several icons are equally appropriate, the last one is used. if the most appropriate...
... 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. if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. ...
...e most appropriate icon. if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. <link> <a>, <area>, <form> import html imports <link> <a>, <area>, <form> index obso...
.... working draft added dns-prefetch, preconnect, and prerender values. html living standardthe definition of 'link types' in that specification. living standard added opener and made noopener the default behavior for target="_blank" links. html5the definition of 'link types' in that specification. recommendation added tag, search, prefetch, noreferrer, nofollow, icon, and author. renamed copyright to license. removed start, chapter, section, subsection, and appendix html 4.01 specificationthe definition of 'link types' in that specification. recommendation added alternate, stylesheet, start, chapter, section, subsection, appendix, and bookmark. renamed previous to prev. removed top, and search. unknownthe definition of ...

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...
...om the app shell and the content: 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...
...', '/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) { conso...

Navigator.mozNotification - Archive of obsolete content
which are used to display desktop notification alerts to the user. currently, these are only supported on firefox mobile and firefox os. see displaying notifications for an example. the support for this property as been dropped in favor of the standard notification constructor. ...
... return value a new notification object. ...
... return value a new notification object. ...

Reddit Example - Archive of obsolete content
eeds to run a content script in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's target url. the content script then needs to send the url to the add-on script. ...
...un a content script in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's target url. the content script then needs to send the url to the add-on script. ...
...nts('.nextprev').length) return; // intercept the click, passing it to the addon, which will load it in a tab. event.stoppropagation(); event.preventdefault(); self.port.emit('click', t.tostring()); }); this script uses jquery to interact with the dom of the page and the self.port.emit function to pass urls back to the add-on script. 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: . ...

indexed-db - Archive of obsolete content
globals ...
... globals properties indexeddb enables you to create, open, and delete databases. see the idbfactory documentation. idbkeyrange defines a range of keys. see the idbkeyrange documentation. domexcept...
... globals properties indexeddb enables you to create, open, and delete databases. see the idbfactory documentation. idbkeyrange defines a range of keys. see the idbkeyrange documentation. ...

notifications - Archive of obsolete content
ple. when the message is clicked, a string is logged to the console. var notifications = require("sdk/notifications"); notifications.notify({ title: "jabberwocky", text: "'twas brillig, and the slithy toves", data: "did gyre and gimble in the wabe", onclick: function (data) { console.log(data); // console.log(this.data) would produce the same result. } }); this one displays an icon that's stored in the add-on's data directory. see the self module documentation for more information. 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...
...n. 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. if the user's system does not support desktop notifications or if its notifications service is not running: if firefox was started normally, notifications are logged to firefox's error console if the user launched firefox from ...
...he command line, notifications are logged to the terminal. globals functions notify(options) displays a transient notification to the user. parameters options : object optional options: name type title string a string to display as the message's title. text string a string to display as the body of the message. iconurl string the url of an icon to display inside the message. it may be a remote url, a data uri, or a url returned by the self module. onclick function a function to be called when the user clicks the message. it will be passed the value of data. data string a string that will be passed to onclick. ...

tabs - Archive of obsolete content
t again. 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. tabs hosted by private browser windows won't be seen if you enumerate the tabs...
...ab's title. var tabs = require("sdk/tabs"); console.log("title of active tab is " + tabs.activetab.title); length the number of open tabs across all windows. events open this event is emitted when a new tab is opened. this does not mean that the content has loaded, only that the browser tab itself is fully visible to the user. properties relating to the tab's content (for example: title, favicon, and url) will not be correct at this point. if you need to access these properties, listen for the ready event: var tabs = require("sdk/tabs"); tabs.on('open', function(tab){ tab.on('ready', function(tab){ console.log(tab.url); }); }); arguments tab : listeners are passed the tab object that just opened. close this event is emitted when a tab is closed. when a window is closed this ...
... the content script. see content scripts guide to learn the details. properties id the unique id for the tab. this property is read-only. title the title of the tab (usually the title of the page currently loaded in the tab) this property can be set to change the tab title. url the url of the page currently loaded in the tab. this property can be set to load a different url in the tab. favicon the url of the favicon for the page currently loaded in the tab. this property is read-only. this property is deprecated. from version 1.15, use the favicon module's getfavicon() function instead. contenttype this is currently an experimental api, so we might change it in future releases. returns the mime type that the document currently loaded in the tab is being rendered as. this may come...

Implementing the widget - Archive of obsolete content
ings: on a left-click, the widget should activate or deactivate the annotator. on a right-click, the widget should display a list of all the annotations the user has created. because the widget's click event does not distinguish left and right mouse clicks, we'll use a content script to capture the click events and send the corresponding message back to our add-on. 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. inside the data subdirectory create another subdirectory widget. we'll keep the widget's files here. this hierarchy isn't mandatory; you could just keep them all under data. but it seems tidier this way. the widget's content script ...
...ts the corresponding message to the add-on code: this.addeventlistener('click', function(event) { if(event.button == 0 && event.shiftkey == false) self.port.emit('left-click'); if(event.button == 2 || (event.button == 0 && event.shiftkey == true)) self.port.emit('right-click'); event.preventdefault(); }, true); save this in your data/widget directory as widget.js. 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. either way, save them in your data/widget directory. main.js now in the lib directory open main.js and add the following code: var widgets = require('sdk/widget'); var data = require('sdk/self').data; var annotatorison = false; function toggleactivation() { annotatorison = !annotat...
...s to messages from the widget's content script by toggling its activation state. since we don't have any code to display annotations yet, we just log the right-click events to the console. now from the annotator directory type cfx run. 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. next we'll add the code to create annotations. ...

Display a Popup - Archive of obsolete content
contents of the <textarea> is sent to the main add-on code. the main add-on code logs the message to the console. 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"), c...
.../ 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. function handleclick(state) { text_entry.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so t...
...) { 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, ...

Boxes - Archive of obsolete content
images if you put image in the contents, you should probably add align="start" attribute to the box. ...
...te to the box. ...
...lesheet 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> ...

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...
...however, in some cases, you may want to be able to process text usin...
...however, in some cases, you may want to be able to process text using another encoding. in these cases, you can easily convert between encodings using the nsiscriptableunicod...

Using content preferences - Archive of obsolete content
permits code running within chrome (in other words: extensions and the browser itself, not web sites) to locally save preferences on a per-site basis. this makes it possible to write an extension that lets the user customize the appearance of specific web sites (setting the font size larger on sites that use obnoxiously small fonts, for instance). 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. site-specific content preferences are stored in the profile folder, in the database file "content-prefs.sqlite". example: setting and retrieving preferences this example demonstrates how to sa...
...t-prefs.sqlite". example: setting and retrieving preferences this example demonstrates how to save a preference and then retrieve its value. 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". prefservice.setpref(uri, "devmo.somesetting", "foo"); ... // retrieve the value of the "devmo.somesetting" preference. var value = prefservice.getpref(uri, "devmo.somesettin...
...ing mode, use of the content preference service needed to be avoided while in private browsing mode; instead, information needed to be stored in memory or preferences had to be avoided. starting in gecko 9.0, when in private browsing mode, the content preference service stores preferences in memory instead of on disk, and automatically forgets them when leaving private browsing mode. see also nsicontentprefservice nsicontentprefobserver tosource() (potentially useful for serializing objects for later use with eval()) ...

Configuration - Archive of obsolete content
e different webapps using the same uri and this webapp is only your particular instance or mashup. so make sure the identifier is not only unique to the web application, but also to you. 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. status turns the status messages on or off for this web app: yes or no location turns the readonly location bar on or off for this web app: yes or no navigation turns the hotkey history navigation (alt+left, alt+right and alt+home) on or off for this web app: yes o...
...is loading. the file must be located in the web app home directory: splashscreen.html include uris that should be opened in the web app, rather than in the default browser. an asterisk is used to match any string. separate multiple uris with commas: *google.com, *yahoo.com exclude urls that should be opened in the default browser, rather than in the web app. syntax is the same as for include. trayicon indicates that a system tray (notification area) icon should be displayed for the application on windows: yes or no. iconic specifies that the application should be opened in iconic state. currently support only on windows in conjunction with the trayicon, causes the application to open minimized to the system tray: yes or no. launch prism with -webapp [bundle] to load the specified web profile ...
... to your prism profile folder. ...

Writing textual data - Archive of obsolete content
represent "all" characters (the full repertoire of unicode) while others can only represent a subset of the full repertoire. when the file is to be read only by the application/extension itself, using utf-8 is often the best choice — it can represent all characters, and ascii characters are represented efficiently. ...
...n represent all characters, and ascii characters are represented efficiently. 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 \u00e4\n"); os.writestring("hebrew: \u05d0 \u05d1\n"); // etc. os.close(); you can also write character arrays using the write function, although using writestring is simpler from javascript code. the example above passes 0 as the third ...
... "?" in that example with any other character. you can also specify any unicode character u+abcd directly as 0xabcd. note: if the replacement character is not a supported character in the chosen character encoding, attempts to write unsupported characters will fail with ns_error_loss_of_significant_data. versions before gecko 1.8 firefox 1.0.x, mozilla 1.7.x and older versions do not support nsiconverteroutputstream. alternative ways usable from javascript do not support character encodings that use embedded nulls (such as utf-16 and utf-32). they work by manually converting the string you want to write to a byte sequence using nsiscriptableunicodeconverter, and writing that to the stream. here's an example: // first, get and initialize the converter var converter = components.classes["@...

Complete - Archive of obsolete content
le is fr-fr, it gets the description from: locale/fr-fr/allcustom/install.properties testing a locale to test the alternative locale, install the extension in the normal way. 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. the application's user interface only switches language if you have the appropriate language pack installed. but this extension switches between english and french without needing any language pack. some versions of firefox etc. have a bug that prevents this from working. to work around the bu...
...llcustom, so it contains a skin for this component in each of the themes that it supports. these themes are: classic for firefox etc. classic for seamonkey modern for seamonkey to make it easier to support different themes, developers place anything that might depend on the theme in separate files in a separate directory. in this extension, the only things that depend on the theme are the icon images on the buttons and the css style rules. for more information about themes, see the main themes page here. how a button gets themed when you look at button 1 in seamonkey, you see an image or style that depends on your theme. this is how it happens: this extension does not support modern in firefox etc., but you can see the registration details for classic in chrome.manifest. for example, i...
...he appropriate image: button-1.png file structure in the new file structure, there is a skin directory for all the themes. each theme has its own directory there. in each theme's directory, there is an allcustom directory. this is useful when files from various components and extensions and all unpacked in the same place—it keeps each set of files separate. the allcustom directory contains the icon images and the css stylesheet. the file contents.rdf contains registration data used by seamonkey. testing a theme to test a theme in seamonkey, choose view – apply theme, then choose the theme. restart seamonkey. application differences some differences between firefox etc. and seamonkey cause complications for this extension. to resolve the differences, the extension uses firefox etc. and sea...

XUL Questions and Answers - Archive of obsolete content
integers? xul attributes such as left="100" or top="200", as well as corresponding properties, look as if they're integers but they are actually handled as strings. to convert them to integers use the parseint() javascript function. while the attributes are always strings per the dom specification, the properties will eventually be fixed to return the value with the correct type. 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. this should be used in place of the image attribute. possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back...
... how to use dynamic objects in toolbar there may be a few ways to implement this: by building your menupopup from an rdf datasource, which could be generated on the server. by getting data (e.g. ...
...in addition i need to evaluate the browser contentdocument dom in order to clean "target" attributes on links, and so on. */ how do i create xul elements dynamically in javascript? use the following snippet of code to add a new element under...

image - Archive of obsolete content
in the xul tutorial. note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth. the new behavior aligns more with the html <img> element and shrinks both the width and height down proportionally. 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. image.onload type: script code this event handler will be called on the image element when the image has finished loading. this applies whether the imag...
...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 typically looks like an exclamation mark. this and the other icon classes may be used by image elements or other elements which can have an image. error-icon class that adds an error icon. this will typically be a red "x" icon. message-icon class that adds a message box icon. question-icon class that adds a question icon, which usually looks ...
...oks like an exclamation mark. this and the other icon classes may be used by image elements or other elements which can have an image. error-icon class that adds an error icon. this will typically be a red "x" icon. message-icon class that adds a message box icon. question-icon class that adds a question icon, which usually looks like a question mark. related see also the image and icon attributes. interfaces nsiaccessibleprovider nsidomxulimageelement ...

listcell - Archive of obsolete content
an ellipsis will be used in place of the cropped text. ...
...an ellipsis will be used in place of the cropped text. ...
...specify the image using the image attribute. note that both an image and a label are added when this style is set. the label will take up extra space even when no label text is set. if it is desired to center the image, use css to hide the label. tips if you need to right-align a cell's contents, you can do so like this: cell = docume...

Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
ersion. but you will have to change the id to something unique to your app. default-prefs.js - these are the default mozilla preferences used by xulrunner when running your app. the important ones are described in xulrunner:specifying startup chrome window. you can add other preferences for things like debugging, as mccoy does (e.g. javascript.options.showinconsole). ...
... the chrome/ subdirectory chrome for your application should be placed in the chrome/ subdirectory as described in xul tutorial:xul structure. ...
...nk different", we took that to heart, and not just by rejecting useless adverbial endings. we've included a whole subdirectory just for the mac. it's got a lot of stuff in it, but once again you can mostly ignore this and copy the whole directory over from mccoy. 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. the chrome/ subdirectory chrome for your application should be placed in the chrome/ subdirectory as described in xul tutorial:xul structure. chrome will be packaged automatically by the build system, so you also need to specify which files get put into which packages by using jar manifests. in the case of mccoy, a separate manifest is used for content/, skin...

XULRunner tips - Archive of obsolete content
dding the following line to your chrome manifest: locale branding en-us chrome/locale/branding/ the location you put the branding files in doesn't matter, as long as you register it appropriately in the manifest. 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. see firefox for example. 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. there are two approaches to display the branding of your application instead: ...
...re two approaches to display the branding of your application instead: when compiling xulrunner yourself: create a file module.ver in the directory mozilla/xulrunner/app with the contents: win32_module_description=myapplication myapplication should be replaced by whatever you want to see as title of the button. ...
...aches to display the branding of your application instead: when compiling xulrunner yourself: create a file module.ver in the directory mozilla/xulrunner/app with the contents: win32_module_description=myapplication myapplication should be replaced by whatever you want to see as title of the button. you can also replace xulrunner.ico in the same directory to change xulrunner's icon to the icon of your application. with a precompiled xulrunner: use xulrunner-stub.exe to start your application but rename it into myapplication.exe. with xulrunner 1.9 this will make the desired name appear in the task bar (not with xulrunner 1.8 however). your application's icon can also be added to this executable with a tool like resource hacker. to change icon of specific window, see window icons. ...

Mozilla release FAQ - Archive of obsolete content
where can...
...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 n logo is only to be present on netscape's communicator. this will serve as a way for an end-user to determine if they have mozilla or communicator. 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. where can i get a binary? mozilla.org now provides mozilla binaries. both nightly builds and numbered releases are available, numbered releases being made less frequently but with mo...
...ntation would be helpful, new documentation is also welcome. post to netscape.public.mozilla.documentation your intent, and you might get some help. what projects are there for others? 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. what's the best way to feel part of the community and talk to other developers? be sure to read and participate on the relevant newsgroups and drop by on irc. both are great ways to meet others working on mozilla, including lots of netscape ...

Sunbird Theme Tutorial - Archive of obsolete content
s not cover advanced topics. you might be able to apply the same method to other mozilla applications by changing some of the details. introduction a theme is a package that users can install in an application to change the appearance of the application, without changing how the application works. for example, a theme can change the size and colour of the toolbar buttons, and provide different icons on the buttons. but a theme cannot provide an extra button. what do you need to make a theme? to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end. you can use this kind of zip tool if you rename each file before and...
...tt>chrome.manifest</tt>. copy and paste the content from here (just one line): skin calendar testing chrome/calendar/ change <tt>testing</tt> to your theme's one-word internal name. save the file. creating the theme itself to create the theme itself, go to sunbird's program directory. 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. there you can see the location of the directory. in the program directory, go to the <tt>chrome</tt> directory. use a jar tool or zip tool to unpack the file <tt>calendar.jar</tt> there. go to the <tt>skin</tt> directory that has just been created, then to the <tt>classic</tt> directory there. copy the <tt>calendar</tt> directory that you find there. in your theme d...
...ember 2005. so do not waste time styling the old views. work with a recent test build so that your theme will be compatible with the next release. testing further changes when you make further changes to your theme, test them by restarting sunbird. to detect errors, choose tools – javascript console... the javascript console window displays css errors, not just javascript errors. making an icon and preview the themes window can display an icon and a preview graphic. you normally make these after you have designed the rest of your theme. make an image file 32 by 32 pixels, and save it as <tt>icon.png</tt> in your theme directory. make an image file about 200 by 100 pixels, and save it as <tt>preview.png</tt> in your theme directory. adding other components your theme only modifies th...

Building up a basic demo with PlayCanvas editor - Game development
ou can click your desired color or enter it in the bottom text field as a hex value. we've chosen a blue color with a hex value of 0095dd — enter this code in the text field and press return for it to be accepted. note: yes, you read that right — you need to enter the hex value without the hash/pound symbol. 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. so, at this point we've created a blue box. click on the box to bring up its entity sidebar — you'll see options for changing its position, rotation, and scale. try applying the rotation values x: 10 and y: 20. now...
...ame steps as we did before when coloring the cube: create a new material using the add asset (plus) button. make sure the new material in the assets panel is selected, to bring up the entity inspector. give the material a new name, along the lines of cylindermaterial. 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. follow the same approach again to add a cone to the scene, giving it a grayish color (we used eaeff2.) you should now have three shapes on your scene, something like the below screenshot. animating our scene animating 3d models might be considered an advanced thing to do, but all we want to do is to control a few properties of a ...
... scene. click on add component, then script in the entity inspector. at the bottom of the screen you can see the list of scripts available — for now there's only boxanimation.js — clicking it will add the animation script to the box object. the cylinder now we'll do the same steps for cylinder. first: create a new script asset. name it cylinderanimation.js. double click the script icon to launch the code editor. this time instead of rotating the object we will try to scale it. for that we'll need a timer to store the total amount of time passed since the start of the animation. add this code to the initialize() function: this.timer = 0; and those two lines to the update() function: this.timer += dt; this.entity.setlocalscale(1, math.abs(math.sin(this.timer)), 1); the setl...

HTML basics - Learn web development
ectly so that they are clearly inside or outside one another. if they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. so don't do it! empty elements some elements have no content and are called empty elements. 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. this is because an image element doesn't wrap content to affect it. its purpose is to embed an image in the html page in the place it appears. anatomy of an html document that wraps up the basics of individual html elements, but they aren't handy on their own. now we'll look at how ...
...individual html elements, but they aren't handy on their own. now we'll look at how individual elements are combined to form an entire html page. 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. it is required preamble. in the mists of time, when html was young (around 1991/92), doctypes were meant to act as links to a set of rules that the html page had to follow to be considered good html, which could mean automatic error checking and other useful things. however these days, th...
...tab the page is loaded in. it is also used to describe the page when you bookmark/favourite it. <body></body> — the <body> element. this contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks or whatever else. 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. it does this via the src (source) attribute, which contains the path to our image file. we have also included an alt (alternative) attribute. in this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons: they are visually i...

Getting started with Svelte - Learn web development
ile and refresh the app for you when changes are made to the source files. ...
...ives — where you'll be creating the code for your app. app.svelte: this is the top-level component of your app. so far it just renders the 'hello world!' message. main.js: the entry point to our application. it just instantiates the app component and binds it to the body of our html page. public: this directory contains all the files that will be published in production. favicon.png: this is the favicon for your app. currently, it's the svelte logo. index.html: this is the main page of your app. initially it's just an empty html5 page that loads the css files and js bundles generated by svelte. global.css: this file contains unscoped styles. it's a regular css file that will be applied to the whole application. build: this folder contains the generated css and j...
...nd stores the result in public/build/bundle.js. it also adds the code in src/main.js to reference the features of each component. 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. as yo...

Introduction to automated testing - Learn web development
of the features (generally via flash), but you might not get the full experience. the basics: manual tests the browserstack live dashboard allows you to choose what device and browser you want to test on — platforms in the left column, devices on the right. when you mouse over or click on each device, you get a choice of browsers available on that device. 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. you'll find that you can enter urls into the address bar, and use the other controls like you'd expect on a real device. you ca...
...ith the mouse, or use appropriate gestures (e.g. pinch/zoom, two fingers to scroll) on the touchpads of supporting devices (e.g. macbook). note that not all features are available on all devices. you'll also see a menu that allows you to control the session. the features here are as follows: switch — change to another platform/device/browser combination. ...
...f supporting devices (e.g. macbook). note that not all features are available on all devices. you'll also see a menu that allows you to control the session. the features here are as follows: switch — change to another platform/device/browser combination. orientation (looks like a reload icon) — switch orientation between portrait and landscape. fit to screen (looks like a full screen icon) — fill the testing areas as much as possible with the device. capture a bug (looks like a camera) — takes a screenshot, then allows you to annotate and save it. issue tracker (looks like a deck of cards) — view previously captured bugs/screenshots. settings (cog icon) — allows you to alter general settings for the session. help (question mark) — accesses help/support functions. de...

Creating MozSearch plugins
ch format. the only difference is the root element and xml namespace. ...
... </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> let's say the user chooses to use the yahoo! search engine plugin and enters "mozilla" in the search box and presses the enter key. 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. example: searching mdc this plugin lets you easily search the mozilla developer center web site. <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <desc...
...o http://search.yahoo.com/, the value of the <searchform> element. example: searching mdc this plugin lets you easily search the mozilla developer center web site. ...

Limitations of chrome scripts
browser will throw an exception and you'll see an "unsafe cpow usage forbidden” error in the browser console. add-on code is still allowed to use cpows "unsafely". however, if an add-on passes a cpow into a platform api, and that platform api then attempts an unsafe operation on it, this will throw an exception. so as a general rule, add-ons should avoid passing cpows into non-addon code. ...
......
...if you need to ensure that the policy is only registered once, use a process script to register the policy. nsiwebprogresslistener this api will work in the chrome process. there is a shim that gives you access to the domwindow property of the nsiwebprogress object passed into onstatechange. ...

Process scripts
in the content process, in multiple scopes that are insulated from each other. for example, if you call the global frame message manager's loadframescript() function, then the script will be loaded separately into all open tabs. this can then cause a problem the frame scripts are interacting with a global service in the content process. for example, in multiprocess firefox, if you need to use nsicontentpolicy to register a content policy, you must do this in the content process. but if you register it in a frame script, and the frame script is loaded more than once, you'll register the content policy more than once, which probably isn't what you intend. similarly, some observer notifications must be registered in the content process, but if you do this in a frame script, and the frame scrip...
...chrome-privileged pages or things running in the parent process may require special treatment. if the above doesn't work try this: function contentmmfromcontentwindow_method2(acontentwindow) { return acontentwindow.queryinterface(ci.nsiinterfacerequestor) .getinterfa...
...ings running in the parent process may require special treatment. 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
owser.zoom(zoomfactor); }); zoomout.addeventlistener('touchend',function() { zoomfactor -= 0.1; browser.zoom(zoomfactor); }); controlling the stop/reload button next, let's talk about the stop/reload button. 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). this is implemented in our sample app with the following functions: browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function(e) { canmovebwd(); canmovefwd(); stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }...
...topreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); when the mozbrowserloadstart event fires, the latest page request has started loading, and we change the button to a cross to indicate "stop". 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"). notice that this is also where we call the canmovebwd() and canmovefwd() functions we discussed earlier — it makes sense to update the status of the back and forward buttons after each page reload. in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to pro...
...f the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience — this can be read out of the event object's e.detail.backgroundcolor value. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). 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. we do this with the following function, which runs the htmliframeelement.stop() method to stop the page loading if the button is displaying a cross, and the htmliframeelement.reload() method to reload the page otherwise. stopreload.addeventlistener('touchend',function() { if(stopreload.textconten...

Embedding Tips
appropriate uri and flags. this interface also has methods for reloading, stopping a load and going back and forward in the history. how do i block a load? implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::addwebbrowserlistener() method. use the callbacks for after-the-fact cancellation. alternatively, implement a nsiuricontentlistener as described below. how do i watch/intercept a load before it happens? implement the nsiuricontentlistener interface, and register it with the appropriate web browser object via the nsiwebbrowser::parenturicontentlistener attribute. watch for changes in nsiuricontentlistener::onstarturiopen(). you can abort the uri load at this point if you don't want it to proceed. if necessary yo...
...w. how do i watch/intercept a load before it happens? implement the nsiuricontentlistener interface, and register it with the appropriate web browser object via the nsiwebbrowser::parenturicontentlistener attribute. watch for changes in nsiuricontentlistener::onstarturiopen(). you can abort the uri load at this point if you don't want it to proceed. if necessary you may also implement the nsiuricontentlistener::ispreferred(), returning pr_true to ensure you are always the preferred uri handler and are called no matter what the content type. how do i copy items to the clipboard? obtain the nsiclipboardcommands interface from the appropriate web browser object via nsiserviceprovider::getinterface (or the do_getinterface() helper method). how do i save a document or data to disk? query for...
...t service. how do i get the dom document from the web browser object? nscomptr<nsidomdocument> doc; nscomptr<nsidomwindow> window; webbrowser->getcontentdomwindow(getter_addrefs(window)); if (window) { window->getdocument(getter_addrefs(doc)); } what is the docshell? a description of the docshell may be found here. how do i implement context menus? make your chrome object implement the nsicontextmenulistener or nsicontextmenulistener2. the nsicontextmenulistener::onshowcontextmenu() method will be called with the dom node that the context applies, the dom event plus some flag combinations that assist in determining what menu to display (document, link, image, selected text etc.) how do i implement tool tips? make your chrome object implement the nsitooltiplistener interface. methods...

Introduction to Layout in Mozilla
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 retu...
...er invokes nsidlf::createinstance, passes mime type to dlf nscontentdlf creates a nshtmldocument object, invokes startdocumentload. ...
...es 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 fixup occurs here insertchildat, appendchildto, removechildat frame construction conten...

AddonManager
nmanager object in the add-on sdk, use: const { addonmanager } = require("resource://gre/modules/addonmanager.jsm"); to import it in a normal bootstrapped extension or similar, use: cu.import("resource://gre/modules/addonmanager.jsm"); method overview promise? getinstallforurl(in string url, in installcallback? callback, in string mimetype, in string hash, in string name, in string iconurl, in string version, in nsiloadgroup loadgroup) promise? getinstallforfile(in nsifile file, in installcallback? callback, in string mimetype) promise? getallinstalls(in installlistcallback? callback) promise? getinstallsbytypes(in string types[], in installlistcallback? callback) void installaddonsfromwebpage(in string mimetype, in nsidomwindow source, in nsi...
...e of the startup change types or a custom value defined by your own provider. return value an array of add-on ids indicating the add-ons for which the specified change type applies. getinstallforurl() asynchronously gets an addoninstall for a url. ...
...back? 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 an optional placeholder version while the add-on is being downloaded loadgroup an optional nsiloadgroup to associate any network requests with getinstallforfile() asynchronously gets an addoninstall for an nsifile. promise? getinstallforfile( in nsifile file, in installcallback? callback, in string mim...

Localizing with Koala
e of the ui found in the search bar. the search bar is next to the right of the location bar, and by default points to the google search. if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines... there is also a tooltip that appears when you hover over the magnifying glass icon on the right side of the bar. requirements mercurial, linux, windows or mac os x. instructions preparation install komodo edit. install koala extension. go to tools > add-ons. search for "koala". click add to komodo edit... restart komodo when the installation is complete. you should see a new button in komodo's toolbar, with two options: startpage and management. before you can use them,...
...ed under the searchbar.dtd file) and choose "add entity". we're starting by the second entity in this file on purpose, you'll see in a moment how koala nicely handles entity order. the entity was added to the file and the english string is automatically highlighted, so that you can translate it right away. this entity is used in the tooltip that appears when you hover over the magnifying glass icon in the search bar. once you translated the searchendcap.label entity, add the other one from this file, i.e. cmd_enginemanager.label. you can right-click it and choose "add entity" as you did previously, or just double-click the entity name to add it to the file. note how koala is smart enough to insert this entity before searchendcap.label. this is helpful for keeping the localization files cl...
...cale files" view in the "koala file view" sidebar. you're now looking at your locale's file structure and can see that searchbar.dtd is "unmodified" with 2 translated entities (0 missing, 0 obsolete), whereas search.properties is "modified" with 1 translated entity (6 total minus 5 missing, 0 obsolete). 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. now that you've translated these 3 strings, let's commit your work to the local hg repository that you created in the "creating a new project" section. committing your work hopefully by now, you have translated 3 strings in the following 2 files: searchbar.dtd: cmd_enginemanager.label searchendcap.label search.properties: cmd_addfo...

Creating localizable web applications
not only does the text above the clock charts require translation, but so do the milliseconds captions below them. many languages use different number formats than english, like 18 148 or 18.148. also, the last caption includes an exclamation mark, and for some languages (e.g. french), the orthographic rules might require putting a space between the exclamation mark and the preceding word. 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. the following example shows how to achieve this with css. snippet 1. bad: <div class="tut_didyouknow"> <img src="/static/img/questio...
...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. the following example shows how to achieve this with css. snippet 1. bad: <div class="tut_didyouknow"> <img src="/static/img/question-64.png" class="tut_icon"> <?printf (_("did you know you can test a persona before you submit it? <b><a href=\"%s\">find out how!</a>&raquo;</b>"), $locale_conf->url('/demo_create_3#test'));?> </div> snippet 2. good: css: div.tut_didyouknow { background: url(/static/img/question-64.png) no-repeat 0 0; padding-left: 64px; } html[dir='rtl'] div.tut_didyouknow { background-image: url(/static/img/que...
...this is generally considered a good practice for decorative graphics. don't use images as buttons instead, use <button/> and style it with css. image 1. bad: snippet 1. good: css: .button { font-weight: bold; color: #0077a6; font-family: arial, sans-serif; border: none; background: none; cursor: poi...

Reporting a Performance Problem
this article will guide you in reporting a performance problem using the built-in gecko profiler tool. enabling the profiler toolbar button these steps only work in firefox 75+. ...
...//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. using the profiler when enabled, the profiler toolbar button is not recording by default. recording can be done by clicking on the toolbar icon to open its panel. make sure to choose an appropriate setting for the recording (if you're not sure, choose firefox platform), and then choosing "start recording". the toolbar icon turns blue when it is recording. the profiler uses a fixed size buffer to store sample data. when it runs out of space in its buffer, it discards old entries so you may want to increase the buffer size if you find you...
...ts is often more convenient than using the mouse to interact with the ui: ctrl+shift+1 - start/stop the profiler ctrl+shift+2 - take a profile and launch the viewer to view it capturing and sharing a profile while the profiler is recording, reproduce the performance problem. if possible let the problem manifest itself for 5-10 seconds. press ctrl+shift+2 or click on the profiler toolbar icon in the top right and select 'capture'. try to do this within a few seconds from reproducing the performance problem as only the last few seconds are recorded. if the timeline has a large red block it's a good sign. the data will open in a new tab. wait until the "symbolicating call stacks" notification disappears before sharing the profile. there will be a button in the top right labeled 'pu...

Gecko Roles
esents a button that drops down a menu. role_buttondropdowngrid represents a button that drops down a grid. role_whitespace represents blank space between other objects. role_pagetablist represents a container of page tab controls. role_clock represents a control that displays time. role_splitbutton represents a button on a toolbar that has a drop-down list icon directly adjacent to the button. role_ipaddress represents an edit control designed for an internet protocol (ip) address. the edit control is divided into sections for the different parts of the ip address. role_accel_label represents a label control that has an accelerator. role_arrow represents an arrow in one of the four cardinal directions. role_canvas represe...
... of the four cardinal directions. role_canvas represents a control that can be drawn into and is used to trap events. role_check_menu_item represents a menu item with a check box. role_color_chooser represents a specialized dialog that lets the user choose a color. role_date_editor represents control whose purpose is to allow a user to edit a date. role_desktop_icon an iconified internal frame in an role_desktop_pane. role_desktop_frame a desktop pane. a pane that supports internal frames and iconified versions of those internal frames. role_directory_pane a directory pane. a pane that allows the user to navigate through and select the contents of a directory. may be used by a file chooser. role_file_chooser a file chooser. a spec...
...butes for fonts. role_chrome_window frame role. a top level window with a title bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. role_html_container a document container for html, whose children represent the document content. role_icon a small fixed size picture, typically used to decorate components. role_label presents an icon or short string in an interface. role_layered_pane a layered pane. a specialized pane that allows its children to be drawn in layers, providing a form of stacking order. this is usually the pane that holds the menu bar as well as the pane that contains most of the visual components i...

History Service Design
nvolves storing informations on all of the user's visits, including visit time, type of visit and meta data. old history system was instead only storing first and last visit date, and a generic visits counter, creating some problem due to the impossibility to represent real history flow in a timeframe. history views must be organized and as concise as possible. each visit is associated with a favicon, to allow for better recognizability and groupable by common timeframes or domains. history views should allow to quickly find a page in a certain timeframe remembering only small details about it. the system should be customizable enough to allow creation of custom, calendar and graphical views based on queries executed through a common api upon underlying data. the querying system allows to ex...
...used in other dependant services and in autocomplete. another step to improve performance is mainly dedicated to not locking ui. since places is actually not thread-safe and doing most of the work in the main-thread, adding visits (the most common action usually executed on user interaction) could end up locking the ui till the database i/o to save data is complete. for this reason visits and favicons are added lazily on a timer. in future this will probably change in favour of storage asynchronous statements, so that the inserts will be queued-up by mozstorage itself in a separate thread. sql queries are built with performance in mind, and constantly tested against large databases. database indexes are quite important, and a good query can make the difference between minutes or seconds. man...
...ype (also known as transition type) that represents how we have come to that page (typed, click, redirect, bookmark, etc.). an additional property of a visit is the visit we have come from, this is used to track visit chains in global history, so for example if clicking a link causes a redirect the from visit will allow to follow up the chain of visits. at the moment this is used when catching favicons or bookmarks for redirected pages. querying for data querying data is a basic feature for places. thanks to the underlying database, history size has increased far more than 10 times from the previous mork based implementation, thus the need for a simple and efficient way to extract slices of data. a places query is made of of a query object (nsinavhistoryquery) and a query options object (ns...

Places Developer Guide
this document is for extension and application developers who want to use the bookmarks and history apis in firefox 3. it provides code samples for many common use-cases, such as crud operations, searching, and observing. overview places is the umbrella term for a set of apis for managing browsing history and uri metadata first introduced in firefox 3. it encompasses history, bookmarks, tags, favicons, and annotations. there are two models of identity in the system: uris, and unique integer identifiers for items in the bookmark system. some of the apis are uri-centric, some use item ids. the api signature and context usually make clear which is required. bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] ...
...t = historyservice.executequery(query, options); // iterate over the results result.root.containeropen = true; var count = result.root.childcount; for (var i = 0; i < count; i++) { var node = result.root.getchild(i); // do something with the node properties... 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). the problem is that it is not yet implemented -- see bug 320831. so the only solution for now seems...
... 0, annotations.expire_with_history); note the syntactic difference between the uri and bookmark annotation apis: uri annotation apis use "page" in method names whereas bookmark annotation apis use "item" in method names. saved searches new in firefox 3 is the ability to save searches of bookmarks or history. these saved searches appear as folders in your bookmarks, with a special icon to signify their difference from normal folders. the contents of these folders are updated when expanded, executing the search against the current history and bookmarks collections. saved searches can be formulated as uris, and added to the bookmarks collection as a normal bookmark. formulation of search uris is documented here. // formulate a uri to query for the 10 most visited uris in the brow...

Using the Places annotation service
allows you to link directly to data stored in the annotation service. you can get an annotation uri for a given uri/name pair by calling: getannotationuri(auri, aname); in order for the annotation protocol to work, the annotation in question must have been declared with a mime type. annotations with no mime type will not work. 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. it is important that you use these functions and not make up ...
... lifetime of annotations annotation expiration can be explicitly stated when the annotation is created. if no expiration is specified, the annotation is expired when the number of visits to the url is set to zero. valid values for expiration are: expire_with_history : default. ...
... lifetime of annotations annotation expiration can be explicitly stated when the annotation is created. if no expiration is specified, the annotation is expired when the number of visits to the url is set to zero. valid values for expiration are: expire_with_history : default. annotations live as long as the uri is in history (eg: has >0 visits). ...

Introduction to XPCOM for the DOM
now, the "this" member of an object is a pointer to that object. you can thus simply cast "this" statically to the desired interface. you should however be absolutely sure of what you are doing before coding such a cast. it can lead to troubles with refcounting. ...
...however be absolutely sure of what you are doing before coding such a cast. it can lead to troubles with refcounting. 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. however there is no such getter. 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 use of xpcom and nscomptr's described until now covers about 80% of what you need to know to read the code, and even write some.
...t looking at the class definitions, we can see that nsgenerichtmlelement and nsgenerichtmlcontainerelement don't implement any interface directly. however nsgenericelement does: class nsgenericelement : public nsihtmlcontent this of course means that nsgenericelement implements the nsihtmlcontent interface. 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. this is consistent with the rules we have defined earlier in this paragraph. see also the xpidl reference mapping dom objects to their c class modularization te...

amIWebInstaller
methods installaddonsfromwebpage() installs an array of add-ons at the request of a webpage. boolean installaddonsfromwebpage( ...
...ds installaddonsfromwebpage() installs an array of add-ons at the request of a webpage. 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. awindow the window installing the add-ons. areferer the uri for the web page installing the add-ons. auris the uris of add-ons to be installed. ahashes the hashes for the add-ons to be installed. anames the names...
...ptional in pruint32 ainstallcount optional ); parameters amimetype the mimetype for the add-ons. awindow the window installing the add-ons. areferer the uri for the web page installing the add-ons. auris the uris of add-ons to be installed. ahashes the hashes for the add-ons to be installed. anames the names for the add-ons to be installed. aicons the icons for the add-ons to be installed. acallback optional an optional callback to notify about installation success and failure. ainstallcount optional an optional argument including the number of add-ons to install. return value true if the installation was successfully started. isinstallenabled() checks if installation is enabled for a web page. boolean isinstallenable...

nsIAccessibleRole
hat drops down a grid. it is used for xul:colorpicker. role_whitespace 59 represents blank space between other objects. role_pagetablist 60 represents a container of page tab controls. is it used for xul:tabs, dhtml: role="tabs". also refer to role_pagetab. role_clock 61 represents a control that displays time. role_splitbutton 62 represents a button on a toolbar that has a drop-down list icon directly adjacent to the button. role_ipaddress 63 represents an edit control designed for an internet protocol (ip) address. the edit control is divided into sections for the different parts of the ip address. role_accel_label 64 represents a label control that has an accelerator. role_arrow 65 represents an arrow in one of the four cardinal directions. role_canvas 66 represents a contro...
...ardinal directions. role_canvas 66 represents a control that can be drawn into and is used to trap events. it is used for html:canvas. role_check_menu_item 67 represents a menu item with a check box. role_color_chooser 68 represents a specialized dialog that lets the user choose a color. role_date_editor 69 represents control whose purpose is to allow a user to edit a date. role_desktop_icon 70 an iconified internal frame in an role_desktop_pane. also refer to role_internal_frame. role_desktop_frame 71 a desktop pane. a pane that supports internal frames and iconified versions of those internal frames. role_directory_pane 72 a directory pane. a pane that allows the user to navigate through and select the contents of a directory. may be used by a file chooser. also refer to role_f...
...role_chrome_window 75 frame role. a top level window with a title bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane 76 a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. also refer to role_root_pane. role_html_container 77 a document container for html, whose children represent the document content. role_icon 78 a small fixed size picture, typically used to decorate components. role_label 79 presents an icon or short string in an interface. role_layered_pane 80 a layered pane. a specialized pane that allows its children to be drawn in layers, providing a form of stacking order. this is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a win...

nsIIOService
esource. in that case the principal of the stylesheet which contains the import command is the triggeringprincipal, and the principal of the document whose rendering is affected is the loadingprincipal. asecurityflags the securityflags of the channel. any of the securityflags defined in nsiloadinfo. acontentpolicytype the contentpolicytype of the channel. any of the content types defined in nsicontentpolicybase.idl. return value returns an nsichannel based on aspec and abaseuri. newchannelfromuri() obsolete since gecko 48 creates a channel for a given uri. nsichannel newchannelfromuri( in nsiuri auri ); parameters auri an nsiuri from which to make a channel. return value an nsichannel for the uri. newchannelfromuri2() creates a channel for a given uri. nsichannel newch...
... and the principal of the document whose rendering is affected is the loadingprincipal. asecurityflags the securityflags of the channel. any of the securityflags defined in nsiloadinfo.idl acontentpolicytype the contentpolicytype of the channel. any of the content types defined in nsicontentpolicy.idl return value an nsichannel for the uri. newchannelfromuriwithloadinfo() creates a channel for a given uri. equivalent to newchannelfromuri2(auri, aloadingnode, ...) nsichannel newchannelfromuriwithloadinfo( in nsiuri auri, in nsiloadinfo aloadinfo ); parameters auri an nsiuri from which to make a channel. aloadinfo a load info object. return value a...
...esource. in that case the principal of the stylesheet which contains the import command is the triggeringprincipal, and the principal of the document whose rendering is affected is the loadingprincipal. asecurityflags the securityflags of the channel. any of the securityflags defined in nsiloadinfo. acontentpolicytype the contentpolicytype of the channel. any of the content types defined in nsicontentpolicy. return value an nsichannel for the uri. newfileuri() this method constructs a new uri from a nsifile. nsiuri newfileuri( in nsifile afile ); parameters afile the nsifile whose uri is desired. return value an nsiuri corresponding to the file. newuri() this method constructs a new uri by determining the scheme of the uri spec, and then delegating the construction of th...

nsISHEntry
shells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation); native code only! 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! boolean hasdetachededitor(); violates the xpcom interface guidelines boolean hasdynamicallyaddedchild(); boolean isdynamicallyadded(); void seteditordata(in nsdocshelleditordataptr adata); violates the xpcom interfa...
...e); void setuniquedocidentifier(); void seturi(in nsiuri auri); void setviewerbounds(in nsintrect bounds); native code only! void syncpresentationstate(); attributes attribute type description cachekey nsisupports set and get the cache key for the entry. contenttype acstring indicates the content-type of the document that this is a session history entry for. contentviewer nsicontentviewer content viewer, for fast restoration of presentation. docidentifier unsigned long long an integer that should be the same for two entries attached to the same docshell if and only if the two entries are entries for the same document. in practice, two entries a and b will have the same docidentifier if we arrived at b by clicking an anchor link in a or if b was created by a's calling ...
...o the editor data assosicated with this shistory entry. this forgets its pointer, so free it when you're done. nsdocshelleditordataptr forgeteditordata(); parameters none. return value getanycontentviewer() return any content viewer present in or below this node in the nsshentry tree. this will differ from contentviewer in the case where a child nsshentry has the content viewer for this tree. 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. void getvie...

nsIUpdateItem
t changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is obsolete; instead of using the extension manager, you should use the addon manager. 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. read only. id astring the guid of the item. read only. installlocationkey astring the name of the install location where this item is ins...
...sion + type_theme + type_locale type_any type_app + type_addon 0xff type_plugin 0x10 methods init() initializes the object. 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. version the item's version. installlocationkey the name of the install location at which the item is installed. minappversion the minimum application version with which the item is compatible. maxappversion the maximum application version with which the item...
... item's version. installlocationkey the name of the install location at which the item is installed. minappversion the minimum application version with which the item is compatible. maxappversion the maximum application version with which the item is compatible. name the item's name downloadurl the url from which the item is to be downloaded. xpihash the string hash for the xpi file. iconurl the url of the icon that can be shown for the item. updateurl the url of the update rdf for the item. updatekey the public key to use to verify updates for the item. type the type of item; see item type constants. targetappid the application id of the target application. ...

nsIWebappsSupport
toolkit/components/webapps/nsiwebappssupport.idlscriptable please add a summary to this article. ...
... toolkit/components/webapps/nsiwebappssupport.idlscriptable please add a summary to this article. ...
...isupports 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. uri the uri of the web application. iconuri the uri of icon of the web application. icondata a base64 encoded representation of the application's icon. isapplicationinstalled() checks is a web application is already installed. boolean isapplicationinstalled( in wstring uri ); parameters uri the uri of ...

nsIXULTemplateBuilder
datasource nsisupports the opaque datasource o...
... datasource nsisupports the opaque datasource object that is used for the template. this object is create...
...r( in nsidomnode arule, in nsixultemplaterulefilter afilter ); parameters arule the rule to apply the filter to. afilter the filter to add. native code only!init called to initialize a xul content builder on a particular root element. this element presumably has a datasources attribute, which the builder will parse to set up the template builder's data sources. [noscript] void init( in nsicontent aelement ); parameters aelement the root element from which to derive the data. native code only!createcontents invoked lazily by a xul element that needs its child content built. [noscript] void createcontents( in nsicontent aelement, in boolean aforcecreation ); parameters aelement the element whose contents need to be built. aforcecreation if true, the contents of the element are g...

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

Flash Activation: Browser Comparison - Plugins
other features related to flash domain blocking plugin power saver peripheral content pause each of the browser vendors has a roadmap about the future of flash and changes to the user experience. the firefox flash roadmap includes links to roadmaps and posts from other vendors. ui comparison mozilla firefox in-page ui is displayed when the site attempts to use flash. ...
... each of the browser vendors has a roadmap about the future of flash and changes to the user experience. the firefox flash roadmap includes links to roadmaps and posts from other vendors. ui comparison mozilla firefox in-page ui is displayed when the site attempts to use flash. an icon also appears on the left side of the location bar. ...
...en 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. if a flash element is not visible to the user, the user will not get a visible prompt. 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. the user can click the flash object to show activation options: users have the choice to allow flash just for the current session, or to remember th...

UI Tour - Firefox Developer Tools
groups; typically viewed by right-clicking on the item. for files, the following context menu options are available: copy source uri copies the full identifier of the file to the clipboard. ignore source causes the debugger to skip the file when "stepping into" functions; this can be helpful for avoiding stepping into libraries used by your code. when a file is ignored, it has a small eye icon next to it in place of its regular icon. download file opens a file dialog so you can save the file locally. for folders and groups, the following context menu options are available: collapse all collapses all subfolders of the item. expand all expands all subfolders of the item. set directory root changes the source list view so that only that item and its children are visible. the nam...
...anges the source list view so that only that item and its children are visible. the name of the selected directory is shown at the top of the source list pane; clicking this name reverts the pane to showing all source items. ignore (since firefox 76) ignore files in this directory causes all files within the selected directory to be skipped by the debugger. all child files acquired the eye icon, and the folder menu option changes to unignore files in this directory. ignore files outside this directory causes all files other than those within the selected directory to be skipped by the debugger. all such files acquire the eye icon, and the menu option for that folder changes to unignore files outside this directory. outline view the outline view shows a tree for navigating the...
...blerow variable to the console and the conditional breakpoint at line 100 breaks if the contents of the todolist is undefined. toolbar at the top of the right-hand pane, there's a toolbar: the toolbar consists of: four buttons to control the debugger's movement through the script: play/pause (f8): pauses or resumes execution of the script you're debugging. 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. step over (f10): steps to the next line of javascript code. step in (f11): steps into the function call on the current line of javascript code. step out (shift-f11): runs the script until the current function exits. a button that deactivates all breakpoints. a set...

Index - Firefox Developer Tools
d in settings > inspector > default color unit: 34 index tools found 158 pages: 35 json viewer firefox includes a json viewer. if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting. arrays and objects are shown collapsed, and you can expand them using the "+" icons. 36 measure a portion of the page design, devtools, developer, firefox, layout, measure, measuring, measuring tool, tools using the measuring tool you can measure a specific area of a web page. 37 memory devtools, firefox, mozilla, tools the memory tool lets you take a snapshot of the current tab's memory heap. it then provides a number of views of the h...
...rity responsive design is the practice of designing a website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops. 102 rulers devtools, firefox, rulers, tools you can overlay horizontal and vertical rulers on a web page: 103 settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab. 104 shader editor the shader editor enables you to see and edit the vertex and fragment shaders used by webgl. 105 storage inspector cookies, dev tools, firefox, guide, indexeddb, local storage, session storage, storage, tools ...
...uring debugging sessions when you are forced to step through its stack frames in order to reach your own code. however, you can tell the debugger to ignore the details of selected sources. 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. the debugger formats the source and displays it as a new file with a name like: "{ } [original-name]". 127 search to search for a particular file, press control + p (or command + p on a mac) and type the search term. the source pane will display a list of all matching files as you type. you can use the up and down arrows to move through ...

Animation inspector example: CSS transitions - Firefox Developer Tools
firefox-logo-animation example animation using css transitions. ...
...ple animation using css transitions. ...
...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#selected { 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"...

Settings - Firefox Developer Tools
(the elipsis) on the right of the tab. the menu includes settings to control the location of the developer tools. you can choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen. these settings are particularly useful if you have a widescreen monitor. you can also choose to open the tools in a separate window. show split console adds a section at the bottom of the tools showing the console. it makes visible the command line and one or two lines of the console output. ...
...he menu: or press f1 to toggle between the active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox. new tools are often included in firefox but not enabled by default. 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. note that in firefox 52 we removed the checkbox to toggle the "select element" button. the "select element" button is now always shown. themes...
...le editor to display the original, preprocessor, sources rather than the generated css. learn more about style editor support for css source maps. with this setting checked, the page inspector rules view will also provide links to the original sources. autocomplete css enable the style editor to offer autocomplete suggestions. screenshot behavior screenshot to clipboard when you click the icon for the screenshot tool, copy the screenshot image to the clipboard (the image will still be saved to your downloads directory). new in firefox 53. play camera shutter sound when you click the icon for the screenshot tool, play a shutter sound. new in firefox 53. editor preferences preferences for the codemirror source editor, which is included in firefox and used by several developer tools,...

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

MediaStreamTrack: ended event - Web APIs
is can happen, including: there is no more data left to send. the user revoked the permissions needed for the data to be sent. the hardware generating the source data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended event. ...
...generating the source data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended event. 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. ...
...or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended event. 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. candidate recomm...

Notification.Notification() - Web APIs
sitepoint iso 2 letter language codes page for a simple reference. badge: a usvstring containing the url of the image used to represent the notification when there isn't enough space to display the notification itself. body: a domstring representing the body text of the notification, which is displayed below the title. tag: a domstring representing an identifying tag for the notification. icon: a usvstring containing the url of an icon to be displayed in the notification. image: a usvstring containing the url of an image to be displayed in the notification. data: arbitrary data that you want associated with the notification. this can be of any data type. vibrate: a vibration pattern for the device's vibration hardware to emit with the notification. renotify: a boolean specifyin...
...selected by the user. silent: a boolean specifying whether the notification is silent (no sounds or vibrations issued), regardless of the device settings. the default is false, which means it won't be silent. example in our emogotchi demo (see source code), we run a spawnnotification() function when we want to trigger a notification. ...
... means it won't be silent. example in our emogotchi demo (see source code), we run a spawnnotification() function when we want to trigger a 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. living standard initial definition. ...

PasswordCredential - Web APIs
tor passwordcredential()secure context creates a new passwordcredential object. properties inherits properties from its ancestor, credential. passwordcredential.additionaldata secure context one of a formdata instance, a urlsearchparams instance, or null. the data in the objects will be added to the request body and sent to the remote endpoint with the credentials. passwordcredential.iconurl read only secure context a usvstring containing a url pointing to an image for an icon. this image is intended for display in a credential chooser. the url must be accessible without authentication. passwordcredential.idname secure context a usvstring containing the name that will be used for the id field when submitting the current object to a remote endpoint via fetch. this property defa...
...secure context a usvstring representing the name that will be used for the password field when submitting the current object to a remote endpoint via fetch. this property defaults to 'password', but may be overridden to match whatever the backend service expects. event handlers none. methods none. examples var cred = new passwordcredential({ id: id, password: password, name: name, iconurl: iconurl }); navigator.credentials.store(cred) .then(function() { // do something else. }); specifications specification status comment credential management level 1 working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out...
... ? webview android full support 51chrome android full support 51firefox android ? opera android ? safari ios ? samsung internet android full support 5.0iconurl experimentalchrome full support 52edge full support ≤79firefox ? ie ? opera full support yessafari ? webview android full support ...

PublicKeyCredentialCreationOptions.rp - Web APIs
id a domstring uniquely identifying a relying party. the default value of this property is the domain of the current document (e.g. ...
... id a domstring uniquely identifying a relying party. the default value of this property is the domain of the current document (e.g. ...
...n of the current document (e.g. "login.example.com"). it may be overridden with a suffix of the current domain (e.g. "example.com"). name a domstring giving a human-readable name for the relying party. this property is intended for display (e.g. "example corp"). ...

PushEvent.data - Web APIs
ys it on all of the service workers' clients. ...
... working draft initial definition. browser compatibility the ...
... working draft initial definition. browser compatibility the compat...

PushEvent - Web APIs
ys it on all of the service worker's clients. ...
... working draft initial definition. browser compatibility ...
... working draft initial definition. browser compatibility the c...

ServiceWorkerRegistration.showNotification() - Web APIs
at allows configuring the notification. it can have the following properties: actions: an array of actions to display in the notification. the members of the array should be an object literal. it may contain the following values: action: a domstring identifying a user action to be displayed on the notification. title: a domstring containing action text to be shown to the user. icon: a usvstring containing the url of an icon to display with the action. appropriate responses are built using event.action within the notificationclick event. badge: a usvstring containing the url of an image to represent the notification when there is not enough space to display the notification itself such as for example, the android notification bar. on android devices, the badge shoul...
...ndroid devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked. body: a string representing an extra content to display within the notification. data: arbitrary data that you want to be associated with the notification. this can be of any data type. 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. image: a usvstring containing the url of an image to be displayed in the notification. lang: specify the lang used within the notification. this string must be a valid bcp 47 language tag. renotify: a boolean that indicates whether to suppress vibrations and audible alerts when reusing a tag value. if opt...
...00ms. return value a promise that resolves to undefined. examples navigator.serviceworker.register('sw.js'); function shownotification() { notification.requestpermission(function(result) { if (result === 'granted') { navigator.serviceworker.ready.then(function(registration) { registration.shownotification('vibration sample', { body: 'buzz! 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. you can also retrieve details of the notifications that have been fired from the current s...

font - CSS: Cascading Style Sheets
properties this property is a shorthand for the following css properties: font-family font-size font-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several font-related properties, then: it must include values for: <font-size> <font-family> it may optionally include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line-height> font-style, font-variant and font-weight must precede font-size fo...
...e font-variant css property. <'font-weight'> see the font-weight css property. <'font-stretch'> see the font-stretch css property. <'font-size'> see the font-size css property. <'line-height'> see the line-height css property. <'font-family'> see the font-family css property. system font values caption the system font used for captioned controls (e.g., buttons, drop-downs, etc.). icon the system font used to label icons. menu the system font used in menus (e.g., dropdown menus and menu lists). message-box the system font used in dialog boxes. small-caption the system font used for labeling small controls. status-bar the system font used in window status bars. prefixed system font keywords browsers often implement several more, prefixed, keywords: gecko implements -m...
... set the font family to sans-serif */ p { font: 12px/14px sans-serif } /* set the font size to 80% of the parent element or default value (if no parent element present). set the font family to s...

<input type="search"> - HTML: Hypertext Markup Language
mon name given to search inputs, although it's not mandatory. when submitted, the data name/value pair sent to the server will be q=searchterm. you must remember to set a name for your input, otherwise nothing will be submitted. differences between search and text types the main basic differences come in the way browsers handle them. 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. the following screenshot comes from chrome: in addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain. this helps users who tend to do searches on the same or ...
... this could, however, cause confusion for screenreader users, since they will not have any verbal indication of what the search input is. one way around this that won't impact on your visual design is to use wai-aria features: a role attribute of va...
... to inputs containing valid values, and a cross next to inputs containing invalid values. 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. making input required you can use the required attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..." required> <button>search</bu...

Template literals (Template strings) - JavaScript
ting a template is the easiest (and perhaps more readable) way to have configurable strings. within a backticked template, it is simple to allow inner backticks simply by using them inside a placeholder ${ } within the template. for instance, if condition a is true, then return this templated literal. ...
...the easiest (and perhaps more readable) way to have configurable strings. within a backticked template, it is simple to allow inner backticks simply by using them inside a placeholder ${ } within the template. for instance, if condition a is true, then return this templated literal. ...
... by using them inside a placeholder ${ } within the template. for instance, if condition a is true, then return this templated literal. in es5: let classes = 'header'; classes += (islargescreen() ? '' : item.iscollapsed ? ' icon-expander' : ' icon-collapser'); in es2015 with template literals and without nesting: const classes = `header ${ islargescreen() ? '' : (item.iscollapsed ? 'icon-expander' : 'icon-collapser') }`; in es2015 with nested template literals: const classes = `header ${ islargescreen() ? '' : `icon-${item.iscollapsed ? 'expander' : 'collapser'}` }`; tagged templates a more advanced form of template literals are tagged templates. tags allow you to parse template literals with a function. the first argument of a tag function contains an array of string valu...

Web app manifests
vance and can work offline, as well as use regular web apis. the web app manifest provides information about a web application in a json text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). ...
..., author, icon(s), version, description, and list of all the necessary resources (among other things). can pwa manifest contain comments? it is a json-formatted file, with one exception: it is allowed to contain "//"-style comments. members web manifests can contain the following keys. 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", ...
... manifest requires credentials to fetch - the crossorigin attribute must be set to use-credentials, even if the manifest file is in the same origin as the current page. splash screens in chrome 47 and later, a splash screen is displayed for sites launched from a homescreen. 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. specifications specification status comment web app manifest working draft initial definition. ...

Introduction to progressive web apps - Progressive web apps (PWAs)
more discoverable than native apps; it's a lot easier and faster to visit a website than to install an application, and you can also share web apps by simply sending a link. on the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. 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. pwas give us the ability to create web apps that can enjoy these same advantages. it's not a brand new concept—such ideas have been revisited many times on the web platform with various approaches in the past. progressive enhancement and responsive design already allow us to build mobile friendly websites. p...
...rs, along with saving precious bandwidth and time. pwas have near-instantaneous loading (from the second visit). the ability to update only the content that has changed when an app update is available. in contrast, with a native app, even the slightest modification can force the user to download the entire application again. 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. re-engaging with users through the use of system notifications and push messages, leading to more engaged users and better conversion rates. success stories there are many success stories of companies trying the pwa route, opting for an enhanced website experience rather than a native app, and s...
...have metadata usable by browsers to give them special capabilities. some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like open graph, which provides a format for specifying similar metadata in the html <head> block using <meta> tags. 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. this is for use in contexts such as app listings and device home screens. 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. modern web apps can hav...

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
ll files are listed in one array. ...
...a-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' ]; next, the links to images to be loaded along with the ...
...whenever it is added. updates there is still one point to cover: how do you upgrade a service worker when a new version of the app containing new assets is available? 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'); // ... self.addeventlistener('install', (e) => { e.waituntil( caches.open('js13kpwa-v2').then((cache) => { return cache.addall(contenttocache); }) ); }); a new service worker is installed in the background, and the previous one (v1) works correctly up until there are no pages using it — the new service worker is then activated and takes over management of th...

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...
...the toolbar to contain any actual content, the items parameter must also be supplied, and must contain at least object. ...

Add a Context Menu Item - Archive of obsolete content
e user clicks the item the content script's click event fires, and the content script retrieves the selected text and sends a message to the add-on the add-on's message event fires, and the add-on code's handler function is passed the selected text, which it logs more options adding an image you can add an image to a context menu item with the image option. this is a url pointing to a 16x16 icon that's displayed at the left side of the context menu item. typically you'd store the image in your add-on's "data" directory, and construct the url using self.data.url(): 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...
... from firefox 35 you can specify an access key using the accesskey option. this must be a single-character string. pressing the key selects the option when the context menu is open: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ ...

Creating Reusable Modules - Archive of obsolete content
= fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string. note that you usually won't // need to work with the string paths. var path = fp.file.path; // work with returned nsilocalfile... } 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. let's factor the file picker and hashing code into separate modules. creating separate modules filepicker.js first create a new file in "lib" called "filepicker.js". copy the file picker code into t...
...a to a hex string. 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. module developers can publish sdk modules to npm, and add-on developers can install them from npm and build them into their add-ons. to learn how to use third...

List Open Tabs - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm. to list the open tabs, you can iterate over the tabs object itself. 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: . run the add-on, load a couple of tabs and click the button. you'll see output in the command line console that looks something like this: info: http...
...nfo: http://www.mozilla.org/about/ info: http://www.bbc.co.uk/ you don't get direct access to any content hosted in the tab. to access tab content, you need to attach a script to the tab using tab.attach(). this add-on attaches a script to all open tabs. 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. to learn more about running scripts in t...

Unit Testing - Archive of obsolete content
require("resource://gre/modules/services.jsm"); exports.atob = a => atob(a); exports.btoa = b => btoa(b); this code exports two functions, which just call the platform's btoa() and atob() functions. 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: . now "index.js" imports the base64 module and calls its two exported funct...
...ting specification. the first two functions call atob() and btoa() and use assert.ok() to check that the output is as expected. the second function tests the module's error-handling code by passing an empty string into atob() and using assert.throws() to check that the expected exception is raised. 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. you should see something like this: console.info: jpm-utest: executing './test/test-base64.test atob' console.info: jpm-utest: pass: atob works console.info: jpm-utest: executing './test/test-base64.test btoa' console.inf...

File I/O - Archive of obsolete content
other actions such as opening the file for reading or writing. reading a file // |file| is nsifile var data = ""; var fstream = components.classes["@mozilla.org/network/file-input-stream;1"]. createinstance(components.interfaces.nsifileinputstream); var cstream = components.classes["@mozilla.org/intl/converter-input-stream;1"]. ...
... truncate // in a c file operation, we have no need to set file mode with or operation, // directly using "r" or "w" usually. // if you are sure there will never ever be any non-ascii text in data you can // also call fostream.write(data, data.length) directly var converter = components.classes["@mozilla.org/intl/converter-output-stream;1"]. 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. for more information refer directly to nsprpub/pr/include/prio.h writing a binary file for example, here we can write png data to a file. // pngbinary already...

Extension Etiquette - Archive of obsolete content
ould be used for single extensions needing multiple menu items, and a tools menu item should not be created for options and preferences (for options and preferences, see the add-on manager). if possible, create a menu item in the menu where it is most applicable; for instance, a bookmark sharing extension should be called from the bookmarks menu. to maintain the default theme, avoid the use of an icon next to the menu items. other ui elements in general, toolbar items are very useful to end users because they can be removed or added to various toolbars as necessary. status bar items should only be added for extensions that need constant monitoring, such as ad blocking, page ranking, or cookie management. likewise, use context menu items sparingly — only for tasks that are done frequently o...
...ing a new xul about box is usually unnecessary. you can decrease download size by omitting a customized about box. make one only if you have a special feature that needs to be included — for example, a custom updater. 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. they allow for easy identification among other extensions in the extensions manager. coding practices namespace conflicts there are many namespaces which extensions often must sha...

Listening to events in Firefox extensions - Archive of obsolete content
this lets you receive events related to all tabs. more information about listening to events from all tabs is available. how events are used by firefox the firefox frontend already listens for a number of these progress events from web pages. most of this goes on in browser.js. 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. pageshoweventhandlers the pageshoweventhandlers() function is called by the pageshow event and is used to populate the character set menu and update the ui elements associated with any detected feeds or opensearch plugins for the website. xulbrowserwindow xulbrowserwindow is an nsiwebprogresslistener used to get progress events for the currently visib...
...update the ui elements associated with any detected feeds or opensearch plugins for the website. xulbrowserwindow xulbrowserwindow is an nsiwebprogresslistener used to get progress events for the currently visible browser. 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. it i...

Adding menus and submenus - Archive of obsolete content
an be used to accomplish this. if you have nothing to show on a menu, you should follow the standard used in firefox: show a single disabled item with an "(empty)" label. if filling your menu takes a noticeable amount of time, you should not make firefox (and your users) wait for it to fill up before displaying anything. it's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents. we'll look into some asynchronous techniques further ahead in the tutorial. adding elements to existing menus just as explained in the previous sections, the best place to overlay your extension menu is inside the tools menu. that is, unless there's a place inside the menu structure where your ...
...ed as a radio menu where you pick one of the 3 available choices. the first one is checked by default. the oncommand attribute is set on the menupopup to avoid code duplication, since now the 3 items call the same function. another example of a menu like this is the view > sidebars menu. only one sidebar is visible at any given moment, and you can pick from several. 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. menus on mac os x as mentioned earlier, menus are very different on mac os x. this is because menus on mac are located in a single menu bar which is controlled by the operating system, as opposed to menu...

Intercepting Page Loads - Archive of obsolete content
ser windows. if you are building a web filtering extension, you should keep in mind that xul windows such as the dom inspector window and the add-ons manager window allow (limited) web navigation. other extensions might add xul windows that allow navigation as well, so in those cases it's best to use a global solution like this one. 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. it actually allows for cleaner-looking code than most of the previously seen solutions, because you get the content uri directly as an argument, a...
...you need to be efficient, and a good way to do this is to filter out unneeded cases right from the start. shouldload is called for every load operation firefox tries to do, including images, scripts and xul documents. a good filter would look like this: shouldload : function(acontenttype, acontentlocation, arequestorigin, acontext, amimetypeguess, aextra) { let result = components.interfaces.nsicontentpolicy.accept; // we should check for type_subdocument as well if we want frames. if ((components.interfaces.nsicontentpolicy.type_document == acontenttype) && some_regular_expression.test(acontentlocation.spec)) { // do stuff here, possibly changing result. } return result; } the content policy is applied very early in the process, even before the request is made, allowi...

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...
...ordinary popups are...

Session store API - Archive of obsolete content
this event is sent just before a tab is r...
... this event is sent just before a tab is restored. an event of type sstabrestored fires each time a tab has finished restoring. it's worth noting that this event is sent even if tab loading at startup is deferred until the user selects the tab. ...

Search Extension Tutorial (Draft) - Archive of obsolete content
e tutorial exists for running code at uninstall in non-restartless extensions. an example bootstrap.js file illustrating the simple method follows: const { classes: cc, interfaces: ci, utils: cu, results: cr } = components; // import the services module. 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. var firstrun = false; // decide whether to select the search engine. var selectsearch = false; function startup(data, reason) { firstrun ...
... firstrun = reason == addon_install; // re-select the search engine if this is the first run // or we're being re-enabled. selectsearch = firstrun || reason == addon_enable; // only add the engine if it doesn't already exist. ...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
les/gloda/log4moz.js"); var log = log4moz.getconfiguredlogger("mcd"); // enable alerts. var alerts = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); // displayerror() is broken. let's override it. 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. binary distributions should now include support for autoconfig (pref extension!) but unfortunately not for ldap calls :-( (cf. moz_ldap_xpcom=1). it is not vital in firefox as it is for us in thunderbird (need to get the cn and email address to set email account, which are not avail...
... | grep ^d drwxr-xr-x 3 root root 4096 juil. 2 10:45 chrome drwxr-xr-x 2 root root 12288 juil. 2 10:45 components drwxr-xr-x 6 root root 4096 juil. 1 10:24 defaults drwxr-xr-x 2 root root 4096 juil. 2 10:45 dictionaries drwxr-xr-x 3 root root 4096 juil. 1 10:24 extensions drwxr-xr-x 2 root root 4096 juil. 2 10:27 greprefs drwxr-xr-x 2 root root 4096 juil. 1 10:18 icons drwxr-xr-x 3 root root 4096 juil. 2 10:45 isp drwxr-xr-x 4 root root 4096 juil. 2 10:45 modules drwxr-xr-x 2 root root 4096 juil. 2 10:45 outtestdata drwxr-xr-x 6 root root 4096 juil. 2 10:45 res [root@b008-02 commsrc]# ls -l /usr/local/thunderbirddebug/bin/ total 4 lrwxrwxrwx 1 root root 64 juil. 2 10:45 thunderbird -> /usr/local/thunderbirddebuglibs/thunderbird-3.0b3pre/th...

Conclusion - Archive of obsolete content
. if the version you created in this tutorial doesn't work, compare it to this working version to help figure out the problem. future directions for development of the tutorial and/or coursework: in addition to build status, tinderbox also tells you if the cvs tree is open or closed for check-ins. ...
...how could it be added to the extension if necessary? tinderbox actually keeps track of more than one codebase. in particular, it tracks both the main mozilla codebase (the trunk) and a stable branch. ...

Enabling the behavior - updating the status bar panel - Archive of obsolete content
in order for loadtinderboxstatus() to have any effect we need to define a matching updatetinderboxstatus() function. 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. the color r...
...gb code ee0000) means a tinderbox client failed to build mozilla. the color orange ("ffaaoo") means a client successfully built mozilla, but the build failed tests. the color green ("11dd11") means the client successfully built and tested mozilla. 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. because our conditional looks for worse states (bustage, test failures) first, it will display those states before displaying the success state. « previousnext » ...

Making it into a static overlay - Archive of obsolete content
its next line is the stylesheet reference we previously added to navigator.xul. after that is a xul overlay element. this element is the...
...undle overlays --> ... <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> ... « previousnext » ...

Basics - Archive of obsolete content
string console.log("hello world!"); arn()this method does stuff. error()this method does stuff. exception()this method does stuff. logfromcaller()this method does stuff. class notifications the notification box appears at the bottom right corner of the browser and displays important information to the user. the namespace for this class is jetpack.notificaitons. ...
...method does stuff. logfromcaller()this method does stuff. class notifications the notification box appears at the bottom right corner of the browser and displays important information to the user. the namespace for this class is jetpack.notificaitons. 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. the namespace for this class is jetpack.t...

Bundles - Archive of obsolete content
this folder is located in the application data folder of the user's home directory on windows, in the ~/.webapps directory on linux and under ~/library on os x. ...
... webapp bundle or use prism -webapp [path-to-webapp] structure a bundle can contain the following files. any other files in the .webapp file will be ignored. after the .webapp file is executed the first time, these files will be unzipped and "cached" to a local directory structure. / 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
will just have the editor tools moved around. the main content layout will not change. --dria the color of the internal and extenrnal links is now the same, is that intentional? --nickolay i didn't ever notice that they were different, honestly. i'll take a look. --dria ok, the difference on the cavendish theme is negligible (to the point where i never noticed). 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 you've got to be kidding me, the colors are clearly different (rgb(0,51,153) vs rgb(51,102,187)). --nickolay 09:19, 25 aug 2005 (pdt) (moving this to a new item) on the contrary, the list of categories current page belongs to, should be near the footer (see mdc:polici...
... overlap with headings, which is something we seldom want. see for example the venkman tutorials (although the clears are down the page) or mdc:frequently asked questions. i'm not saying this can't be worked around, just that it would be better if the skin coped with that fine. --nickolay 05:46, 25 aug 2005 (pdt) ok, i'll see what i can do. thanks for pointing it out. --dria external link icons missing on ie version of skin. --dria edit/preferences/diff pages end up being too wide at times. definitely need to fix for ie. --dria the edit section links are gone (they are only shown in normal skin if you set the appropriate preference). --nickolay do you know if there's a localsettings variable to have the edit-section links off by default? it appears that they're on by default right...

windowsShortcut - Archive of obsolete content
summary creates a windows shortcut to the installed software. 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. ashortcutpath a filespecobject representing the absolute path (not including filename) to where the shortcut is to be created. adescription string description for the shortcut to be used as the shortcut name with a .lnk extension (do not include .lnk in the string). awo...
...name) to where the shortcut is to be created. adescription string description for the shortcut to be used as the shortcut name with a .lnk extension (do not include .lnk in the string). aworkingpath a filespecobject representing the absolute path to the working dir for where atarget will is to be run from. aparams parameters that atarget requires. 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. returns an integer error code. for a list of possible values, see return codes. example see file.windowsshortcut in the script exa...

A XUL Bestiary - Archive of obsolete content
ned in mozilla/bin/chrome/navigator, the mail/news component is a package in mozilla/bin/chrome/mailnews/, and so on. each package directory typically has three subdirectories, content, skin, and locale, in which the xul, css, and localization information are defined, respectively: navigator/ content/ default/ navigator.xul ... skin/ default/ navigator.css nav-icon.gif ... locale/ us-en/ navigator.dtd the default directory underneath each of these main package subdirectories is assumed in the chrome url (i.e. chrome://help/content/help.xul does not include a default directory as part of the url, though that directory exists in the actual structure). when you create different chrome for a package, you can create a subdirectory underneath ...
...eath content whose contents are loaded instead of default. for example, if you want to create a different skin for the navigator package, you can create a subdirectory underneath navigator/skin/ whose contents will be loaded instead of default's. so the following structure obtains: navigator/ content/ default/ navigator.xul ... skin/ default/ navigator.css nav-icon.gif ... mynewskin/ newskin.css newgifs.gif ... locale/ us-en/ navigator.dtd to load chrome information stored in a new package directory like this, you can use the following chrome url, chrome://navigator/skin/mynewskin/newskin.css which in turn loads the graphics in that subdirectory as needed. skin the skin is the css and graphics that make...

toolbar.mode - Archive of obsolete content
text show only text. full show both. ...
... text show only text. full show both. ...

appendNotification - Archive of obsolete content
ppear on the notification. this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. keep in mind that this is all xul so using html elements for styling might still need additional css in order to work as you might expect. value - value used to identify the notification image - url of image to appear on the notification. if "" then an icon appropriate for the priority level is used. priority - notification priority; see priority levels. buttons - array of button descriptions to appear on the notification. eventcallback optional - a javascript function to call to notify you of interesting things that happen with the notification box. see notification box events. priority levels (defined as properties of notificationbox) : ...
...tionbutton2callback, type: "", // if a popup, then must be: "menu-button" or "menu". ...

Tooltips - Archive of obsolete content
large enough to fit the text inside it. this default tooltip is created automatically, so you don't normally need to use a tooltip element. however, it is possible to use another tooltip element that looks differently, or which supports other elements besides a single text label. the tooltip can be created using the tooltip element, the contents of which appear inside the tooltip. <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. a button is associated with the tooltip using the tooltip attribute. the value of the tooltip attribute should be set to the id of a tooltip element, in this case, 'iconic'. this will caus...
...s used inside it are not populated based on what the tooltip applies to, so you may need to set the content in a tooltip if you wish to use the same tooltip for several elements. this can be accomplished by using a popupshowing event listener and adjusting the tooltip as needed. the popupshowing event will be fired on the tooltip element just before the tooltip appears. 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. in this example, this property is examined to retrieve the label of the element that the mouse is over. this label is then set as the value of the last child of the tooltip. in the earlier example, the last child of the too...

contentViewerEdit - Archive of obsolete content
...
... ...

contentViewerFile - Archive of obsolete content
...
... ...

Writing Skinnable XUL and CSS - Archive of obsolete content
css that attempt to define colors, fonts, etc. for either the personal toolbar headers or for the menu buttons' borders. example 2: the messenger package has a css file that describes the appearance of the messenger button that appears on the taskbar used by all windows. the messenger css file should not attempt to describe the borders or the colors for this button. it should only describe the icon. because the button is used in the navigator window (through overlays), the fonts/colors used should not be described by messenger. this allows the button to blend in as much as possible regardless of where it is used. the importance of this rule cannot be overstated. derived skin files should not contain any rules for colors, fonts, or borders. exceptions to this rule must be approved in orde...
...ebar overlay explicitly if the sidebar ui is always going to be installed with navigator. if it is possible that the sidebar is a separate component that could be installed or uninstalled, then the overlaying should not occur in the xul file. it should instead take place through the chrome registry. examples of overlays that should take place using the chrome registry include the security padlock icon and any messenger ui in the navigator window. style="..." is prohibited in xul files without approval any usages of inline style are extremely dangerous, since they are overriding the included skin, and must be approved before their usage will be allowed. image chrome urls should never occur in xul. any chrome url that references an image in the skin is strictly forbidden in the xul. if you fin...

XUL Changes for Firefox 1.5 - Archive of obsolete content
e same api as the <listbox> and single items, created with the <richlistitem> element may be selected. see xul:richlistbox for more information. preferences system several elements have been added which may be used for creating preference windows. these windows are special types of dialogs which support several panels, each of which may be contained in the same file or a separate file. a set of icons will appear across the top of the dialog allowing the user to switch panels. along with the new preference elements and some additional attributes for existing elements, they make it easy to set preferences without having to use code. for more information, see preferences system. bfcache mozilla now caches the page's dom, so that navigating back and forward does not reload the page, making nav...
...> element selects the <radio> element in the group with the corresponding value. dialog: defaultbutton property the <dialog> binding now supports the defaultbutton property. setting this property changes the default button of the dialog. it can be set either to one of the buttons of the <dialog> binding (using their names); or to none - in which case no button is set to be the default. 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. this is used typically on gnome systems where possible values are: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select...

XML - Archive of obsolete content
e have created new languages out of xml. mathml and the chemical markup language (cml) are two of the better-known and more widely-used languages, but there are hundreds. information developers create languages particular to their applications, any time they need a very specific way to represent the structure of some data. 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. then they insist that their authors use the language to describe the thing it has been created for. those authors may be people or machines, but they must use the new language if the readers are to understand what sort of data it is they are reading. it's much simpler than it seems -- much simpler, in fact, than a lot of ...
...ng it has been created for. those authors may be people or machines, but they must use the new language if the readers are to understand what sort of data it is they are reading. it's much simpler than it seems -- much simpler, in fact, than a lot of xml primers and references would have you believe. in fact, let's create a new xml-based language right now called "memoml". 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. that's it. in our new language, there are only four words, bu...

listitem - Archive of obsolete content
istcell element of type and class appropriate to that of the listitem. more information is available in the xul tutorial. 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. this should be one of the characters that appears in the label attribute for the element. ...
...emoveattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element. these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme. listitem-iconic use this class to have an image appear on the listitem. specify the image using the image attribute. related elements listbox, listcell, listcol, listcols, listhead, listheader interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...

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...
... insertitemat( index, label, value ) return type: element this method creates a new item and inserts it at the specified position. you may optionally set a value. the new item element is returned. removeitemat( index ) return type: element removes the child item in the element at the specified index. the method returns the removed item. style classes menu-iconic use this class to have an image appear on the menu. specify the image using the image attribute. related elements menubar, menuitem, menulist, menupopup, menuseparator interfaces nsiaccessibleprovider, nsidomxulcontainerelement, nsidomxulcontaineritemelement, nsidomxulselectcontrolitemelement ...

Debugging a XULRunner Application - Archive of obsolete content
e) must be set. to log js errors to disk, set the environment variable xre_console_log to the path to the filename. i.e. export xre_console_log=/path/to/logfile or set xre_console_log=c:\path\to\logfile. to output messages to the javascript console there are two ways to output messages to the js console: components.utils.reporterror(str) will output str as an "error" (i.e. ...
...ilename. i.e. export xre_console_log=/path/to/logfile or set xre_console_log=c:\path\to\logfile. to output messages to the javascript console there are two ways to output messages to the js console: components.utils.reporterror(str) will output str as an "error" (i.e. 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. browser debugger as of gecko 44, it is no longer possible to start the devtools server from xul apps. se...

Building a Theme - Archive of obsolete content
some directories so the guide may be obsolete. setting up the development environment themes and extensions are packaged and distributed in zip files or bundles, with the xpi (pronounced “zippy”) file extension. 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. c:\themes\my_theme\ or ~/themes/my_theme/). inside your new theme folder, creat...
...lar 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. c:\themes\my_theme\ or ~/themes/my_theme/). inside your new theme folder, create two new empty text files, one called chrome.manifest and the other called install.rdf. the file preview.png is shown as a preview of the theme in the themes panel of the add-ons window. the file icon.png is used as an icon in the same panel. we'll leave both of them out for now, unless you have something picked out that you want to use. the remaining directories will be extracted from the default theme. first, you'll want to create a directory somewhere. copy your firefox installation's omni.ja into this directory. the location differs by operating system: linux: /usr/lib/mozillafirefox/chr...

Making sure your theme works with RTL locales - Archive of obsolete content
tible is fairly easy! gecko 1.9.2 and later gecko 1.9.2 introduced the :-moz-locale-dir css pseudoclass, which matches based on whether the user interface is being rendered left-to-right or right-to-left: :-moz-locale-dir(ltr) matches if the user interface is being rendered left to right. :-moz-locale-dir(rtl) matches if the user interface is being rendered right to left. 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. gecko 1.9.1 (firefox ...
...t mode. gecko 1.9.1 (firefox 3.5) and earlier the chromedir attribute firefox, thunderbird and seamonkey expose an attribute named chromedir on certain elements. all you have to do is add css rules to your theme that test for the value of this attribute, and use that to apply any rtl-specific rules that you may have. that's how the default theme works, so you can use it as an example. 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. note that not all elements will have the chromedir attribute, so you may ...

Theme changes in Firefox 3.5 - Archive of obsolete content
oid that problem. look at the patch to see what was changed for pinstripe. bug 450944 changed the way window shadow is handled on mac os x. before that change, opaque windows always had a shadow and transparent windows never had a shadow. after that change, transparent windows also have a shadow by default. this can result in unwanted shadows in your theme, e.g. under the autoscroll icon or the identity panel. if you don't want the shadow, you can turn it off by setting the new -moz-window-shadow css property to none on the affected element. browser.xul bug 463189 added a new attribute on the xul window element of browser.xul named browsingmode. the value of this attribute is normal when the private browsing mode is inactive, and private when it's active. this attri...
...deocontrols.css) shadow effect for disabled text using text-shadow. greying menus of inactive windows: active windows get attribute 'active="true"'. 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. see private browsing for theme designers for details. native hyperlink color: use -moz-nativehyperlinktext, to select the computer's native hyperlink color. all known changes for a list of all the known changes see: mozillazine's forum: theme changes for firefox 3.5 ...

Theme changes in Firefox 3 - Archive of obsolete content
platforms the yellow background for the location bar has been deprecated; instead, themes should style the new #identity-box element depending on its verifieddomain/verifiedidentity class. the go button is now located inside the location bar, so the image for it (chrome://browser/skin/go-arrow.png) needs to be smaller. 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. images to remove the...
...longer used. mac os x mac os x themes for firefox 3 should add these two rules to the end of chrome://global/skin/wizard.css: .wizard-buttons-btm { padding:xpx; } .wizard-label-box { display: none; } the numeric value ofx, the number of pixels of padding in .wizard-buttons-btm, should be the same as the value of the margin for .wizard-buttons-box-2. image changes chrome://global/skin/icons/loading_16.gif was replaced with chrome://global/skin/icons/loading_16.png . changes in mozapps see also theme changes in firefox 2 ...

Scratchpad - Archive of obsolete content
source and pasted into the "about:blank" page (a new empty tab) with the use page inspector's edit as html context menu command. 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". this will open up scratchpad in its own window. opening scratchpad in the toolbox new in firefox 47. from firefox 47, you can open scratchpad inside the toolbox. first you need to check "scratchpad" in the "default firefox developer tools" section of the settings page. now scratchpad will be available...
...t code snippets, so you can reuse code later if you like. code completion scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing information on the current symbol. to list autocomplete suggestions, press ctrl + space. for example, try typing d, then pressing ctrl + space. 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. ↑ and ↓ cycle through the suggestions and enter or tab select the highlighted choice. inline documentation to show the inline documentation popup, press ctrl + shift + space when the cursor is on an identifier. for example, if you type document.addeventlistener, then pres...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
ou specify justify-content: space-between there must be more than one alignment subject. if there is not, the fallback alignment is used. this is specified per alignment method, as detailed below. 141 falsy codingscripting, glossary, javascript a falsy (sometimes written falsey) value is a value that is considered false when encountered in a boolean context. 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. 143 fetch directive csp, http, security csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be...
...for use. scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa. 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. screen readers are essential to people who are blind, as well as useful to people who are visually impaired, illiterate, or have a learning disability. there are some browser extension screen readers, but most screen readers operate system-wide for all user applications, not just the browser. 402 script-supporting element glossary, html, html content categories, scripts i...

HTML: A good basis for accessibility - Learn web development
g upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption> </figure> unfortunately, most screen readers don't seem to associate figure captions with their figures yet. that said, the element structure is useful for css styling, plus it provides a way to place a description of the image next to it in the source. 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. you'll notice in the code example above that the image's alt attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say "image", or simil...
...sed when the new tab, window, or application is opened unexpectedly. older versions of screen reading software may not even announce the behavior. 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. webaim: links and hypertext - hypertext links mdn understanding wcag, guideline 3.2 explanations g200: opening new windows and tabs from a link only when necessary | w3c techniques for wcag 2.0 g201: giving users advanced warning when opening a new window | w3c techniques for wca...

HTML: A good basis for accessibility - Learn web development
g upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption> </figure> unfortunately, most screen readers don't seem to associate figure captions with their figures yet. that said, the element structure is useful for css styling, plus it provides a way to place a description of the image next to it in the source. 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. you'll notice in the code example above that the image's alt attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say "image", or simil...
...sed when the new tab, window, or application is opened unexpectedly. older versions of screen reading software may not even announce the behavior. 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. webaim: links and hypertext - hypertext links mdn understanding wcag, guideline 3.2 explanations g200: opening new windows and tabs from a link only when necessary | w3c techniques for wcag 2.0 g201: giving users advanced warning when opening a new window | w3c techniques for wca...

Using CSS generated content - Learn web development
backslash as the escape character. for example, "\265b" is the chess symbol for a black queen ♛. for details, see referring to characters not represented in a character encoding and characters and case in the css specification. ...
... image content to add an image before or after an element, you can specify the url of an image file in the value of the content property. ...

Typesetting a community school homepage - Learn web development
just have some fun along the way. prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of css text styling techniques. 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 a copy of them on your local computer. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html and fill in the css into one of these online editors, and use this url to point the background image. if the online editor you are using doesn't have a separate css panel, feel free to put it in a <style> element in the head of the document. no...
...at the top and bottom of the page. make it so that links are underlined by default, but when you hover or focus them, the underline disappears. remove the default focus outline from all the links on the page. give the active state a noticeably different styling so it stands out nicely, but make it still fit in with the overall page design. make it so that external links have the external link icon inserted next to them. lists: make sure the spacing of your lists and list items works well with the styling of the overall page. each list item should have the same line-height as a paragraph line, and each list should have the same spacing at its top and bottom as you have between paragraphs. give your list items a nice bullet, appropriate for the design of the page. it is up to you wheth...

Advanced form styling - Learn web development
he left one isn't sized properly. interestingly, setting border/background on the search field also fixes this problem, as it disables or "breaks" the aqua appearance too. the following styled search doesn't have appearance: none; applied, but it doesn't suffer from the same problem in macos chrome as the previous example. 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. to remove via css, you can use input[type="search"]::-webkit-search-cancel-button { display: none; }. however, this seems to get rid of the icon with focus too, with no apparent way to get it back. styling checkboxes and radio buttons styling a checkbox or a radio button is tricky by default. the sizes of check ...
...owsers, selects and datalists are generally not too bad to style provided you don't want to vary the look and feel too much from the defaults. we've managed to get the basic look of the boxes looking pretty uniform and consisent. the datalist control is <input type="text"> anyway, so we knew this wouldn't be a problem. two things are slightly more problematic. first of all, the select's "arrow" icon that indicates it is a dropdown differs across browsers. it also tends to change if you increase the size of the select box, or resize in an ugly fashion. 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. we put an extra wrapp...

Deployment and next steps - Learn web development
branch. since our app will be published at a subdirectory (like https://your-user.gitlab.io/mdn-svelte-todo), we'll have to make the references to the javascript and css files in our public/index.html file relative. 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. now we just have to commit and push our changes to gitlab. do this by running the following commands: > git add public/index.html > git add .gitlab-ci.yml > git commit -m "added .gitlab-ci.yml file a...
...ml file and fixed index.html absolute paths" > git push counting objects: 5, done. delta compression using up to 8 threads. compressing objects: 100% (5/5), done. writing objects: 100% (5/5), 541 bytes | 541.00 kib/s, done. 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. clicking on it will let you inspect the output of the job. you can also check the progress of the current and previous jobs from the ci / cd > jobs menu option of your gitlab project. once gitlab finishes building and publishing your app, it will be accessible at https://your-user.gitlab.io/mdn-svelte-todo/; in my case it's https://opensas.gitlab.io/mdn-svelt...

Handling common accessibility problems - Learn web development
om your code, but the easiest way is to use browser features, for example: firefox: select view > page style > no style from the main menu. safari: select develop > disable styles from the main menu (to enable the develop menu, choose safari > preferences > advanced > show develop menu in menu bar). chrome: install the web developer toolbar extension, then restart the browser. click the gear icon that will appear, then select css > disable all styles. edge: select view > style > no style from the main menu. using native keyboard accessibility certain html features can be selected using only the keyboard — this is default behavior, available since the early days of the web. the elements that have this capability are the common ones that allow user to interact with web pages, namely l...
...hat you attach to your page to provide a number of accessibility tools. let's look at an example, using wave. go to the wave homepage. enter the url of our bad-semantics.html example into the text input at the top of the page (or the url of another webpage you'd like to analyze) and press analyse your webpage. 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). note: such tools aren't good enough to solve all your accessibility problems on their own. you'll need a combination of these, knowledge and experience, user testing, etc. to get a full picture. automation tools deque's axe tool goes a bit further than the auditing tools we mentioned above. like the others, it checks...

Installing headers using EXPORTS
l_module to determine which typelib file is produced from the idl files. ...
...e distinction between xpidl_module and module is that each directory with idl files must have a unique typelib file, but several directories may export headers to the same location. ...

Eclipse CDT
e behavior tab and remove the "all" from the "build (incremental build)" field. select "c/c++ build > build variables", and add a variable "mozconfig", and set it to the path of your .mozconfig file relative to the top source directory. set any other environment variables you want to set for the build, then close the project properties window. 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. the benefit of building from inside eclipse is that build errors will appear in the problems tab at the bottom of the window, and from there you can double click on the build error and it will take you straight to the source file and line where the problem occurred. for this to work reliably though, you still need ...
...here are parser errors it is expected that eclipse will show parser errors even for a known-good copy of the mozilla source. parser errors/warnings are indicated by red/yellow markers on files in the project explorer tab, and in the gutter down the right-hand side of open source files. 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. the parser error indicators don't seem to show (reliably?) until you open a source file, then error markers will be added for that file. to force all markers to show for a directory in the project explorer tab, right-click that directory in the project explorer tab and select "run c/c++ code analysis". as well as adding the markers, this will give you a lis...

Message manager overview
process message managers process message managers correspond to process boundaries, and enable code running in different processes to communicate. multiprocess firefox has the concept of: a "parent process" "child processes" which are processes spawned by the p...
... ...

Performance
some addons. it does not provide the same memory footprint reductions but it improves application startup. beam down information in advance to avoid synchronous calls to the parent bad: // processscript.js function contentpolicy() { // ... ...
..., { 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. since the code calls to the parent process to check whether a specific request can be allowed it would slow down all page loads, a...

mozbrowsercontextmenu
via <menu> / <menuitem> elements and pointed to via a contextmenu attribute on the dom element clicked on, which contains the menu's id. its properties are as follows: type a domstring representing the type of context menu displayed. it can be menu (a full menu) or menuitem (a single menu item.) label a domstring equal to the label attribute of the dom node the context menu is accessed on. icon the menu item's icon, if the context menu being accessed is a menu item. id the menu item's id, if the context menu being accessed is a menu item. this is passed to the contextmenuitemselected() function, to indicate which item has been selected. items an array of further menu objects, which indicate the menu options available in a menu, if the context menu being accessed is a menu. exampl...
...r menu objects, which indicate the menu options available in a menu, if the context menu being accessed is a menu. ...

mozbrowserloadend
vascript object with the following properties: backgroundcolor a domstring representing the main background color of the browser <iframe> content, expressed as an rgb value. can be used to make the theme of the surrounding ui complement the theme of the currently loaded content, for example. 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. in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). var browser = d...
...); 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
et the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. 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 mozbrowsercontextm...
... between stop (x) and reload (r), as appropriate. ...

Addon
its selection. contributors read only addonauthor[] an array of strings holding the contributors of the add-on. description read only string the description of the add-on. developers read only addonauthor[] an array of strings holding the developers of the add-on. homepageurl read only string the homepage url of the add-on. iconurl read only string the url of the icon that represents this add-on. install read only addoninstall the addoninstall that will install this add-on. only available if this add-on is in the process of being installed. installdate read only date the date that the add-on was first installed. optionsurl read only string the url of the options dial...
... updatedate read only date the date that the add-on was most recently updated. operationsrequiringrestart read only integer a bitfield holding all of the operations that will require a restart to complete for this add-on. ...

PopupNotifications.jsm
ime; if one with the specified id already exists, it will be replaced with the newer notification. message a string to display in the notification panel. anchorid the id of the element that should serve as the anchor for the notification popup (that is, the element the arrow on the popup should point to). 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). mainaction a javascript object literal containing fields that define the button to draw in the notification panel. see notification actions below for details. secondaryactions an array of notif...
...ation events below. nevershow notifications with this parameter set to true will be removed when they would have otherwise been dismissed (i.e. any time the popup is closed due to user interaction). removeondismissal notifications with this parameter set to true will be removed when they would have otherwise been dismissed (that is, any time the popup is closed due to user interaction). 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. learnmoreurl a string url. setting this property will make the prompt display a "learn more" link that, when clicked, opens the url in a new tab. notification events if you specify an event callback using ...

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 ...
...loadthisimagepromise.reject('image load was aborted loading path = "' + path + '".'); } myimage.src = path; }); return promise.all(mysubpromises); } catch(ex) { return promise.reject(ex); } } to test and see what happens when you get an error. change the array in the code above. 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. the case of unhandled rejections one of the difficult proble...

Localizing with Pontoon
from first sign-in to finalizing your contributions. along the way, we'll point out some sweet features that will make you more efficient and make your l10n contributions easier. are you a developer? read about implementing pontoon in your project or learn how to get involved on github. first steps pontoon's home page is very easy to use. to begin localizing the project, click on the persona icon and sign in. next, simply select the project you want to work on and your locale from the dropdown menus. pontoon will automatically open that locale's project for you to get started. note that for our purposes here, we'll be using firefox affiliates website to demo pontoon's functionality and workflow. and there it is, opened inside pontoon: main toolbar as you can see, most of the interface...
...edit button appears over that text. click on it to enable the translate mode. replace the original text with its translation into your language. click the save button to save your translation. out-of-context some strings are impossible to translate in-context, e.g. the contents of the <title> tag in websites and strings with placeables or different plural forms. by clicking on the hamburger icon in the main toolbar, a list of all strings and available translations will open in the sidebar. you can also use the sidebar for out-of-context localization: click on the string you'd like to translate. translation panel with original string and its details (e.g. comments) opens. translate the string in the translation area below. click the save button to save your translation. as you ...

DMD
are using a dmd-enabled try build, or build from other source, adjust the app identifier as necessary. adb shell su # you need root access for the setprop command to take effect setprop wrap.org.mozilla.fennec_$username "/data/local/tmp/dmd_fennec" once this is set up, starting the org.mozilla.fennec_$username app will use the wrapper script. 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). adb shell am start -n org.mozilla.fennec_$username/.app trigger use the existing memory-report dumping hook: adb shell am broadcast -a org.mozilla.gecko.memory_dump in logcat, you should see output similar to this: i/dmd (20731): opened /storage/emula...
...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
ire tree segment by holding alt and clicking on the arrow to the left of the collapsed tree segment. as we progress into a more specific part of the tree, you'll notice that the 'running time' decreases. this happens when a function has 2 or more non-trivial calls: the running time will be split between its children. 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. a "tree breadcrumb" will appear similar to the range breadcrumbs noted above. clicking the "javascript only" option will only show javascript code in the call tree. you could compare the time with this option checked and the total time to get an idea of how much time was spent running js. note that long-running js function exec...
...bi-addr2line (which is part of the android ndk) in your bash path, so use locate arm-eabi-addr2line (on linux) or mdfind name:arm-eabi-addr2line (on os x) and stick an export to its location in ~/.bash_profile. the extension will invoke bash to use adb and addr2line. install the latest pre-release build in your host machine's firefox browser that has your phone reachable via adb. this will add a icon in the top right of the browser. set devtools.debugger.remote-enabled to true in about:config for fennec. select target mobile usb and press connect. the first run will take an additional 1 minute or so to pull in the required system libraries. profiling firefox startup start your firefox with the environment variable moz_profiler_startup=1 set. this way the profiler is started as early as...

Patches and pushes
are found in browser/searchplugins. each plugin is stored as an xml file, with list.txt containing the names of each plugin. here is an example search plugin file using french yahoo. ...
... <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> create xml files for each search plugin preference following the above example. for references on how each tag functions, visit the opensearch wiki page and the mozsearch wiki page. the pages are old (i mean, firefox 2???), but still accurate. 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. in list.txt, add the search plugin's xml filename (without extensions) on a new line and save. note that if your team selects a local version of an already default plugin (e.g., wikipedia), the xml filename should include the lo...

Places
it also introduces new user interfaces for managing all this information; see places on the mozilla wiki. places stores its data in an sqlite database using the mozstorage interfaces. ...
...tation places migration guide migrating existing code to use the places api. manipulating bookmarks using places examples for how to work with bookmarks using the places api. using the places tagging service how to use the tagging service. using the places history service how to access history information using the places api. using the places favicon service how to manipulate favicons using the places api. using the places livemark service how to create and manage livemarks. using the places annotation service how to work with the annotation service. using the places keywords api how to manage places keywords querying places how to query the bookmarks and history system with specific par...

XPCOM Stream Guide
nsibinaryinputstream .setinputstream(stream) object read a nsisupports object from the underlying stream. nsbinaryinputstream @mozilla.org/binaryinputstream;1 nsiobjectinputstream (inherits from nsibinaryinputstream) converter convert unicode characters from an underlying stream. nsconverterinputstream @mozilla.org/intl/converter-input-stream;1 nsiconverterinputstream .init(stream, charset, buffersize, replacechar) mime separate headers from data. nsmimeinputstream @mozilla.org/network/mime-input-stream;1 nsimimeinputstream .setdata(stream) similarly, there are complex output streams which build from primitive output streams: complex output stream types type purpose native class contract id...
...utputstream(stream) object write an nsisupports object to the underlying stream. nsbinaryoutputstream @mozilla.org/binaryoutputstream;1 nsiobjectoutputstream (inherits from nsibinaryoutputstream) converter write to an underlying stream with automatic conversion of unicode characters. 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. the nsfileinputstream and nspartialfileinputstream classes implement this interface. (xxx nsiunicharinputstream interface) (xxx nsiunicharlineinputstream interface) (xxx nsisear...

Components.utils.reportError
st be called with one parameter, usually an object which was caught by an exception handler. if it is not a javascript error object, the parameter is converted to a string and reported as a new error. this means you can use components.utils.reporterror to report debugging messages to the error console, just like dump() can be used to print messages to the native console. ...
...ging messages to the error console, just like dump() can be used to print messages to the native console. 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. to show them, set the preference 'javascript.options.showinconsole' to true, or use nsconsoleservice instead to show a message. firefox 4: the preference 'javascript.options.showinconsole' is set to true by default in this version. examples us...

Observer Notifications
ase connection. once this has been sent, no places features will work. places-connection-closing sent as the last notification before the places service closes its database connection. warning: this is for internal use only. places-database-locked the places database is currently locked by a third-party process and cannot be opened. places-favicons-expired sent when all favicons have been expired. places-init-complete the places database has been successfully initialized. you should wait until this notification occurs before querying the places database. places-maintenance-finished sent when maintenance of the places database is complete; this is done periodically in the background to keep the places ...
... not firing at the proper times. sent by the telemetry service when it's time to start gathering telemetry data, since the telemetry ping is coming soon. plugins topic data description plugin-crashed - sent when a plugin has crashed. message manager topic subject data description message-manager-disconnect nsicontentframemessagemanager null this notification is sent when a message manager disconnects. the subject of the notification is the message manager that disconnected. if you're using a message manager to communicate with a script that may be running in a different process, you might need to know when the message manager has disconnected from the other end of the conversati...

imgIRequest
one(in imgidecoderobserver aobserver); void decrementanimationconsumers(); imgirequest getstaticrequest(); void incrementanimationconsumers(); void lockimage(); void requestdecode(); void unlockimage(); attributes attribute type description corsmode long the cors mode that this image was loaded with. read only. decoderobserver imgidecoderobserver read only. image imgicontainer the image container. read only. imageprincipal nsiprincipal the principal gotten from the channel the image was loaded from. read only. imagestatus unsigned long status flags of the status_* variety. read only. mimetype string read only. uri nsiuri the uri the image load was started with. note that this might not be the actual uri for the image (for example if http redirects happen...
...age. if the image does not exist yet, locks it once it becomes available. the lock persists for the lifetime of the imgirequest (until unlockimage() is called) even if the underlying image changes. if you do not call unlockimage() by the time this imgirequest goes away, it will be called for you automatically. void lockimage(); parameters none. requestdecode() requests a decode for the image. imgicontainer has a requestdecode method, but callers may want to request a decode before the container has necessarily been instantiated. calling requestdecode on the imgirequest simply forwards along the request if the container already exists, or calls it once it gets onstartcontainer if the container does not yet exist. void requestdecode(); parameters none. unlockimage() unlocks an image. void unlo...

jsdIStackFrame
on its 'obj' param's scope chain as the ecma 'variables object'. private data for this object is an nsisupports object. attempting to alter this bit will result in an ns_error_illegal_value. opt_* values above, or'd together. last version set on this context. scripts typically select this with the "language" attribute. see the version_* consts on jsdidebuggerservice. unique tag among all valid jsdicontext objects, useful as a hash key. private data for this context, if it is an nsisupports, |null| otherwise. retrieve the underlying context wrapped by this jsdicontext. top of the scope chain for this context. |true| if this context should be allowed to run scripts, |false| otherwise. this attribute is only valid for contexts which implement nsiscriptcontext. setting or getting this attribute on...
...operty accesses will throw a ns_error_not_available exception. method overview boolean eval(in astring bytes, in autf8string filename, in unsigned long line, out jsdivalue result); attributes attribute type description callee jsdivalue function object running in this stack frame. read only. callingframe jsdistackframe link to the caller's stack frame. read only. executioncontext jsdicontext executon context. read only. functionname autf8string function name executing in this stack frame. read only. isconstructing boolean true if stack frame is constructing a new object. read only. isdebugger boolean true if stack frame represents a frame created as a result of a debugger evaluation. read only. isnative boolean true if stack frame represents a native frame. read only. obs...

nsIAccessibilityService
the container content node for the change is passed in, rather than the c...
... in nsiaccessible arootaccessible ); invalidatesubtreefor() invalidate the accessibility cache associated with apresshell, for accessibles that were generated for acontainercontent and it's subtree. the container content node for the change is passed in, rather than the changed presentation for the content node itself. void invalidatesubtreefor( in nsipresshell apresshell, in nsicontent achangedcontent, in pruint32 aevent ); parameters <tt>apresshell</tt> the presshell where changes occured. <tt>achangedcontent</tt> the affected dom content. <tt>aevent</tt> the event from nsiaccessibleevent that caused the change. must be one of: event_reorder (change) event_show (make visible or create) or event_hide (destroy or hide) ...

nsIAlertsService
fication; this may happen, for example, on mac os x if growl is not installed. example simple usage the following code was used to display the above notification. var alertsservice = components.classes["@mozilla.org/alerts-service;1"]. ...
...click here to focus the tab', true, null, notiflistener, 'stackoverflow notifier'); closealert() closes alerts created by the service. void closealert( in astring name, optional in nsiprincipal principal optional ); parameters name the name of the notification to close. if no name is provided then only a notification...

nsIBrowserBoxObject
attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. ...
...attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. ...

nsICommandController
inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/embedcomp/base-command-controller;1. ...
...g command, in nsicommandparams acommandparams ); parameters command the command to execute. acommandparams the parameters. getcommandstatewithparams() void getcommandstatewithparams( in string command, in nsicommandparams acommandparams ); parameters command the command whose state is to be determined. acommandparams the command parameters. see also nsicontroller nsicontrollercontext ...

nsIDOMWindowUtils
ounts restyling of pseudo-elements and anonymous boxes. throws ns_error_not_available if the count can't be provided. focusedinputtype string the type of the currently-focused html <input> element, if one is focused. imageanimationmode unsigned short returns the image animation mode of the window. the attribute's value must be one of the animationmode values from imgicontainer. imeisopen boolean returns the ime open state. true if it's open, otherwise false. this attribute only works when imestatus is ime_status_enabled. read only. imestatus unsigned long returns the current ime status. values correspond to the ime_status_* constants defined below. read only. ismozafterpaintpending boolean returns true if a mozafterp...
...hout universalxpconnect privileges. void disablenontestmouseevents( in boolean adisable ); parameters adisable if true, disable all non synthetic test mouse events on all windows. otherwise, enable them. dispatchdomeventviapresshell() dispatches aevent via the nsipresshell object of the window's document. the event is dispatched to atarget, which should be an object which implements nsicontent interface (#element, #text, etc). cannot be accessed from unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. note: event handlers won't get aevent as parameter, but a similar event. also, aevent should not be reused. boolean dispatchdomeventviapresshell( in nsidomnode atarget, in nsidomevent aevent, in boolea...

nsIDocumentLoader
documentchannel nsichannel read only. loadgroup nsiloadg...
... arequest astatus amessage native code only!getcontentviewercontainer obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. 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. return value isbusy() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) boolean isbusy(); parameters no...

nsIEditor
« xpcom api reference editor/nsieditor.idlscriptable provides methods and attributes used when editing page content. ...
...is editor. in the case of a design mode document, this is the same as the window's selection. selectioncontroller nsiselectioncontroller read only. the selection controller for the current presentation. methods native code only!init initializes the editor's services. [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. shell obsolete since gecko 5.0 the nsipresshellptr representing the presentation shell displaying the document. this parameter was removed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2). aroot the root of the editable section of this document; if it's null, t...

nsIEditorBoxObject
attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. ...
...attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. ...

nsIIFrameBoxObject
attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. ...
...attributes attribute type description docshell nsidocshell read only. obsolete since gecko 1.9 the nsidocshell object that manages the contained document. ...

nsINavHistoryObserver
methods onbeforedeleteuri() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) note: this method was removed in gecko 21.0 as part of bug 826409. the specified page and all its visits are about to be deleted. note: the page does not necessarily have to have ever existed for this function to be calle...
...ce 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. methods onbeforedeleteuri() obsolete since gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) note: this method was removed in gecko 21.0 as part of bug 826409. the specified page and all its visits are about to be deleted. note: the page does not necessarily have to have ever existed for this function to be called. delete notifications are...

nsINavHistoryResultNode
ex into that folder at which this node resides. these indices start at 0 and increase in the order at which the nodes appear in the bookmark folder. for items that are not in a bookmark folder, this value is -1. read only. dateadded prtime if the node is an item (bookmark, folder, or separator), this value is the time at which the item was created. for other nodes, this value is 0. read only. ...
...in the order at which the nodes appear in the bookmark folder. for items that are not in a bookmark folder, this value is -1. read only. dateadded prtime if the node is an item (bookmark, folder, or separator), this value is the time at which the item was created. for other nodes, this value is 0. read only. 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. if the entry doesn't have a favicon, this is the chrome uri of the default favicon. if the favicon originally lived in chrome, this will be the original chrome uri of the icon. read only. note: prior t...

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...
...er a node's time property or accesscount property, or both, have changed. void nodehistorydetailschanged( in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount ); parameters anode the node whose details have changed. anewvisitdate the new value for the last visit date and time for the node. anewaccesscount the new access count value for the node. nodeiconchanged() called right after a node's icon property has changed. void nodeiconchanged( in nsinavhistoryresultnode anode ); parameters anode the node whose icon has changed. nodeinserted() called when an item is inserted into a container. the item previously at the specified index (if any) and everything below it is shifted down by one. void nodeinserted( in nsinavhistorycontainerresultnod...

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...
...ht after a node's last access time or access count has changed. void nodehistorydetailschanged( in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount ); parameters anode the node whose details have changed. anewvisitdate the new value for the last visit date and time for the node. anewaccesscount the new access count value for the node. nodeiconchanged() called right after the icon of a node has changed. void nodeiconchanged( in nsinavhistoryresultnode anode ); parameters anode the node whose icon has changed. nodekeywordchanged() called right after the keyword property of a node has changed. void nodekeywordchanged( in nsinavhistoryresultnode anode, in autf8string anewkeyword ); parameters anode the node whose ti...

nsISelectionPrivate
2 endoffset, in prbool allowadjacent, in rangearray results); native code only! 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! void setpresshell(in nsipresshell apresshell); native code only! void settextrangestyle(in nsidomrange range, in consttextrangestyleref textrangestyle); native code only! void startbatchchanges(); wstring tostringwithformat(in string formattype, in unsigned long flags, in print32 wrapcolumn); attributes attrib...
... of the visible area. for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area. a value of 50 centers the frame horizontally . a value of -1 means move the frame the minimum amount necessary in order for the entire frame to be visible horizontally (if possible). 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. void setpresshell( in nsipresshell apresshell ); parameters apresshell native code only!settextrangestyle set the painting style for the range. the range must be a range in the selection. the textrangestyle will be used by text fr...

nsIXULSortService
content/xul/templates/public/nsixulsortservice.idlscriptable a service used to sort the contents of a xul widget. 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! obsolete since gecko 1.9 void sort(in nsidomnode anode, in astring asortkey, in astring asorthints); constants constant value description sort_comparecase 0x0001 sort_integer 0x0100 methods native code only!insertcontainernode obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work in...
..._integer 0x0100 methods native code only!insertcontainernode obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. used internally for insertion sorting. 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. void sort( in nsidomnode anode, in astring asortkey, in astring asorthints ); pa...

Theme Packaging
making a theme for thunderbird requires knowledge of cascading stylesheets (css), probably xbl, and some graphic design and aesthetic skill (...or maybe not). this document describes only how themes are packaged in order to be shown in firefox's themes window. 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 ... you must have a top-level chrome.manifest file which registers the chrome for the theme (as before) and also an install.rdf manifest that specifies metadata that is displayed in the appearance section of the add-ons manager. preview.png is a preview image which will show when doub...
...mozapps/files ... you must have a top-level chrome.manifest file which registers the chrome for the theme (as before) and also an install.rdf manifest that specifies metadata that is displayed in the appearance section of the add-ons manager. preview.png is a preview image which will show when double-clicked on a theme in the appearance section of the add-ons manager. it can be any size. icon.png is a 32x32 (max. 48x48) png (may contain alpha transparency) which will show up in the appearance section of the add-ons manager. install.rdf your install.rdf manifest will look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <...

Use watchpoints - Firefox Developer Tools
a get or set watchpoint pauses whenever a property value is accessed in either way. set a watchpoint run and then pause the debugger. in the scopes pane on the right side of the debugger user interface, find an object you want to watch, and right-click it to open its context menu. 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 play or press f8 to resume execution. view a watchpoint when the watched property is accessed in the way specified by the watchpoint type (get or set), the debugger pauses, enabling you to see line of code responsib...
...the watchpoint is removed. ...

Basic operations - Firefox Developer Tools
opening the memory tool before firefox 50, the memory tool is not enabled by default. to enable it, open the developer tool settings, and check the "memory" box under "default firefox developer tools": from firefox 50 onwards, the memory tool is enabled by default. 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 save a snapshot click "save": ...
...h an arrow rising from it (before firefox 49, this button was labeled with the text "import..."): you'll be prompted to find a snapshot file on disk. comparing snapshots starting in firefox 45, you can diff two heap snapshots. the diff shows you where memory was allocated or freed between the two snapshots. 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. the tool then shows you the differences between the two snapshots: when you're looking at a comparison, you can't use the dominators view or the tree map view. recording call stacks the memory tool can tell you exactly where in your code you a...

Network monitor toolbar - Firefox Developer Tools
the network monitor provides two toolbar areas, one above the main section, and another below. toolbar the toolbar is at the top of the main network monitor window. (prior to firefox 77, this toolbar was arranged somewhat differently.) it provides: an icon to clear the network request list. a box enabling you to filter requests by url and by properties. 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. throttling menu, to simulate various connection types a menu of other actions: ...
...g is not cleared on page load. import har imports a har (http archive) file. save all as har opens a file dialog box so you can save the current contents of the network log as a har file with the extension .har. copy all as har copies the current contents of the network log to the clipboard in har format. a second toolbar area at the bottom of the network monitor provides: an icon to launch performance analysis. a summary of this page, including the number of requests, total size, and total time. network monitor features the following articles cover different aspects of using the network monitor: network request list network request details network traffic recording performance analysis throttling ...

Network request details - Firefox Developer Tools
earlier versions appeared similarly, but might not include some functionality. the tabs at the top of this pane enable you to switch between the following pages: headers messages (only for websocket items) cookies params response cache timings security (only for secure pages) stack trace (only when the request has a stack trace, e.g. a script called by another script). clicking the icon at the right-hand end of the toolbar closes the details pane and returns you to the list view. headers tab the headers tab has a toolbar, followed by three main sections. 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. version: the version of http used. transferred:...
...e http response code for the request. version: the http version used transferred: the amount of data transferred with the request the referrer policy, which governs which referrer information, sent in the referer header, should be included with requests. (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. response headers the response headers section shows details about the response. for each line in the response headers section, a question mark links to the documentation for that response header, if one is available. a raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unfor...

Examine and edit HTML - Firefox Developer Tools
the tree highlights that element in the page. nodes that are not visible are shown faded/desaturated. this can happen for different reasons such as using display: none or that the element doesn't have any dimensions. there is an ellipsis shown between the opening and closing tag of an element when the node is collapsed if it has larger contents. 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. clicking the marker opens a tooltip listing the event listeners and allows you for each listener to switch to the line of javascript code in the debugger where the listener is defined. scroll...
...nd paste them into the desired location. drag and drop you can reorganize the html content of a page by moving nodes in the html tree. just click and hold on any element and drag it up or down in the tree. when you release the mouse button, the element will be inserted at the corresponding position: you can cancel the drag and drop by pressing the esc key. 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. you can then edit the new node's content and styling just as you would any other node in the document. you can access the same functionality using the "create new node" popup menu item. note that this button is disabled if the selected element's typ...

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
w. discovering css grids when an html element on your page has display: grid applied to it, a number of features are made available in the devtools to provide easy access to grid features. in the html pane in the html pane, elements laid out using a grid have a "grid" marker beside them. in the css pane in the css pane's rules view, any instance of a display: grid declaration gets a grid icon included within it: . clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other elements, so you can edit related css properties and see how the grid is affected. the layout view grid section when grids are included on a page, ...
...lay grid each grid present on a page has an entry in the "overlay grid" section: each entry consists of (from left to right): a checkbox allowing you to toggle the grid overlay for that grid on and off. a name label to represent the grid, consisting of a selector identifying the html element that has the grid applied to it. clicking this also toggles the grid overlay on and off. 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. this is useful for selecting different colors so you can easily tell your grids apart. inspecting a subgrid when the page contains a grid with a subgrid, the entry for the subgrid is indented under it...

Inspect and select colors - Firefox Developer Tools
ables) that represent colors. ...
...t colors. ...

Paint Flashing Tool - Firefox Developer Tools
trigger more repaints, and for more of the screen, than necessary. this can then cause a site to be slow responding to user input (also known as "janky"). that's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to. using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page. after moving the mouse around and scrolling a bit, the above page looks like this: 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 ...
... example: css transitions one area where implementation choices can affect repaint efficiency is in css transitions. the example below shows two different ways to move an element using a css transition. the first way applies the transition to the element's margin-left, while the second way moves the element using the transform property. <body> <div id="container"> ...

Web Console UI Tour - Firefox Developer Tools
the web console's interface is split into three horizontal sections, detailed in the sections below. 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. filter categories: you can click a filter category (such as errors, warnings, css, or xhr) to display just those types of messages. 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. show timestamps: when enabled, timestamps are shown on the left-hand side of each messa...
...d line. see console messages for a lot more detail on what the messages can contain. note: you can clear the contents of the console by entering the keyboard command ctrl + shift + l (windows, macos, and linux) or cmd + k on macos. command line the command line starts with double angle brackets (>>). use it to enter javascript expressions. 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. ...

CredentialsContainer.create() - Web APIs
ptions an object of type credentialcreationoptions that contains options for the requested new credentials object. it must include one of the options "password", "federated", or "publickey". the options are: password: optional either an htmlformelement, or a passwordcredentialdata object. tbd id: (required) usvstring inherited from credentialdata. ...
... inherited from credentialdata. name: optional usvstring tbd iconurl: optional usvstring tbd password: (required) usvstring tbd federated: optional an federatedcredentialinit object. contains requirements for creating/obtaining federated credentials. the available options are: id: (required) usvstring inherited from credentialdata. 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. returns a promise that resolves with a credential instance, such as passwordcredential, federatedcredential, or publickeycredential. specifications ...

Using the Notifications API - Web APIs
} we basically try to see if the .then() method is available on requestpermission(). if so, we move on and return true. if it fails, we return false in the catch() {} block. creating a notification creating a notification is easy; just use the notification constructor. ...
...otification is easy; just use the notification constructor. 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. the user already read the notification on the webpage, in the case of a messaging app, or the following song is already playing in a music app ...

PublicKeyCredentialCreationOptions.user - Web APIs
y is an object describing the user account for which the credentials are generated (via navigator.credentials.create()). syntax useraccount = publickeycredentialcreationoptions.user properties displayname a domstring which is human readable and intended for display. it may be the full name of the user (e.g. "john doe"). this is not intended to store the login of the user (see name below). icon optional an url as a usvstring value which points to an image resource which can be the avatar image for the user. id a buffersource uniquely identifying a given user. this an opaque identifier which can be used by the authenticator to link the user account with its corresponding credentials. this value will later be used when fetching the credentials in authenticatorassertionresponse.userhand...
... the same displayname. ...

Window.open() - Web APIs
this form of code also interferes with advanced features in tab-capable browsers: eg. middle-click on links, ctrl+click on links, ctrl+enter on links, "mouse gestures" features. 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. the purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (back toolbar button is disabled). "users often don't notice that a new window has opened, especially if they are using a small monitor where the w...
...some user agents that cannot create new windows, like ms we...

Web APIs
at you may be able to use while developing your web app or site. web apis are typically used with javascript, although this doesn't always have to be the case. specifications this is a list of all the apis that are available. ...
...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...

Cognitive accessibility - Accessibility
igation bar on multiple pages, make that navigation uniform across the site with the same links in the same location. this doesn't just apply to navigation: present all repeated components in the same relative order each time they appear. provide consistent labeling identical functions should have similar labels every time they are utilized. 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. similarly, don...
... the error must be described in the text. ensure that the error message is as specific as possible. provide text to identify incomplete required fields and text descriptions if a value entered is invalid. if the error prevented a form submission, focus on the error. if multiple errors are present, provide a summary, with each error linking to the related input. include text along with use of icons, images, color and so on. some people have difficulty understanding the meaning of icons and other visual cues. other people may have difficulty understanding the text version of your error message. for these people, also provide things like icons and colors. also, provide feedback on when there is a successful form submission. provide instructions for user input start the form with ...

Web Accessibility: Understanding Colors and Luminance - Accessibility
itself will matter. thin letters will be harder to read than thick ones; all type faces need space to "breathe" for human perception. in general, for accessibility purposes, the more contrast the better. that changes with animation. "safer" animation means images with less contrast, not more. 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. see wcag 2.1 technique g207 luminance it is the difference in the luminance of a color that enables us to see contrast. here is the definition of relative luminance as defined by the w3c: "the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white" this statement is of course accurate, but m...
...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
this feature corresponds to the web app manifest's display member. both apply to the top-level browsing context and any child browsing contexts. the feature query applies regardless of whether a web app manifest is present. syntax the display-mode feature is specified as a keyword value chosen from the list below. ...
...e is specified as a keyword value chosen from the list below. display mode description fallback display mode fullscreen all of the available display area is used and no user agent chrome is shown. standalone standalone the application will look and feel like a standalone application. this can include the application having a different window, its own icon in the application launcher, etc. in this mode, the user agent will exclude ui elements for controlling navigation, but can include other ui elements such as a status bar. minimal-ui minimal-ui the application will look and feel like a standalone application, but will have a minimal set of ui elements for controlling navigation. the elements will vary by browser. browser ...

content - CSS: Cascading Style Sheets
eparation between the added content and the rest of the content */ } result image combined with text this example inserts an image before the link. if the image is not found, it inserts text instead. 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 <h2>paperback best sellers</h2> <ol> <li>political thriller</li> <li class="new-entry">halloween stories</li> <li>my biography</li> <li class="new-entry">vampire romance</li> </ol> css .new-entry::after { con...
...ribute after. 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. you can replace the contents of an element with either a <url> or an <image> value. content added with ::before or ::after will not be generated as the contents of the element have ...

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...
...rame>. 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. mozbrowserlocationchange firefox os browser api-specific sent when a browser <iframe>'s location changes. mozbrowserloadend firefox os browser api-specific sent when the browser <iframe> has finished loading all its assets. mozbrowserloadstart ...

Video player styling basics - Developer guides
kle is to make the video control's buttons actually look like and act like real buttons. each button has some basic styling: .controls button { border:none; cursor:pointer; background:transparent; background-size:contain; background-repeat:no-repeat; } by default, all <button> elements have a border, so this is removed. ...
...each image was then converted to a base64 encoded string (using an online base64 image encoder), since the images are quite small, the resultant encoded strings are quite short. since some buttons have dual functionality, e.g. play/pause, and mute/unmute, these buttons have different states that need to be styled. ...

HTML attribute reference - HTML: Hypertext Markup Language
draggable global attribute defines whether the element can be dragged. dropzone global attribute indicates that the element accepts the dropping of content onto it. enctype <form> defines the content type of the form data when the method is post. enterkeyhint <textarea>, contenteditable the enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. the attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute). for <label>, <output> describes elements which belongs to this one. form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progr...
...endering of given element, while keeping child elements, e.g. script elements, active. high <meter> indicates the lower bound of the upper range. href <a>, <area>, <base>, <link> the url of a linked resource. hreflang <a>, <area>, <link> specifies the language of the linked resource. http-equiv <meta> defines a pragma directive. icon <command> specifies a picture which represents the command. id global attribute often used with css to style a specific element. the value of this attribute must be unique. importance <iframe>, <img>, <link>, <script> indicates the relative fetch priority for the resource. integrity <link>, <script> specifies a subresource integrity value ...

<a>: The Anchor element - HTML: Hypertext Markup Language
ith cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. older screen-reading software may not even announce the behavior. ...
...usually, css hides a skip li...

<command>: The HTML Command element - HTML: Hypertext Markup Language
gh it can be implicitly defined as its start tag is not mandatory. the <colgroup> must not have a <span> as child. dom interface htmlcommandelement attributes this element includes the global attributes. checked indicates whether the command is selected. must be omitted unless the type attribute is checkbox or radio. disabled indicates that the command is not available. icon gives a picture which represents the command. label the name of the command as shown to the user. radiogroup this attribute gives the name of the group of commands, with a type of radio, that will be toggled when the command itself is toggled. this attribute must be omitted unless the type attribute is radio. type this attribute indicates the kind of command. this can be one of three value...
... type this attribute indicates the kind of command. this can be one of three values. command or empty which is the default state and indicates that this is a normal command. checkbox indicates that the command can be toggled using a checkbox. radio indicates that the command can be toggled using a radio button. examples <command type="command" label="save" icon="icons/save.png" onclick="save()"> specifications specification status comment html5the definition of '<command>' in that specification. recommendation ...

<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...
...lt whenever possible. omitting alt altogether indicates that the image is a key part of the content and no textual equivalent is available. setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content (it’s decoration or a tracking pixel), and that non-visual browsers may omit it from rendering. visual browsers will also hide the broken image icon if the alt is empty and the image failed to display. this attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark. crossorigin indicates if the fetching of the image must be done using a cors request. image data from a cors-enabled image returned from a cors request can be reused in the <canvas> element without being marked "tainted". if...

<input type="number"> - HTML: Hypertext Markup Language
ute to make an empty entry invalid. (in other words, the input must be filled in.) you can use the step attribute to constrain valid values to a certain set of steps (e.g., multiples of 10). you can use the min and max attributes to constrain valid values to lower and upper bounds. ...
...lue — and see how the error messages the browser gives you differ with different ones. 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. we put it on a separate <span> element for added flexibility. some browsers don't display generated content very effectively on some types of form inputs. (read, for example, the section on <input type="date"> validation.) important: html form validation is not a substitute for server-side scripts that ensu...

HTML elements reference - HTML: Hypertext Markup Language
<head> the html <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. <link> the html external resource link element (<link>) specifies relationships between the current document and an external resource. 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. <meta> the html <meta> element represents metadata that cannot be represented by other html meta-related elements, like <base>, <link>, <script>, <style> or <title>. <style> the html <style> element contains style information for a document, or part of a document.
...f a context menu or toolbar. <content> the html <content> element—an obsolete part of the web components suite of technologies—was used inside of shadow dom as an insertion point, and wasn't meant to be used in ordinary html. <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. <element> the obsolete html <element> element was part of the web components specification; it was intended to be used to define new custom dom elements. <font> the html font element (<font>) defines the font size, color and face for its content. <frame> <frame> is an html element which defines a particular area in which anothe...

HTML documentation index - HTML: Hypertext Markup Language
ialog> element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow. 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. 93 <div>: the content division element content division, element, html, html grouping content, html:flow content, layout, reference, web, div the html content division element (<div>) is the generic container for flow content. it has no effect on the content or layout until styled using css. 94 <dl>: the description list element elem...
...ent an item in a list. 149 <link>: the external resource link element element, html, html document metadata, link, reference, web, web performance, metadata the html external resource link element (<link>) specifies relationships between the current document and an external resource. 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. 150 <listing> element, html, obsolete, reference, web the html listing element (<listing>) renders text between the start and end tags without interpreting the html in between and using a monospaced font. the html 2 standard recommended that lines shouldn't be broken whe...

display - Web app manifests
when the full browser window is shown) to fullscreen (when the app is full-screened). note: if the display member is not specified, it defaults to browser. note: you can selectively apply css to your app based on the display mode, using the display-mode media feature. this can be used to provide a consistent user experience between launching a site from an url and launching it from a desktop icon. ...
...in this mode, the user agent will exclude ui elements for controlling navigation, but can include other ui elements such as a status bar. minimal-ui minimal-ui the application will look and feel like a standalone application, but will have a minimal set of ui elements for controlling navigation. ...

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
et when the user clicks yes or no respectively. when accepted, the permission works for both notifications and push. ...
...s the title, mentioning the author in the body, and showing the image as an icon: 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); } a new random notification is created every 30 seconds until it becomes too annoying and is disabled by the user. (for a real app, the notifications should be much less frequent, and more useful.) the advantage of the notifications api is that it uses the operating system's notifica...

The building blocks of responsive design - Progressive web apps (PWAs)
nicely, but it does require a lot of custom markup. adaptive images a server-side solution, which records the viewport size in a cookie, then resizes images via a combination of php and .htaccess to a more appropriate size, if appropriate. this doesn't require markup or scripting, but has a number of limitations. 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. because vector images are calculated based on mathematical algorithms rather than containing separate data on every pixel in the image, they tend to be smaller in file size, and are infinitely scalable when zoomed or viewed on high resolution devices (at least, in theory). some ideas follow, which also help t...
... ...

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
alongside a content script. 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". when it receives this message, the script logs the first paragraph of the document and then calls removelistener() to stop listening. // content-script.js function getfirstparagraph() { var paras = document...

Communicating using "port" - Archive of obsolete content
ongside a content script "listener.js". 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". when it receives this message, the script logs the first paragraph of the document and then calls removelistener() to stop listening. function getfirstparagraph() { var paras = document.getele...

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

windows - Archive of obsolete content
set a listener for "open" event. windows.open({ url: "http://www.example.com", onopen: function(window) { // do stuff like listen for content // loading. } }); 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. parameters options : object required options: name type url string string url to be opened in the new window. this is a required property. isprivate boolean boolean whi...

Low-Level APIs - Archive of obsolete content
. lang/functional functional helper methods. lang/type functions for working with type detection. loader/cuddlefish the sdk's module loader. loader/sandbox create javascript sandboxes and execute scripts in them. net/url enables you to read content from a uri. net/xhr provides access to xmlhttprequest functionality. places/bookmarks create, modify, and retrieve bookmarks. places/favicon helper functions for working with favicons. places/history access the user's browsing history. platform/xpcom implement xpcom objects, factories, and services. preferences/event-target listen to changes to the preferences system in firefox. preferences/service access the preferences system in firefox. remote/child enables an sdk module loaded into a child process to access web ...

cfx to jpm - Archive of obsolete content
, use --profile and --overload. instead of using --force-mobile, explicitly add fennec to engines section of your package.json. package.json fields many package.json fields are implicit commands to cfx. in jpm, we've removed support for some of these fields, and are still working on supporting some others. 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
then, under show / hide toolbars, enable the menu bar. finally, click the green bar "exit 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 ...

Miscellaneous - Archive of obsolete content
onend); } inserttext(document.getelementbyid("example"), "the text to be inserted"); disabling javascript programmatically // disable js in the currently active tab from the context of browser.xul gbrowser.docshell.allowjavascript = false; if this isn't your browser, you should save the value and restore it when finished. if you wish to block selected scripts based on their uri, implement nsicontentpolicy. using string bundles from javascript assuming the extension has myext.properties with name/value pairs such as: invalid.url=the speficied url, %s, is invalid. that was attempt number %s. these properties can be accessed from javascript in the following manner: var common = { _bundle: components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.int...

On page load - Archive of obsolete content
if you only want to handle documents, ensure aevent.originaltarget.nodename == "#document" . if you are running code on a page load it is likely you would want to run some cleanup code on page unload. to attach to the unload event in above example you can use the "pagehide" event like this: appcontent.addeventlistener("pagehide", myextension.onpageunload, false); for appconte...

Progress Listeners - Archive of obsolete content
rmines the type of events that will be received. note that the browser uses a weak reference to your listener object, so make sure to keep an external reference to your object to ensure that it stays in memory. when used with a tabbrowser, you cannot choose which types of events that will be received. instead, you receive those events that the tabbrowser is interested in, except that the onlinkiconavailable and onrefreshattempted notifications are optional. the tabbrowser uses a strong reference to your listener object. gecko 2.0 note starting in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), all events are optional. the tabbrowser only notifies you of the events for which you provide a callback. remember to change mylistener to a unique identifier. example: noti...

Tabbox - Archive of obsolete content
ex]); tabs.removeitemat(currentindex); /*work around if last tab is removed, widget fails to advance to next tab*/ if(-1 == tabbox.selectedindex && tabs.childnodes.length>0){ tabbox.selectedindex=0; } } creating a close tab button to have a tab close button, you must configure the style. 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
tom themes. skin packages just as extension code should exist in chrome content packages, all of the styling for an extension including css and images should exist in a chrome skin package. custom themes may then register a replacement for your skin package allowing them to provide their own styles for all of your content. branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package. while it may be tempting to use the same stylesheet in multiple places try to avoid this so ...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
on open source by taking advantage of this fact. red hat enterprise linux (rhel) cannot be copied or distributed with the redhat trademark in place. a number of rhel clones have appeared, such as centos, where the trademarked parts have been scrubbed away by a community effort. the firefox web browser, developed by the mozilla foundation, does not permit modifications of its name or trademarked icon. for this reason, the debian project, which distributes free software as a volunteer effort, has a browser based on firefox, but with a different name and logo. document licenses as open-source software grows in popularity, people have begun thinking about applying its principles to content other than software, to allow anyone to duplicate, distribute, and modify it freely. because oss license...

Handling Preferences - Archive of obsolete content
not. in most cases, your preferences window will have a few options that can be displayed all at once. if you have many preferences, you can organize them using the prefpane element. this creates a visually appealing tabbed view, just like the one in the firefox preferences window. the prefpane is just a container, and you can have as many as you want. the tabs at the top of the window will need icons, and just like with toolbar buttons there are subtle differences between operating systems. the prefwindow allows you to use the preferences and preference elements, which facilitate preference handling. the preferences element is just a container, and you should have one per window, or one per prefpane if you have those. the element and its children are completely invisible, and their purpose ...

XPCOM Objects - Archive of obsolete content
and, finally, the factory object. var counterfactory = { /* single instance of the component. */ _singletonobj: null, createinstance: function(aouter, aiid) { if (aouter != null) { throw cr.ns_error_no_aggregation; } // in this case we need a unique instance of the service. if (!this._singletonobj) { this._singletonobj = messagecounter; } ...

Setting up an extension development environment - Archive of obsolete content
ul_cache = true. disables the xul cache so that changes to windows and dialogs do not require a restart. this assumes you're using directories rather than jars. changes to xul overlays will still require reloading of the document overlaid. browser.dom.window.dump.enabled = true. enables the use of the dump() statement to print to the standard console. see window.dump for more info. you can use nsiconsoleservice instead of dump() from a privileged script. javascript.options.strict = true. enables strict javascript warnings in the error console. note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. you can filter those with console2. devtools.chrome.enabled = true. th...

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. you can detect when a tab becomes pinned or unpinned by watching for the tabpinned and tabunpinned events. function exampletabpinned(event) { var browser = gbrowser.getbrowserfortab(event.target); // browser is the xul element of the browser that's been pinned } function exampletabunpinned(event) { var browser = gbrowser.getbrowserfortab(event.target); // browser is the xul element of ...

Firefox addons developer guide - Archive of obsolete content
entheses after them. for example, here: https://developer.mozilla.org/en/firefox_addons_developer_guide/let's_build_a_firefox_extension#init_method the text of the paragraph should begin "the <code>init()</code> method is as shown...". 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. if you prefer, you can just link to the articles directly. either way, these links should be added. these articles are all tagged as covering firefox 3.1 using the fx_minversion_header template, but i don't think that's the case. certainly appendix 2 doesn't care what version of firefox you're using, since it's just about open source software licenses. todo: all fixme notes in...

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
; vastly increased accessibility without special coding or user agent detection. why did you pursue a standards-based redesign of wired news? as network design manager at lycos for the last two years, i've been creating and documenting design standards for our network of sites. this includes rules and guidelines applying to everything from headers, footers, page hierarchy, titles, typography, iconography, navigation, and others. so i'm very familiar with standards and the benefits of using them. with the wired news design process, the scenario was reversed. as i was designing the product, i began discovering a broader set of web standards, and was quickly swayed by the advantages i could see if we were to adopt them. it was a no-brainer to us that wired news was a perfect candidate for th...

CSS3 - Archive of obsolete content
:invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-item, and ::repeat-index pseudo-elements. at risk: due to insufficient browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-item, and ::repeat-index may be postponed to the next iteration of this module . 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. support for the css outline-offset property giving more control on the position of the outline. support for the css resize property allowing web author...

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
e following markup: <table cellspacing="0" cellpadding="0" border="0" width="500"> <tr><td><img src="nav1.gif"><img src="nav2.gif"><img src="nav3.gif"><img src="nav4.gif"><img src="nav5.gif"></td></tr> <tr><td style="background: red;"> <img src="smallred.gif" height="1" width="1"></td></tr> <tr><td> <p style="margin: 0.5em;">this is text in another cell of the table. within the textthere is an icon <img src="icon2.gif"> that indicates a link to another site. it's very worldly. lorem ipsum, dolor sit amet...</p></td></tr></table> as we see in figure 8, that works well in some cases but not so well in others. the thin red line shows that the single-pixel spacer gif is now only making the cell one pixel tall, as the designer intended. unfortunately, the buttons in the top cell are all n...

No Proxy For configuration - Archive of obsolete content
n almost all cases, pac gives better control and flexibility. user interface "no proxy for" is an optional field, part of "manual proxy configuration". the field is relatively short, but can hold reasonably long (2k+ characters) entries. new profiles contain the values "localhost, 127.0.0.1", by default. 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. the elements are separated by either a space (" ") or a comma (","). note for former-ie users: "*" is supported only at the beginning of domain filters (*.mozilla.org). to block ... put this into "no proxy for" ...for example use... limitations a domain,...

Structure of an installable bundle - Archive of obsolete content
defaults) in bootstrapped extensions are not processed by a supporting application. (>=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) ... additional resources (such as chrome:// or resource:// ...

Chromeless - Archive of obsolete content
o safely embed untrusted web applications inside these applications. chromeless vs prism/webrunner prism (an ex-mozilla labs project, now discontinued but kept going independently of mozilla under the [now discontinued] webrunner name) was/is a way to make web pages superficially appear to be native applications. 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. however, prism "applications", being web pages, were subject to all the normal restrictions that browsers place on a web page. for example, prism applications could not read/write files directly from/to the computer's file system. one of the ideas behind chromeless is to remove these restrictions. ...

Enabling the behavior - updating the status periodically - Archive of obsolete content
function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time. we use it inside the loadtinderboxstatus function to make that function run a second (1,000 milliseconds) after startup and a minute (60,000 milliseconds) after each invocation. ...

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

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

Tinderbox - Archive of obsolete content
pen. although there are multiple tinderbox clients machines doing different kinds of builds (f.e. different platforms), most people only care about the overall situation, i.e. whether or not any clients have failed. by checking for build failures first and test failures second, we make sure to show users the worst possible situation, i.e. 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. « previousnext » ...

Creating a Mozilla Extension - Archive of obsolete content
torial (it focuses on firefox, but is also applicable to other new applications). a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). 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. whether or not the latest version of the code is compiling successfully and passing tests). the extension will access tinderbox, mozilla.org's webtool for tracking source code status, to get the status of the code. completing this tutorial will give you a basic understanding of how mozilla's user interface (ui) i...

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
ox 3.5), these apis are officially deprecated the newer, simpler, portable api should be used in their place. this section describes how to implement objects that can be dragged around and dropped onto other objects. the drag and drop interface many user interfaces allow one to drag particular objects around within the interface. for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. mozilla and xul provide a number of events that can handle when the user attempts to drag objects around. a user can start dragging by holding down the mouse button and moving the mouse. the drag stops when the user releases the mouse. event handlers are called when the user starts and ends dragging, and at various points in-between. mozilla ...

File access - Archive of obsolete content
...

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
an entry is created if and only if the declaration file is considered valid (validation based on the syntax described above); an invalid document will result in access denial. denies script access in the event of an xml-wellformedness error, or validation error, or if the declaration file does not grant access. reports errors (validation, wellformedness, file not found, etc.) to the console via nsiconsoleservice. note: script access is checked via declaration file only if the script security manager denies access. summary advantages the proposed declaration file places the server operator, not the client in control of access to his server by untrusted scripts. the access hole is no bigger than the service in question. the access is disabled by default, and there is nothing the user needs...

URIScheme - Archive of obsolete content
and the size number by 1 to 127 mailto:emailaddress@domain.com about: chrome:// ... ...

Learn XPI Installer Scripting by Example - Archive of obsolete content
archive (like zip and jar files) with a special script at the highest level that manages the installation. that installer script , usually named install.js, is the subject of this article. ...

image - Archive of obsolete content
« xul reference home image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. example <menuitem label="foo" class="menuitem-iconic" image="something.png"/> see also image element ...

panel.type - Archive of obsolete content
this for a panel that provides a richlistbox for an autocomplete element. arrow specify this for a panel that provides an arrow pointing at its anchor. drag specify this for a panel that's being used as a drag image for a drag and drop operation. otherwise leave this attribute out. 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. if they overlap, the anchor won't be drawn. the panel may not appear on the side of the anchor that you requested in which case the arrow will automatically adjust. ...

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
for instance, in the following example, pressing the 'view' button will open a menu which allows the user to select from a set of radio menuitems. presumably, when one is selected, the application view would be changed accordingly. when using the keyboard, pressing the down key will open the menu while the button is focused. <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. if you do want this indication, you should use a menulist instead. the same technique can be used for toolbarbuttons as well as buttons. in th...

Menus - Archive of obsolete content
on the command element instead of the menuitem. this is useful when you wish to have several elements performing the same action, for example a menuitem on a menubar, a context menu, and a toolbar button, because you can place the code to execute only once on the command and hook each element up to the command. menuitems also support displaying shortcuts associated with the menuitem, as well as icons beside the label. for details about adding shortcut keys to menus, see adding shortcut keys to menu items. for details about adding icons to menus, see adding icons to menu items. for details about creating checkbox menu items or radio menu items see checkbox menu items or radio menu items. menu items can be disabled by setting the disabled attribute to true. for an example, see disabling a me...

controllers - Archive of obsolete content
the controllers are used to respond to commands. the document's command dispatcher will locate controllers to handle a command by using the focused element's list. ...

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
« previousnext » a template may be used to generate hierarchical trees. this works just like with recursive generation using the content builder. each level of the tree is created using a successive iteration of the template build process. 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. remember to make the left column the primary column for these to appear. to be able to do this, the tree builder must know that an item is a container. with an rdf datasource, this would usually be an rdf container such as a seq and the tree would display its children. for an xml datasource, the tree might display a node's children as the children in the tree, mak...

Building Trees - Archive of obsolete content
e> </tree> this tree displays each photo in the tree cells. in this case, the member resource is used since that holds the photo’s url. however, it could be any other variable, a static value, or a combination of both. of course, we can’t really see the photos, since the tree’s rows are too small! it’s not normal to put photos in a tree like this—instead, the images would be used for icons. on the other hand, you could use a stylesheet to change the default height of the tree rows. you cannot make each row a different height, but you can change the height of all rows with some css: treechildren::-moz-tree-row { height: 150px; } since no elements are constructed by the tree builder, you cannot use the style or class attributes to change the style of a cell (this is the case with...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
directory. name the package file with the .xpi extension. (some zip tools require you to use the .zip extension first, then rename the file to change the extension.) ensure that the package does not contain your working directory itself, but only install.js, content and all the files in content. to install the packaged extension, open the xpi file in seamonkey. (for example, drag the file's icon and drop it in seamonkey, or choose file – open file... from the menu bar.) distribute the xpi file to other users. alternate "quick and dirty" method for hooking up a single preexisting xul file to display in seamonkey: as described above, find the seamonkey\chrome folder. create a subfolder (eg. seamonkey\chrome\myapp) and open it, placing your xul file within. now open a new text document i...

Commands - Archive of obsolete content
e menu in this simple example. the docommand method will be called when the delete menu item is selected, and this will cause the selected row in the listbox to be deleted. nothing needs to happen for the onevent method, so no code is added for this method. override default controller we attach this controller to the listbox by calling the appendcontroller method of the listbox's controllers. nsicontrollers has a number of methods that may be used to manipulate the controllers. for instance, there is also an insertcontrollerat method which inserts a controller into an element before other ones. this might be useful to override commands. for example, the following example will disable pasting into a textbox. var tboxcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_paste"...

Creating a Window - Archive of obsolete content
, it causes the specified file to open as a top-level window without any browser chrome, such as the address field or menu. only chrome urls have additional privileges. the extension developer's extension contains an xul editor that allows you to type in xul code and see the results in real-time from within mozilla! 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. make sure that you have included the stylesheet correctly: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> in the next section, we will add some buttons to the window. « previousnext » ...

More Tree Features - Archive of obsolete content
h specify the hierarchy of the items in a tree. each item in the tree has a level starting at 0. the topmost items in the tree will have a level of 0, the children of those items will have a level of 1, the children below that will have a level of 2, and so on. the tree will query the view for the level of each item in order to determine how to draw the rows. 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 tree will also handle drawing the rows with the right level of indenting. however, the view will need to make sure it keeps track of the level of the rows as necessary. this can sometimes be quite tricky, but fortunately, the built-in content tree view does all of the hard work for us. to create a set ...

The Chrome URL - Archive of obsolete content
. similarly, if the user changes their theme, the 'skin' part of the chrome url translates to a different set of files, yet the xul and scripts don't need to change. here are some more examples. note how none of the urls specify which theme or locale is used and none specify a specific directory. 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. the following url will refer to the bookmarks window, listed for firefox: chrome://browser/content/bookmarks/bookmarksmanager.xul you can enter chrome urls anywhere normal urls can be used. you can even enter them directly into the url bar in a firefox browse...

Tree View Details - Archive of obsolete content
required to keep track of this. the tree will call this method to determine which containers are open and which are closed. note that the tree will call neither iscontainerempty nor iscontaineropen for rows that are not containers as indicated by the return value of the iscontainer method. a container may be rendered differently than a non-container. for instance, a container may have a folder icon beside it. a style sheet may be used to style items based on various properties such as whether a row is open. this is described in a later section. a non-empty container will be displayed with a twisty next to it so that the user may open and close the row to see child items. empty containers will not have a twisty, but will still be treated like a container. when the user clicks the twisty to ...

Using the Editor from XUL - Archive of obsolete content
::preparedocumentforediting()). as well as making the editor (which happens via nseditorshell::doeditormode()) we also hook up various listeners and observers for ui updating and user interaction, and store a file specifier for the document we opened. the editor is now set up, and ready to go. 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. when initializing the editor from the nseditorshell, we pass null here (which tells the editor that it can edit everything under the <body> of the document). this parameter is more important when the editor is in a text widget, where it points to the the subtree of the parent document that corresponds t...

browser - Archive of obsolete content
perty contains the document object in the element. contentprincipal type: nsiprincipal this read-only property contains the principal for the content loaded in the browser, which provides security context information. contenttitle type: string this read-only property contains the title of the document object in the browser. 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. contentwindow type: todo use the contentwindow.wrappedjsobject to obtain a dom(html) window object currenturi typ...

notificationbox - Archive of obsolete content
ppear on the notification. this should be either a string, or, from gecko 37 onwards, you can pass a documentfragment with rich content as well. keep in mind that this is all xul so using html elements for styling might still need additional css in order to work as you might expect. value - value used to identify the notification image - url of image to appear on the notification. if "" then an icon appropriate for the priority level is used. priority - notification priority; see priority levels. buttons - array of button descriptions to appear on the notification. eventcallback optional - a javascript function to call to notify you of interesting things that happen with the notification box. see notification box events. priority levels (defined as properties of notificationbox) : ...

Application Update - Archive of obsolete content
re will build you mar. compiled versions of mar are available in the gecko sdk under the folder /host/bin for your os. in order to generate sha1 hashes i installed shash. 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. we use a separate boolean toggle for this to...

Building XULRunner with Python - Archive of obsolete content
a zombie will keep old code open and cause confusion when you make changes and run xulrunner again. deploying python must be installed on the target machine. perhaps eventually a xulrunne...

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
mandline flag. 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. this might also be simplified using a very simple shell script (i call mine "run.sh"): #!/bin/sh /library/frameworks/xul.framework/xulrunner-bin `pwd`/application.ini linu...

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

Windows and menus in XULRunner - Archive of obsolete content
ext -- and localization of the application -- much easier. the window title is done this way in the above example. also notice the <script> element which is used to include the window’s javascript into the xul file. keeping css, dtd and javascript out of the xul file is considered a best practice. 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. menus and toolbars most desktop applications are complex enough to require some sort of menu and/or toolbar to structure the application’s available commands. xul provides elements to support both menus and toolbars. building on the simple window code, he...

Archived Mozilla and build documentation - Archive of obsolete content
hey apply. creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection). 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. whether or not the latest version of the code is compiling successfully and passing tests). the extension will access tinderbox, mozilla.org's webtool for tracking source code status, to get the status of the code. creating a skin for firefox/getting started download the ...

2006-11-10 - Archive of obsolete content
s none this week. discussions site-specific search using our search box a discussion surrounding implementing a way to search a current page with the page's embedded search component and how to make this efficient and usable. event in firefox similar to ondownloadcomplete event in ie an inquiry about how to change the font of a web page before it is displayed using an extenstion. favicon as microsummary/feed/other stuff indicator suggestion about making the favicon create a bookmark for the page with a microsummary. firefox 2.0 - net accessed when bookmark properties viewed question about whether firefox 2.0 downlads the web page again when the properties of the bookmark are viewed. followed by a discussion whether this is an improvement. what is the build date for firefo...

2006-10-06 - Archive of obsolete content
s - september 30th to october 6th 2006 tb mozilla_1_8_branch build problem on mac os x (10.4.7, universal build) ludwig hügelschäfer stated that he has been encountering an error when he executes a "make export" operation on thunderbird (part of the mozilla_1_8_branch) since september 15th. ../../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. he found out that a broken host_xpidl was the sour...

2006-11-10 - Archive of obsolete content
week. discussions how to know the full height and width of a webpage discussion on how to determine the full height and width of a web page when embedding a browser into an application. using window.innerheight and window.scrollmaxy should resolve this issue. block images discussion on how where to change source code so that images could be blocked in mozilla. this can be defined within the nsicontentpolicy. applying site- and page-specific settings during layout discussion on the best possible solution for integrating firefox 3 with the ability to apply site- and page-specific user settings during layout. the idea of using a single sheet and the per-site selectors that dbaron implemented would allow for a quick proof of concept. the pro's and con's of using a single sheet was discussed. ...

2006-12-01 - Archive of obsolete content
debugging firefox extesnion? a tip on how to debug firefox extensions using a debugger. ...

Syndicating content with RSS - Archive of obsolete content
html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. 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. (other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not requ...

Settings - Archive of obsolete content
pause on exceptions when this option is enabled, execution of the script will automatically pause whenever a javascript exception is thrown. ignore caught exceptions if this option is set (it is set by default) and "pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught. this is usually the behavior you want. ...

LiveConnect Overview - Archive of obsolete content
onnect classes, place the .jar or .zip file in the classpath of the jdk compiler in either of the following ways: create a classpath environment variable to specify the path and name of .jar or .zip file. specify the location of .jar or .zip file when you compile by using the -classpath command line parameter. 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. note: because java is a strongly typed language and javascript is weakly typed, the javascript runtime engine converts argument values into the appropriate data types...

Troubleshooting XForms Forms - Archive of obsolete content
rent domain than the form is loaded from, make sure that you have allowed cross-domain submission for that specific "form domain". read here for more information. conflicts with other plug-ins if you are using the noscript plugin you may notice that your put and/or post requests are being converted to get requests. 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. the xss sub-tab has the following options: turn cross-site post requests into data-less get requests anti-xss protection exceptions you can temporarily fix the problem by unchecking the turn cross-site post requests into data-less get requests check box. alternatively, for a long term fix you can enter an exception patte...

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
ng-term potential. a fundamental mistake that many organizations make is to use proprietary methods, software, code, or standards. following a proprietary path has led many organizations down disastrous paths. case in point: xerox corporation. xerox was clearly ahead of their time in the early 1980’s when they designed and developed the star office system. it was an elegant workstation with an iconic desktop developed by the engineers at parc (palo alto research center). the star office system offered functionality that neither microsoft nor apple has been able to match with their current offerings. the engineers developed star on a proprietary development operating system known as pilot. pilot had a highly-integrated debugging tool called co-pilot that allowed the xerox development organi...

RDF in Fifty Words or Less - Archive of obsolete content
this isexactly how smartmail works. contact: chris waterson (waterson@netscape.com) original document information author(s): chris waterson last updated date: november 19, 1998 copyright information: copyright (c) chris waterson interwiki language link ...

Implementing controls using the Gamepad API - Game development
he demo — the only difference is that the full version uses the turbo variable to decide whether or not the game will be launched using super turbo mode. it works independently, so it could be turned on even if the gamepad is not connected. 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. it will launch the game in the super turbo mode and you'll be able to control the fridge with the keyboard: a and d for turning the turret left and right, w for shooting and arrow keys for movement. implementation there are two important events to use along with the gamepad api — gamepadconnected and gamepaddisconnected. the first one is fired when the ...

Visual-js game engine - Game development
npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 very easy installation and project files generator . now you can use on-page-editor (nice for visual setup , checking positions and dimensions - not for logic ) . manual start from cmd : server_folder/node editor.js after starting on-page-editor open browser icon to open internet browser in editor mode . see video explanation : if you use editor.js to visual create game object method , you must start ***node build_from_editor_to_visual_js_file.js*** on the end of work. this tool will create visual.js in folder starter/ with all your game object was created in editor style . or you can use visual-js source editor. visual-js source editor (2d...

Raster image - MDN Web Docs Glossary: Definitions of Web-related terms
...

Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
screen readers are essential to people who are blind, as well as useful to people who are visually impaired, illiterate, or have a learning disability. there are some browser extension screen readers, but most screen readers operate system-wide for all user applications, not just the browser. ...

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
text-decoration: none; } a:active { color: #000000; background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red). 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. via tabbing) or activated. the following image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links. something should definitely happen when states change, and you shou...

Mobile accessibility - Learn web development
in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your ui. 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". when implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (norm...

Pseudo-classes and pseudo-elements - Learn web development
also change the ::before pseudo-element to ::after and see the text inserted at the end of the element instead of the beginning. inserting strings of text from css isn't really something we do very often on the web however, as that text is inaccessible to some screen readers and might be hard for someone to find and edit in the future. 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. in this next example, we have added an empty string using the ::before pseudo-element. we have set this to display: block in ...

Introduction to CSS layout - Learn web development
500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } the rendered output is as follows: relative positioning relative positioning allows you to offset an item from the position in normal flow it would have by default. this means you could achieve a task such as moving an icon down a bit so it lines up with a text label. to do this, we could add the following rule to add relative positioning: .positioned { position: relative; top: 30px; left: 30px; } here we give our middle paragraph a position value of relative — this doesn't do anything on its own, so we also add top and left properties. these serve to move the affected element down and to the right — thi...

The HTML5 input types - Learn web development
" id="search" name="search"> the main difference between a text field and a search field is how the browser styles its appearance. often, search fields are rendered with rounded corners; they also sometimes display an "Ⓧ", which clears the field of any value when clicked). additionally, on devices with dynamic keyboards, the keyboard's enter key may read "search", or display a magnifying glass icon. the below screenshots show a non-empty search field in firefox 71, safari 13, and chrome 79 on macos, and edge 18 and chrome 79 on windows 10. 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. another feature worth noting is that the values of a search field can be automatically saved and re-used to offer a...

Test your skills: Advanced styling - Learn web development
oss browsers (particularly looking at safari here) is the position of the standard blue focus outline. how can you remove this? there is a major problem with just getting rid of the blue focus outline. what is it? can you add some kind of styling back in so that users can tell when the search box is being hovered or focused? another thing that commonly denotes a search box is a magnifying glass icon. we've made one available in the same directory as our html files — see search-24px.png — plus a <div> element after the search input to help you attach it, should you need it. can you figure out a sensible way to attach it, and can you use some css to get it to sit to the right of the search box, and be lined up vertically as well? try updating the live code below to recreate the finished ...

UI pseudo-classes - Learn web development
rty to make a chunk of content appear before or after the affected element. the chunk of content is not added to the dom, so is invisible to screenreaders; it is part of the document's styles. because it is a pseudo element, it can be targetted with styles in the same way that any actual dom node can. 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. for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transf...

Dealing with files - Learn web development
</html> the line <img src="" alt="my test image"> is the html code that inserts an image into the page. we need to tell the html where the image is. the image is inside the images directory, which is in the same directory as index.html. to walk down the file structure from index.html to our image, the file path we'd need is images/your-image-filename. for example, our image is called firefox-icon.png, so the file path is images/firefox-icon.png. insert the file path into your html code between the double quote marks of the src="" code. save your html file, then load it in your web browser (double-click the file). you should see your new webpage displaying your image! some general rules for file paths: to link to a target file in the same directory as the invoking html file, just...

JavaScript basics - Learn web development
image you added previously, or as close as possible. save this image in your images folder. rename the image firefox2.png. add the javascript below to your main.js file. (also delete your hello world! 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. now when you click the image, it should change to the other one. this is what happened. you stored a reference to your <img> element in the myimage variable. next, you made this variable's onclick...

What will your website look like? - Learn web development
ing copyright, you can use google's license filter. click on the tools button, then on the resulting usage rights option that appears below. you should choose an option such as labeled for reuse. font to choose a font: go to google fonts and scroll down the list until you find one you like. you can also use the controls on the right to further filter the results. click the "plus" (add to) icon next to the font you want. click the "* family selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected). in the popup box, you can see and copy the lines of code google gives you into your text editor to save for later. previous overview: getting started with the web next in this module installing basic software what will your websi...

Introduction to HTML - Learn web development
, and explain other important basic language features. along the way, we'll play with some html to get you interested! what’s in the head? metadata in html the head of an html document is the part that is not displayed in the web browser when the page is loaded. 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). html text fundamentals one of html's main jobs is to give text meaning (also known as semantics), so that the browser knows how to display it correctly. this article looks at how to use html to break up a block of text into a structure of headings and paragraphs, add emphasis/importanc...

Mozilla splash page - Learn web development
ke the page look nice and make more sense. the following subsections detail what you need to do: preparing images using your favourite image editor, create 400px wide and 120px wide versions of: firefox_logo-only_rgb.png firefox-addons.jpg mozilla-dinosaur-head.png call them something sensible, e.g. firefoxlogo400.png and firefoxlogo120.png. along with mdn.svg, these images will be your icons to link to further resources, inside the further-info area. you'll also link to the firefox logo in the site header. save copies of all these inside the same directory as index.html. next, create a 1200px wide landscape version of red-panda.jpg, and a 600px wide portrait version that shows the panda in more of a close up shot. again, call them something sensible so you can easily identify them.

Index - Learn web development
aim of this skill test is to assess whether you've understood our html text fundamentals article. 241 test your skills: links beginner, html, learn, links, test your skills the aim of this skill test is to assess whether you've understood our creating hyperlinks article. 242 what’s in the head? 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! in the next article we'll be looking at html text fundamentals. 243 multimedia and embedding ...

Multimedia: Images - Learn web development
file format typically depends on the character of the image. the less colors an image has and the less photographic it is, the better it is to use the svg format. this requires the source to be available as in a vector graphic format. should such an image only exist as a bitmap, then png would be the fallback format to chose. examples for these types of motifs are logos, illustrations, charts or icons (note: svgs are far better than icon fonts!). both formats support transparency. pngs can be saved with three different output combinations: 24 bit color + 8 bit transparency — offer full color acurracy and smooth transparencies at the expense of size. you probably want to avoid this combination in favor for webp (see below). 8 bit color + 8 bit transparency — offer no more than 255 col...

Web performance resources - Learn web development
d ttf formats are not compressed by default. apply compression such as gzip or brotli for these file types. use woff and woff2. these formats have compression built in. within @font-face use font-display: swap. by using font display swap the browser will not block rendering and will use the backup system fonts that are defined. optimiize font weight to match the web font as closely as possible. icon web fonts if possible avoid icon web fonts and use compressed svgs. to further optimize inline your svg data within html markup to avoid http requests. tools learn to use the firefox dev tools to profile your site. pagespeed insights can analyze your page and give some general hints to improve performance. lighthouse can give you a detailed breakdown of many aspects of your site including ...

Getting started with React - Learn web development
and open the app in a new browser tab. your browser will display something like this: application structure create-react-app gives us everything we need to develop a react application. 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. the public directory contains files th...

Working with Svelte stores - Learn web development
henever the $alert store changes, we'll clean up any pending timeout. if $alert is empty, we set visible to false and the alert will be removed from the dom. if it is not empty, we set visible to true and use the settimeout() function to clear the alert after ms milliseconds. finally, with the ondestroy() lifecycle function, we make sure to call the cleartimeout() function. we also added an svg icon above the alert paragraph, to make it look a bit nicer. try it out again, and you should see the changes. making our alert component accessible our alert component is working fine, but it's not very friendly to assistive technologies. the problem is elements that are dynamically added and removed from the page. while visually evident to users who can see the page, they may not be so obvious to ...

Getting started with Vue - Learn web development
e cross-browser compatible in production code. you can register additional babel plugins in this file. .browserslistrc: this is a config for browserslist. you can use this to control which browsers your tooling optimizes for. public: this directory contains static assets that are published, but not processed by webpack during build (with one exception; index.html gets some processing). favicon.ico: this is the favicon for your app. currently, it's the vue logo. index.html: this is the template for your app. your vue app is run from this html page, and you can use lodash template syntax to interpolate values into it. note: this is not the template for managing the layout of your application — this template is for managing static html that sits outside of your vue app. editing t...

Setting up your own test automation environment - Learn web development
replace the {username} and {accesskey} placeholders in the code with your actual user name and access key values (and make sure you keep them secure). run the below command in your terminal to execute your test: node index.js the test will be sent to lambdatest, and the output of your test will be reflected on your lambdatest console. if you ...

Command line crash course - Learn web development
get: ls -l in the case of ls, the -l (dash ell) option gives you a listing with one file or directory on each line, and a lot more information shown. directories can be identified by looking for a letter "d" on the very left-hand side of the lines. those are the ones we can cd into. 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. this is done by typing the man command, followed by the name of the command you want to look up, for example man ls. this will open up the man page in the terminal’s default text file viewer (for example, less i...

Information for users
an what still needs to be added to our ui for full usable accessibility. please give us feedback on the discussion list! 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. since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night. newsgroup and ma...

Mozilla’s UAAG evaluation report
ll configuration options. unfortunately, switching profiles requires the entire application to be relaunched. there is still very little end-user documentation for editing profiles by hand. 11.7 configure tool bars. (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. provide accessible user agent documentation and help. checkpoint title status notes/plans 12.1 accessible documentation. (p1) nr some end user docs are under help, help contents in mozilla here is the main page for mozilla end user documentation none of these resourc...

Index
there are two essential steps to getting people to use your add-on: they need to discover your add-on and open the listing page, then the listing page needs to encourage them to click the add to firefox button. 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. 676 index add-ons, glossary, guide, index found 689 pages: 677 signing and distributing your add-on add-ons, extensions, webextensions, distribution, publication, reviews, signing add-ons need to be signed before they can be installed into release ...

Creating a Login Manager storage module
or overriding the built-in nsiloginmanagerstorage _xpcom_categories: [ { category: "login-manager-storage", entry: "nsiloginmanagerstorage" } ], // console logging service, used for debugging. __logservice : null, get _logservice() { if (!this.__logservice) this.__logservice = cc["@mozilla.org/consoleservice;1"]. ...

Creating a spell check dictionary add-on
les must be placed in a subfolder named dictionaries within the zip file. both files must have the locale code as their file name. you also have to add a file named install.rdf to the root of the zip file. this file contains information about your add-on such as name and version number (see below). 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. here is an example of the install.rdf file. you can create and edit it with a plain text editor such as notepad. <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>locale-code@dictionaries.addons.mozill...

Debugging on Mac OS X
for debugging purposes it is recommended to create a separate profile to debug with, whatever your task, so that you don't lose precious data like bookmarks, saved passwords, etc. so that you're not bothered with the profile manager every time you start to debug, expand the "executables" branch of the "groups & files" list and double click on the executable you added for mozilla. click the plus icon under the "arguments" list and type "-p <profile name>" (e.g. "-p mozilladebug"). close the window when you're done. running a debug session make sure breakpoints are active (which implies running under the debugger) by opening the product menu and selecting "debug / activate breakpoints" (also shown by the "breakpoints" button in the top right section of the main window). then click the "run" ...

Debugging on Windows
l, click the "new" button which creates a new entry and then hit the "..." buttons which lets you browse to the dll. you will only be able to add one dll at a time. vc++ 7.0 automatically finds additional dlls. customizing the debugger's variable value view you can customize how visual c++ displays classes in the variable view. by default vc++ displays "{...}" and you need to click the small + icon to expand the members. you can change this behaviour, and make visual c++ display whatever data member you want in whatever order, formatter however you like instead of just "{...}". you need to locate a file called "autoexp.dat" in your visual c++ installation. by default it will be: vc++ 6.0: c:\program files\microsoft visual studio\common\msdev98\bin\autoexp.dat vc++ 7.0: c:\program file...

The Firefox codebase: CSS Guidelines
s that are adjusted with the correct values for different platform configurations, so using those css variables can definitively save some testing time, as you can assume they already work correctly. using the currentcolor keyword or inheriting is also good practice, because sometimes the needed value is already in the color or on the parent element. 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. it is also possible to use currentcolor with other properties like opacity or fill-opacity to have different opacities of the platform color. high contrast mode content area on windows high contrast mode, in the content area, gecko does some automatic color adjustme...

Obsolete Build Caveats and Tips
solete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this is the sdk that mozilla-1.9.1 (firefox 3.5) builds used to be built against. 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. you may choose not to install the sample code and documentation to save space and download time. if you are using windows xp, you must have windows xp service pack 2 and .net framework 2.0 installed be...

Listening to events on all tabs
n. arefreshuri the new uri that awebprogress has requested redirecting to. amillis the delay (in milliseconds) before refresh. asameuri true if awebprogress is requesting a refresh of the current uri. false if awebprogress is requesting a redirection to a different uri. return value true if the refresh may proceed. false if the refresh should be aborted. 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
it only needs to store one pixel of data. at large dimensions the raster file may be much larger than the svg file. scalability, with caveats one of the primary advantages of svg is that as it is scaled it does not pixelate. however, this is not to say that it always does away with the need to have a collection of raster images for display at different scales. 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. performance while svg provides a lot of flexibility in terms of scaling, themability, etc. this flexibility depends on doing computations for svg images at the time they're displayed, rather than at the time the aut...

Experimental features in Firefox
see bug 1335970 for more details. release channel version added enabled by default? nightly 60 no developer edition 60 no beta 60 no release 60 no preference name security.insecure_connection_text.enabled for normal browsing mode; se...

Index
x 48. it became a requirement for building gecko in february 2017 with firefox 54. 8 experimental features in firefox experimental, firefox, preferences, features this page lists features that are in nightly versions of firefox along with information on how to activate them, if necessary. 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. one example is the new tab page, which includes a "top sites" section showing sites you visit that firefox thinks you're likely to want to visit again, as well as...

Message manager
iants. ...

Storage access policy: Block cookies from trackers
we encourage site owners to test their sites, particularly those that rely on third-party content integrations. we’ve added several new features to firefox to make testing easier. developer tools notifications the network monitor in firefox developer tools now includes an indicator for all resource requests that have been classified as tracking resources. this indicator is shown as a shield icon in the domain column. in the sample image below, trackertest.org is classified as a tracking resource, while the request to example.com is not. adding custom domains to the tracking protection list curious how things will work if a third-party domain on your site were classified as a tracker? we’ve added a preference that allows you to add custom domains to the tracking protection url class...

Site Identity Button
the site identity button is a feature in firefox that gives users more information about the sites they visit. depending on the configuration of your website, this button may display a number of different icons. if the site identity button on your site shows something you do not expect (for example, an orange warning triangle when you expect a green padlock) you can find out the cause of the problem by looking in the web console in the firefox developer tools: ensure your web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downgraded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but sub...

mozbrowseractivitydone
lly (true) or not (false). ...

mozbrowserasyncscroll
an be different than the real current position of the scroll when the event is processed. ...

mozbrowseraudioplaybackchange
whether the event is cancellable or not. details read only boolean indicates whether audio is playing in the browser. ...

mozbrowsercaretstatechanged
hod allowing you to issue a command via an anonymouse function, i.e. function(command). possible values are cut, copy, paste and selectall. ...

mozbrowserclose
lly bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

mozbrowserdocumentfirstpaint
hether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

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
hlighted search result, e.g. 3 out of 5. ...

mozbrowserfirstpaint
whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

mozbrowserlocationchange
not (false). example this example updates the url bar so that it will always display the correct url for the current location. ...

mozbrowsermanifestchange
ty returns an anonymous javascript object with the following properties: href the url of the new app manifest. ...

mozbrowsermetachange
rned is undefined. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermetachange", function(event) { console.log("a meta tag has been " + event.details.type + ". ...

mozbrowseropensearch
title of the search engine. href a domstring representing url of the search engine. ...

mozbrowseropentab
l a domstring representing the url of the new document loaded. ...

mozbrowseropenwindow
ting the new browser <iframe> that will embed the new content. ...

mozbrowserresize
g the new height of the <iframe> viewport, in device pixels. ...

mozbrowserscroll
...

mozbrowserscrollareachanged
e <iframe> viewport, in css pixels. ...

mozbrowserscrollviewchange
e current state of scrolling in the viewport — available values are started and stopped. ...

mozbrowsersecuritychange
nt a boolean indicating if mixed content is present on the current page (true) or not (false). ...

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
itialvalue a string representing the initial value for the window.prompt() methods. ...

mozbrowsertitlechange
s cancellable or not. detail read only string the title of the document. ...

mozbrowserusernameandpasswordrequired
te. cancel() a function that is called to cancel the authentication. ...

mozbrowservisibilitychange
ue) or not (false). ...

Browser API
er <iframe>. mozbrowsererror sent when an error occurs while trying to load content within a browser <iframe>. 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. mozbrowserloadend sent when the browser <iframe> has finished loading all its assets. mozbrowserloadstart sent when the browser <iframe> starts to load a new page. mozbrowserlocationchange sent when a browser <iframe>'s location changes. mozbrowsermanifestch...

::-moz-tree-image
activated by the properties attribute. ...

How to Report a Hung Firefox
box to send the crash report to mozilla start firefox. type "about:crashes" in the url bar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. all os as long as you do not need to be in firerfox's safe mode, a user friendly method of crashing firefox is to install and use the addon crash me now! (simple) use the menu button to find the crash me icon and click the icon. firefox crash report ui should appear. please check the box to send the crash report to mozilla start firefox. type "about:crashes" in the url bar and click on the top listing. create a new bug report at bugzilla.mozilla.org using this link. another way to trigger a crash in a hung tab is to run the following script in the browser console (opened after selecting the hung...

IME handling guide
crolling a page may be consumed and prevented by ime. additionally, password editors need to request special behavior with ime. for solving this issue, gecko sets the proper ime state at dom focus change. first, when a dom node gets focus, nsfocusmanager notifies imestatemanager of the new focused node (calls imestatemanager::onchangefocus()). imestatemanager asks desired ime state by calling nsicontent::getdesiredimestate() of the node. if the node owns nseditor instance, it asks for the desired ime state from the editor and returns the result. next, imestatemanager initializes inputcontext (defined in imedata.h) with the desired ime state and node information. then, it calls nsiwidget::setinputcontext() with the inputcontext. finally, widget stores the inputcontext and enables or disable...

AddonInstall
l() method. method overview void install() void cancel() void addlistener(in installlistener listener) void removelistener(in installlistener listener) properties attribute type description name string the name of the add-on being installed. version string the version of the add-on being installed. iconurl string the icon of the add-on being installed. releasenotesuri nsiuri the uri of release notes for this install. type string the type of the add-on being installed. state integer the state of the installation. error integer if an error has been encountered during the download or install this will hold the error code. so...

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
the webrequest module is new in firefox 41. the webrequest module provides an api to add event listeners for the various stages of making an http request. the event listener receives detailed information about the request, and can modify or cancel the request. 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. more generally, you can also use this api instead of http request observers. you can use webrequest.jsm in either the chrome or content processes. the webrequest api is modeled on chrome's webrequest extension api, which makes it easier to write cross-browser add-on code. there are some differences between this api and chrome's, though: see chrome incompatibilities for the details. usa...

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
dule(). this function doesn't need to return a value. ...

L10n testing with xcode
t your localization of firefox on ios. launching & testing your firefox on ios localization the ios simulator is fairly easy to use once you launch your app. to perform the next steps, you'll need to be familiar with how user gestures and hardware interactions work in the simulator. this guide should help. press the run button in the upper left-hand corner (the button has a playback icon). navigate to the newly opened ios simulator window many strings are accessibility strings and are only revieled when a user hovers their finger over the button. to view these strings, you'll need to start the accessibility inspector within the ios simulator by doing the following. in the ios simulator, press the home button from the hardware toolbar menu. navigate to the settings app,...

Localizing with Mercurial
:\users\your_id> cd c:\mozilla-build\hg ps c:\mozilla-build\hg> .\add_path.exe /result . note the dot (".") at the end of the second command, which means the current directory. if the utility modified your %path% successfully, a dialog will open saying, "%path% has been updated correctly." alternatively, you can edit the %path% variable manually. in order to do so, right-click on your computer icon, choose properties > advanced > environmental variables, select path and click edit. if you don't see path among the options, you'll have to click add and edit it within the add dialog. see the screenshot for an example. did it work? go to start > run... type cmd.exe and click ok. a new shell window should appear. type hg --version in the new shell window. if you see a message about the ve...

Localizing without a specialized tool
e of the ui found in the search bar. the search bar is next to the right of the location bar, and by default points to the google search. if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines... there is also a tooltip that appears when you hover over the magnifying glass icon on the right side of the bar. folder structure throughout this document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-1.9.2) l10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l10n base") x-testing (...

Creating localizable web content
sometimes you can leave some freedom of modification for a block of text so that the localizers link to relevant local resources. 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. bad: image 3. good: image 4. good: this icon is recognized as the international symbol for information. it can stay this way. use localized screenshots if possible screenshots are important informative graphics, often times explaining how to achieve something in a desktop or web application. as such, they should be perceived as an essential part of the content and ...

Mozilla Quirks Mode Behavior
en adapted to match the behavior of other browser (bug 783213). prior to gecko 36, the quirk was also applied if another pseudo-class was used in the same selector, if a pseudo-element was used in the selector, or if it was part of a pseudo-class argument (bug 783213). quirks mode has document.all support (undetected). images (img elements) without alt attributes sometimes display placeholder icons in quirks mode. obsolete since gecko 2.0 html colors were parsed differently up to gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) (bug 121738). in quirks mode, the url fragment #top scrolls to the top of the page when there is no such anchor. obsolete since gecko 10.0 however, html5 requires this behavior, and starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7)...

Activity Monitor, Battery Status Menu and top
gs, cpu usage and idle wakeups for each running process. tests indicate that it is almost certainly using the same "energy impact" formula to compute the "average energy impact", using measurements from the past 8 hours of wake time (i.e. 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”. this is crude but prominent, and therefore worth understanding — even though it's not much use for profiling applications. when you open this menu for the first time in a while it says “collecting power usage information” for a few seconds, and if you have top open during that time ...

Gecko Profiler FAQ
eads (used in stylo). we have not attempted to register other threads with the profiler. bug 1341811 suggests hooking platform thread spawning functions but nobody has looked at it yet. profiling all nsthreads - how bad is the overhead? [mstange] i don’t know. i think julian seward has done some measurements on this, i think. [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)”. this will capture all of the threads that the gecko profiler has been hooked to. this mode is usually recommended when you want to find a thread you want to do more focused profiling on, so that you can find its name and then con...

TimerFirings logging
it is so...

Midas editor module security preferences
anging these preferences can leave your browser insecure, especially if you grant permission to untrusted sites. only change these settings as needed to try the demo above and to test your own add-on or firefox-internal code, and be sure to restore the default settings when you're done! changing the preferences in firefox quit firefox. if you have quick launch running (on windows, this is an icon in the toolbar), quit that too. find your firefox profile directory. open the user.js file from that directory in a text editor. if there's no user.js file, create one. add these lines to user.js: user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org"); user_pref("capability.policy.allowclipboard.cli...

PKCS11 Implement
ons but uses c_encrypt and c_decrypt instead if c_wrapkey and c_unwrapkey aren't implemented. installation you can install your module in any convenient location on the user's hard disk, but you must tell the user to type the module name and location in the cryptographic modules portion of the communicator security info window. to do so, the user should follow these steps: click the security icon near the top of any communicator window. in the security info window, click cryptographic modules. in the cryptographic modules frame, click add. in the create a new security module dialog box, add the security module name for your module and the full pathname for the security module file. to avoid requiring the user to type long pathnames, make sure your module is not buried too deeply. se...

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
ite is: placesutils.bookmarks this should save on the number of references to the service that are needed, and can help clean up interfaces that are already fairly cluttered. there are currently 11 services defined in here. 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. they can save you time calling the service and searching for a particular folder on your own. placesrootid ...

Querying Places
ery() var result = placesutils.history.executequery(query, options); // using the results by traversing a container // see : https://developer.mozilla.org/en/nsinavhistorycontainerresultnode var cont = result.root; cont.containeropen = true; for (var i = 0; i < cont.childcount; i ++) { var node = cont.getchild(i); // "node" attributes contains the information (e.g. 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
ductive, by minimizing some of the xpcom formality and adding some "modern" javascript ideas. we want to start with areas that will provide the most benefit. fuel has a fueliapplication interface that implements all the functions of extiapplication. the library has also been implemented in thunderbird ("steel") and in seamonkey ("smile"). ...

SMILE
velopers to be productive, by minimizing some of the xpcom formality and adding some "modern" javascript ideas. we want to start with areas that will provide the most benefit. smile has a smileiapplication interface that implements all the functions of extiapplication. the library has also been implemented in firefox ("fuel") and in thunderbird ("steel"). 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. the object needs to be accessed li...

STEEL
ad steel is the scriptable thunderbird easy extension library. it is a fuel-like set of interfaces to facilitate thunderbird extension development. currently, steel has an steeliapplication interface that implements all the functions of extiapplication. the library has also been implemented in firefox ("fuel") and in seamonkey ("smile"). 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. the object needs to be accessed like any other xpcom service: var application ...

extIApplication
attributes the following interfaces are available to all applications: attribute type description id readonly attribute astring the id of the application. name readonly attribute astring the name of the application. version readonly attribute astring the version number of the application. console readonly attribute exticonsole the console object for the application. extensions readonly attribute extiextensions the extensions object for the application. contains a list of all installed extensions. not available anymore on gecko 2.0 (see [1]), use getextensions() instead obsolete since gecko 2.0 prefs readonly attribute extipreferencebranch the preferences object for the application. ...

XPCOM array guide
array of strings. will your array store non-refcounted objects and be a fixed size? if so, just use a native c++ array unless you need the enumeration options on nstarray<t>. example: an array of error message static const char* pointers. are all the things you are storing interface pointers to instances of the same interface? if so, use nscomarray. example: a content node's list of nsicontent children. otherwise use nsiarray and make liberal use of queryelementat(). the point of nscomarray is that it's a template, and all the pointers in it must be pointers to the same type; it's nice to be able to use it because you get type-safety and don't have to spend time and code qiing (like you have to with nsiarray). array guidelines here are a few simple rules which will keep your c...

Creating the Component Code
ur browser that prevents users from leaving the current domain or a set of safe domains. once enabled, this "weblock" mode is password protected and persists until it is turned off by the password holder. it can be used to implement parental controlled browsing for children, or for targeted "kiosk browsing," where the content is restricted to a particular server. 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. web lock user interface most of the actual work in the weblock component is preparing the component itself, finding the xpcom interfaces the component needs to use, and hooking into existing functionality within the gecko browser. component regis...

Preface
associated with the step are discussed. create the generic module code for the component. use c++ macros, special string classes and smart pointers to optimize your code. define the functionality for the component; create an xpidl interface for that functionality; create the implementation code specific to the custom weblock component interface. finish implementing the weblock component: nsicontentpolicy, file i/o, locking, etc. creating the user interface for the weblock component. packaging weblock for distribution and installation. following along with the examples there are a couple of different ways to get xpcom onto your machine so you can begin to create components. if you already have a mozilla build or the source from mozilla 1.2 or later, then you can use the xpcom framew...

Using XPCOM Components
the whitelist. sites enumerator for the list of approved sites read in from the whitelist. the weblock component is software that implements all of these methods in the way described by the interface definition. 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. component use in mozilla so how are components obtained and used in mozilla? you've seen some enticing snippets of javascript in earlier sections of this chapter, but we haven't explained how xpcom makes components available in general. this section discusses practical component use in mozilla. it's divided into three subsections: one about actually finding all...

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
n the encoding standard. conversions from these encodings to utf-8 and utf-16 are provided by mozilla::encoding. additonally, on windows the are some rare cases (e.g. drag&drop) where it's necessary to call a system api with data encoded in the windows locale-dependent legacy encoding instead of utf-16. in those rare cases, use multibytetowidechar/widechartomultibyte from kernel32.dll. do not use iconv on *nix. we only support utf-8-encoded file paths on *nix, non-path gtk strings are always utf-8 and cocoa and java strings are always utf-16. when working with existing code, it is important to examine the current usage of the strings that you are manipulating, to determine the correct conversion mechanism. when writing new code, it can be confusing to know which storage class and encoding is...

IAccessibleImage
iaccessibleimage only needs to be implemented in certain situations. some examples are: the accessible name and description() are not enough to fully describe the image, for example when the accessible description() is used to define the behavior of an actionable image and the image itself conveys semantically significant information. ...

amIInstallTrigger
) starts a new installation of a set of add-ons. boolean install( in nsivariant aargs, in amiinstallcallback acallback optional ); parameters aargs the add-ons to install. this should be a js object, each property is the name of an add-on to be installed. 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. acallback optional a callback to call as each installation succeeds or fails. return value true if the installations were successfully started. installchrome starts installing a new add-on. this method is deprecated, please use install() in the future. boolean installchrome( in pruint32 atype, in astring aurl, in ast...

mozIColorAnalyzer
ri imageuri, in mozirepresentativecolorcallback callback); methods findrepresentativecolor() given an image uri, find the most representative color for that image based on the frequency of each color. preference is given to colors that are more interesting. it avoids the background color if it can be discerned and ignores sufficiently transparent colors. this is intended to be used on favicon images. larger images take longer to process, especially those with a larger number of unique colors. if imageuri points to an image that has more than 128^2 pixels, this method will fail for performance reasons before analyzing it. void findrepresentativecolor( in nsiuri imageuri, in mozirepresentativecolorcallback callback ); parameters imageuri a uri pointing to the image - ...

nsIAnnotationObserver
otationset() this method is called when an annotation value is set for a uri. it could be a new annotation, or it could be a new value for an existing annotation. void onpageannotationset( in nsiuri apage, in autf8string aname ); parameters apage the uri on which the annotation is to be set. aname the annotation name. see also places using the places annotation service using the places favicon service nsiannotationservice ...

nsIAppStartup
th libxul builds. firstpaint time the first paint occurred. note: only available with libxul builds. sessionrestored time session restore finished. example this example logs startup time information to the console. ...

nsIAutoCompleteItem
xpfe/components/autocomplete/public/nsiautocompleteresults.idlscriptable please add a summary to this article. 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. comment wstring an extra comment that will be displayed next to the value but that will not be part of the value itself. param nsisupports parameter use by the search engine. value astring the result value using astring to avoid excess allocations. ...

nsIBlocklistPrompt
rompt is then responsible for soft-blocking any addons that need to be afterwards. void prompt( [array, size_is(acount)] in nsivariant aaddons, in pruint32 acount optional ); parameters aaddons an array of addons and plugins that are blocked. 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
nitial document uri load (for example link click). load_targeted 20 set (for example by the uriloader) to indicate whether or not the end consumer for this load has been determined. load_call_content_sniffers 21 if this flag is set, the channel should call the content sniffers as described in netwerk/build/nsnetcid.h about ns_content_sniffer_category. see nsicontentsniffer [en-us] note: channels may ignore this flag; however, new channel implementations should only do so with good reason. load_classify_uri 22 this flag tells the channel to use uri classifier service to check the uri when opening the channel. methods asyncopen() asynchronously open this channel. data is fed to the specified stream listener as it becomes availa...

nsIChannelPolicy
(firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface exists to allow the content policy mechanism to function properly during channel redirects. channels can be created with this interface placed in the property bag and upon redirect, the interface can be transferred from the old channel to the new channel. 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. ...

nsIChromeFrameMessageManager
es available; otherwise, the script will only be loaded if the frame is already available. ...

nsIClassInfo
nsiservicemanager. threadsafe 1 << 1 the class may be accessed by any thread. main_thread_only 1 << 2 the class may only be accessed by the main application thread. dom_object 1 << 3 the class is a dom object. plugin_object 1 << 4 the class is a plugin object. content_node 1 << 6 specifies that this class implements nsicontent. note: this flag is private and is for use by the mozilla codebase only. reserved 1 << 31 the high order bit is reserved for consumers of these flags. no implementor of this interface should ever return flags with this bit set. eager_classinfo 1 << 5 this flag is designed for use with nsgenericfactory and can be set in nsmodulecomponentinfo::mflags. it has no...

nsICookieService
cvs blame will tell you why it is here. it remains until we can find a better home for it. methods getcookiestring() get the complete cookie string associated with the uri. string getcookiestring( in nsiuri auri, in nsichannel achannel ); parameters auri the uri of the document for which cookies...

nsIDOMMozNetworkStatsManager
the start time. data a date object representing the date of data. networkstatsgetoptions networkstatsgetoptions is a dictionary object used to filter a network statistics request made when calling getsamples(). it contains the following fields: appmanifesturl a string used to filter network stats by app. servicetype a string used to filter network stats by system service. browsingtrafficonly a boolean set to filter network stats by browsing traffic. if true, return only browsing traffic, which is generated from the mozbrowser iframe element within an app. if false or not set, the total traffic, which is generated from both the mozapp and mozbrowser iframe elements, is returned. for example, this object might be { appmanifesturl : manifesturl }. ...

nsIDOMWindowInternal
. closed boolean readonly: this property indicates whether the referenced window is closed or not. crypto nsidomcrypto readonly: returns the browser crypto object, which can then be used to manipulate various browser security features. pkcs11 nsidompkcs11 obsolete: this property is not supported in newer versions of firefox. controllers nsicontrollers readonly: returns the xul controllers of the chrome window. opener nsidomwindowinternal returns a reference to the window that opened this current window. status domstring sets the text in the status bar at the bottom of the browser or returns the previously set text. defaultstatus domstring gets/sets the status bar text for the given windo...

nsIDOMXULElement
er read only. retrives the element's template builder, if it has a template. classname domstring gets/sets the value of the element's class attribute. collapsed boolean true if the element's collapsed attribute is the string "true", otherwise false. removes the attribute if you set it to false. contextmenu domstring gets/sets the value of the element's contextmenu attribute. controllers nsicontrollers read only. returns an nsicontrollers object that additional controllers may be appended to so as to provide focus-specific actions for commands. database nsirdfcompositedatasource read only. returns the template builder's database, if it is an rdf template. datasources domstring gets/sets the value of the element's datasources attribute. dir domstring gets/sets the value of the elem...

nsIFrameLoader
content/base/public/nsiframeloader.idlscriptable handles loading a frame. 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. method overview void activateframeevent(in astring atype, in boolean capture); void activateremoteframe(); void destroy(); void loadframe(); void loaduri(in nsiuri auri); void sendcrossprocesskeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); void sendcross...

nsIMacDockSupport
a.org/widget/macdocksupport;1"] .getservice(components.interfaces.nsimacdocksupport); see working with the mac os x dock for details and examples. 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. this can be used, for example, to display the number of unread messages in an email client. dockmenu nsistandalonemenu the menu to display when the user right-clicks on the application's icon in the dock. methods activateapplication() activates the application, making it the frontmost application. the application should call this to activate itself when one of its dock menu...

nsIMarkupDocumentViewer
rue, plugins are allowed within the doc shell. default = true. obsolete since gecko 1.8 authorstyledisabled boolean disable entire author style level (including html presentation hints) bidicharacterset octet whether to force the user's character set 1 - use the document character set 2 - use the character set chosen by the user. obsolete since gecko 6.0 bidicontrolstextmode octet the order of bidirectional text in form controls. 1 - logical 2 - visual 3 - like the containing document. obsolete since gecko 2.0 bidinumeral octet the type of numerals to display. 1 - depending on context, default is arabic numerals 2 - depending on context, default is hindi numerals 3 - arabic numerals 4 - hindi numerals. bidioptions pruint3...

nsIMessageListener
three message-sending functions in the message manager framework: broadcastasyncmessage sendasyncmessage sendsyncmessage. the received message is an object with the following properties: target the target of the message. either an element owning the message manager, or the message manager itself if no element owns it. 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. name the message name. this is the first argument passed into the message-sending function. sync true if the message was sent using sendsyncmessage, false otherwise. data a structured clone of the message payload: the second argument passed...

nsINavBookmarkObserver
ociated with the item. aparentguid the unique id associated with the item's parent. notes this table indicates what anewvalue should be depending on property specified by aproperty: property string value "cleartime" empty string; this property means the history was deleted, so there's no last visit date. "title" the new title for the item "favicon" the "moz-anno" url for the new favicon image. "uri" the new uri for the item. "tags" empty string; this property indicates that the set of tags for the item have changed. "dateadded" the prtime at which the item was first added to the database. "lastmodified" the prtime at which the item was last modified. onitemmoved() this method notifie...

nsIPrincipal
string the fingerprint id of this principal's certificate. throws if there is no certificate associated with this principal. read only. obsolete since gecko 1.8 commonname string the common name for the certificate. this pertains to the certificate authority organization. throws if there is no certificate associated with this principal. obsolete since gecko 1.8 csp nsicontentsecuritypolicy a content security policy associated with this principal. native code only! domain nsiuri the domain uri to which this principal pertains. this is congruent with htmldocument.domain, and may be null. setting this has no effect on the uri. native code only! fingerprint autf8string the fingerprint id of this principal's certificate. throws if there...

nsISearchEngine
butes attribute type description alias astring an optional shortcut alias for the engine. when non-null, this is a unique identifier. description astring a text description describing the engine. read only. hidden boolean whether the engine should be hidden from the user. iconuri nsiuri a nsiuri corresponding to the engine's icon, stored locally. may be null. read only. name astring the display name of the search engine. this is a unique identifier. read only. searchform astring a url string pointing to the engine's search form. read only. type long the search engine type. r...

nsISelectionImageService
layout/base/nsiselectionimageservice.idlnot scriptable please add a summary to this article. 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. void reset(); parameters none. ...

nsITaggingService
geturisfortag(in astring atag); nsivariant gettagsforuri(in nsiuri auri, [optional] out unsigned long length, [retval, array, size_is(length)] out wstring atags); attributes attribute type description alltags nsivariant retrieves all tags used to tag uris in the data-base (sorted by name). tagcontainericonspec autf8string retrieves the url spec for the tag container icon methods taguri() this method tags a uri with the given set of tags. current tags set for the url persist. tags in atags which are already set for the given uri are ignored. void taguri( in nsiuri auri, in nsivariant atags ); parameters auri the url to tag. atags array of ta...

nsITaskbarPreviewButton
boolean if true, the button is disabled. this is not the same as visible, which indicates whether or not the button should be displayed at all. dismissonclick boolean if true, the array of previews should be dismissed when the button is clicked. this is false by default. hasborder boolean if true, the taskbar should draw a border around this button's image. this is true by default. image imgicontainer the icon displayed in the button. this is null by default. tooltip domstring the string displayed in the button's tooltip. by default, this is an empty string. visible boolean if true, the button is displayed. if false, the button doesn't participate in the layout of buttons underneath the preview. this is false by default. see also nsitaskbarpreview nsitaskbarpreviewcontroller nsit...

nsITaskbarTabPreview
ows. you can't directly instantiate this interface; instead, call the nsiwintaskbar.createtaskbartabpreview(). 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. this is null by default. title domstring the title displayed above the thumbnail. by default, this is an empty string. methods violates the xpcom interface guidelines ensureregistration() used internally to ensure that the taskbar knows about this preview. if a preview is not registered, the api...

nsITaskbarWindowPreview
bar.gettaskbarwindowpreview() to get the taskbar preview for a specific window. window preview behavior by default, windows implements much of the behavior for applications in a standard way. this interface's primary purpose is to let gecko applications take control over parts of the preview; however, certain parts of the preview are not controlled using this interface. for example, the title and icon for each preview always match the title and icon of the corresponding window. if the enablecustomdrawing attribute is true, the controller you implement will start receiving calls to its nsitaskbarpreviewcontroller.drawpreview() and nsitaskbarpreviewcontroller.drawthumbnail() methods, as well as reads of its width, height, and thumbnailaccessratio attributes. by default, however, windows handles ...

nsITreeView
e treechildren element. see getrowproperties() for an example. void getcolumnproperties( in nsitreecolumn col, in nsisupportsarray properties ); parameters col the current column. properties an array of the column's current properties. obsolete since gecko 22 return value a string of space-separated property names. getimagesrc() the image path for a given cell. for defining an icon for a cell. if the empty string is returned, the ::moz-tree-image pseudoelement will be used. astring getimagesrc( in long row, in nsitreecolumn col ); parameters row the index of the row. col the index of the column. return value the image path of the cell. getlevel() the level is an integer value that represents the level of indentation. it is multiplied by the width specified...

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

nsIXMLHttpRequest
_cache | ci.nsirequest.inhibit_persistent_caching; xhr.responsetype = "arraybuffer"; //dont set it, so it returns string, you dont want arraybuffer. ...

nsPIPromptService
by: the contract id isn't defined. this interface defines the meaning of each indexes of getint(), setint(), getstring() and setstring() of the nsidialogparamblock interface but they are defined on in c++. the indexes for getstring() and setstring() are: emsg the value is 0. this is the message text of the dialog. echeckboxmsg the value is 1. this is the label text of a checkbox on the dialog. eiconclass the value is 2. this is the class attribute value of the icon image. etitlemessage the value is 3. this is the heading of the message. eeditfield1msg the value is 4. this is the label text of the first text field on the dialog. eeditfield2msg the value is 5. this is the label text of the second text field on the dialog. eeditfield1value the value is 6. this is the default value of the first ...

Setting HTTP request headers
verlay. if you want to support gecko2 (firefox4) you need to register your javascript component as described here: https://developer.mozilla.org/en/xpcom/xpcom_changes_in_gecko_2.0#javascript_components. ...

XPCOM category image-sniffing-services
image types. however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed. in firefox 3, a new xpcom category was added in bug 391667 to allow "third-party" xpcom components to identify images based on their content. 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. note: this category was removed. see bug 813787 - remove support for image-sniffing-services. ...

Mozilla technologies
prietary and could not be released open source. starting with mozilla 1.9, it was phased out in favor of sqlite, a more widely-supported file format.placesplaces is the bookmarks and history management system introduced in firefox 3. it offers increased flexibility and complex querying to make handling the places the user goes easier and more convenient. it also includes new features including favicon storage and the ability to annotate pages with arbitrary information. it also introduces new user interfaces for managing all this information; see places on the mozilla wiki.preferences apithe publicity stream apithe publicity stream is a mozilla-hosted activity stream generated by a user's application usage. the publicity stream is provided as a central place for applications to publicize appli...

nsIMsgCloudFileProvider
acstring readonly: the type is a unique string identifier which can be used by interface elements for styling. as such, the type should be an alphanumpheric string with no spaces. displayname acstring readonly: used for displaying the service name in the user interface. serviceurl acstring readonly: a link to the homepage of the service, if applicable. iconclass acstring readonly: a chrome url for an icon to be used for representing the service. accountkey acstring readonly: the unique identifier for the account associated with an instance of an nsimsgcloudfileprovider. settingsurl acstring readonly: a chrome url for an xhtml page displayed in the account setup dialog window, used for displaying and setting provid...

Thunderbird API documentation
: this content is for older versions of thunderbird. much of it may no longer be relevant. see developer.thunderbird.net for newer information. these pages have been moved from mozilla.org, and may or may not be relevant. ...

Thunderbird Configuration Files
create it before you can start adding your preferences. in almost all cases, edits made using the user.js can be done via the config editor, which is the recommended method. windows users: if you know how to create a file, just skip this section. before you can create the file, you must make sure that you can see the file type extensions in windows. start explorer (just click on the my computer icon on your desktop) and select tools > folder options. click the view tab and uncheck the hide extensions for known file types option. now, go to your profile folder and select file > new > text document. the default name new text document.txt should be displayed. change the name to user.js (click yes on the file type warning that appears). linux users: use your own preferred method to create user.

Activity Manager examples
= components.classes["@mozilla.org/activity-manager;1"].getservice(nsiam); let process = components.classes["@mozilla.org/activity-process;1"].createinstance(nsiap); // assuming folder is an instance of nsimsgfolder interface // localization is omitted, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent = 50; process.setprogress(percent, "junk processing 25 of 50 messages", 25, 50); // step 3: removing the process and adding an event using pro...

Add Toolbar Button
overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...

Using js-ctypes
vel = 1; var kcfusernotificationcautionalertlevel = 2; var kcfusernotificationplainalertlevel = 3; // declare functions /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cfusernotificationref/index.html#//apple_ref/c/func/cfusernotificationdisplaynotice * sint32 cfusernotificationdisplaynotice ( * cftimeinterval timeout, * cfoptionflags flags, * cfurlref iconurl, * cfurlref soundurl, * cfurlref localizationurl, * cfstringref alertheader, * cfstringref alertmessage, * cfstringref defaultbuttontitle * ); */ var cfusernotificationdisplaynotice = libcf.declare("cfusernotificationdisplaynotice", ctypes.default_abi, sint32, // return cftimeinterval, // timeout cfoptionflags, // flags cfurlref, // iconurl cfurlref, // soundurl ...

Accessibility Inspector - Firefox Developer Tools
isted. value — the value of the item. this can mean different things depending on the type of the item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the url in the corresponding <a> element's href. domnode — the type of dom node that the item in the accessibility tree represents. 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. description — any further description provided on the element, usually by the content of a title attribute. keyboardshortcut — any keyboard shortcut that is available to activate the element, as specified in an accesskey attribute. note that this work...

Inspecting web app manifests - Firefox Developer Tools
inspecting your manifest if your manifest is deployed successfully, you should end up with a display like the following on the manifest view: from here, you can inspect all the information in the manifest in an easy-to-digest way, making sure that it is all correct. it provides a link to the manifest file at the top which when clicked on brings up the json in a new tab. it also loads all the icon files into the view, so you can see the relative size of them all, and any other information associated with them. list of manifest members we won't provide an exhaustive list of all the members that can appear in a web manifest here; you can already find that in our web manifest documentation. ...

Browser Console - Firefox Developer Tools
get: widget = require("sdk/widget").widget({ id: "an-error-happened", label: "error!", width: 40, content: "error!", onclick: logerror }); function logerror() { console.error("something went wrong!"); } if you build this as an xpi file, then open the browser console, then open the xpi file in firefox and install it, you'll see a widget labeled "error!" in the add-on bar: click the icon. you'll see output like this in the browser console: for add-on sdk-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "filter output" search box. by default, only error messages are logged to the console, although you can change this in the browser's preferences. browser console command line ...

DOM Property Viewer - Firefox Developer Tools
ser interface dom tree the different properties of the dom are displayed as an expandable tree. the left-hand side shows the property's name, and the right-hand side shows its value. up to three properties of an object and items of an array are displayed. if a property has more elements than this, you'll see a "more..." annotation, and will need to click the property to see all elements. a lock icon indicates that a property is not writable. refreshing the display if the dom changes you can hit the refresh button to update the display: filtering there is a search box within the toolbar: this filters the list to show only items which match the search term. items match the search term if their name contains the search term. matching is case-sensitive. ...

Break on DOM mutation - Firefox Developer Tools
t.classlist.add(), or setting element.id. node removal execution pauses if the element the option is set on is removed. examples for when this breakpoint is triggered are calling element.remove() or node.removechild() on its parent node. once you set the breakpoint, go to the debugger. you can see the breakpoint listed in the right-most panel under dom mutation breakpoints. click on the icon following the node name to go back to the page inspector with the node selected. when you execute the code, the debugger will pause execution when the dom mutation occurs. in the following example, the selected node (the unordered list) is modified by adding a new child node. the panel on the right shows that execution is "paused on dom mutation" and you, as with any other breakpoint, you can...

Disable breakpoints - Firefox Developer Tools
to disable a single breakpoint, uncheck the checkbox next to it in the breakpoints list. 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. for example: ...

Examine, modify, and watch variables - Firefox Developer Tools
on does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. at that point, a box showing your active watch expressions and their current values will appear: you can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. you can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time. ...

Ignore a source - Firefox Developer Tools
you are forced to step through its stack frames in order to reach your own code. however, you can tell the debugger to ignore the details of selected sources. you can enable or disable ignoring a source file in a couple of ways: in the source list pane, right-click the filename and choose ignore source (or unignore source). if the source file is displayed in the source pane, click the "eye" icon at the bottom. when a source file is ignored: any breakpoints it may have defined are disabled. when “pause on exceptions” is enabled in the debugger settings, the debugger won’t pause when an exception is thrown in the ignored source; instead it waits until (and if) the stack unwinds to a frame in a source that isn’t ignored. the debugger skips through ignored sources when stepp...

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. the debugger formats the source and displays it as a new file with a name like: "{ } [original-name]". 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". note: if you want to prettify some inline javascript code, just double click the code in the inspector pane. ...

Set watch expressions - Firefox Developer Tools
to watch into the text field. the debugger will save the expression and watch it as you step through your code. when the debugger reaches a breakpoint, it will display your watch expressions variables: you can step through your code, watching the value of the expression as it changes. each time it does, the box will flash briefly yellow. you can remove a watch expression by clicking the "x" icon next to it, and you can have more than one watch expression at a time. ...

Set a breakpoint - Firefox Developer Tools
oint using the context menu (see above), or by: clicking on the line number for the line you want to break at in the source pane. highlighting the line you want to break at in the source pane and pressing ctrl + b (windows/linux) or cmd + b (macos). the line number is highlighted in blue: in addition, if the line contains multiple function calls, each one will be given a small blue arrow icon to the left of it. these are called column breakpoints, and allow you to set the breakpoint to happen exactly on any one of the function calls in the line (or multiple calls), by clicking on each relevant one. conditional breakpoints a conditional breakpoint is one where the code will pause execution when it is reached, only if a certain condition is met, such a variable having a certain value ...

Deprecated tools - Firefox Developer Tools
d as of firefox 72 (bug 1519103). description scratchpad provided an environment for experimenting with javascript code. you can write, run, and examine the result of code that interacts with the web page. alternatives in firefox 71+, you can write multi-line javascript code in the web console editor mode, making it similar to the scratchpad. the editor mode can be triggered clicking on the icon on the right of the console input, or with ctrl + b (cmd + b on macos) when in editor mode, the enter key adds a new line in the input, and you can evaluate the expression using ctrl + enter (cmd + enter on macos). when evaluating, the input isn't cleared, which makes it possible to quickly iterrate over a snippet of code. the results are displayed in the console output, to the right of the ...

Eyedropper - Firefox Developer Tools
its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change. clicking copies the current color value to the clipboard. changing a color value in the rules view color values appearing in the inspector's rules view have color samples next to them: clicking the sample shows a color picker popup. from firefox 31, the popup contains an eyedropper icon: click this icon to activate the eyedropper. now, when you click the eyedropper, the color in the rules view is set to the color you selected. keyboard shortcuts command windows macos linux select the current color enter return enter dismiss the eyedropper esc esc esc move by 1 pixel arrow keys arrow keys arrow keys ...

JSON viewer - Firefox Developer Tools
erence to true. from firefox 53 onwards, the json viewer is also enabled by default in beta and the normal release version of firefox. firefox includes a json viewer. if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting. arrays and objects are shown collapsed, and you can expand them using the "+" icons. the json viewer provides a search box that you can use to filter the json. you can also view the raw json and pretty-print it. finally, if the document was the result of a network request, the viewer displays the request and response headers. ...

Aggregate view - Firefox Developer Tools
umn shows you the number of bytes occupied by objects in each category, and that number as a percentage of the whole heap size for that tab. the screenshots in this section are taken from a snapshot of the monster example page. for example, in the screenshot above, you can see that: there are four array objects that account for 15% of the total heap. next to the type's name, there's an icon that contains three stars arranged in a triangle: click this to see every instance of that type. for example, the entry for array tells us that there are four array objects in the snapshot. if we click the star-triangle, we'll see all four array instances: for each instance, you can see the retained size and shallow size of that instance. in this case, you can see that the first three array...

Migrating from Firebug - Firefox Developer Tools
ference is that in the devtools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to hide the mozilla specific styles, therefore there is an input field allowing to filter the properties. inspect events events assigned to an element are displayed in the events side panel in firebug. in the devtools they are shown when clicking the small 'ev' icon besides an element within the node view. both tools allow to display wrapped event listeners (e.g. listeners wrapped in jquery functions). to improve the ui of the devtools, there is also a request to add an events side panel to them like the one in firebug (see bug 1226640). stop script execution on dom mutation in firebug you can break on dom mutations, that means that when an element is chan...

Performance Analysis - Firefox Developer Tools
the network monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site. 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. this simulates the first time a user visits your site, and subsequent visits. it displays the results for each run side by side, or vertically if the browser window is narrow: the results for each run are summarised in a table and a pie chart. the...

Network monitor recording - Firefox Developer Tools
a stable view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. the pause button allows you to look at a certain snapshot. the button can be found at the far left of the main network monitor toolbar, and looks like a typical pause button — . you can see it here in context: once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again. network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network request details performance analysis throttling ...

Network Monitor - Firefox Developer Tools
kes (for example, when it loads a page, or due to xmlhttprequests), how long each request takes, and details of each request. opening the network monitor there are a few different ways to open the network monitor: press ctrl + shift + e ( command + option + e on a mac). select "network" from the web developer menu, (which is a submenu of the tools menu on os x and linux). click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "network". the network monitor will appear at the bottom of the browser window. when it first opens, the network monitor does not show request information. the just opened tool looks like this: either action causes the network monitor to begin monitoring network activity. once the tool is monitoring network requests...

Edit CSS filters - Firefox Developer Tools
the effect. the change will be apparent as soon as youpress enter. saving filter presets from firefox 42 onwards, you can also add filters to a list of presets. the list of presets will be preserved between browser sessions, making it easy to apply the settings in the future. you can save the current filter to the preset list: click to edit the filter, display the preset list by clicking the icon as shown below. type a name for your preset, and then click the plus sign to add it to the list of presets. you can then apply saved filters to new elements. to apply one of your saved presets, click its name in the list. ...

Edit fonts - Firefox Developer Tools
r system. each font listed in this section shows you: the font-family identifier and full name of the font. the url to the font file in the case of web fonts not available on your system, or "system" in the case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system). you can copy the url to the font file by clicking on the icon to the right of the url. the @font-face descriptor that loads the font into the page, in the case of web fonts. the descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet. a text sample, to give you an idea of what the font looks like when rendered. the default text for the sample is "abc" but the preview text can be edited by clicking on the input field ...

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
nt. when you hover over a flex container or flex item, the tooltip includes the appropriate information. this header is a flex container: each navbar link is a flex item: the nav element within the header is both a flex item and a flex container which holds the navigation links: in the css pane in the css pane's rules view, any instance of a display: flex declaration gets a small flexbox icon next to the word flex. clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item: the overlay will still be shown when you select other elements from the inspector panel, so you can edit related css properties and see how the flex items are affected by your changes. the layout flex contain...

Examine Event Listeners - Firefox Developer Tools
firefox can display: standard dom events jquery events react eve...

Select an element - Firefox Developer Tools
h the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page. click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard. with the node picker to select an element in the page itself, activate the "node picker" by clicking its icon: (also called the select element icon). after that, as you move the mouse around the page, the element under the mouse is highlighted. click the element to select it: starting in firefox 52, if you shift + click the element, then it is selected but the picker stays active. this lets you see the rules for the element in the css pane, but conveniently select another element in the page. ...

Select and highlight elements - Firefox Developer Tools
h the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page. click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard. with the node picker to select an element in the page itself, activate the "node picker" by clicking its icon: (also called the select element icon). after that, as you move the mouse around the page, the element under the mouse is highlighted. click the element to select it: ...

Animation inspector (Firefox 41 and 42) - Firefox Developer Tools
nimations" page. ...

UI Tour - Firefox Developer Tools
computed view the computed view shows you the complete computed css for the selected element (the computed values are the same as what getcomputedstyle would return.): compatibility view starting with firefox developer edition version 77, the compatibility view shows css compability issues, if any, for properties applied to the selected element, and for the current page as a whole. it shows icons for the browsers that do support the properties, and notes properties that are experimental or deprecated. click the name of the property to open the reference article for that property on mdn web docs. the "browser compatibility" section of the article gives details of browser support for the property. in the all issues section, click the name of the element that uses the property to sele...