Search completed in 1.13 seconds.
5226 results for "list":
Your results are loading. Please wait...
MediaQueryList.addListener() - Web APIs
the addlistener() method of the mediaquerylist interface adds a listener to the mediaquerylistener that will run a custom callback function in response to the media query status changing.
... this is basically an alias for eventtarget.addeventlistener(), for backwards compatibility purposes.
... older browsers should use addlistener instead of addeventlistener since mediaquerylist only inherits from eventtarget in newer browsers.
...And 4 more matches
MediaQueryListListener - Web APIs
the mediaquerylist.addlistener() callback is now a plain function and called with the standard mediaquerylistevent object.
... a mediaquerylist object maintains a list of media queries on a document, and handles sending notifications to listeners when the media queries on the document change.
... a mediaquerylistlistener is a callback function that gets invoked with a single argument, the mediaquerylist for which the evaluated result changed.
...And 3 more matches
MediaQueryList.removeListener() - Web APIs
the removelistener() method of the mediaquerylist interface removes a listener from the mediaquerylistener.
... this is basically an alias for eventtarget.removeeventlistener(), for backwards compatibility purposes — in older browsers you could use removeeventlistener() instead.
... syntax mediaquerylist.removelistener(func) parameters func a function or function reference representing the callback function you want to remove.
...And 2 more matches
SpeechGrammarList.SpeechGrammarList() - Web APIs
the speechgrammarlist() constructor creates a new speechgrammarlist object instance.
... syntax var mygrammarlist = new speechgrammarlist(); parameters none.
... examples in our simple speech color changer example, we create a new speechrecognition object instance using the speechrecognition() constructor, create a new speechgrammarlist, add our grammar string to it using the speechgrammarlist.addfromstring method, and set it to be the grammar that will be recognised by the speechrecognition instance using the speechrecognition.grammars property.
...oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; specifications specification status comment web speech apithe definition of 'speechgrammarlist' in that specification.
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
WebHTMLElementdatalist
the html <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
... implicit aria role listbox permitted aria roles no role permitted dom interface htmldatalistelement attributes this element has no other attributes than the global attributes, common to all elements.
... examples <label for="mybrowser">choose a browser from this list:</label> <input list="browsers" id="mybrowser" name="mybrowser" /> <datalist id="browsers"> <option value="chrome"> <option value="firefox"> <option value="internet explorer"> <option value="opera"> <option value="safari"> <option value="microsoft edge"> </datalist> result specifications specification status comment html living standardthe definition of '<datalist>' in that specification.
... living standard html5the definition of '<datalist>' in that specification.
MediaQueryListEvent.MediaQueryListEvent() - Web APIs
the mediaquerylistevent constructor creates a new mediaquerylistevent instance.
... syntax var mymqlevent = new mediaquerylistevent(init); parameters init an init object that defines features of the new object instance.
... examples var media = '(max-width: 600px)'; var matches = true; var mymediaquerylistevent = new mediaquerylistevent({media, matches}); specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistevent()' in that specification.
TrackDefaultList.TrackDefaultList() - Web APIs
the trackdefaultlist() constructor of the trackdefaultlist interface constructs and returns a new trackdefaultlist object.
... syntax var trackdefaultlist = new trackdefaultlist(trackdefaults); parameters trackdefaults a sequence (array) of trackdefault objects.
EventTarget.addEventListener() - Web APIs
the eventtarget method addeventlistener() sets up a function that will be called whenever the specified event is delivered to the target.
... addeventlistener() works by adding a function or an object that implements eventlistener to the list of event listeners for the specified event type on the eventtarget on which it's called.
... syntax target.addeventlistener(type, listener [, options]); target.addeventlistener(type, listener [, usecapture]); target.addeventlistener(type, listener [, usecapture, wantsuntrusted ]); // gecko/mozilla only parameters type a case-sensitive string representing the event type to listen for.
...And 86 more matches
ARIA: listbox role - Accessibility
the listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.
... description the listbox role is used to identify an element that creates a list from which a user may select one or more static items, similar to the html <select> element.
... unlike <select>, a listbox can contain images.
...And 47 more matches
Styling lists - Learn web development
previous overview: styling text next lists behave like any other text for the most part, but there are some css properties specific to lists that you need to know about, and some best practices to consider.
... objective: to become familiar with the best practices and properties related to styling lists.
... a simple list example to begin with, let's look at a simple list example.
...And 43 more matches
nsIJumpListBuilder
widget/public/nsijumplistbuilder.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) jump lists are built and then applied.
... modifying an applied jump list is not permitted.
...And 37 more matches
SVGTransformList - Web APIs
svg transform list interface the svgtransformlist defines a list of svgtransform objects.
... an svgtransformlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... note: starting in gecko 9.0,the svgtransformlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear() svgtransform initialize(in svgtransform newitem) svgtransform getitem(in unsigned long index) svgtransform insertitembefore(in svgtransform newitem, in unsigned long index) svgtransform replaceitem(in svgtransform newitem, in unsigned long index) svgtransform removeitem(in unsigned long index) svgtransform appenditem(in svgtransform newitem) svgtransform createsvgtransformfrommatrix(in svgmatrix) svgtransform consolidate() properties readonly unsigned long numberofitems readonly unsigned long length ...
...And 36 more matches
List Controls - Archive of obsolete content
« previousnext » xul has a number of types of elements for creating list boxes.
... list boxes a list box is used to display a number of items in a list.
... the user may select an item from the list.
...And 32 more matches
Element.classList - Web APIs
WebAPIElementclassList
the element.classlist is a read-only property that returns a live domtokenlist collection of the class attributes of the element.
... this can then be used to manipulate the class list.
... using classlist is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.classname.
...And 29 more matches
listbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of items where one or more of the items may be selected.
... a listbox may contain multiple columns.
... there are numerous methods which allow the items in the listbox to be retrieved and modified.
...And 27 more matches
SVGLengthList - Web APIs
svg length list interface the svglengthlist defines a list of svglength objects.
... an svglengthlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... note: starting in gecko 5.0,the svglengthlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear() svglength initialize(in svglength newitem) svglength getitem(in unsigned long index) svglength insertitembefore(in svglength newitem, in unsigned long index) svglength replaceitem(in svglength newitem, in unsigned long index) svglength removeitem(in unsigned long index) svglength appenditem(in svglength newitem) properties readonly unsigned long numberofitems readonly unsigned long length normative document svg 1.1 (2nd edition) properties name type description numberofitems ...
...And 27 more matches
SVGNumberList - Web APIs
svg number list interface the svgnumberlist defines a list of svgnumber objects.
... an svgnumberlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... note: starting in gecko 5.0,the svgnumberlist dom interface is now indexable and can be accessed like arrays.
...And 27 more matches
AudioListener - Web APIs
the audiolistener interface represents the position and orientation of the unique person listening to the audio scene, and is used in audio spatialization.
... all pannernodes spatialize in relation to the audiolistener stored in the baseaudiocontext.listener attribute.
... it is important to note that there is only one listener per context and that it isn't an audionode.
...And 26 more matches
SVGPointList - Web APIs
svg point list interface the svgpointlist defines a list of svgpoint objects.
... an svgpointlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
...ies readonly unsigned long numberofitems normative document svg 1.1 (2nd edition) properties name type description numberofitems unsigned long the number of items in the list.
...And 25 more matches
SVGPathSegList - Web APIs
svg path segment list interface this interface defines a list of svgpathseg objects.
... readonly unsigned long numberofitems normative document svg 1.1 (2nd edition) properties name type description numberofitemsread only unsigned long the number of items in the list.
... methods clear() void clears all existing current items from the list, with the result being an empty list.
...And 24 more matches
SVGStringList - Web APIs
svg string list interface the svgstringlist defines a list of domstring objects.
... an svgstringlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
...mstring removeitem(in unsigned long index) domstring appenditem(in domstring newitem) properties readonly unsigned long numberofitems readonly unsigned long length normative document svg 1.1 (2nd edition) properties name type description numberofitems unsigned long the number of items in the list.
...And 24 more matches
Manipulating Lists - Archive of obsolete content
« previousnext » the xul listbox provides a number of specialized methods.
... list manipulation the listbox element provides numerous methods to retrieve and manipulate its items.
... although listboxes may be manipulated using the standard dom functions as well, it is recommended that the specialized listbox functions be used instead when possible.
...And 23 more matches
nsIEventListenerService
content/events/public/nsieventlistenerservice.idlscriptable a service that can be used to get a list of listeners observing events; this is primarily useful for debuggers.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) implemented by: @mozilla.org/eventlistenerservice;1.
... to create an instance, use: var eventlistenerservice = components.classes["@mozilla.org/eventlistenerservice;1"] .getservice(components.interfaces.nsieventlistenerservice); universalxpconnect privileges are required to use this service.
...And 22 more matches
nsIMessageListenerManager
dom/base/nsimessagemanager.idlscriptable this interface enables clients to listen for messages sent using the nsimessagebroadcaster, nsimessagesender, or nsisyncmessagesender interfaces.
...to access this service, use: var globalmm = components.classes["@mozilla.org/globalmessagemanager;1"] .getservice(components.interfaces.nsimessagelistenermanager); method overview void addmessagelistener(in astring messagename, in nsimessagelistener listener, [optional] in boolean listenwhenclosed) void removemessagelistener(in astring messagename, in nsimessagelistener listener); void addweakmessagelistener(in astring messagename, ...
... in nsimessagelistener listener); void removeweakmessagelistener(in astring messagename, in nsimessagelistener listener); methods addmessagelistener() register listener to receive messagename.
...And 22 more matches
EventTarget.removeEventListener() - Web APIs
the eventtarget.removeeventlistener() method removes from the eventtarget an event listener previously registered with eventtarget.addeventlistener().
... the event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see matching event listeners for removal syntax target.removeeventlistener(type, listener[, options]); target.removeeventlistener(type, listener[, usecapture]); parameters type a string which specifies the type of event for which to remove an event listener.
... listener the eventlistener function of the event handler to remove from the event target.
...And 22 more matches
menulist - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be used for drop-down choice lists.
... the user may select one of the elements displayed in the menulist.
... the currently selected choice is displayed on the menulist element.
...And 21 more matches
Consistent list indentation - CSS: Cascading Style Sheets
one of the most common style changes made to lists is a change in the indentation distance—that is, how far the list items are pushed over to the right.
...for example, if you declare that lists have no left margin, they move over in internet explorer, but sit stubbornly in place in gecko-based browsers.this article will help you understand the problems that can occur and how to avoid them.
... in order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction.
...And 20 more matches
richlistbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of listitems (richlistitems), similar to a listbox, but is designed to be used when the items do not contain simple text content.
... note: in versions of firefox prior to firefox 3, rich list boxes support only single selection.
... firefox 3 introduced multiple selection to rich list boxes.
...And 19 more matches
Starting our Svelte Todo list app - Learn web development
previous overview: client-side javascript frameworks next now that we have a basic understanding of how things work in svelte, we can start building our example app: a todo list.
... in this article we will first have a look at the desired functionality of our app, then we'll create a todos.svelte component and put static markup and styles in place, leaving everything ready to start developing our to-do list app features, which we'll go on to in subsequent articles.
... repl to code along with us using the repl, start at https://svelte.dev/repl/b7b831ea3a354d3789cefbc31e2ca495?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui our user will be able to: browse their tasks.
...And 18 more matches
NodeList - Web APIs
WebAPINodeList
nodelist objects are collections of nodes, usually returned by properties such as node.childnodes and methods such as document.queryselectorall().
... although nodelist is not an array, it is possible to iterate over it with foreach().
... however, some older browsers have not implemented nodelist.foreach() nor array.from().
...And 18 more matches
DOMTokenList - Web APIs
the domtokenlist interface represents a set of space-separated tokens.
... such a set is returned by element.classlist, htmllinkelement.rellist, htmlanchorelement.rellist, htmlareaelement.rellist, htmliframeelement.sandbox, or htmloutputelement.htmlfor.
...domtokenlist is always case-sensitive.
...And 17 more matches
nsIDOMOfflineResourceList
the nsidomofflineresourcelist interface provides access to the application cache that allows web content's resources to be cached locally for use while offline.
... it includes methods for adding resources to and removing resources from the cache, as well as for enumerating the dynamically managed resource list.
... dom/interfaces/offline/nsidomofflineresourcelist.idlscriptable please add a summary to this article.
...And 16 more matches
AudioListener.setOrientation() - Web APIs
the setorientation() method of the audiolistener interface defines the orientation of the listener.
... it consists of two direction vectors: the front vector, defined by the three unitless parameters x, y and z, describes the direction of the face of the listener, that is the direction the nose of the person is pointing towards.
... the up vector, defined by three unitless parameters xup, yup and zup, describes the direction of the top of the listener's head.
...And 16 more matches
Network request list - Firefox Developer Tools
the request list of the network monitor shows a list of all the network requests made in the course of loading the page.
... network request list by default, the network monitor shows a list of all the network requests made in the course of loading the page.
... clicking the column header label sorts the request list by that column.
...And 15 more matches
ARIA: List role - Accessibility
the aria list role can be used to identify a list of items.
... it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list.
... <section role="list"> <div role="listitem">list item 1</div> <div role="listitem">list item 2</div> <div role="listitem">list item 3</div> </section> description any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively.
...And 15 more matches
Beginning our React todo list - Learn web development
objective: to introduce our todo list case study, and get the basic app structure and styling in place.
...our app should fulfill the following stories: as a user, i can read a list of tasks.
...-hidden">show </span> <span>active</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> ...
...And 14 more matches
nsIBlocklistService
xpcom/system/nsiblocklistservice.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 29 (firefox 29 / thunderbird 29 / seamonkey 2.26) method overview unsigned long getaddonblockliststate(in jsval addon, [optional] in astring appversion, [optional] in astring toolkitversion); unsigned long getpluginblockliststate(in nsiplugintag plugin, [optional] in astring appversion, [optional] in astring toolkitversion); boolean isaddonblocklisted(in jsval addon, [optional] in astring appversion, [optional] in astring toolkitversion); constants constant value description state_not_blocked 0 state_softblocked 1 state_blocked 2 state_outdated 3 methods getaddonblockli...
...ststate() determine the blocklist state of an add-on.
...And 14 more matches
Progress Listeners - Archive of obsolete content
progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
... progress listeners implement the nsiwebprogresslistener interface.
... in the examples below the progress listener is attached to the tabbrowser, which means you don't get any notifications for inactive tabs.
...And 13 more matches
Listening to events in Firefox extensions - Archive of obsolete content
} b.addeventlistener("event", callback, false) where b is the browser or tabbrowser you wish to watch for events from.
... some of the more interesting dom events you may wish to monitor are listed here: event description domlinkadded dispatched when a new html <link> element is detected in the document.
... web progress listeners for more information about web loads a web progress listener can be used; these provide more details about the progress of loading data from the web.
...And 12 more matches
AudioListener.setPosition() - Web APIs
the setposition() method of the audiolistener interface defines the position of the listener.
... the three parameters x, y and z are unitless and describe the listener's position in 3d space according to the right-hand cartesian coordinate system.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.setposition(1,1,1); returns void.
...And 12 more matches
list-style - CSS: Cascading Style Sheets
the list-style css shorthand property allows you set all the list style properties at once.
... note: this property is applied to list items, i.e., elements with display: list-item; .
...because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside.
...And 12 more matches
<ul>: The Unordered List element - HTML: Hypertext Markup Language
WebHTMLElementul
the html <ul> element represents an unordered list of items, typically rendered as a bulleted list.
... implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree dom interface htmlulistelement attributes this element includes the global attributes.
... compact this boolean attribute hints that the list should be rendered in a compact style.
...And 12 more matches
TPS Bookmark Lists
a bookmark asset list is an object with one or more key-value pairs.
...changes: an object containing new properties to be set for this bookmark when this asset list is used in a modify action.
... the properties for this object include the uri, title, loadinsidebar, description, tags, keyword properties above, plus two additional properties: location: the full path of the folder that the bookmark should be moved to position: the title of the existing bookmark item, in the current folder, where this bookmark should be moved to (i.e., this bookmark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { uri: "http://www.google.com", title: "google", loadinsidebar: false, tags: [ "google", "computers", "misc" ] } livemark objects valid properties are: livemark: the livemark name.
...And 11 more matches
nsIDBChangeListener
the nsidbchangelistener interface is used by components wanting to receive notification when the current database changes somehow.
... example here is an example implementation of the listener (that does nothing): var mylistener = { onhdrflagschanged: function(ahdrchanged, aoldflags, anewflags, ainstigator) {}, onhdrdeleted: function(ahdrchanged, aparentkey, aflags, ainstigator) {}, onhdradded: function(ahdrchanged, aparentkey, aflags, ainstigator) {}, onparentchanged: function(akeychanged, oldparent, newparent, ainstigator) {}, onannouncergoingaway: function(ainstigator) {}, onreadchanged: function(ainstigator) {}, onjunkscorechanged: function(ainstigator) {}, onhdrpropertychanged: function(ahdrtochange, aprechange, astatus, ainstigator) {}, onevent: function(adb, aevent) {}, queryinterface: function(aiid) { if (!aiid.equals(components.interfaces.nsidbchangelistener) && !aiid.equals(compo...
...nents.interfaces.nsisupports)) throw components.results.ns_error_no_interface; return this; } }; and to attach it in thunderbird, we must call addlistener on a nsidbchangeannouncer, typically through a nsimsgdatabase.
...And 11 more matches
MediaQueryList - Web APIs
a mediaquerylist object stores information on a media query applied to a document, with support for both immediate and event-driven matching against the state of the document.
... you can create a mediaquerylist by calling matchmedia() on the window object.
... the resulting object handles sending notifications to listeners when the media query state changes (i.e.
...And 11 more matches
ARIA: Listitem role - Accessibility
the aria listitem role can be used to identify an item inside a list of items.
... it is normally used in conjunction with the list role, which is used to identify a list container.
... <section role="list"> <div role="listitem">list item 1</div> <div role="listitem">list item 2</div> <div role="listitem">list item 3</div> </section> description any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively.
...And 11 more matches
list-style-type - CSS: Cascading Style Sheets
the list-style-type css property sets the marker (such as a disc, character, or custom counter style) of a list item element.
... only a few elements (<li> and <summary>) have a default value of display: list-item.
... however, the list-style-type property may be applied to any element whose display value is set to list-item.
...And 11 more matches
Template and Tree Listeners - Archive of obsolete content
« previousnext » there are several listeners (or observers) used during the template build process, each used for different purposes.
... these each implement a different xpcom interface, as listed below: nsixulbuilderlistener - used to listen to template rebuilds.
... nsixultreebuilderobserver - used to listen to particular tree operations.
...And 10 more matches
listitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single row in a listbox.
... the text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element.
... by default it contains a single listcell element of type and class appropriate to that of the listitem.
...And 10 more matches
nsITransactionList
editor/txmgr/idl/nsitransactionlist.idlscriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.7 method overview nsitransactionlist getchildlistforitem(in long aindex); nsitransaction getitem(in long aindex); long getnumchildrenforitem(in long aindex); boolean itemisbatch(in long aindex); attributes attribute type description numitems long the number of transactions contained in this list.
... methods getchildlistforitem() returns the list of children associated with the item at aindex.
...And 10 more matches
nsIDownloadProgressListener
/toolkit/components/downloads/nsidownloadprogresslistener.idlscriptable this interface gives applications and extensions a way to monitor the status of downloads being processed by the download manager.
... inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) to use simply implement this interface in your code, then call nsidownloadmanager.addlistener() to start listening.
... when you no longer need to listen to the download manager's state, call nsidownloadmanager.removelistener() to stop listening.
...And 9 more matches
nsIEventListenerInfo
content/events/public/nsieventlistenerservice.idlscriptable an instance of this interface describes how an event listener was added to an event target; these are returned by nsieventlistenerservice.getlistenerinfofor, which provides a list of all the listeners to a given event target.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsisupports getdebugobject(); astring tosource(); attributes attribute type description allowsuntrusted boolean indicates whether or not the event listener allows untrusted events.
... capturing boolean indicates whether or not the event listener is in capture mode.
...And 9 more matches
AudioListener.speedOfSound - Web APIs
the speedofsound property of the audiolistener interface is a double value representing the speed of sound, in meters per second.
... the speedofsound property's default value is 343.3 m/s and is used to calculate the doppler shift appropriate for the speed the panner is travelling at (as defined by pannernode.setvelocity.) note: bear in mind that no propagation delay is automatically applied to a sound far from the listener.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.speedofsound = 343.3; value a double.
...And 9 more matches
<ol>: The Ordered List element - HTML: Hypertext Markup Language
WebHTMLElementol
the html <ol> element represents an ordered list of items — typically rendered as a numbered list.
... implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree dom interface htmlolistelement attributes this element also accepts the global attributes.
... reversed this boolean attribute specifies that the list’s items are in reverse order.
...And 9 more matches
DownloadList
a downloadlist object represents a collection of download objects that can be viewed and managed by the user interface, and persisted across sessions.
... a reference to a downloadlist object can be obtained using the downloads.getlist() function.
... promise<array<download>> getall(); promise add(download adownload); promise remove(download adownload); promise addview(object aview); promise removeview(object aview); void removefinished([optional] function afilterfn); methods getall() retrieves a snapshot of the downloads that are currently in the list.
...And 8 more matches
AudioListener.dopplerFactor - Web APIs
the deprecated dopplerfactor property of the audiolistener interface is a double value representing the amount of pitch shift to use when rendering a doppler effect.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.dopplerfactor = 1; value a double indicating the doppler effect's pitch shift value.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.forwardX - Web APIs
the forwardx read-only property of the audiolistener interface is an audioparam representing the x value of the direction vector defining the forward direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardx.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.forwardY - Web APIs
the forwardy read-only property of the audiolistener interface is an audioparam representing the y value of the direction vector defining the forward direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardy.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.forwardZ - Web APIs
the forwardz read-only property of the audiolistener interface is an audioparam representing the z value of the direction vector defining the forward direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardz.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.positionX - Web APIs
the positionx read-only property of the audiolistener interface is an audioparam representing the x position of the listener in 3d cartesian space.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positionx.value = 1; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.positionY - Web APIs
the positiony read-only property of the audiolistener interface is an audioparam representing the y position of the listener in 3d cartesian space.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positiony.value = 1; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.positionZ - Web APIs
the positionz read-only property of the audiolistener interface is an audioparam representing the z position of the listener in 3d cartesian space.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positionz.value = 1; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.upX - Web APIs
WebAPIAudioListenerupX
the upx read-only property of the audiolistener interface is an audioparam representing the x value of the direction vector defining the up direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upx.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.upY - Web APIs
WebAPIAudioListenerupY
the upy read-only property of the audiolistener interface is an audioparam representing the y value of the direction vector defining the up direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upy.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
AudioListener.upZ - Web APIs
WebAPIAudioListenerupZ
the upz read-only property of the audiolistener interface is an audioparam representing the z value of the direction vector defining the up direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upz.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 8 more matches
FileList - Web APIs
WebAPIFileList
an object of this type is returned by the files property of the html <input> element; this lets you access the list of files selected with the <input type="file"> element.
... it's also used for a list of files dropped into web content when using the drag and drop api; see the datatransfer object for details on this usage.
... note: prior to gecko 1.9.2, the input element only supported a single file being selected at a time, meaning that the filelist would contain only one file.
...And 8 more matches
Accessible Toolkit Checklist
for example, lists of checkboxes are implemented in windows with images of checked and unchecked checkboxes.
... the checklist this checklist is currently only for microsoft windows, but should be expanded to include information about linux and os x.
...b, ctrl+c, ctrl+i, ctrl+u, ctrl+x, ctrl+v, ctrl+[shift]+z in multiline text field, enter key inserts new line (thus default button no longer shows dark border when multiline text field is focused) in autocomplete text fields, make sure the autocomplete popup doesn't receive actual or msaa focus unless an up/down arrow is pressed, and don't use the default system highlight color in the list itself unless it really has focus in autocomplete text fields, make sure that the delete or backspace key removes all auto completed selected text.
...And 7 more matches
nsIWebProgressListener
uriloader/base/nsiwebprogresslistener.idlscriptable this interface is implemented by clients wishing to listen in on the progress associated with the loading of asynchronous requests in the context of a nsiwebprogress instance as well as any child nsiwebprogress instances.
... for example, in the case of navigation within a single frame of a html frameset, a nsiwebprogresslistener instance attached to the nsiwebprogress of the frameset window will receive onstatechange() calls with the state_is_network flag set to indicate the start and stop of said navigation.
... note: if the object also implements nsiwebprogresslistener2 and the caller knows about that interface, this function will not be called.
...And 7 more matches
HTMLOListElement - Web APIs
the htmlolistelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating ordered list elements.
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlolistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits p...
... htmlolistelement.reversed is a boolean value reflecting the reversed and defining if the numbering is descending, that is its value is true, or ascending (false).
...And 7 more matches
list-style-position - CSS: Cascading Style Sheets
the list-style-position css property sets the position of the ::marker relative to a list item.
... it is often more convenient to use the shorthand list-style.
... note: this property is applied to list items, i.e., elements with display: list-item;.
...And 7 more matches
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
summary: an obscure bug in gecko causes list-item markers to be differently sizeed than the text of the list item, but there is a fix authors can use.
... learn how to correctly size list item markers in gecko 0.9.4, the basis of netscape 6.2.x and compuserve 7.
... shortly before mozilla 0.9.4 was finished, a bug was introduced that affects the sizing of list item markers (such as the numbers in an ordered list).
...And 6 more matches
Rendering a list of Vue components - Learn web development
rendering lists with v-for to be an effective to-do list, we need to be able to render multiple to-do items.
... export default { name: 'app', components: { todoitem }, data() { return { todoitems: [ { label: 'learn vue', done: false }, { label: 'create a vue project with the cli', done: true }, { label: 'have fun', done: true }, { label: 'create a to-do list', done: false } ] }; } }; now that we have a list of items, we can use the v-for directive to display them.
...to help vue optimize rendering the elements in the list, it tries to patch list elements so it's not recreating them every time the list changes.
...And 6 more matches
nsIJumpListItem
widget/public/nsijumplistitem.idlscriptable implements windows 7 taskbar jump list item interfaces.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: to consumers: it's reasonable to expect we'll need support for other types of jump list items (an audio file, an email message, etc.).
... to add types, create the specific interface here, add an implementation class to winjumplistitem, and add support to addlistbuild and removed items processing.
...And 6 more matches
Set event listener breakpoints - Firefox Developer Tools
using a standard event breakpoint to use an event breakpoint, you open up the javascript debugger, and find and expand the event listener breakpoints section in the right hand column.
... to break when event listeners are hit, check the boxes next the events you are interested in.
... all of the standard events supported in your version of firefox are listed, arranged by which api or api area they're part of.
...And 6 more matches
CSSValueList - Web APIs
the cssvaluelist interface derives from the cssvalue interface and provides the abstraction of an ordered collection of css values.
... some properties allow an empty list in their syntax.
...so, an empty list means that the property has the value none.
...And 6 more matches
DataTransferItemList - Web APIs
the datatransferitemlist object is a list of datatransferitem objects representing items being dragged.
... during a drag operation, each dragevent has a datatransfer property and that property is a datatransferitemlist.
... properties datatransferitemlist.length read only an unsigned long that is the number of drag items in the list.
...And 6 more matches
MediaList - Web APIs
WebAPIMediaList
the medialist interface represents the media queries of a stylesheet, e.g.
... note: medialist is a live list; updating the list using properties or methods listed below will immediately update the behavior of the document.
... properties medialist.mediatext a stringifier that returns a domstring representing the medialist as text, and also allows you to set a new medialist.
...And 6 more matches
PerformanceObserverEntryList.getEntries() - Web APIs
the getentries() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given filter.
... the list's members are determined by the set of entry types specified in the call to the observe() method.
... the list is available in the observer's callback function (as the first parameter in the callback).
...And 6 more matches
PerformanceObserverEntryList.getEntriesByName() - Web APIs
the getentriesbyname() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given name and entry type.
... the list's members are determined by the set of entry types specified in the call to the observe() method.
... the list is available in the observer's callback function (as the first parameter in the callback).
...And 6 more matches
PerformanceObserverEntryList.getEntriesByType() - Web APIs
the getentriesbytype() method of the performanceobserverentrylist returns a list of explicitly observed performance entry objects for a given performance entry type.
... the list's members are determined by the set of entry types specified in the call to the observe() method.
... the list is available in the observer's callback function (as the first parameter in the callback).
...And 6 more matches
SpeechGrammarList - Web APIs
the speechgrammarlist interface of the web speech api represents a list of speechgrammar objects containing words or patterns of words that we want the recognition service to recognize.
... constructor speechgrammarlist.speechgrammarlist() creates a new speechgrammarlist object.
... properties speechgrammarlist.length read only returns the number of speechgrammar objects contained in the speechgrammarlist.
...And 6 more matches
list-style-image - CSS: Cascading Style Sheets
the list-style-image css property sets an image to be used as the list item marker.
... it is often more convenient to use the shorthand list-style.
... note: this property is applied to list items, i.e.
...And 6 more matches
listcell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell of a listbox.
... by default it only contains text but iconic and checkbox listcells are also available.
... attributes crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
...And 5 more matches
AudioTrackList.onaddtrack - Web APIs
the audiotracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new audio track has been added to the media element whose audio tracks the audiotracklist represents.
... note: you can also add a handler for the addtrack event using addeventlistener().
... syntax audiotracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object which indicates in its track property which audio track has been added to the media.
...And 5 more matches
CSSRuleList - Web APIs
a cssrulelist is an (indirect-modify only) array-like object containing an ordered collection of cssrule objects.
... description each cssrule can be accessed as rules.item(index), or simply rules[index], where rules is an object implementing the cssrulelist interface (such as cssstylesheet.cssrules), and index is the 0-based index of the rule, in the order as it appears in the style sheet css.
... the number of rules in the list is rules.length.
...And 5 more matches
DataTransferItemList.DataTransferItem() - Web APIs
the datatransferitem() getter method implements support for accessing items in the datatransferitemlist using array-style syntax (that is datatransferitem[index]).
... syntax dataitem = datatransferitem[index]; parameters index the zero-based index of the item in the drag data list to return.
... return value the datatransferitem object at the specified index in the item list.
...And 5 more matches
DataTransferItemList.add() - Web APIs
the datatransferitemlist.add() method creates a new datatransferitem using the specified data and adds it to the drag data list.
...if the item is successfully added to the list, the newly-created datatransferitem object is returned.
... syntax datatransferitem = datatransferitemlist.add(data, type); datatransferitem = datatransferitemlist.add(file); parameters data a string representing the drag item's data.
...And 5 more matches
DataTransferItemList.remove() - Web APIs
the datatransferitemlist.remove() method removes the datatransferitem at the specified index from the list.
... if the index is less than zero or greater than one less than the length of the list, the list will not be changed.
... syntax datatransferitemlist.remove(index); parameters index the zero-based index number of the item in the drag data list to remove.
...And 5 more matches
HTMLUListElement - Web APIs
the htmlulistelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating unordered list elements.
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlulistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits p...
... htmlulistelement.type is a domstring value reflecting the type and defining the kind of marker to be used to display.
...And 5 more matches
SourceBufferList - Web APIs
the sourcebufferlist interface represents a simple container list for multiple sourcebuffer objects.
... the source buffer list containing the sourcebuffers appended to a particular mediasource can be retrieved using the mediasource.sourcebuffers property.
..."#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist...
...And 5 more matches
<dl>: The Description List element - HTML: Hypertext Markup Language
WebHTMLElementdl
the html <dl> element represents a description list.
... the element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements).
... common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
...And 5 more matches
Intl.ListFormat - JavaScript
the intl.listformat object is a constructor for objects that enable language-sensitive list formatting.
... constructor intl.listformat() creates a new listformat object.
... static methods intl.listformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.
...And 5 more matches
util/list - Archive of obsolete content
experimental building blocks for composing lists.
... globals constructors list(element1, element2, ...) constructor can takes any number of elements and creates an instance of list populated with the specified elements.
...: object|string|number functions addlistitem(list, item) function adds a item to a list.
...And 4 more matches
AudioTrackList.onchange - Web APIs
the audiotracklist property onchange is an event handler which is called when the change event occurs, indicating that one or more of the audiotracks in the audiotracklist have been enabled or disabled.
... note: you can also add a handler for the change event using addeventlistener().
... syntax audiotracklist.onchange = eventhandler; value set onchange to a function that should be called whenever tracks are enabled or disabled on the media element.
...And 4 more matches
AudioTrackList.onremovetrack - Web APIs
the audiotracklist onremovetrack event handler is called when the removetrack event occurs, indicating that an audio track has been removed from the media element, and therefore also from the audiotracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the media element's audiotracklist.
... note: you can also add a handler for the removetrack event using addeventlistener().
...And 4 more matches
AudioTrackList - Web APIs
the audiotracklist interface is used to represent a list of the audio tracks contained within a given html media element, with each track represented by a separate audiotrack object in the list.
... length read only the number of tracks in the list.
... gettrackbyid() returns the audiotrack found within the audiotracklist whose id matches the specified string.
...And 4 more matches
DOMTokenList.remove() - Web APIs
the remove() method of the domtokenlist interface removes the specified tokens from the list.
... syntax tokenlist.remove(token1[, token2[, ...tokenn]]); parameters tokenn a domstring representing the token you want to remove from the list.
... if the string is not in the list, no error is thrown, and nothing happens.
...And 4 more matches
DOMTokenList.replace() - Web APIs
the replace() method of the domtokenlist interface replaces an existing token with a new token.
... if the first token doesn't exist, replace() returns false immediately, without adding the new token to the token list.
... syntax tokenlist.replace(oldtoken, newtoken); parameters oldtoken a domstring representing the token you want to replace.
...And 4 more matches
DataTransferItemList.clear() - Web APIs
the datatransferitemlist method clear() removes all datatransferitem objects from the drag data items list, leaving the list empty.
... the drag data store in which this list is kept is only writable while handling the dragstart event.
... syntax datatransferitemlist.clear(); parameters none.
...And 4 more matches
DataTransferItemList.length - Web APIs
the read-only length property of the datatransferitemlist interface returns the number of items currently in the drag item list.
... syntax length = datatransferitemlist.length; value the number of drag data items in the list, or 0 if the list is empty or disabled.
... the drag item list is considered to be disabled if the item list's datatransfer object is not associated with a drag data store.
...And 4 more matches
HTMLDListElement - Web APIs
the htmldlistelement interface provides special properties (beyond those of the regular htmlelement interface it also has available to it by inheritance) for manipulating definition list (<dl>) elements.
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldlistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits p...
... htmldlistelement.compact is a boolean indicating that spacing between list items should be reduced.
...And 4 more matches
MediaQueryListEvent - Web APIs
the mediaquerylistevent object stores information on the changes that have happened to a mediaquerylist object — instances are available as the event object on a function referenced by a mediaquerylist.onchange property or mediaquerylist.addlistener() call.
... constructor mediaquerylistevent() creates a new mediaquerylistevent instance.
... properties the mediaquerylistevent interface inherits properties from its parent interface, event.
...And 4 more matches
NodeList.prototype.forEach() - Web APIs
WebAPINodeListforEach
the foreach() method of the nodelist interface calls the callback given in parameter once for each value pair in the list, in insertion order.
... syntax somenodelist.foreach(callback[, thisarg]); parameters callback a function to execute on each element of somenodelist.
... it accepts 3 parameters: currentvalue the current element being processed in somenodelist.
...And 4 more matches
TextTrackList.onaddtrack - Web APIs
the texttracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new text track has been added to the media element whose text tracks the texttracklist represents.
... note: you can also add a handler for the addtrack event using addeventlistener().
... syntax texttracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object which indicates in its track property which video track has been added to the media.
...And 4 more matches
TouchList.item() - Web APIs
WebAPITouchListitem
the item() method returns the touch object at the specified index in the touchlist.
... syntax var touchpoint = touchlist.item(index); parameters index the index of the touch object to retrieve.
... the index is a number in the range of 0 to one less than the length of the touchlist.
...And 4 more matches
VideoTrackList.onaddtrack - Web APIs
the videotracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new video track has been added to the media element whose video tracks the videotracklist represents.
... note: you can also add a handler for the addtrack event using addeventlistener().
... syntax videotracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object which indicates in its track property which video track has been added to the media.
...And 4 more matches
Selector list - CSS: Cascading Style Sheets
the css selector list (,) selects all the matching nodes.
... /* selects all matching elements */ span, div { border: red 2px solid; } to reduce the size of style sheets, one can group selectors in comma-separated lists.
... syntax element, element, element { style properties } examples single line grouping grouping selectors in a single line using a comma-separated lists.
...And 4 more matches
Intl​.List​Format​.prototype​.formatToParts() - JavaScript
the intl.listformat.prototype.formattoparts() method returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fashion.
... syntax intl.listformat.prototype.formattoparts(list) parameters list an array of values to be formatted according to a locale.
... return value an array of components which contains the formatted parts from the list.
...And 4 more matches
listcols - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for the columns of a listbox, each of which are created with the listcol element.
... there should be only one listcols element in a list box.
... if there is no listcols element, the list box has a single column.
...And 3 more matches
Listening to events on all tabs
firefox 3.5 adds support for listening to progress events on all tabs.
... adding a listener to listen to progress events on all tabs, call the browser's addtabsprogresslistener() method: gbrowser.addtabsprogresslistener(myprogresslistener); myprogresslistener is an object that implements the callbacks used to provide notifications of progress events.
... removing a listener to remove a previously installed progress listener, call removetabsprogresslistener(): gbrowser.removetabsprogresslistener(myprogresslistener); implementing a listener the listener object itself has five methods it can implement to handle various events: onlocationchange called when the uri of the document displayed in the tab changes.
...And 3 more matches
FC_GetFunctionList
name fc_getfunctionlist - get a pointer to the list of function pointers in the fips mode of operation.
... syntax ck_rv fc_getfunctionlist(ck_function_list_ptr *ppfunctionlist); parameters fc_getfunctionlist has one parameter: ppfunctionlist [output] the address of a variable that will receive a pointer to the list of function pointers.
... description fc_getfunctionlist stores in *ppfunctionlist a pointer to the nss cryptographic module's list of function pointers in the fips mode of operation.
...And 3 more matches
FC_GetSlotList
name fc_getslotlist - obtain a list of slots in the system.
... syntax ck_rv fc_getslotlist( ck_bbool tokenpresent, ck_slot_id_ptr pslotlist, ck_ulong_ptr pulcount ); parameters tokenpresent [in] if true only slots with a token present are included in the list, otherwise all slots are included.
... pslotlist [out] either null or a pointer to an existing array of ck_slot_id objects.
...And 3 more matches
nsIMsgFilterList
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilterlist.idl attributes folder attribute nsimsgfolder nsimsgfilterlist::folder version readonly attribute short nsimsgfilterlist::version arbitraryheaders readonly attribute acstring nsimsgfilterlist::arbitraryheaders shoulddownloadallheaders readonly attribute boolean nsimsgfilterlist::shoulddownloadallheaders filtercount readonly attribute unsigned long nsimsgfilterlist::filtercount loggingenabled attribute boolean nsimsgfilterlist::loggingenabled defaultfile attribute nsilocalfile nsimsgfilterlist::defaultfile logstream attribute nsioutputstream nsimsgfilterlist::logstream logurl readonly attribute acstring nsimsgfilterlist::logurl methods getfilterat() nsimsgfilter nsimsgfilterlist::getfilterat (in unsigned...
... long filterindex ) getfilternamed() nsimsgfilter nsimsgfilterlist::getfilternamed (in astring filtername) setfilterat() nsimsgfilter nsimsgfilterlist::setfilterat ( in unsigned long filterindex, in nsimsgfilter filter ) removefilter() void nsimsgfilterlist::removefilter (in nsimsgfilter filter) removefilterat() void nsimsgfilterlist::removefilterat (in unsigned long filterindex) movefilterat() void nsimsgfilterlist::movefilterat ( in unsigned long filterindex, in nsmsgfiltermotionvalue motion ) insertfilterat() void nsimsgfilterlist::insertfilterat ( in unsigned long filterindex, in nsimsgfilter filter ) movefilter() void nsimsgfilterlist::movefilter ( in nsimsgfilter filter, in nsmsg...
...filtermotionvalue motion ) createfilter() nsimsgfilter nsimsgfilterlist::createfilter ( in astring name ) savetofile() void nsimsgfilterlist::savetofile ( in nsioutputstream stream ) parsecondition() void nsimsgfilterlist::parsecondition ( in nsimsgfilter afilter, in string condition ) savetodefaultfile() void nsimsgfilterlist::savetodefaultfile ( ) applyfilterstohdr() void nsimsgfilterlist::applyfilterstohdr ( in nsmsgfiltertypetype filtertype, in nsimsgdbhdr msghdr, in nsimsgfolder folder, in nsimsgdatabase db, in string headers, in unsigned long headersize, in nsimsgfilterhitnotify listener, in nsimsgwindow msgwindow, in nsilocalfile amessagefile ...
...And 3 more matches
AudioTrackList.getTrackById() - Web APIs
the audiotracklist method gettrackbyid() returns the first audiotrack object from the track list whose id matches the specified string.
... syntax var thetrack = audiotracklist.gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track list.
... return value an audiotrack object indicating the first track found within the audiotracklist whose id matches the specified string.
...And 3 more matches
DOMTokenList.contains() - Web APIs
the contains() method of the domtokenlist interface returns a boolean — true if the underlying list contains the given token, otherwise false.
... syntax tokenlist.contains(token); parameters token a domstring representing the token you want to check for the existance of in the list.
... return value a boolean, which is true if the calling list contains token, otherwise false.
...And 3 more matches
DOMTokenList.item() - Web APIs
WebAPIDOMTokenListitem
the item() method of the domtokenlist interface returns an item in the list by its index.
... syntax tokenlist.item(index) parameters index a domstring representing the index of the item you want to return.
...it returns null if the number is greater than or equal to the length of the list.
...And 3 more matches
DOMTokenList.toggle() - Web APIs
the toggle() method of the domtokenlist interface removes a given token from the list and returns false.
... syntax tokenlist.toggle(token [, force]); parameters token a domstring representing the token you want to toggle.
... return value a boolean indicating whether token is in the list after the call.
...And 3 more matches
Document.createTouchList() - Web APIs
the document.createtouchlist() method creates and returns a new touchlist object.
... syntax var list = documenttouch.createtouchlist([touch1 [, touch2 [, ...]]]); parameters touches zero or more touch objects.
... return value list a touchlist object containing the touch objects specified by the touches parameter.
...And 3 more matches
EventListener - Web APIs
the eventlistener interface represents an object that can handle an event dispatched by an eventtarget object.
... note: due to the need for compatibility with legacy content, eventlistener accepts both a function and an object with a handleevent() property function.
... eventlistener.handleevent() a function that is called whenever an event of the specified type occurs.
...And 3 more matches
NameList - Web APIs
WebAPINameList
namelist has been removed, effective with gecko 10.0 the namelist interface provides an abstraction for an ordered collection of name and namespace value pairs.
... properties namelist.length read only methods namelist.contains() returns a boolean.
... namelist.containsns() returns a boolean.
...And 3 more matches
RadioNodeList - Web APIs
the radionodelist interface represents a collection of radio elements in a <form> or a <fieldset> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" ta...
...rget="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
...And 3 more matches
SVGAnimatedLengthList - Web APIs
svg animated length list interface the svganimatedlengthlist interface is used for attributes of type svglengthlist which can be animated.
... interface overview also implement none methods none properties readonly svglengthlist baseval readonly svglengthlist animval normative document svg 1.1 (2nd edition) properties name type description baseval svglengthlist the base value of the given attribute before applying any animations.
... animval svglengthlist a read only svglengthlist representing the current animated value of the given attribute.
...And 3 more matches
SVGAnimatedNumberList - Web APIs
svg animated number list interface the svganimatednumber interface is used for attributes which take a list of numbers and which can be animated.
... interface overview also implement none methods none properties readonly svgnumberlist baseval readonly svgnumberlist animval normative document svg 1.1 (2nd edition) properties svganimatednumberlist.baseval read only is a svgnumberlist that represents the base value of the given attribute before applying any animations.
... svganimatednumberlist.animval read only is a read only svgnumberlist that represents the current animated value of the given attribute.
...And 3 more matches
SVGAnimatedTransformList - Web APIs
svg animated transform list interface the svganimatedtransformlist interface is used for attributes which take a list of numbers and which can be animated.
... interface overview also implement none methods none properties readonly svgtransformlist baseval readonly svgtransformlist animval normative document svg 1.1 (2nd edition) properties name type description baseval svgtransformlist the base value of the given attribute before applying any animations.
... animval svgtransformlist a read only svgtransformlist representing the current animated value of the given attribute.
...And 3 more matches
TextTrackList.onremovetrack - Web APIs
the texttracklist onremovetrack event handler is called when the removetrack event occurs, indicating that a text track has been removed from the media element, and therefore also from the texttracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the media element's texttracklist.
... note: you can also add a handler for the removetrack event using addeventlistener().
...And 3 more matches
TextTrackList - Web APIs
the texttracklist interface is used to represent a list of the text tracks defined by the <track> element, with each track represented by a separate texttrack object in the list.
... length read only the number of tracks in the list.
... gettrackbyid() returns the texttrack found within the texttracklist whose id matches the specified string.
...And 3 more matches
VideoTrackList.onchange - Web APIs
the videotracklist property onchange is an event handler which is called when the change event occurs, indicating that a videotrack in the videotracklist has been made active.
... note: you can also add a handler for the change event using addeventlistener().
... syntax videotracklist.onchange = eventhandler; value set onchange to a function that should be called whenever a track is made active.
...And 3 more matches
VideoTrackList.onremovetrack - Web APIs
the videotracklist onremovetrack event handler is called when the removetrack event occurs, indicating that a video track has been removed from the media element, and therefore also from the videotracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the media element's videotracklist.
... note: you can also add a handler for the removetrack event using addeventlistener().
...And 3 more matches
VideoTrackList - Web APIs
the videotracklist interface is used to represent a list of the video tracks contained within a <video> element, with each track represented by a separate videotrack object in the list.
... length read only the number of tracks in the list.
... gettrackbyid() returns the videotrack found within the videotracklist whose id matches the specified string.
...And 3 more matches
Intl.ListFormat() constructor - JavaScript
the intl.listformat() constructor creates objects that enable language-sensitive list formatting.
... syntax new intl.listformat([locales[, options]]) parameters locales optional.
...possible values are "conjunction" that stands for "and"-based lists (default, e.g., a, b, and c), or "disjunction" that stands for "or"-based lists (e.g., a, b, or c).
...And 3 more matches
List of Mozilla-Based Applications - Archive of obsolete content
the following is a list of all known active applications that are built using mozilla technologies.
... this list is likely to be incomplete since we think there are many dark matter projects that we don't know about.
... a list of former mozilla-based applications is also available.
...And 2 more matches
List of commands - Archive of obsolete content
the following lists commands which might be usable by <command> or command dispatchers/controllers.
... list of commands (grouped by type) nsdomwindowcontroller commands (generally legal when there is a selection): cmd_copy - copy a selection to the clipboard cmd_cut - cut a selection into the clipboard cmd_paste - paste a selection from the clipboard cmd_selectall cmd_selectnone cmd_copylink cmd_copyimagelocation cmd_copyimagecontents cmd_scrolltop cmd_scrollbottom cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_scrollleft cmd_scrollright cmd_selectcharprevious cmd_selectcharnext cmd_wordprevious cmd_wordnext cmd_selectwordprevious cmd_selectwordnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_selectlineprevious cmd_selectlinenext cmd_selectpageprevious cmd_selectpagenext cmd_selectmovetop cmd_selectmovebot...
... cmd_charprevious cmd_charnext cmd_selectcharprevious cmd_selectcharnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_wordprevious cmd_wordnext cmd_selectwordprevious cmd_selectwordnext cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_movepageup cmd_movepagedown cmd_selectpageup cmd_selectpagedown other commands the following list other commands (prefixed by cmd_ or browser:) which have not been categorized here yet (though they are in the alphabetical list below): http://lxr.mozilla.org/seamonkey/sou...baroverlay.xul http://lxr.mozilla.org/seamonkey/sou...t/navigator.js http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...onaltoolbar.js http://lxr.mozilla.org/seamonkey/sou...
...And 2 more matches
listheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header for a single column in a listbox.
... attributes disabled properties acesssibletype examples <listbox> <listhead> <listheader label="name"/> <listheader label="occupation"/> </listhead> <listitem> <listcell label="george"/> <listcell label="house painter"/> </listitem> <listitem> <listcell label="mary ellen"/> <listcell label="candle maker"/> </listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...And 2 more matches
InstallListener
installlisteners are notified of an addoninstall's progress.
... they may be registered to hear events from all addoninstalls through addinstalllistener or to a single addoninstall through addlistener.
...a listener may return false to cancel the download.
...And 2 more matches
Linked Lists
this chapter describes the nspr api for managing linked lists.
... the api is a set of macros for initializing a circular (doubly linked) list, inserting and removing elements from the list.
...the caller must provide for mutually-exclusive access to the list, and for the nodes being added and removed from the list.
...And 2 more matches
PR_Listen
listens for connections on a specified socket.
... syntax #include <prio.h> prstatus pr_listen( prfiledesc *fd, printn backlog); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket that will be used to listen for new connections.
... returns the function returns one of the following values: upon successful completion of listen request, pr_success.
...And 2 more matches
FC_GetMechanismList
name fc_getmechanismlist - get a list of mechanism types supported by a token.
... syntax ck_rv fc_getmechanismlist( ck_slot_id slotid, ck_mechanism_type_ptr pmechanismlist, ck_ulong_ptr puscount ); parameters fc_getmechanismlist takes three parameters: slotid [input] pinfo [output] the address of a variable that will receive a pointer to the list of function pointers.
... description fc_getmechanismlist obtains a list of mechanism types supported by a token.
...And 2 more matches
TPS History Lists
there are two types of history asset lists, one used for adding/modiyfing/verifying history, and the other for deleting history.
... the history list used for operations other than delete has the following properties: uri: required.
...an integer value from one of the transition types listed at https://developer.mozilla.org/en/nsinavhistoryservice#constants.
...And 2 more matches
AudioTrackList.length - Web APIs
the read-only audiotracklist property length returns the number of entries in the audiotracklist, each of which is an audiotrack representing one audio track in the media element.
... syntax var trackcount = audiotracklist.length; value a number indicating how many audio tracks are included in the audiotracklist.
... each track can be accessed by treating the audiotracklist as an array of objects of type audiotrack.
...And 2 more matches
CSSValueList.item() - Web APIs
WebAPICSSValueListitem
the item() method of the cssvaluelist interface is used to retrieve a cssvalue by ordinal index.
...if the index is greater than or equal to the number of values in the list, this method returns null.
... syntax var cssvalue = cssvaluelist.item(index); parameters index an unsigned long representing the index of the css value within the collection.
...And 2 more matches
DOMTokenList.add() - Web APIs
WebAPIDOMTokenListadd
the add() method of the domtokenlist interface adds the given token to the list.
... syntax tokenlist.add(token1[, token2[, ...tokenn]]); parameters tokenn a domstring representing the token (or tokens) to add to the tokenlist.
... return value undefined examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist.
...And 2 more matches
DOMTokenList.forEach() - Web APIs
the foreach() method of the domtokenlist interface calls the callback given in parameter once for each value pair in the list, in insertion order.
... syntax tokenlist.foreach(callback [, thisarg]); parameters callback function to execute for each element, eventually taking three arguments: currentvalue the current element being processed in the array.
... listobj the array that foreach() is being applied to.
...And 2 more matches
HTMLDataListElement - Web APIs
the htmldatalistelement interface provides special properties (beyond the htmlelement object interface it also has available to it by inheritance) to manipulate <datalist> elements and their content.
...andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldatalistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherit...
...s properties from its parent, htmlelement htmldatalistelement.options read only is a htmlcollection representing a collection of the contained option elements.
...And 2 more matches
HTMLMediaElement.controlsList - Web APIs
the controlslist property of the htmlmediaelement interface returns a domtokenlist that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls.
... the domtokenlist takes one or more of three possible values: nodownload, nofullscreen, and noremoteplayback.
... syntax var domtokenlist = htmlmediaelement.controlslist; value a domtokenlist.
...And 2 more matches
MutationObserverInit.childList - Web APIs
the mutationobserverinit dictionary's optional childlist property indicates whether or not to monitor the specified node or nodes for the addition or removal of new child nodes.
... if childlist is false (the default), adding or removing new nodes does not trigger mutation callbacks.
... by setting childlist to true, your callback will be invoked any time nodes are added to or removed from the dom node or nodes being watched.
...And 2 more matches
PerformanceObserverEntryList - Web APIs
the performanceobserverentrylist interface is a list of peformance events that were explicitly observed via the observe() method.
... methods performanceobserverentrylist.getentries() returns a list of explicitly observed performanceentry objects based on the given filter.
... performanceobserverentrylist.getentriesbytype() returns a list of explicitly observed performanceentry objects of the given entry type.
...And 2 more matches
SpeechGrammarList.addFromString() - Web APIs
the addfromstring() method of the speechgrammarlist interface takes a grammar present in a specific domstring within the code base (e.g.
... stored in a variable) and adds it to the speechgrammarlist as a new speechgrammar object.
... syntax speechgrammarlistinstance.addfromstring(string,weight); returns void.
...And 2 more matches
SpeechRecognitionResultList - Web APIs
the speechrecognitionresultlist interface of the web speech api represents a list of speechrecognitionresult objects, or a single one if results are being captured in continuous mode.
... properties speechrecognitionresultlist.length read only returns the length of the "array" — the number of speechrecognitionresult objects in the list.
... methods speechrecognitionresultlist.item a standard getter that allows speechrecognitionresult objects in the list to be accessed via array syntax.
...And 2 more matches
TextTrackList.onchange - Web APIs
the texttracklist property onchange is an event handler which is called when the change event occurs, indicating that a change has occurred on a texttrack in the videotracklist.
... note: you can also add a handler for the change event using addeventlistener().
... syntax texttracklist.onchange = eventhandler; example this snippet establishes a handler for the change event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track.
...And 2 more matches
TouchList - Web APIs
WebAPITouchList
the touchlist interface represents a list of contact points on a touch surface.
... for example, if the user has three fingers on the touch surface (such as a screen or trackpad), the corresponding touchlist object would have one touch object for each finger, for a total of three entries.
... properties touchlist.length read only the number of touch objects in the touchlist.
...And 2 more matches
TrackDefaultList - Web APIs
the trackdefaultlist interface represents a simple container list for multiple trackdefault objects.
... the trackdefaultlist associated with a particular sourcebuffer can be retrieved using the sourcebuffer.trackdefaults property.
... constructor trackdefaultlist() constructs and returns a new trackdefaultlist object.
...And 2 more matches
<display-listitem> - CSS: Cascading Style Sheets
the list-item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together with a principal box of the specified type for its own contents.
... syntax a single value of list-item will cause the element to behave like a list item.
... this can be used together with list-style-type and list-style-position.
...And 2 more matches
Intl​.ListFormat.prototype​.format() - JavaScript
the format() method returns a string with a language-specific representation of the list.
... syntax listformat.format([list]); parameters list an iterable object, such as an array return value a language-specific formatted string representing the elements of the list description the format() method returns a string that has been formatted based on parameters provided in the intl.listformat object.
... the locales and options parameters customize the behavior of format() and let applications specify the language conventions that should be used to format the list.
...And 2 more matches
listcol - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a column in a listbox.
... examples example <!-- a two column listbox with one column flexible --> <listbox> <listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, min...
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcols, listhead, listheader, listitem ...
listhead - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header row of a listbox.
... it is usual to place listheader elements inside the listhead, one for each column.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listcols, listheader, listitem ...
richlistitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an individual item in a richlistbox.
...for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributeno...
HTMLIFrameElement.addNextPaintListener()
the addnextpaintlistener() method of the htmliframeelement is used to define a handler to listen for the next mozafterpaint event coming from the browser <iframe>.
... syntax instanceofhtmliframeelement.addnextpaintlistener(listener); returns void.
... parameters listener a function handler to listen for a mozafterpaint event.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); specification not part of any specification.
HTMLIframeElement.removeNextPaintListener()
the removenextpaintlistener() method of the htmliframeelement interface is used to remove a handler previously set with the addnextpaintlistener method.
... syntax instanceofhtmliframeelement.removenextpaintlistener(listener); returns void.
... parameters listener a function handler previously set with addnextpaintlistener.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); browser.removenextpaintlistener(onnextpaint); specification not part of any specification.
PR_INIT_STATIC_CLIST
statically initializes a circular list.
... syntax #include <prclist.h> pr_init_static_clist (prclist *listp); parameter listp a pointer to the anchor of the linked list.
... description pr_init_static_clist statically initializes the specified list to be an empty list.
... for example, prclist free_object_list = pr_init_static_clist(&free_object_list); ...
PR_LIST_HEAD
returns the head of a circular list.
... syntax #include <prclist.h> prclist *pr_list_head (prclist *listp); parameter listp a pointer to the linked list.
... returns a pointer to a list element.
... description pr_list_head returns the head of the specified circular list.
PR_LIST_TAIL
returns the tail of a circular list.
... syntax #include <prclist.h> prclist *pr_list_tail (prclist *listp); parameter listp a pointer to the linked list.
... returns a pointer to a list element.
... description pr_list_tail returns the tail of the specified circular list.
nsIClipboardDragDropHookList
widget/public/nsiclipboarddragdrophooklist.idlscriptable this interface is an internal gecko component.
...method overview void addclipboarddragdrophooks(in nsiclipboarddragdrophooks ahooks); nsisimpleenumerator gethookenumerator(); void removeclipboarddragdrophooks(in nsiclipboarddragdrophooks ahooks); methods addclipboarddragdrophooks() this method adds a hook to the list.
...removeclipboarddragdrophooks() this method removes a hook from the list.
... note: if this implementation is not present in the list then removal will be ignored.
nsIHTTPHeaderListener
modules/plugin/base/public/nsihttpheaderlistener.idlscriptable this interface allows plugin authors to access http response headers after issuing an nsipluginhost.geturl or nsipluginhost.posturl call.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: the plugin author must provide an instance to {geturl,posturl}() that implements both nsipluginstreamlistener and nsihttpheaderlistener.
... this instance is passed in through {geturl,posturl}()'s streamlistener parameter.
... the browser will then qi this streamlistener to see if it implements nsihttpheaderlistener.
nsIMessageListener
listeners are attached using the nsimessagelistenermanager interface.
... each listener is invoked with its own copy of the message parameter.
... when the listener is called, 'this' value is the target of the message.
...when there are multiple listeners to synchronous messages, each listener's return value is sent back as an element in an array.
nsISHistoryListener
docshell/shistory/public/nsishistorylistener.idlscriptable an interface you can implement to receive notifications about activities that occur in session history, and optionally cancel them.
... inherits from: nsisupports last changed in gecko 1.7 a session history listener is notified when pages are added to, removed from, and loaded from session history.
... the listener can prevent any action (except adding a new session history entry) from happening by returning false from the corresponding callback method.
... a session history listener can be registered on a particular nsishistory instance via the nsishistory.addshistorylistener() method.
nsIServerSocketListener
inherits from: nsisupports last changed in gecko 1.7 method overview void onsocketaccepted(in nsiserversocket aserv, in nsisockettransport atransport); void onstoplistening(in nsiserversocket aserv, in nsresult astatus); methods onsocketaccepted() this method is called when a client connection is accepted.
... onstoplistening() this method is called when the listening socket stops for some reason.
...void onstoplistening( in nsiserversocket aserv, in nsresult astatus ); parameters aserv the server socket.
... astatus the reason why the server socket stopped listening.
nsIWebProgressListener2
an extended version of nsiwebprogresslistener.
... uriloader/base/nsiwebprogresslistener2.idlscriptable please add a summary to this article.
... last changed in gecko 1.9 (firefox 3) inherits from: nsiwebprogresslistener method overview void onprogresschange64(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress); boolean onrefreshattempted(in nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogresschange64() notification that the progress has changed for one of the requests associated with awebprogress.
...this function is identical to nsiwebprogresslistener.onprogresschange(), except that this function supports 64-bit values.
nsIWebSocketListener
netwerk/protocol/websocket/nsiwebsocketlistener.idlscriptable implement this interface to receive websocket traffic events asynchronously after calling nsiwebsocketchannel.asyncopen().
...no additional messages through onmessageavailable(), onbinarymessageavailable()() or onacknowledge()() will be delievered to the listener after onserverclose() is called, but outgoing messages can still be sent through the nsiwebsocketchannel connection.
...any listener that receives onstart() will also receive onstop().
...this is the final notification the listener will receive; once it's been received, the websocket connection is complete.
DOMImplementationList - Web APIs
returned by domimplementationsource.getdomimplementationlist() and domimplementationregistry.getdomimplementationlist() .
... properties domimplementationlist.length read only returns an integer.
... methods domimplementationlist.item() returns the pos item.
... specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'domimplementationlist' in that specification.
DOMStringList - Web APIs
a type returned by some apis which contains a list of domstring (strings).
... properties domstringlist.length read only returns the length of the list.
... methods domstringlist.item() returns a domstring.
... domstringlist.contains() returns boolean indicating if the given string is in the list specifications specification status comment html living standardthe definition of 'domstringlist' in that specification.
DOMTokenList.entries() - Web APIs
the domtokenlist.entries() method returns an iterator allowing you to go through all key/value pairs contained in this object.
... syntax tokenlist.entries(); return value returns an iterator.
... examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.entries(); for (let value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'entries() (as iterable<node>)' in that specification.
DOMTokenList.keys() - Web APIs
WebAPIDOMTokenListkeys
the keys() method of the domtokenlist interface returns an iterator allowing to go through all keys contained in this object.
... syntax tokenlist.keys(); parameters none.
... examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist.
... first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.keys(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'keys() (as iterable<node>)' in that specification.
DOMTokenList.length - Web APIs
the length read-only property of the domtokenlist interface is an integer representing the number of objects stored in the object.
... syntax tokenlist.length; value an integer.
... examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist, then write the length of the list to the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let length = classes.length; span.textcontent = `classlist length = ${length}`; the output looks like this: specifications specification status comment domthe definition of 'length' in that specification.
DOMTokenList.values() - Web APIs
the values() method of the domtokenlist interface returns an iterator allowing developers to go through all values contained in the domtokenlist.
... syntax tokenlist.values(); parameters none.
... examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist.
... first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.values(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'values() (as iterable<node>)' in that specification.
EventListener.handleEvent() - Web APIs
the eventlistener method handleevent() method is called by the user agent when an event is sent to the eventlistener, in order to handle events that occur on an observed eventtarget.
... syntax eventlistener.handleevent(event); parameters event an event object describing the event that has been fired and needs to be processed.
... specifications specification status comment domthe definition of 'eventlistener.handleevent()' in that specification.
... document object model (dom) level 2 events specificationthe definition of 'eventlistener.handleevent()' in that specification.
FeaturePolicy.getAllowlistForFeature() - Web APIs
the getallowlistforfeature() method of the featurepolicy allows query of the allow list for a specific feature for the current feature policy.
... syntax const allowlist = featurepolicy.getallowlistforfeature(<feature>) parameter feature name a specific feature name must be specified.
... return value an allow list for the specified feature.
... // first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowlist = featurepolicy.getallowlistforfeature("camera") for (const origin of allowlist){ console.log(origin) } specification specification status comment feature policythe definition of 'getallowlistforfeature' in that specification.
HTMLAnchorElement.relList - Web APIs
the htmlanchorelement.rellist read-only property reflects the rel attribute.
... it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <a> element and the current document.
... the property itself is read-only, meaning you can't substitute the domtokenlist with another one, but its contents can still be changed.
... syntax var relstr = anchorelt.rellist; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { var list = anchors[i].rellist; var listlength = list.length; console.log("new anchor node found with", listlength, "link types in rellist."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
HTMLAreaElement.relList - Web APIs
the htmlareaelement.rellist read-only property reflects the rel attribute.
... it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <area> element and the current document.
... the property itself is read-only, meaning you can't substitute the domtokenlist by another one, but the content of the returned list can be changed.
... syntax var relstr = areaelt.rellist; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { var list = areas[i].rellist; var listlength = list.length; console.log("new area found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
HTMLLinkElement.relList - Web APIs
the htmllinkelement.rellist read-only property reflects the rel attribute.
... it is a live domtokenlist containing the set of link types indicating the relationship between the resource represented by the <link> element and the current document.
... the property itself is read-only, meaning you can substitute the domtokenlist by another one, but the content of the returned list can be changed.
... syntax var relstr = linkelt.rellist; example var links = document.getelementsbytagname("link"); var length = links.length; for (var i = 0; i < length; i++) { var list = links[i].rellist; var listlength = list.length; console.log("new link found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
MediaList.mediaText - Web APIs
the mediatext property of the medialist interface is a stringifier that returns a domstring representing the medialist as text, and also allows you to set a new medialist.
... syntax medialistinstance.mediatext; medialistinstance.mediatext = string; value a domstring representing the media queries of a stylesheet.
...note that the medialist is a live list; updating the list via mediatext will immediately update the behavior of the document.
... examples the following would log to the console a textual representation of the medialist of the first stylesheet applied to the current document.
MediaQueryList.matches - Web APIs
the matches read-only property of the mediaquerylist interface is a boolean that returns true if the document currently matches the media query list, or false if not.
... you can be notified when the value of matches changes by watching for the change event to be fired at the mediaquerylist.
... syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false.
... examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification.
MediaQueryList.onchange - Web APIs
the onchange property of the mediaquerylist interface is an event handler property representing a function that is invoked when the change event fires, i.e when the status of media query support changes.
... the event object is a mediaquerylistevent instance, which is recognised as a medialistquery instance in older browsers, for backwards compatibility purposes.
... syntax mediaquerylist.onchange = function() { ...
... }; example var mql = window.matchmedia('(max-width: 600px)'); mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment css object model (cssom) view modulethe definition of 'onchange' in that specification.
NodeList.item() - Web APIs
WebAPINodeListitem
returns a node from a nodelist by index.
... syntax nodeitem = nodelist.item(index) nodelist is a nodelist.
... nodeitem is the indexth node in the nodelist returned by the item method.
... alternate syntax javascript also offers an array-like bracketed syntax for obtaining an item from a nodelist by index: nodeitem = nodelist[index] example var tables = document.getelementsbytagname("table"); var firsttable = tables.item(1); // or simply tables[1] - returns the second table in the dom specifications specification status comment domthe definition of 'nodelist: item' in that specification.
NodeList.length - Web APIs
WebAPINodeListlength
the nodelist.length property returns the number of items in a nodelist.
... syntax numitems = nodelist.length numitems is an integer value representing the number of items in a nodelist.
...it's often used to test the length of a list, to see if it exists at all.
... // all the paragraphs in the document var items = document.getelementsbytagname("p"); // for each item in the list, // append the entire element as a string of html var gross = ""; for (var i = 0; i < items.length; i++) { gross += items[i].innerhtml; } // gross is now all the html for the paragraphs specifications specification status comment domthe definition of 'nodelist: length' in that specification.
SpeechGrammarList.addFromURI() - Web APIs
the addfromuri() method of the speechgrammarlist interface takes a grammar present at a specific uri and adds it to the speechgrammarlist as a new speechgrammar object.
... syntax speechgrammarlistinstance.addfromuri(src,weight); returns void.
... weight optional a float representing the weight of the grammar relative to other grammars present in the speechgrammarlist.
...oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; speechrecognitionlist.addfromuri('http://www.example.com/grammar.txt'); // adds a second grammar to the list.
TextTrackList.length - Web APIs
the read-only texttracklist property length returns the number of entries in the texttracklist, each of which is a texttrack representing one track in the media element.
... syntax var trackcount = texttracklist.length; value a number indicating how many text tracks are included in the texttracklist.
... each track can be accessed by treating the texttracklist as an array of objects of type texttrack.
... specifications specification status comment html living standardthe definition of 'texttracklist: length' in that specification.
TouchList.length - Web APIs
WebAPITouchListlength
the length read-only property indicates the number of items (touch points) in a given touchlist.
... syntax var numtouches = touchlist.length; return value numtouches the number of touch points in touchlist.
... example this code example illustrates the use of the touchlist interface's item method and the length property.
... target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
VideoTrackList.length - Web APIs
the read-only videotracklist property length returns the number of entries in the videotracklist, each of which is a videotrack representing one video track in the media element.
... syntax var trackcount = videotracklist.length; value a number indicating how many video tracks are included in the videotracklist.
... each track can be accessed by treating the videotracklist as an array of objects of type videotrack.
... specifications specification status comment html living standardthe definition of 'videotracklist: length' in that specification.
CSS Lists - CSS: Cascading Style Sheets
css lists is a module of css that defines how lists can be laid out and styled.
... reference properties list-style-image list-style-type list-style-position list-style guides consistent list indentation explains how to achieve consistent list indentation across different browsers.
... using css counters explains how to use the css counter properties to control list counters.
... specifications specification status comment css lists module level 3 working draft css level 2 (revision 1) recommendation initial definition ...
List Open Tabs - Archive of obsolete content
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".
...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.
addTabsProgressListener - Archive of obsolete content
« xul reference home addtabsprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents in all tabs in the tabbed browser.
... the progress listener should be based on the nsiwebprogresslistener interface with an additional "browser" argument as the first argument of every method, which is the browser (not <tabbrowser> = gbrowser) where the event occurred.
... see listening to events on all tabs for details.
listbox.currentIndex - Archive of obsolete content
« xul reference currentindex type: integer set to the index of the currently focused item in the list.
...(or, on some platforms, typeof(listboxcurrentindex) will be undefined) in a single selection list, the current index will always be the same as the selected index.
... in a multiple selection list, the currently focused row may be modified by the user without changing the selection by pressing the control key and pressing the cursor keys to navigate.
CORS-safelisted request header - MDN Web Docs Glossary: Definitions of Web-related terms
a cors-safelisted request header is one of the following http headers: accept, accept-language, content-language, content-type.
... you can safelist more headers using the access-control-allow-headers header and also list the above headers there to circumvent the following additional restrictions: additional restrictions cors-safelisted headers must also fulfill the following requirements in order to be a cors-safelisted request header: for accept-language and content-language: can only have values consisting of 0-9, a-z, a-z, space or *,-.;=.
... learn more cors-safelisted response header forbidden header name request header ...
AddonListener
addonlisteners can be registered with addaddonlistener() and will then receive notification of changes to the add-ons currently installed.
... these notifications come in the form of calls to methods on the listener object.
... a listener only needs to implement the methods corresponding to the events it cares about; missing methods will not cause any problems.
PRCList
a circular linked list.
... syntax #include <prclist.h> typedef struct prcliststr prclist; typedef struct prcliststr { prclist *next; prclist *previous; }; description prclist defines a node in a circular linked list.
... it can be used as the anchor of a list and can be embedded in data structures that are maintained in a linked list.
PR_CLIST_IS_EMPTY
checks for an empty circular list.
... syntax #include <prclist.h> printn pr_clist_is_empty (prclist *listp); parameter listp a pointer to the linked list.
... description pr_clist_is_empty returns a non-zero value if the specified list is an empty list, otherwise returns zero.
PR INIT CLIST
initializes a circular list.
... syntax #include <prclist.h> pr_init_clist (prclist *listp); parameter listp a pointer to the anchor of the linked list.
... description initializes the specified list to be an empty list.
TPS Password Lists
a password asset list is an array of objects, each representing a stored password.
... for example: var password_list = [ { hostname: "http://www.example.com", submiturl: "http://login.example.com", username: "joe", password: "secret123", usernamefield: "uname", passwordfield: "pword", changes: { password: "zippity-do-dah" } }, { hostname: "http://www.example.com", realm: "login", username: "joe", password: "secretlogin" } ]; each object has the following properties: hostname: the hostname for the password.
... password lists and phase actions following are the functions that can be used in phase actions related to passwords: passwords.add passwords.delete passwords.modify passwords.verify passwords.verifynot ...
TPS Pref Lists
a prefs asset list is an array of objects with name and value keys, representing browser preferences.
... for example: var prefs1 = [ { name: "browser.startup.homepage", value: "http://www.getfirefox.com" }, { name: "browser.urlbar.maxrichresults", value: 20 }, { name: "browser.tabs.autohide", value: true } ]; pref lists and phase actions the only actions supported for preference asset lists are modify and verify: prefs.modify prefs.verify sync only syncs certain preferences.
... to find the list of valid preferences, go to about:config on a browser that has weave installed, and search for services.sync.prefs.sync.
nsICurrentCharsetListener
intl/uconv/idl/nsicurrentcharsetlistener.idlscriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/intl/currentcharsetlistener;1.
... to create an instance, use: var currentcharsetlistener = components.classes["@mozilla.org/intl/currentcharsetlistener;1"] .createinstance(components.interfaces.nsicurrentcharsetlistener); method overview void setcurrentcharset(in wstring charset); void setcurrentcomposercharset(in wstring charset); void setcurrentmailcharset(in wstring charset); methods setcurrentcharset() void setcurrentcharset( in wstring charset ); parameters charset setcurrentcomposercharset() void setcurrentcomposercharset( in wstring charset ); parameters charset setcurrentmailcharset() void setcurrentmailcharset( in wstring charset ); parameters charset ...
nsIDOMFileList
the nsidomfilelist interface contains a list of nsidomfile objects describing the files selected by the user for a "file" input field on a web form.
... this interface implements the dom filelist object.
... see also filelist datatransfer drag and drop ...
nsIDOMFontFaceList
layout/inspector/public/nsidomfontfacelist.idlscriptable a list of nsidomfontface objects, each representing a single font face.
... 1.0 66 introduced gecko 7.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) method overview nsidomfontface item(in unsigned long index); attributes attribute type description length unsigned long the number of items in the list.
... methods item() returns the nsidomfontface object at the specified index into the list.
nsIFeedProgressListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface defines callbacks used during the processing of an rss or atom feed.
... 1.0 66 introduced gecko 1.8 inherits from: nsifeedresultlistener last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void handleentry(in nsifeedentry entry, in nsifeedresult result); void handlefeedatfirstentry(in nsifeedresult result); void handlestartfeed(in nsifeedresult result); void reporterror(in astring errortext, in long linenumber, in boolean bozo); methods handleentry() called after each entry or item is processed.
... see also nsifeedresultlistener interwiki lin ...
nsIWifiListener
netwerk/wifi/nsiwifilistener.idlscriptable this interface is implemented by clients interested in receiving notifications when the list of available wifi access points changes.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void onchange([array, size_is(alen)] in nsiwifiaccesspoint accesspoints, in unsigned long alen); void onerror(in long error); methods onchange() called when the list of available access points changes.
... onerror() called when an error occurs while updating the wifi access point list.
Folders and message lists
changing the current message selection in addition to getting the currently-selected messages, you can also change the selection: gfolderdisplay.selectmessage(msghdr): selects a single message, as specified by msghdr (an nsimsgdbhdr) and scrolls to its position in the message list.
... gfolderdisplay.clearselection(): clears the list of selected messages.
... listing messages in a folder if you have a message folder, and would like to list all the messages in that folder, you can use the .messages attribute, which returns an nsisimpleenumerator.
BaseAudioContext.listener - Web APIs
the listener property of the baseaudiocontext interface returns an audiolistener object that can then be used for implementing 3d audio spatialization.
... syntax baseaudiocontext.listener; value an audiolistener object.
... var mylistener = audioctx.listener; specifications specification status comment web audio apithe definition of 'listener' in that specification.
CSSValueList.length - Web APIs
the length read-only property of the cssvaluelist interface represents the number of cssvalues in the list.
... syntax var length = cssvaluelist.length; value an unsigned long representing the number of cssvalues.
... specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvaluelist.length' in that specification.
DOMTokenList.value - Web APIs
the value property of the domtokenlist interface is a stringifier that returns the value of the list as a domstring, or clears and sets the list to the given value.
... syntax tokenlist.value; value a domstring examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist, then write the value of the list to the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.textcontent = classes.value; the output looks like this: specifications specification status comment domthe definition of 'value' in that specification.
MediaQueryList.media - Web APIs
the media read-only property of the mediaquerylist interface is a domstring representing a serialized media query.
... syntax var media = mediaquerylist.media; value a domstring representing a serialized media query.
... examples this example runs the media query (max-width: 600px) and displays the value of the resulting mediaquerylist's media property in a <span>.
MediaQueryListEvent.matches - Web APIs
the matches read-only property of the mediaquerylistevent interface is a boolean that returns true if the document currently matches the media query list, or false if not.
... syntax var matches = mediaquerylistevent.matches; value a boolean; returns true if the document currently matches the media query list, false if not.
... if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification.
MediaQueryListEvent.media - Web APIs
the media read-only property of the mediaquerylistevent interface is a domstring representing a serialized media query.
... syntax var media = mediaquerylistevent.media; value a domstring representing a serialized media query.
... the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'media' in that specification.
NodeList.entries() - Web APIs
WebAPINodeListentries
the nodelist.entries() method returns an iterator allowing to go through all key/value pairs contained in this object.
... syntax list.entries(); return value returns an iterator.
... example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var entry of list.entries()) { console.log(entry); } results in: array [ 0, <p> ] array [ 1, #text "hey" ] array [ 2, <span> ] ...
NodeList.keys() - Web APIs
WebAPINodeListkeys
the nodelist.keys() method returns an iterator allowing to go through all keys contained in this object.
... syntax nodelist.keys(); return value returns an iterator.
... example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var key of list.keys()) { console.log(key); } the result is: 0 1 2 ...
NodeList.values() - Web APIs
WebAPINodeListvalues
the nodelist.values() method returns an iterator allowing to go through all values contained in this object.
... syntax nodelist.values(); return value returns an iterator.
... example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var value of list.values()) { console.log(value); } the result is: <p> #text "hey" <span> ...
RadioNodeList.value - Web APIs
if the underlying element collection contains radio buttons, the radionodelist.value property represents the checked radio button.
... syntax value = radionodelist.value; radionodelist.value = string; example html <form> <label><input type="radio" name="color" value="blue">blue</label> <label><input type="radio" name="color" value="red">red</label> </form> javascript // get the form const form = document.forms[0]; // get the form's radio buttons const radios = form.elements['color']; // choose the "red" option radios.value = 'red'; result sp...
...ecifications specification status comments html living standardthe definition of 'radionodelist.value' in that specification.
SourceBufferList: indexed property getter - Web APIs
the indexed property getter of the sourcebufferlist interface allows the sourcebuffer objects in the list to be accessed with an array operator (i.e.
... [].) syntax var mysourcebuffer = sourcebufferlist[index]; parameters index the index position of the sourcebuffer object you want to return.
... exceptions no specific exceptions are thrown, but if the supplied index is great than or equal to sourcebufferlist.length, the operation will return undefined.
SpeechGrammarList.item() - Web APIs
the item getter of the speechgrammarlist interface is a standard getter — it allows individual speechgrammar objects to be retrieved from the speechgrammarlist using array syntax.
... syntax var myfirstgrammar = speechgrammarlistinstance[0]; returns a speechgrammar object.
...oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var myfirstgrammar = speechrecognitionlist[0]; // var should contain the speechgrammar object created in line 4.
SpeechGrammarList.length - Web APIs
the length read-only property of the speechgrammarlist interface returns the number of speechgrammar objects contained in the speechgrammarlist.
... syntax var mylistlength = speechgrammarlistinstance.length; value a number indicating the number of speechgrammar objects contained in the speechgrammarlist.
...oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; speechrecognitionlist.length; // should return 1.
SpeechRecognitionResultList.item() - Web APIs
the item getter of the speechrecognitionresultlist interface is a standard getter — it allows speechrecognitionresult objects in the list to be accessed via array syntax.
... syntax var myresult = speechrecognitionresultlistinstance[0]; returns a speechrecognitionresult object.
... recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognitionResultList.length - Web APIs
the length read-only property of the speechrecognitionresultlist interface returns the length of the "array" — the number of speechrecognitionresult objects in the list.
... syntax var mylength = speechrecognitionresultlistinstance.length; returns a number.
... recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
TouchList.identifiedTouch() - Web APIs
the identifiedtouch() method returns the first touch item in the touchlist that matches the specified identifier.
... it is recommended that you use touchlist.item() instead.
... syntax var touchitem = touchlist.identifiedtouch(id); parameters id an integer value identifying the touch object to retrieve from the list.
TrackDefaultList.TrackDefault() - Web APIs
the trackdefault() getter method of the trackdefaultlist interface allows the trackdefault objects in the list to be accessed with an array operator (i.e.
... [].) syntax var mytrackdefault = trackdefaultlist[index]; parameters index the index position of the trackdefault object you want to return.
... errors no specific errors are returned, but if the supplied index is great than or equal to trackdefaultlist.length, the operation will return undefined.
VideoTrackList.selectedIndex - Web APIs
the read-only videotracklist property selectedindex returns the index of the currently selected track, if any, or -1 otherwise.
... syntax var index = videotracklist.selectedindex; value a number indicating the index of the currently selected track, if any, or -1 otherwise.
... specifications specification status comment html living standardthe definition of 'videotracklist: selectedindex' in that specification.
mssitemodejumplistitemremoved - Web APIs
the mssitemodejumplistitemremoved event occurs when mssitemodeshowjumplist is called and an item has been removed from a jump list by the user.
... syntax event property object.oncandidatewindowhide = handler; addeventlistener method object.addeventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called.
... this event is not triggered if mssitemodeclearjumplist has been called.
<listing> - HTML: Hypertext Markup Language
WebHTMLElementlisting
summary the html listing element (<listing>) renders text between the start and end tags without interpreting the html in between and using a monospaced font.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlisting deprecatedchrome no support noedge no support nofirefox no support nonotes no support nonotes notes before firefox 4, this element implemented the htmlspanelement interface instead of the standard htmlelement interf...
... the <plaintext> and <xmp> elements, similar to <listing> but also obsolete.
SyntaxError: missing ] after element list - JavaScript
the javascript exception "missing ] after element list" occurs when there is an error with the array initializer syntax somewhere.
... message syntaxerror: missing ] after element list error type syntaxerror.
... examples incomplete array initializer var list = [1, 2, var instruments = [ 'ukulele', 'guitar', 'piano' }; var data = [{foo: 'bar'} {bar: 'foo'}]; correct would be: var list = [1, 2]; var instruments = [ 'ukulele', 'guitar', 'piano' ]; var data = [{foo: 'bar'}, {bar: 'foo'}]; ...
SyntaxError: missing ) after argument list - JavaScript
the javascript exception "missing ) after argument list" occurs when there is an error with how a function is called.
... message syntaxerror: expected ')' (edge) syntaxerror: missing ) after argument list (firefox) error type syntaxerror.
... console.log('pi: ' math.pi); // syntaxerror: missing ) after argument list you can correct the log call by adding the "+" operator: console.log('pi: ' + math.pi); // "pi: 3.141592653589793" unterminated strings console.log('"java" + "script" = \"' + 'java' + 'script\"); // syntaxerror: missing ) after argument list here javascript thinks that you meant to have ); inside the string and ignores it, and it ends up not knowing that you meant the ); to end the function...
Intl​.List​Format​.prototype​.resolvedOptions() - JavaScript
the intl.listformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and style formatting options computed during the construction of the current listformat object.
... syntax listformat.resolvedoptions() return value an object with properties reflecting the locale and formatting options computed during the construction of the given listformat object.
... examples using resolvedoptions const delistformatter = new intl.listformat("de-de", { style: "short" }); const usedoptions = de.resolvedoptions(); console.log(usedoptions.locale); // "de-de" console.log(usedoptions.style); // "short" console.log(usedoptions.type); // "conjunction" (the default value) specifications specification intl.listformatthe definition of 'resolvedoptions()' in that specification.
Intl.ListFormat.supportedLocalesOf() - JavaScript
the intl.listformat.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time formatting without having to fall back to the runtime's default locale.
... syntax intl.listformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings.
... const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.listformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification intl.listformatthe definition of 'supportedlocalesof()' in that specification.
Listen for Page Load - Archive of obsolete content
the following add-on listens to the tab's built-in ready event and just logs the url of each tab as the user loads it: require("sdk/tabs").on("ready", logurl); function logurl(tab) { console.log(tab.url); } you will find this console output in the browser console, not the web console.
...you can listen for a number of other tab events, including open, close, and activate.
Listening for Load and Unload - Archive of obsolete content
exports.onunload = function (reason) {}; reason reason is one of the following strings describing the reason your add-on was unloaded: uninstall disable shutdown upgrade downgrade if your add-on is disabled, then uninstalled, your onunload listener will only be called once, with the disable reason.
... this happens because disabling an add-on also disables its onunload listeners, so there is no listener remaining when the add-on is uninstalled.
List of Former Mozilla-Based Applications - Archive of obsolete content
the following is a list of all known applications that at one point used mozilla technologies or that are no longer being actively maintained.
... a list of actively maintained mozilla-based applications is also available.
removeTabsProgressListener - Archive of obsolete content
« xul reference home removetabsprogresslistener( listener ) return type: no return value removes a progress listener to the browser which has been monitoring all tabs.
... the progress listener should implement the nsiwebprogresslistener interface.
addProgressListener - Archive of obsolete content
« xul reference home addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
... the progress listener should implement the nsiwebprogresslistener interface.
menulist.select - Archive of obsolete content
« xul reference home select() return type: no return value select all the text in the menulist's textbox.
... this method applies to editable menulists only.
listBoxObject - Archive of obsolete content
« xul reference listboxobject type: nsilistboxobject the nsilistboxobject behind the list box.
...most of the features of the list box are already available directly in the listbox, so you will rarely have need to use this box object directly.
menulist.inputField - Archive of obsolete content
« xul reference inputfield type: textbox element a reference to the textbox element used for editable menu lists.
... this property is read only and applies to editable menulists only.
CORS-safelisted response header - MDN Web Docs Glossary: Definitions of Web-related terms
a cors-safelisted response header is an http header which has been safelisted so that it will not be filtered when responses are processed by cors, since they're considered safe (as the headers listed in access-control-expose-headers).
... by default, the safelist includes the following response headers: cache-control content-language content-type expires last-modified pragma examples extending the safelist you can extend the list of cors-safelisted response headers by using the access-control-expose-headers header: access-control-expose-headers: x-custom-header, content-length ...
UpdateListener
an updatelistener receives messages from an update check for a single add-on, though it is possible to pass the same updatelistener to as many calls to findupdates() as you like.
... for each individual update check, the following methods will be called on the listener: either oncompatibilityupdateavailable() or onnocompatibilityupdateavailable(), depending on whether compatibility information for the requested application version was seen.
TPS Formdata Lists
a formdata asset list is an array of objects, each with the following properties: fieldname: required.
... for example: var formdata1 = [ { fieldname: "testing", value: "success", date: -1 }, { fieldname: "testing", value: "failure", date: -2 }, { fieldname: "username", value: "joe" } ]; formdata lists and phase actions you can use the following functions in phase actions for formdata lists: formdata.add formdata.delete formdata.verify formdata.verifynot for an example, see the tps formdata unittest: http://hg.mozilla.org/services/tps/f...st_formdata.js notes note 1, tps supports the delete action for formdata, but sync currently does not correctly sync deleted form data, see bug 564296.
TPS Tab Lists
a tabs asset list is an array of objects with the following keys: uri: the uri of the tab, required.
... for example: var tabs1 = [ { uri: "http://hg.mozilla.org/automation/crossweave/raw-file/2d9aca9585b6/pages/page1.html", title: "crossweave test page 1", profile: "profile1" }, { uri: "data:text/html,<html><head><title>hello</title></head><body>hello</body></html>", title: "hello", profile: "profile1" } ]; tab lists and phase actions tabs cannot be modified or deleted, only added or verified with the following functions: tabs.add - opens the specified tabs in the browser window.
amIWebInstallListener
toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable starts all installs.
... the registered amiwebinstalllistener is used to notify about new installs triggered by websites.
nsIBadCertListener2
security/manager/ssl/public/nsibadcertlistener2.idlscriptable this interface is used to is report a broken ssl status.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) replaces the obsolete nsibadcertlistener interface.
nsIBlocklistPrompt
xpcom/system/nsiblocklistservice.idlscriptable this interface is used, if available, by the default implementation of nsiblocklistservice to display a confirmation user interface to the user before blocking extensions or plugins.
...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.
nsIConsoleListener
xpcom/base/nsiconsolelistener.idlscriptable this interface allows you to listen for messages sent 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.
nsIDOMStorageList
dom/interfaces/storage/nsidomstoragelist.idlscriptable this interface is used to access the contextual storage areas used by globalstorage by domain.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview nsidomstorage nameditem(in domstring domain); methods nameditem() called when the list of available access points changes.
nsIFeedResultListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface should be implemented by programs to receive events from the feed parser as parsing progresses.
... see also nsifeedprogresslistener nsisupports interwiki link ...
nsIFrameMessageListener
when the listener is called, the this value is the target of the message.
...see also content process event handling nsiframelistener ...
nsITransactionListener
editor/txmgr/idl/nsitransactionlistener.idlscriptable this interface is implemented by an object that tracks transactions.
... return value see also nsitransaction nsitransactionlist nsitransactionmanager ...
nsIXULBuilderListener
content/xul/templates/public/nsixulbuilderlistener.idlscriptable this object is a listener that will be notified when a template builder rebuilds its content.
... example create an object which implements nsixulbuilderlistener: var mylistener = { queryinterface: function(aiid) { if (aiid.equals(components.interfaces.nsixulbuilderlistener) || aiid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_nointerface; }, willrebuild : function(builder) {}, didrebuild : function(builder) { } } attach the listener to a element: myelement.addlistener(mylistener);...
DB Views (message lists)
the thread pane (aka message list) is driven by classes that implement nsimsgdbview and inherit from nsmsgdbview.
... these are the main view classes: nsmsgthreadeddbview - (implementation) nsmsgsearchdbview - (implementation) nsmsgquicksearchdbview - (implementation) nsmsgxfvirtualfolderdbview - (implementation) nsmsggroupview - (implementation) usually, a view object has parallel arrays, which map directly to lines in the message list: m_keys message header key m_flags 32 bits, combination of message header flags and view-only flags (e.g., collapsed) m_level the indentation level when in threaded mode.
AudioTrackList: addtrack event - Web APIs
the addtrack event is fired when a track is added to an audiotracklist.
... bubbles no cancelable no interface trackevent event handler property onaddtrack examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('addtrack', (event) => { console.log(`audio track: ${event.track.label} added`); }); using the onaddtrack event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.onaddtrack = (event) => { console.log(`audio track: ${event.track.label} added`); }; specifications specification status html living standardthe definition of 'addtrack' in that specification.
AudioTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the onchange event handler property: const videoelement = docum...
...ent.queryselector('video'); videoelement.audiotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of 'change' in that specification.
AudioTrackList: removetrack event - Web APIs
the removetrack event is fired when a track is removed from an audiotracklist.
... bubbles no cancelable no interface trackevent event handler property onremovetrack examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('removetrack', (event) => { console.log(`audio track: ${event.track.label} removed`); }); using the onremovetrack event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.onremovetrack = (event) => { console.log(`audio track: ${event.track.label} removed`); }; specifications specification status html living standardthe definition of 'removetrack' in that specification.
SourceBufferList.length - Web APIs
the length read-only property of the sourcebufferlist interface returns the number of sourcebuffer objects in the list.
... syntax var mylistlength = sourcebufferlist.length; value an unsigned long number.
StyleSheetList - Web APIs
the stylesheetlist interface represents a list of stylesheet.
...ignoring...', stylesheet.href); } }) .filter(boolean) .join('\n'); specifications specification status comment css object model (cssom)the definition of 'cssstylesheetlist' in that specification.
TextTrackList: addtrack event - Web APIs
the addtrack event is fired when a track is added to a texttracklist.
... bubbles no cancelable no interface trackevent event handler property onaddtrack examples using addeventlistener(): const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.addeventlistener('addtrack', (event) => { console.log(`text track: ${event.track.label} added`); }); using the onaddtrack event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onaddtrack = (event) => { console.log(`text track: ${event.track.label} added`); }; specifications specification status html living standardthe definition of 'addtrack' in that specification.
TextTrackList: change event - Web APIs
the change event is fired when a text track is made active or inactive, or a texttracklist is otherwise changed.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const mediaelement = document.queryselectorall('video, audio')[0]; mediaelement.texttracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); using the onchange event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; specifications specification status html living standardthe definition of 'change' in that specification.
TextTrackList: removeTrack event - Web APIs
the removetrack event is fired when a track is removed from a texttracklist.
... bubbles no cancelable no interface trackevent event handler property onremovetrack examples using addeventlistener(): const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.addeventlistener('removetrack', (event) => { console.log(`text track: ${event.track.label} removed`); }); using the onremovetrack event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onremovetrack = (event) => { console.log(`text track: ${event.track.label} removed`); }; specifications specification status html living standardthe definition of 'removetrack' in that specification.
TrackDefaultList.length - Web APIs
the length read-only property of the trackdefaultlist interface returns the number of trackdefault objects in the list.
... syntax var mylistlength = trackdefaultlist.length; value an unsigned long number.
VideoTrackList: addtrack event - Web APIs
the addtrack event is fired when a track is added to a videotracklist.
... bubbles no cancelable no interface trackevent event handler property onaddtrack examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('addtrack', (event) => { console.log(`video track: ${event.track.label} added`); }); using the onaddtrack event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onaddtrack = (event) => { console.log(`video track: ${event.track.label} added`); }; specifications specification status html living standardthe definition of 'addtrack' in that specification.
VideoTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement ...
...= document.queryselector('video'); videoelement.videotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of 'change' in that specification.
VideoTrackList: removetrack event - Web APIs
the removetrack event is fired when a track is removed from a videotracklist.
... bubbles no cancelable no interface trackevent event handler property onremovetrack examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('removetrack', (event) => { console.log(`video track: ${event.track.label} removed`); }); using the onremovetrack event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onremovetrack = (event) => { console.log(`video track: ${event.track.label} removed`); }; specifications specification status html living standardthe definition of 'removetrack' in that specification.
::-moz-list-bullet - CSS: Cascading Style Sheets
the ::-moz-list-bullet css pseudo-element is a mozilla extension that represents the marker (typically a bullet) of a list item (<li>) in an unordered list (<ul>).
... syntax li::-moz-list-bullet examples html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css ::-moz-list-bullet { color: red; font-size: 1.5em; } result specifications not part of any standard.
::-moz-list-number - CSS: Cascading Style Sheets
the ::-moz-list-number css pseudo-element is a mozilla extension that represents the marker (typically a number) of a list item (<li>) in an ordered list (<ol>).
... syntax li::-moz-list-number examples html <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> css li::-moz-list-number { font-style: italic; font-weight: bold; } result screenshotlive sample specifications not part of any standard.
List group with badges - CSS: Cascading Style Sheets
in this recipe we will create a list group pattern with badges that indicate a count.
... requirements our list items should be displayed with the badges lined up on the right, no matter how much content the item has.
SyntaxError: missing } after property list - JavaScript
the javascript exception "missing } after property list" occurs when there is a mistake in the object initializer syntax somewhere.
... message syntaxerror: expected '}' (edge) syntaxerror: missing } after property list (firefox) error type syntaxerror what went wrong?
listcell.type - Archive of obsolete content
« xul reference home type type: string this attribute is reserved for use by anonymous children of listitem; do not use.
listitem.type - Archive of obsolete content
« xul reference home type type: string you can make an item in a listbox a checkbox by setting this attribute to the value checkbox.
menulist.appendItem - Archive of obsolete content
« xul reference home appenditem( label, value, description ) return type: element creates a new menuitem element and adds it to the end of the menulist.
removeProgressListener - Archive of obsolete content
« xul reference home removeprogresslistener( listener ) return type: no return value remove a nsiwebprogresslistener from the browser.
listcell-iconic - Archive of obsolete content
« xul reference home listcell-iconic use this class to have an image appear on the listcell.
listitem-iconic - Archive of obsolete content
« xul reference home listitem-iconic use this class to have an image appear on the listitem.
Entity list - Archive of obsolete content
this page provides a list of the entities supported by various versions of rss.
Reviewer Checklist
this article provides a list of best practices for your patch content that reviewers will check for or require.
TypeListener
typelisteners can be registered with addtypelistener() and will then receive notification as addontype are registered and unregistered.
UpdateCheckListener
updatechecklisteners are passed the results of update checks performed by the addonupdatechecker.
nsIAutoCompleteListener
xpfe/components/autocomplete/public/nsiautocompletelistener.idlscriptable this interface is deprecated.
nsICacheListener
netwerk/cache/nsicachelistener.idlscriptable this interface is a cache listener.
nsICycleCollectorListener
xpcom/base/nsicyclecollectorlistener.idlscriptable interface to pass to the cycle collector to get information about the cycle collector graph while it is being built.
nsIDNSListener
netwerk/dns/nsidnslistener.idlscriptable please add a summary to this article.
nsIDOMEventListener
the nsidomeventlistener interface implements the dom eventlistener interface.
nsIDirIndexListener
netwerk/streamconv/public/nsidirindexlistener.idlscriptable this interface is used to receive contents of directory index listings from a protocol.
nsISSLErrorListener
security/manager/ssl/public/nsisslerrorlistener.idlscriptable a mechanism to report a broken ssl connection.
nsIStreamListener
netwerk/base/public/nsistreamlistener.idlscriptable this interface is used to listen to data being received on a stream.
nsIThreadPoolListener
the nsithreadpoollistener interface represents objects that listen to notifications generated by the nsithreadpool.
nsIUpdateCheckListener
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface describing an object that listens to the progress of an update check operation.
nsIUrlListManagerCallback
toolkit/components/url-classifier/public/nsiurllistmanager.idlscriptable interface for a class that manages updates of the url classifier database.
Examine Event Listeners - Firefox Developer Tools
the inspector shows the word "event" next to elements in the html pane, that have event listeners bound to them: click the icon, then you'll see a popup listing all the event listeners bound to this element: each line contains: a right-pointing arrowhead; click to expand the row and show the listener function source code a curved arrow pointing to a stack; click it to show the code for the handler in the debugger the name of the event for which a handler was attached to this element the name and line number for the listener; you can also click here to expand the row and view the listener function source code a label indicating whether the event bubbles a label indicating the system that defines the event.
DOMTokenList.supports() - Web APIs
the supports() method of the domtokenlist interface returns true if a given token is in the associated attribute's supported tokens.
Mobile accessibility checklist - Accessibility
this document provides a concise checklist of accessibility requirements for mobile app developers.
List of default Accept values - HTTP
edge text/html, application/xhtml+xml, image/jxr, */* opera text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 values for an image when requesting an image, like through an html <img> element, user-agent often sets a specific list of media types to be welcomed.
Interface List - XSLT: Extensible Stylesheet Language Transformations
interface list see xsltprocessor in the web api documentation section.
Index - Web APIs
WebAPIIndex
below is a list of all the apis and interfaces (object types) that you may be able to use while developing your web app or site.
... 142 audiolistener api, audiolistener, interface, reference, référence(2), web audio api the audiolistener interface represents the position and orientation of the unique person listening to the audio scene, and is used in audio spatialization.
... all pannernodes spatialize in relation to the audiolistener stored in the baseaudiocontext.listener attribute.
...And 393 more matches
Index
nss offers lots of functionality; we'll walk through the list of modules, design principles, and important relevant standards.
...the trust assigned by the third party might be restricted to certain uses, which are listed in certificate extensions that are contained in the certificate.
...storage consists of multiple files: a key database file, which contains your secret keys, and a certificate database file which contains the public portion of your own certificates, the certificates of peers or cas, and a list of trust decisions (such as to not trust a built-in ca, or to explicitly trust other cas).
...And 124 more matches
Index - Archive of obsolete content
67 windows add-on sdk enumerate and examine open browser windows, open new windows, and listen for window events.
... 100 preferences/event-target add-on sdk listen to changes to the preferences system in firefox.
... 125 util/collection a simple list-like class and utilities for using it.
...And 116 more matches
Index
MozillaTechXPCOMIndex
27 components.results xpcom:language bindings, xpconnect components.results is a read-only object whose properties are the names listed as the first parameters of the macros in js/xpconnect/src/xpc.msg (also at table of errors), with the value of each corresponding to that constant's value.
...when the component starts up, it populates a list of urls read in from a file stored next to the gecko binary on the local system.
... 108 resources guide, xpcom this last section of the book provides a list of resources referred to in the tutorial and other links that may be useful to the gecko developer.
...And 92 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
179 listcell.type xul attributes, xul reference no summary!
... 180 listitem.type xul attributes, xul reference no summary!
... 218 onchange needshelp, reference, référence(2), xul attributes, xul reference an onchange attribute is an event listener to the object for the event change.
...And 60 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
fixme: explain how setting this option and use next listings if we want to run firefox displaying none of its gui and only the contents of a certain xul file, we can launch firefox and set the option: -chrome file_url.xul another way, as shown in listing 1, is to use the window.opendialog() method, which can be used only within a xul window.
... window.opendialog('another.xul', '_blank','chrome,all,dialog=no'); listing 1: opening a window without the firefox gui xul as an xml application listing 2 shows an example of a gui definition file marked up in xul (a "xul document").
...--> </window> listing 2: general structure of a xul document even with the internationalization of firefox and extensions, this kind of xml function is being used.
...And 57 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
true javascript.options.strict (present in firefox 3.5+) enforces strict error output from javascript true table 1: preferences to set for developing extensions to make these changes, start your development profile, type about:config into firefox’s location bar and open the preferences window; find the preferences listed in table 1 and double-click on them to set them accordingly.
... create install manifest fill in the install.rdf file as shown in listing 1.
... listing 1: content for install.rdf <?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"> <!-- unique id for extension.
...And 54 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
« previousnext » fixme: we should include a link to the mdc list of snippets fixme: we need to add a part about 'why and how to create your own component' c++/js this document was authored by hiroshi shimoda of clear code inc.
... note: to look at the firefox 3 source code, choose "firefox 3" in the starting points list.
...listing 1 shows how you can use xpconnect to acquire references to xpcom services and create new xpcom objects.
...And 41 more matches
WebRequest.jsm
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.
... to import webrequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) adding listeners use addlistener to add a listener to a particular event.
...And 40 more matches
How to build custom form controls - Learn web development
because it's a list, it makes sense to use the ul element.
... --> <ul class="optlist"> <!-- each option only contains the value to be displayed, we'll see later how to handle the real value that will be sent with the form data --> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> note the use of class names; these identify each relevant part regardless of the actual underlying html elements used.
...in this current state, the screen reader user only "sees" an unordered list.
...And 36 more matches
AddonManager
getallinstalls(in installlistcallback?
...getinstallsbytypes(in string types[], in installlistcallback?
... callback) void installaddonsfromwebpage(in string mimetype, in nsidomwindow source, in nsiuri uri, in addoninstall installs[]) void addinstalllistener(in installlistener listener) void removeinstalllistener(in installlistener listener) promise?
...And 36 more matches
Starting WebLock
the observer interfaces the above figure shows the observer service maintaining a list of all registered nsiobserver objects.
...this service, the nsicategoryservice, is what xpcom and gecko embedding applications use to persist lists of nsiobserver components that want to have startup notification.
...ng &previous); if (previous) nsmemory::free(previous); // free the memory the replaced value might have used the unregistration, which should occur in the unregistration callback, looks like this: rv = catman->deletecategoryentry("xpcom-startup", "weblock", pr_true); // persist a complete code listing for registering weblock as a startup observer follows: #define mozilla_strict_api #include "nsigenericfactory.h" #include "nscomptr.h" #include "nsxpcom.h" #include "nsiservicemanager.h" #include "nsicategorymanager.h" #include "nsmemory.h" #include "nsiobserver.h" #include "nsembedstring.h" #define weblock_cid \ { 0x777f7150, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22...
...And 34 more matches
NSS tools : modutil
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
... -list [modulename] display basic information about the contents of the secmod.db file.
... -rawlist display the module specs for a specified module or for all loadable modules.
...And 31 more matches
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
... -list [modulename] display basic information about the contents of the secmod.db file.
... -rawlist display the module specs for a specified module or for all loadable modules.
...And 31 more matches
Drag Operations - Web APIs
this document does not use the datatransferitem interface nor the datatransferitemlist interface.
...however, this behavior is only the default drag behavior, if no listeners adjust the data to be dragged.
... add a listener for the dragstart event.
...And 28 more matches
NSS functions
this page lists all exported functions in nss 3.11.7 it was ported from here.
... ssl functions the public functions listed here are used to configure sockets for communication via the ssl and tls protocols.
... in addition to the functions listed here, applications that support ssl use some of the certificate functions, crypto functions, and utility functions described below on this page.
...And 26 more matches
widget - Archive of obsolete content
we can then use a content script to listen for clicks on those buttons.
... next, we write a content script that listens for click events on each icon and sends the corresponding message to the main add-on code: var play_button = document.getelementbyid("play-button"); play_button.onclick = function() { self.port.emit("play"); } var pause_button = document.getelementbyid("pause-button"); pause_button.onclick = function() { self.port.emit("pause"); } var stop_button = document.getelementbyid("stop-button")...
...in the add-on's "main.js" file, we create the widget, assign it the html file and the content script, and listen for events from the content script: const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "player", width: 72, label: "player", contenturl: data.url("buttons.html"), contentscriptfile: data.url("button-script.js") }); player.port.on("play", function() { console.log("playing"); }); player.port.on("pause", function() { console.log("pausing"); }); player.port.on("stop", function() { console.log("stopping"); }); to learn much more about content scripts, see the wo...
...And 25 more matches
ui/frame - Archive of obsolete content
if the frame script initiates the conversation, you need to specify "*" as the origin: window.parent.postmessage("ping", "*"); if the frame script has received a message from the add-on already, it can use the origin property of the event object passed to the message hander: // listen for messages from the add-on, and send a reply window.addeventlistener("message", function(event) { event.source.postmessage("pong", event.origin) }, false); this frame script listens to change events on the "city-selector" <select> element, and sends a message to the add-on containing the value for the newly selected element.
... // city-info.js var cityselector = window.document.getelementbyid("city-selector"); cityselector.addeventlistener("change", citychanged); function citychanged() { window.parent.postmessage(cityselector.value, "*"); } to listen for these messages in the main add-on code, you can assign a listener to the frame's message event.
...you can specify the frame's url property as the targetorigin: frame.postmessage(message, frame.url); this add-on listens for a frame script to send the "city changed" message above, and in response, updates all frames across all browser windows with that city's current weather (it just reads this from a dictionary, where in a real case it might ask a web service): var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var weather = { "london" : "rainy", "toronto" : "snowy", ...
...And 25 more matches
ui/sidebar - Archive of obsolete content
listen to attach if the first message in your add-on goes from the sidebar scripts to the main add-on code, and listen to ready if the first message goes from the main add-on code to the sidebar script.
...the sidebar script may not be initialized yet, so you can't reliably send messages to the sidebar script right away: however, you can start listening to messages from the script.
...een main.js and a script in a sidebar, in the case where the sidebar script initiates communication: the html file includes just a script, "sidebar.js": <!doctype html> <html> <body> content for my sidebar <script type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file sends a ping message to main.js using port.emit() as soon as it loads, and adds a listener to the pong message.
...And 25 more matches
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
the final goal is to find the correct stream listener to pump the data into when necko calls ondataavailable (e.g., we may find the html parser as the stream listener to give the data to).
...it keeps track of currently pending loads and registered content listeners.
...nsdocumentopeninfo implements nsistreamlistener and proxies the nsistreamlistener calls over to the "real" stream listener once one is chosen.
...And 25 more matches
sslfnc.html
for a complete list of nss initialization functions, see initialization.
... note that at least one of the functions listed in ssl export policy functions must also be called during nss initialization.
... syntax #include "ssl.h" secstatus ssl_optiongetdefault(print32 option, prbool *on) parameters this function has the parameters listed below.
...And 25 more matches
Codecs used by WebRTC - Web media technologies
those are listed in the following table.
... mandatory audio codecs codec name browser compatibility opus chrome, edge, firefox, safari g.711 pcm (a-law) chrome, firefox, safari g.711 pcm (µ-law) chrome, firefox, safari see below for more details about any webrtc-specific considerations that exist for each codec listed above.
... it's useful to note that rfc 7874 defines more than a list of audio codecs that a webrtc-compliant browser must support; it also provides recommendations and requirements for special audio features such as echo cancelation, noise reduction, and audio leveling.
...And 25 more matches
nsIMsgMessageService
inherits from: nsisupports method overview void copymessage(in string asrcuri, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); [noscript] void copymessages(in nsmsgkeyarrayptr keys, in nsimsgfolder srcfolder, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in ns...
...iurllistener aurllistener, in string acharsetoverride, out nsiuri aurl); void openattachment(in string acontenttype, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow amsgwindow); void geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsgwindow amsgwindow); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, out nsiuri aurl); void search(in nsimsgse...
...archsession asearchsession, in nsimsgwindow amsgwindow, in nsimsgfolder amsgfolder, in string asearchuri); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in boolean aconvertdata, in string aadditionalheader); nsiuri streamheaders(in string amessageuri, in nsistreamlistener aconsumer, in nsiurllistener aurllistener [optional] in boolean alocalonly); boolean ismsginmemcache(in nsiuri aurl, in nsimsgfolder afolder, out nsicacheentrydescriptor acacheentry); nsimsgdbhdr messageuritomsghdr(in string uri); methods copymessage() pass in the uri for the message you want to have copied.
...And 23 more matches
Microdata DOM API - Web APIs
it returns a nodelist containing the items with the specified types, or all types if no argument is specified.
...getitems( [ types ] ) returns a nodelist of the elements in the document that create items, that are not part of other items, and that are of the types given in the argument, if any are listed.
... the types argument is interpreted as a space-separated list of types.
...And 23 more matches
Index - Learn web development
41 installing basic software beginner, browser, learn, setup, tools, webmechanics, l10n:priority, text editor that looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these.
... 77 arrays arrays, article, beginner, codingscripting, javascript, join, learn, pop, push, l10n:priority, shift, split, unshift in the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name.
...once you know how to use them, you can look at the list to see if there is something which works for the task you are trying to achieve.
...And 22 more matches
nsIHTMLEditor
inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring ...
... acanoutdent); void getinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); astring getinlinepropertywithattrvalue(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); nsisupportsarray getlinkedobjects(); void getlistitemstate(out boolean amixed, out boolean ali, out boolean adt, out boolean add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean ai...
...oid inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype, in boolean entirelist, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pastenoformatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring...
...And 22 more matches
nsIWebProgress
the nsiwebprogress interface is used to add or remove nsiwebprogresslistener instances to observe the loading of asynchronous requests (usually in the context of a dom window).
...a nsiwebprogresslistener instance receives notifications for the nsiwebprogress instance to which it added itself, and it may also receive notifications from any nsiwebprogress instances that are children of that nsiwebprogress instance.
... last changed in gecko 1.8.0 inherits from: nsisupports method overview void addprogresslistener(in nsiwebprogresslistener alistener, in unsigned long anotifymask); void removeprogresslistener(in nsiwebprogresslistener alistener); attributes attribute type description domwindow nsidomwindow the dom window associated with this nsiwebprogress instance.
...And 22 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 1px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 100%; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: b...
...order-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dropdown-list > div { width: 80%; height: 1.6em; margin: 0.3em 0; padding: 0.3em 10%; line-height: 1.6em; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /* * color picker tool */ body { width: 100%; height: 100%; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } body[data-dragg...
...t */ .ui-input-slider { height: 24px; line-height: 20px; } #delete-point { margin: 0 58px 0 0; float: right !important; } #controls .ui-color-picker[data-topic="picker"] { margin: 20px 0 0 0; } #controls .ui-input-slider[data-topic="axis-rotation"] { } #controls .ui-dropdown { width: 130px; height: 24px; } #controls .ui-dropdown-select { line-height: 24px; } #controls .ui-dropdown-list { height: 66px; line-height: 2.5em; overflow: hidden; } #delete-axis { margin: 0 38px 0 0; float: right !important; } /* tool controls */ #tool-section .property .name { width: 150px; } #canvas-bg { width: 16px; height: 16px; margin: 5px; background: url("images/toggle-background.png") center right no-repeat; } #canvas-bg:hover { cursor: pointer; } #canvas-bg[data-alpha='false'] ...
...And 22 more matches
panel - Archive of obsolete content
the screenshot below shows a panel whose content is built from the list of currently open tabs: panels are useful for presenting temporary interfaces to users in a way that is easier for users to ignore and dismiss than a modal dialog, since panels are hidden the moment users interact with parts of the application interface outside them.
... your add-on can receive notifications when a panel is shown or hidden by listening to its show and hide events.
... var myscript = "window.addeventlistener('click', function(event) {" + " var t = event.target;" + " if (t.nodename == 'a')" + " self.port.emit('click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("click-link", function(url) { cons...
...And 21 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
the code in listing 1 is a sample javascript script which incorporates java classes to handle the database query.
... listing 1 - querying a mysql database from rhino // import the java sql packages importpackage( java.sql ); // load the mysql driver java.lang.class.forname( "com.mysql.jdbc.driver" ); // create connection to the database var conn = drivermanager.getconnection( "jdbc:mysql://localhost/rhino", "urhino", "prhino" ); // create a statement handle var stmt = conn.createstatement(); // get a resultset var rs = stmt.executequery( "select * from employee" ); // get the metadata from the resultset var meta = rs.getmetadata(); // loop over the records, dump out column names and values while( rs.next() ) { for( var i = 1; i <= meta.getcolumncount(); i++ ) { print( meta.getcolumnname( i ) + ": " + rs.getobject( i ) + "\n" ); } print( "----------\n" ); } // cleanup ...
...sample output is shown in listing 2.
...And 21 more matches
HTML text fundamentals - Learn web development
this article explains the way html can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.
... objective: learn how to mark up a basic page of text to give it structure and meaning—including paragraphs, headings, lists, emphasis, and quotations.
... severely visually impaired people often don't read web pages; they listen to them instead.
...And 21 more matches
Introduction to events - Learn web development
note: event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together.
... the listener listens out for the event happening, and the handler is the code that is run in response to it happening.
...we are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random rgb color and sets the <body> background-color equal to it.
...And 21 more matches
NSS Tools modutil
you can use the tool to add and delete pkcs #11 modules, change passwords, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
... syntax to run the security module database tool, type the command modutil option [arguments] where option and arguments are combinations of the options and arguments listed in the following section.
... -list [modulename] display basic information about the contents of the secmod.db file.
...And 21 more matches
nsIMsgDatabase
chesize(in unsigned long size); nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); nsimsgdbhdr getmsghdrformessageid(in string messageid); boolean containskey(in nsmsgkey key); nsimsgdbhdr createnewhdr(in nsmsgkey key); void addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); void listallkeys(in nsmsgkeyarrayref outputkeys); native code only!
... nsisimpleenumerator enumeratemessages(); nsisimpleenumerator enumeratethreads(); void synccounts; nsimsgthread getthreadcontainingmsghdr(in nsimsgdbhdr msghdr); void markhdrread(in nsimsgdbhdr msghdr, in boolean bread, in nsidbchangelistener instigator); void markhdrreplied(in nsimsgdbhdr msghdr, in boolean breplied, in nsidbchangelistener instigator); void markhdrmarked(in nsimsgdbhdr msghdr, in boolean mark,in nsidbchangelistener instigator); void markmdnneeded(in nsmsgkey key, in boolean bneeded,in nsidbchangelistener instigator); boolean ismdnneeded(in nsmsgkey key); void markmdnsent(in nsmsgkey key, in boolean bneeded, in nsidbchangelistener instigator); boolean ismdnsent(in nsmsgkey key); void markread(in nsmsgkey key, in boolean bread, in nsidbchangelistener ins...
...tigator); void markreplied(in nsmsgkey key, in boolean breplied, in nsidbchangelistener instigator); void markforwarded(in nsmsgkey key, in boolean bforwarded, in nsidbchangelistener instigator); void markhasattachments(in nsmsgkey key, in boolean bhasattachments, in nsidbchangelistener instigator); void markthreadread(in nsimsgthread thread, in nsidbchangelistener instigator, in nsmsgkeyarrayptr thosemarked); native code only!
...And 21 more matches
Using files from web applications - Web APIs
accessing selected file(s) consider this html: <input type="file" id="input" multiple> the file api makes it possible to access a filelist containing file objects representing the files selected by the user.
... accessing the first selected file using a classical dom selector: const selectedfile = document.getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also possible (but not mandatory) to access the filelist through the change event.
... you need to use eventtarget.addeventlistener() to add the change event listener, like this: const inputelement = document.getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, each specified as a file object.
...And 21 more matches
Key Values - Web APIs
the tables below list the standard key values in various categories of key, with an explanation of what the key is typically used for.
... keyboardevent.key value description virtual keycode windows mac linux android "appswitch" presents a list of recently-used applications which lets the user change apps quickly.
... keycode_tv_audio_description_mix_up (253) "tvcontentsmenu" displays or hides the media contents available for playback (this may be a channel guide showing the currently airing programs, or a list of media files to play).
...And 21 more matches
Using the application cache - HTML: Hypertext Markup Language
this application cache (appcache) interface lists resources that browsers should cache to be available offline.
... how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html manifest="/example.appcache"> … </html> the manifest attribute references a url for a cache manifest file: a text file that lists urls that browsers should cache for your application.
...the browser does not cache pages without the manifest attribute, unless such pages are listed in the manifest file.
...And 21 more matches
context-menu - Archive of obsolete content
items are bound to contexts in much the same way that event listeners are bound to events.
...a bad use would be to show a submenu that listed all the user's tabs, since tabs aren't related to the page or the node the user clicked to open the menu.
...if you register a listener function for this event and it returns true, the menu item associated with the listener's content script is shown in the menu.
...And 20 more matches
tabs - Archive of obsolete content
usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
... tabs.on('open', function onopen(tab) { myopentabs.push(tab); }); // listen for tab content loads.
... tabs.on('ready', function(tab) { console.log('tab is loaded', tab.title, tab.url); }); access tabs the module itself can be used as a list of all opened tabs across all windows.
...And 20 more matches
NSS tools : certutil
it can specifically list, generate, modify, or delete certificates, create or change the password, generate new public and private key pairs, display the contents of the key database, or delete key pairs within the key database.
...the command option -h will list all the command options available and their relevant arguments.
... -h display a list of the options and arguments used by the certificate database tool.
...And 20 more matches
nsIAccessibleRole
role_menupopup 11 represents a menu, which presents a list of options from which the user can make a selection to perform an action.
...it is used for html:td, xul:tree cell and xul:listcell.
... role_list 33 represents a list box, allowing the user to select one or more items.
...And 20 more matches
nsIMsgFolder
inherits from: nsisupports method overview void startfolderloading(); void endfolderloading(); void updatefolder(in nsimsgwindow awindow); nsimsgfilterlist getfilterlist(in nsimsgwindow msgwindow); void setfilterlist(in nsimsgfilterlist filterlist); void forcedbclosed(); void delete(); void deletesubfolders(in nsisupportsarray folders, in nsimsgwindow msgwindow); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); void recursivedelete(in boolean delet...
...estorage, in nsimsgwindow msgwindow); void createsubfolder(in astring foldername, in nsimsgwindow msgwindow); nsimsgfolder addsubfolder(in astring foldername); void createstorageifmissing(in nsiurllistener urllistener); void compact(in nsiurllistener alistener, in nsimsgwindow amsgwindow); void compactall(in nsiurllistener alistener, innsimsgwindow amsgwindow,in nsisupportsarray afolderarray, in boolean acompactofflinealso,in nsisupportsarray aofflinefolderarray); void compactallofflinestores(in nsimsgwindow amsgwindow,in nsisupportsarray aofflinefolderarray); void emptytrash(in nsimsgwindow amsgwindow, in nsiurllistener alistener); void rename(in astring name, in nsimsgwindow msgwindow); void renamesubfolders( in...
...gned long resultsize, out unsigned long numfolders); nsisupportsarray getallfolderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturiformsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, in boolean allowundo); void copymessages(in nsimsgfolder srcfolder, in nsisupportsarray messages,in boolean ismove, in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener, in boolean isfolder, in boolean allowundo); void copyfolder(in nsimsgfolder srcfolder, in boolean ismovefolder,in nsimsgwindow msgwindow, in nsimsgcopyservicelistener listener ); ...
...And 20 more matches
Border-image generator - CSS: Cascading Style Sheets
; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 2em; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: bo...
...rder-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dropdown-list > div { width: 100%; height: 1.6em; margin: 0.3em 0; padding: 0.3em; line-height: 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /*************************************************************************************/ /**********************************************************************************...
...: 1; } #controls .property .ui-dropdown { margin: 0 10px; float: left; } #controls .property .ui-checkbox { margin: 0 0 0 16px; float: left; } #controls .property .ui-checkbox label { height: 0.85em; width: 10px; } /* dropdowns */ #controls .ui-dropdown { width: 50px; height: 1.7em; border-radius: 2px; } #controls .ui-dropdown-select { line-height: 1.6em; } #controls .ui-dropdown-list { top: 20px; } #controls .ui-dropdown-list { border-width: 1px; text-align: center; } #controls .ui-dropdown-list:hover { overflow: hidden; } #controls .border-repeat { margin: 0 0 0 16px !important; width: 80px; } #controls .border-repeat .ui-dropdown-list { height: 6.2em; border-width: 1px; text-align: center; } /* border-image-slice */ #border-slice-control .ui-dropdown-list { ...
...And 20 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
this section provides a table listing all the attributes with a brief description.
... this table is followed by a list describing each attribute in greater detail, along with which input types they are associated with.those that are common to most or all input types are defined in greater detail below.
... form data set encoding type to use for form submission formmethod image, submit http method to use for form submission formnovalidate image, submit bypass form control validation for form submission formtarget image, submit browsing context for form submission height image same as height attribute for <img>; vertical dimension list almost all value of the id attribute of the <datalist> of autocomplete options max numeric types maximum value maxlength password, search, tel, text, url maximum length (number of characters) of value min numeric types minimum value minlength password, search, tel, text, url minimum length (number of characters) of value m...
...And 20 more matches
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
this article lists these types along with their syntax and descriptions of what they're used for.
... 8 other resources reference, svg here is a list of additional resources on svg: 9 project svg no summary!
... 79 font-family svg, svg attribute the font-family attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.
...And 20 more matches
Elements - Archive of obsolete content
be like: <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml" xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg = "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> binding <!entity % binding-content "(resources?,content?,implementation?,handlers?)"> <!element binding %binding-content;> <!attlist binding id id #required extends cdata #implied display cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding.
... content <!element content any> <!attlist content id id #implied > a binding can specify new content that is placed inside the bound element.
... children <!element children empty> <!attlist children id id #implied includes cdata #implied > specifies the location where any child elements of the bound element are placed in the generated content.
...And 19 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
it is used to create a textbox with a popup containing a list of possible completions for what the user has started to type.
... autocompletesearch new in thunderbird 2requires seamonkey 1.1 type: space-separated list of values a space-separated list of search component names, each of which implements the nsiautocompletesearch interface.
... the components are created using the name @mozilla.org/autocomplete/search;1?name= where name is listed in this attribute.
...And 19 more matches
Vue conditional rendering: editing existing todos - Learn web development
in this handler we’ll emit an item-deleted event to our parent component so the list can be updated.
...to fix that, we need to listen for the item-edited event, and update the list accordingly.
...ew methods to your app.vue's component object, below the existing methods inside the methods property: deletetodo(todoid) { const itemindex = this.todoitems.findindex(item => item.id === todoid); this.todoitems.splice(itemindex, 1); }, edittodo(todoid, newlabel) { const todotoedit = this.todoitems.find(item => item.id === todoid); todotoedit.label = newlabel; } next, we'll add the event listeners for the item-deleted and item-edited events: for item-deleted, you'll need to pass the item.id to the method.
...And 19 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data.
... creating a new to-do form we now have an app that displays a list of to-do items.
... however, we can't update our list of items without manually changing our code!
...And 19 more matches
certutil
it can also list, generate, modify, or delete certificates within the database, create or change the password, generate new public and private key pairs, display the contents of the key database, or delete key pairs within the key database.
... -h display a list of the options and arguments used by the certificate database tool.
... -k list the key id of keys in the key database.
...And 19 more matches
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
10 class global attributes, html, reference the class global attribute is a space-separated list of the case-sensitive classes of the element.
... 27 part global attributes, html, reference, part the part global attribute contains a space-separated list of the part names of the element.
... 37 html attribute: accept accept, attribute, file, input, reference the accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.
...And 19 more matches
Introduction to SSL - Archive of obsolete content
ssl-enabled client software can use standard techniques of public-key cryptography to check that a server's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the client's list of trusted cas.
...using the same techniques as those used for server authentication, ssl-enabled server software can check that a client's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the server's list of trusted cas.
...t console can control an ssl-enabled server, the server must enable at least one of the following cipher suites for ssl 3.0: rc4 with 128-bit encryption and md5 message authentication rc4 with 40-bit encryption and md5 message authentication rc2 with 40-bit encryption and md5 message authentication no encryption, md5 message authentication only cipher suites with rsa key exchange table 1 lists the cipher suites supported by ssl that use the rsa key-exchange algorithm.
...And 18 more matches
React interactivity: Events and state - Learn web development
handling events if you've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them.
... for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() => alert("hi!")} > say hi!
...when we start giving ourselves the power to make new tasks, things that happen in the <form /> component will affect the list rendered in <app />.
...And 18 more matches
CustomizableUI.jsm
this is handled by customizemode.jsm, which interacts with customizableui through a listener mechanism.
... for each area, customizableui keeps track of a list of the widgets they contain, generally refered to as 'placements'.
... listeners customizableui provides a way to listen for various bits of customization happening.
...And 18 more matches
Mail composition back end
pizzarro <rhp@netscape.com> contents overview sending messages nsimsgsend sending listener interfaces nsimsgsendlistener nsimsgcopyservicelistener copy operations copy to sent folder drafts templates "send later" sending unsent messages sending unsent messages listener quoting sample programs overview i've done considerable work in the past few weeks reorganizing the mail composition back end, so i thought it would be helpful to put together a small doc on the new interfaces and how one can use them.
...the feedback mechanism is provided by a nsimsgsendlistener which is implemented by the caller.
... the caller has the ability to add or remove listener interfaces to the nsimsgsend object and the interface can support multiple listeners.
...And 18 more matches
WebIDL bindings
the webidl bindings are generated at build time based on two things: the actual webidl file and a configuration file that lists some metadata about how the webidl should be reflected into gecko-internal code.
... all webidl files should be placed in dom/webidl and added to the list in the moz.build file in that directory.
...resist the urge to just add your interfaces to the moz.build list without the review; it will just annoy the dom peers and they'll make you get the review anyway.
...And 18 more matches
Using IndexedDB - Web APIs
wait for the operation to complete by listening to the right kind of dom event.
...the first argument is a list of object stores that the transaction will span.
...since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string.
...And 18 more matches
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
<input> elements of type email are used to let the user enter and edit an e-mail address, or, if the multiple attribute is specified, a list of e-mail addresses.
... the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted.
... value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax.
...And 18 more matches
event/core - Archive of obsolete content
an event listener may be registered to any event target using the on function: var { on, once, off, emit } = require('sdk/event/core'); var target = { name: 'target' }; on(target, 'message', function listener(event) { console.log('hello ' + event); }); on(target, 'data', console.log); an event of a specific type may be emitted on any event target object using the emit function.
... this will call all registered listeners for the given type on the given event target in the same order they were registered.
... emit(target, 'message', 'event'); // info: 'hello event' emit(target, 'data', { type: 'data' }, 'second arg'); // info: [object object] 'second arg' registered event listeners may be removed using off function: off(target, 'message'); emit(target, 'message', 'bye'); // info: 'hello bye' sometimes listener only cares about first event of specific type.
...And 17 more matches
event/target - Archive of obsolete content
users of the object can listen to the events using the standard on() and once() functions.
... this module provides an exemplar eventtarget object, that implements an interface for adding and removing event listeners of a specific type.
... adding listeners eventtarget interface defines on method, that can be used to register event listeners on them for the given event type: target.on('message', function onmessage(message) { // note: `this` pseudo variable is an event `target` unless // intentionally overridden via `.bind()`.
...And 17 more matches
Intercepting Page Loads - Archive of obsolete content
in a nutshell, from the chrome code in the overlay we add an event listener for the load event.
... this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window.
...attaching the load event handler to gbrowser allows us to listen to these events for all tabs, without having to worry how many tabs are open.
...And 17 more matches
Inputs and input sources - Web APIs
enumerating input sources the webxr session represented by the xrsession object has an inputsources property which is a live list of the webxr input devices currently connected to the xr system.
... let inputsourcelist = xrsession.inputsources; due to the fact that the contents of the xrinputsource objects representing each input source in the list are read-only, changes to these inputs are made by the webxr system by deleting the source's record and adding a new one to replace it.
... an inputsourceschange event is sent to your xrsession whenever one or more of the input sources change, or when an input source is added to or removed from the list.
...And 17 more matches
ARIA Test Cases - Accessibility
finally, a list of currently non-mapped aria roles is given.
...when documenting an issue, please also list it in the relevant compatibility table below.
... if the currently selected option is changed the new option should be spoken whether the list is open or closed.
...And 17 more matches
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
if the user selected multiple files, the value represents the first file in the list of files they selected.
... additional attributes in addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: attribute description accept one or more unique file type specifiers describing file types to allow capture what source to use for capturing image or video data files a filelist listing the chosen files multiple a boolean which, if present, indicates that the user may choose more than one file accept the accept attribute value is a string that defines the file types the file input should accept.
... this string is a comma-separated list of unique file type specifiers.
...And 17 more matches
Working with Events - Archive of obsolete content
by registering a listener function to an event emitter an add-on can receive notifications of these events.
...in this case one end of the conversation emits the events, and the other end listens to them.
... so there are two main ways you will interact with the eventemitter framework: listening to built-in events emitted by objects in the sdk, such as tabs opening, pages loading, mouse clicks sending and receiving user-defined events between content scripts and add-on code this guide only covers the first of these; the second is explained in the working with content scripts guide.
...And 16 more matches
Enhanced Extension Installation - Archive of obsolete content
c:\program files\mozilla firefox\extensions extension metadata the extension system stores metadata in both of the two locations, in the following files: <location>/extensions/extensions.rdf - an xml/rdf datasource listing all the extensions installed at that location.
... <location>/extensions.ini - an ini manifest listing the directories for all the extensions and themes at the location (used by the component manager, preferences system, chrome registry etc to locate files during the startup process).
... the extension manager loads the xml/rdf datasources (this is allowable and necessary because a major change has happened) and gets a list of all items that need to be installed (tracked using a tobeinstalled flag on the item in the datasource).
...And 16 more matches
Accessibility API cross-reference
all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc.
... they also define a list of possible object states, such as focused, read-only, checked, etc.
...all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc.
...And 16 more matches
Mail event system
nsifolders each store individual lists of folder listeners which are maintained with addlistener() and removelistener().
... when a notification is fired on a folder, all of the folder's folder listeners and the mail session itself is notified.
... nsifolderlistener.idl is an interface that an object can implement if it is interested in listening to changes on single folder or on all folders.
...And 16 more matches
Index - Firefox Developer Tools
10 all keyboard shortcuts tools, l10n:priority this page lists all keyboard shortcuts used by the developer tools built into firefox.
... 30 devtoolscolors css this chart lists colors and css variables as implemented in the dark theme and light theme for developer tools.
...the following list aims to help firebug users to find their way into the developer tools.
...And 16 more matches
Document - Web APIs
WebAPIDocument
document.anchorsread only returns a list of all of the anchors in the document.
... document.embedsread only returns a list of the embedded <embed> elements within the current document.
... document.formsread only returns a list of the <form> elements within the current document.
...And 16 more matches
Web APIs
WebAPI
below is a list of all the apis and interfaces (object types) that you may be able to use while developing your web app or site.
... specifications this is a list of all the apis that are available.
...ter eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available.
...And 16 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
if you're implementing controls/widgets, you should also see the accessible toolkit checklist.
...mportant] role_chart role_dialog [semi-important, not currently used by all at's] role_border role_grouping role_separator [important] role_toolbar role_statusbar [important] role_table [important] role_columnheader role_rowheader role_column role_row role_cell [important] role_link [important] role_helpballoon role_character role_list [important] role_listitem [important] role_outline [important] role_outlineitem [important] role_pagetab [important] role_propertypage [important] role_indicator role_graphic [important] role_statictext [important] role_text [important] role_pushbutton [important] role_checkbutton [important] role_radiobutton [important] role_combobox [important...
...] role_droplist [important] role_progressbar [important] role_dial role_hotkeyfield role_slider role_spinbutton role_diagram role_animation role_equation role_buttondropdown role_buttonmenu role_buttondropdowngrid role_whitespace role_pagetablist [important] role_clock role_splitbutton role_ipaddress role_nothing msaa object identifiers cheat sheet for information on what each object identifier does, see the msdn object identifiers constants page.
...And 16 more matches
Color picker tool - CSS: Cascading Style Sheets
tcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e); document.addeventlistener('mousemove', callback); }); document.addeventlistener('mouseup', function(e) { document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscribers...
...ment.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { if ...
...unsubscribe, setpickermode : setpickermode }; })(); /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx ...
...And 16 more matches
ui/toolbar - Archive of obsolete content
onattach function assign a listener to the attach event.
... ondetach function assign a listener to the detach event.
... onshow function assign a listener to the show event.
...And 15 more matches
Adding Event Handlers - Archive of obsolete content
you can attach listeners to each element to listen to the events during each step of event propagation.
... due to the way a single event is passed to all the ancestors, you may attach a listener to a specific element or to an element higher in the hierarchy.
... there are two ways to attach an event listener to an element.
...And 15 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
previous overview: client-side javascript frameworks next now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app.
... objective: learn and put into practice some basic svelte concepts, like creating components, passing data using props, render javascript expressions into our markup, modify the components state and iterating over lists.
...find the <h2> heading with an id of list-heading and replace the hardcoded number of active and completed tasks with dynamic expressions: <h2 id="list-heading">{completedtodos} out of {totaltodos} items completed</h2> go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the information is coming from the todos array.
...And 15 more matches
NSS API Guidelines
the public headers is a list of header files that contain types, and functions, that are publicly available to higer-level apis.
...for example, in container structures, such as secitem, or maybe linked list data structures.
...(frees are allowed.) the arena_destructor_list preprocessor definition, and the code it encloses, are an effort to make the following work together: arenas, letting you allocate stuff and then removing them all at once lazy creation of pure-memory objects from asn.1 blobs, for example use of nsspkixcertificate doesn't drag all the code in for all constituent objects, unless they're actually being used our agressive pointer-tracking facil...
...And 15 more matches
MediaDevices.ondevicechange - Web APIs
you can at any time use enumeratedevices() to get the updated list of available devices.
...there is no information about the change included in the event object; to get the updated list of devices, you'll have to use enumeratedevices().
... example in this example, we create a function called updatedevicelist(), which is called once when mediadevices.getusermedia() successfully obtains a stream, and then is called any time the device list changes.
...And 15 more matches
Using the Web Speech API - Web APIs
speech recognition speech recognition involves receiving speech through a device's microphone, which is then checked by a speech recognition service against a list of grammar (basically, the vocabulary you want to have recognised in a particular app.) when a word or phrase is successfully recognised, it is returned as a result (or list of results) as a text string, and further actions can be initiated as a result.
... chrome support as mentioned earlier, chrome currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to chrome, and any future implementations that might support the features without a prefix: var speechrecognition = speechrecognition || webkitspeechrecognition var speechgrammarlist = speechgrammarlist || webkitspeechgrammarlist var speechrecognitionevent = speechrecognitionevent || webkitspeechrecognitionevent the grammar the next part of our code defines the grammar we want our app to recognise.
...public declares that it is a public rule, the string in angle brackets defines the recognised name for this term (color), and the list of items that follow the equals sign are the alternative values that will be recognised and accepted as appropriate values for the term.
...And 15 more matches
HTTP Index - HTTP
WebHTTPIndex
this page lists all mdn http pages along with their summary and tags.
... 10 incomplete list of mime types audio, file types, files, http, mime, mime types, php, reference, text, types, video here is a list of mime types, associated by type of documents, ordered by their common extensions.
... 18 list of default accept values accept, content negotiation, http, reference this article documents the default values for the http accept header for specific inputs and browser versions.
...And 15 more matches
Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
...s it to unsafewindow twice: the first time using cloneinto(), the second time using simple assignment: // content-script.js var contentscriptobject = {"greeting" : "hello from add-on"}; unsafewindow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.addeventlistener("click", func...
...tion() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" displays the value of "greeting" in an alert.
...And 14 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
while document.getelementbyid lets you retrieve one element, you can also use document.layers and document.all to obtain a list of all document elements with a certain tag name, such as all <div> elements.
...javascript console the javascript console can show the full log list or just errors, warnings, and messages.
...mozilla will indicate the rendering mode in view -> page info (or ctrl+i) ; firefox will list the rendering mode in tools -> page info.
...And 14 more matches
Space Manager Detailed Design - Archive of obsolete content
the coordinate is * relative to the upper-left corner of the local coordinate space * @param amaxsize the size to use to constrain the band data * @param abanddata [in,out] used to return the list of trapezoids that * describe the available space and the unavailable space * @return ns_ok if successful and ns_error_failure if the band data is not * not large enough.
... * * returns ns_ok if successful and ns_error_invalid_arg if there is no region * tagged with aframe */ nsresult removeregion(nsiframe* aframe); /** * clears the list of regions representing the unavailable space.
... void includeindamage(nscoord aintervalbegin, nscoord aintervalend) { mfloatdamage.includeinterval(aintervalbegin + my, aintervalend + my); } prbool intersectsdamage(nscoord aintervalbegin, nscoord aintervalend) { return mfloatdamage.intersects(aintervalbegin + my, aintervalend + my); } #ifdef debug /** * dump the state of the spacemanager out to a file */ nsresult list(file* out); void sizeof(nsisizeofhandler* ahandler, pruint32* aresult) const; #endif private: // structure that maintains information about the region associated // with a particular frame struct frameinfo { nsiframe* const mframe; nsrect mrect; // rectangular region frameinfo* mnext; frameinfo(nsiframe* aframe, const nsrect& arect); #ifdef ns_build_...
...And 14 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
it is used to create a textbox with a popup containing a list of possible completions for what the user has started to type.
... autocompletesearch new in thunderbird 2requires seamonkey 1.1 type: space-separated list of values a space-separated list of search component names, each of which implements the nsiautocompletesearch interface.
... the components are created using the name @mozilla.org/autocomplete/search;1?name= where name is listed in this attribute.
...And 14 more matches
Using the Editor from XUL - Archive of obsolete content
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.
... editor teardown window destruction, and hence editor teardown is initiated in two ways, listed below.
...in order to receive these events, the editor registers several event listeners on the document being edited.
...And 14 more matches
XUL Questions and Answers - Archive of obsolete content
is it possible to have checkbox support for multi column lists?
... the current issue is a person exploring if it is possible to have checkbox support for multi column lists.
... the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> <...
...And 14 more matches
nsITransactionManager
inherits from: nsisupports last changed in gecko 1.7 method overview void addlistener(in nsitransactionlistener alistener); void beginbatch(); void clear(); void dotransaction(in nsitransaction atransaction); void endbatch(); nsitransactionlist getredolist(); nsitransactionlist getundolist(); nsitransaction peekredostack(); nsitransaction peekundostack(); void redotransaction(); void removelistener(in nsitransactionlistener alistener); void undotransaction(); attributes attribute type description maxtransactioncount long sets the maximum number of transaction items the transaction manager will maintain at any ...
... methods addlistener() adds a listener to the transaction manager's notification list.
... listeners are notified whenever a transaction is done, undone, or redone.
...And 14 more matches
nsIWebBrowser
embedders use this interface during initialization to associate the new web browser instance with the embedders chrome and to register any listeners.
...method overview void addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsiwebbrowserchrome the chrome object associated with the browser instance.
... the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive additional notifications from the browser object.
...And 14 more matches
Web audio spatialization basics - Web APIs
as if its extensive variety of sound processing (and other) options wasn't enough, the web audio api also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3d game.
...in 3d spaces, it's the only way to achieve realistic audio.
... creating an audio listener so let's begin!
...And 14 more matches
Communicating using "port" - Archive of obsolete content
on(): listen to a message.
... removelistener(): stop listening to a message.
... once(): listen to only the first occurrence of a message.
...And 13 more matches
page-mod - Archive of obsolete content
the pagemod constructor takes a number of other options to control its behavior: contentstyle lists stylesheets to attach, supplied as strings.
... contentstylefile lists stylesheets to attach, supplied in separate files.
... to do this, you'll need to listen to the page-mod's attach event.
...And 13 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
in your extension's browser.xul overlay, write code which listens for a custom dom event.
... var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
...to trigger the alert() in the listener and pass the data from the web page, write code such as this in the web page: var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom.
...And 13 more matches
Sending forms through JavaScript - Learn web development
form data (application/x-www-form-urlencoded) is made of url-encoded lists of key/value pairs.
... urlencodeddata = urlencodeddatapairs.join( '&' ).replace( /%20/g, '+' ); // define what happens on successful data submission xhr.addeventlistener( 'load', function(event) { alert( 'yeah!
... data sent and response loaded.' ); } ); // define what happens in case of error xhr.addeventlistener( 'error', function(event) { alert( 'oops!
...And 13 more matches
Useful string methods - Learn web development
you can see this if you go to the string object page and look down the list on the side of the page!
...for example, we may have a list of web addresses and only want to print out the ones that contain "mozilla".
...in each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list.
...And 13 more matches
Handling common accessibility problems - Learn web development
to do that, we had to add the following bit of javascript trickery: document.onkeydown = function(e) { if(e.keycode === 13) { // the enter/return key document.activeelement.onclick(e); } }; here we add a listener to the document object to detect when a button has been pressed on the keyboard.
...addeventlistener won't work.
... the key to accessible link text is that people using screen readers will often use a common feature whereby they pull up a list of all the links on the page.
...And 13 more matches
Makefile - variables
variable name description add_to_def_file cpp_sources cpp_unit_tests a list of source files to compile as unit tests.
... csrcs a list of c source files to compile.
... defines additional preprocessor defines for c++ expand_mozlibname exports a list of exported header files and sources to install for external use.
...And 13 more matches
nsITraceableChannel
1.0 66 introduced gecko 1.9.0.4 inherits from: nsisupports last changed in gecko 1.9.0.4 the typical way to use this interface is as follows: register for the "http-on-examine-response" notification to track all http responses; skip redirects (responsestatus = 3xx on nsihttpchannel), since otherwise you may end up with two listeners registered for a channel; qi the channel passed as the "subject" to your observer to nsitraceablechannel, and replace the default nsistreamlistener (that passes the data to the original requester - e.g.
... to xmlhttprequest or to the browser tab that made the request) with your own implementation (see "implementing nsistreamlistener" below).
... after that your nsistreamlistener implementation will get the response data and will be able to pass the data on to the original nsistreamlistener (possibly modifying it).
...And 13 more matches
XPCOM Interface Reference by grouping
using this guide this page lists the current (as of dec.
... 01, 2010) list of mozilla interfaces as listed on the xpcom interface reference page where that page lists items by alphabetical sorting, this page attempts to group them by function.
... browser autocomplete nsiautocompletecontroller nsiautocompleteinput nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewind...
...And 13 more matches
Using the Multiple Accounts API
by alec flett alecf@flett.org structure servers identities storage creating new accounts smtp servers appendix a: listing of all preferences and properties structure the account system consists of: the account manager (nsimsgaccountmanager): there is a single account manager in the the client, which maintains the list of accounts, servers, etc.
...the account manager maintains the main list of accounts.
...news.mozilla.org +- netscape.public.mozilla.announce +- netscape.public.mozilla.mail-news relevant api calls: nsimsgaccount.incomingserver nsimsgaccountmanager.allservers: a list of all servers held by all accounts.
...And 13 more matches
Capabilities, constraints, and settings - Web APIs
overview the process works like this (using mediastreamtrack as an example): if needed, call mediadevices.getsupportedconstraints() to get the list of supported constraints, which tells you what constrainable properties the browser knows about.
... this isn't always necessary, since any that aren't known will simply be ignored when you specify them—but if you have any that you can't get by without, you can start by checking to be sure they're on the list.
... once the script knows whether the property or properties it wishes to use are supported, it can then check the capabilities of the api and its implementation by examining the object returned by the track's getcapabilities() method; this object lists each supported constraint and the values or range of values which are supported.
...And 13 more matches
ARIA: tab role - Accessibility
the aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.
... elements with the role tab must either be a child of an element with the tablist role, or have their id part of the aria-owns property of a tablist.
...some assistive technology will provide a count of the number of tab role elements inside a tablist, and inform users of which tab they currently have targeted.
...And 13 more matches
Accessibility documentation index - Accessibility
this document provides a list of links to all accessibility articles on the mozilla developer network.
... 7 aria live regions aria, accessibility, arialive using javascript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
...list multiple element ids in a space delimited fashion.this idea is similar to how the "for" attribute is used to link a label to an input.assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them.
...And 13 more matches
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
this page lists all the html elements, which are created using tags.
...an alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.
... <dd> the html <dd> element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
...And 13 more matches
ui/button/toggle - Archive of obsolete content
responding to click events you can respond to click events by assigning a listener to the button's click or change events.
... you can do this in the button's constructor, by assigning the listener to the onclick or onchange option.
... you can also add, or change, the listener afterwards: 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" }, onclick: firstclick, onchange: firstchange }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } function firstchange(state) { console.log("you changed '" + state.label + "'"); button.removelistener("change", firstchange); button.on("change", subsequentchanges); } function subsequentchanges(state) { ...
...And 12 more matches
Creating Event Targets - Archive of obsolete content
the guide to event-driven programming with the sdk describes how to consume events: that is, how to listen to events generated by event targets.
... for example, you can listen to the tabs module's ready event or the panel object's show event.
...if you use the sdk's event framework for your event targets, users of your module can listen for events using the sdk's standard event api.
...And 12 more matches
WAI-ARIA basics - Learn web development
note: you can find a useful list of all the aria roles and their uses, with links to futher information, in the wai-aria spec — see definition of roles.
... the spec also contains a list of all the properties and states, with links to further information — see definitions of states and properties (all aria-* attributes).
...<nav>), or go beyond html5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc.
...And 12 more matches
Getting started with CSS - Learn web development
if i want all paragraphs and all list items to be green my rule looks like this: p, li { color: green; } try this out in the interactive editor below (edit the code boxes), or in your local css document.
...headings are large and bold and our list has bullets.
... a good example is our <ul>, an unordered list.
...And 12 more matches
Other form controls - Learn web development
previous overview: forms next we now look at the functionality of non-<input> form elements in detail, from other control types such as drop-down lists and multi-line text fields, to other useful form features such as the <output> element (which we saw in action in the previous article), and progress bars.
...in both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.
...ed>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vegetables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> note: in the case of multiple choice select boxes, you'll notice that the select box no longer displays the values as drop-down content — instead, all values are displayed at once in a list, with the optional size attribute determining the height of the widget.
...And 12 more matches
Advanced text formatting - Learn web development
the elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means).
... here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
... description lists in html text fundamentals, we walked through how to mark up basic lists in html, but we didn't mention the third type of list you'll occasionally come across — description lists.
...And 12 more matches
Manipulating documents - Learn web development
if you wanted to match and do things to multiple elements, you could use document.queryselectorall(), which matches every element in the document that matches the selector, and stores references to them in an array-like object called a nodelist.
... to start with, you can get a list of all the stylesheets attached to a document using document.stylesheets, which returns an array-like object with cssstylesheet objects.
... active learning: a dynamic shopping list to round off the article, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button.
...And 12 more matches
Ember interactivity: Events, classes and state - Learn web development
creating todos for our card-header / todo input, we'll want to be able to submit our typed in todo task when we press the enter key and have it appear in the todos list.
...we do this so that our javascript code knows what we typed in, and we can save our todo and pass that text along to the todo list component to display.
... we can capture the keydown event via the on modifier, which is just ember syntactic sugar around addeventlistener and removeeventlistener (see this explanation if needed).
...And 12 more matches
Routing in Ember - Learn web development
to adjust our old way of rendering the todolist app, we'll first need to replace the todolist component invocation from the application template with an {{outlet}} call, which means "any sub-route will be rendered in place here".
... go to the todomvc/app/templates/application.hbs file and replace <todolist /> with {{outlet}} next, in our index.hbs, completed.hbs, and active.hbs templates (also found in the templates directory) we can for now just enter the todolist component invocation.
... in each case, replace {{outlet}} with <todolist /> so at this point, if you try the app again and visit any of the three routes localhost:4200 localhost:4200/active localhost:4200/completed you'll see exactly the same thing.
...And 12 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
previous overview: client-side javascript frameworks next in the last article we added more features to our to-do list and started to organize our app into components.
...we will also see how to declare and clean-up event listeners on dom elements.
...we will also have to use addeventlistener() and removeeventlistener() to run specific tasks when the control receives focus.
...And 12 more matches
Understanding client-side JavaScript frameworks - Learn web development
beginning our react todo list let's say that we’ve been tasked with creating a proof-of-concept in react – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them.
...react interactivity: editing, filtering, conditional rendering as we near the end of our react journey (for now at least), we'll add the finishing touches to the main areas of functionality in our todo list app.
... this includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks.
...And 12 more matches
Gecko info for Windows accessibility vendors
event_focus is fired for focus changes on any kind of focusable object event_statechange is used in check boxes, radio buttons, text fields, combo boxes and list boxes.
...there are currently two techniques for parsing tables: 1) use acclocation() to get the coordinates for each cell and feed that into an algorithm that builds up your own table data structure, or 2) use isimpledomnode and parse the table see below for the complete list of roles and notes about what we support intentional differences with internet explorer for the most part, where we support an msaa feature, we have tried to duplicate internet explorer's use of it.
... please let us know if you find any differences not listed here: accessible relations are supported the accnavigate() method can be used with new constants defined for gecko.
...And 12 more matches
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
api extensions: the api includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface.
...you can see the full html listing here.
... the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the back and forward buttons early on in the code we implement two simple event listeners to move the browser back and forward in history when the relevant buttons are pressed: back.addeventlistener('touchend',function() { browser.goback(); }); fwd.addeventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.goback() and htmliframeelement.goforward() methods.
...And 12 more matches
Downloads.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloads.jsm"); method overview promise<download> createdownload(object aproperties); promise<void> fetch(asource, atarget, [optional] object aoptions); promise<downloadlist> getlist(atype); promise<downloadsummary> getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window.
... getlist() retrieves the specified type of downloadlist object.
... there is one download list for each type, and this method always retrieves a reference to the same download list when called with the same argument.
...And 12 more matches
AsyncTestUtils extended framework
lnews/resources/messageinjection.js"); if the directory where you are adding the tests does not have a head_*.js file that has the two following lines, add them at the top of your test file (before the lines shown above): load("../../mailnews/resources/maildirservice.js"); load("../../mailnews/resources/mailtestutils.js"); at the bottom of the test file, add the following: var tests =[ // list your tests here ]; function run_test() { configure_message_injection({mode: "local"}); async_run_tests(tests); } asynchronous testing basics why do we need it?
...if you have the following types of listeners you can use the following pre-defined helpers: nsiurllistener: asyncurllistener (predefined).
... if you need to wrap an existing url listener or need a callback or fancy promise, create an instance of asyncurllistener.
...And 12 more matches
NSS tools : signtool
-l lists signing certificates, including issuing cas.
... if any of your certificates are expired or invalid, the list will so specify.
... this option can be used with the -k option to list detailed information about a particular signing certificate.
...And 12 more matches
Gecko Roles
« at apis support page this page offers a list of accessible roles used in gecko.
... role_menupopup represents a menu, which presents a list of options from which the user can make a selection to perform an action.
... role_list represents a list box, allowing the user to select one or more items.
...And 12 more matches
mozIPersonalDictionary
ng word, in wstring lang); void endsession(); void getcorrection(in wstring word, [array, size_is(count)] out wstring words, out pruint32 count); void ignoreword(in wstring word); void load(); void removecorrection(in wstring word,in wstring correction, in wstring lang); void removeword(in wstring word, in wstring lang); void save(); attributes attribute type description wordlist nsistringenumerator get the (lexicographically sorted) list of words.
... methods addcorrection() adds a misspelling to the list of corrections.
... void addcorrection( in wstring word, in wstring correction, in wstring lang ); parameters word the incorrect spelling of the word to add to the list of corrections.
...And 12 more matches
nsIFrameMessageManager
content/base/public/nsimessagemanager.idlscriptable provides methods for managing message listeners on local frames.
...you should use nsimessagelistenermanager or nsimessagesender instead.
... method overview void addmessagelistener(in astring amessage, in nsiframemessagelistener alistener, [optional] in boolean listenwhenclosed); void removemessagelistener(in astring amessage, in nsiframemessagelistener alistener); void sendasyncmessage(in astring amessage, in astring json); methods addmessagelistener() adds a message listener to the local frame.
...And 12 more matches
nsIWindowMediator
implemented by: @mozilla.org/appshell/window-mediator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only!
... void removelistener(in nsiwindowmediatorlistener alistener); void setzlevel(in nsixulwindow awindow, in pruint32 azlevel); native code only!
... methods addlistener() register a listener for window status changes.
...And 12 more matches
Index
the account provisioner gives the user the chance to search for and order a vanity email account from a list of partner providers.
... 4 account interfaces code snippets, extension development, thunderbird this page contains a list of the interfaces that you'll will most likely use when writing extensions that work with email or other accounts.
... 7 address book interfaces mailnews, mozilla, seamonkey, thunderbird this page contains a list of the interfaces that you'll will most likely hit when writing patches for the address book or writing extensions.
...And 12 more matches
Recommended Drag Types - Web APIs
dragging links dragged hyperlinks should include data of two types: text/uri-list, and text/plain.
...for example: var dt = event.datatransfer; dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain type last, as a fallback for the text/uri-list type.
... note: the url type is uri-list with an i, not an l.
...And 12 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
WebCSS:is
the :is() css pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
... (it is not possible to group selectors into single rule, because presence of invalid selector would invalidate whole rule.) */ :-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } syntax :is( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
...'='<attr-modifier> = i | s examples cross-browser example <header> <p>this is my header paragraph</p> </header> <main> <ul> <li><p>this is my first</p><p>list item</p></li> <li><p>this is my second</p><p>list item</p></li> </ul> </main> <footer> <p>this is my footer paragraph</p> </footer> :-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } :is(header, main, foo...
...And 12 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
we will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product listing using auto-placement.
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> ...
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"><h1>main a...
...And 12 more matches
MIME types (IANA media types) - HTTP
the internet assigned numbers authority (iana) is responsible for all official mime types, and you can find the most up-to-date and complete list at their media types page.
... discrete types the discrete types currently registered with the iana are: applicationlist at iana any kind of binary data that doesn't fall explicitly into one of the other types; either data that will be executed or interpreted in some way or binary data that requires a specific application or category of application to use.
... audio list at iana audio or music data.
...And 12 more matches
Filtering - Archive of obsolete content
for example, you wish the user to be able to select a value from a list, and the template results should be filtered based on that value.
... if (!triple) { triple = document.createelement("triple"); triple.id = "filtertriple"; triple.setattribute("subject", "?photo"); triple.setattribute("predicate", "http://www.xulplanet.com/rdf/country"); } triple.setattribute("object", country); cond.appendchild(triple); } else if (triple) { cond.removechild(triple); } document.getelementbyid("photoslist").builder.rebuild(); } the 'country' argument to the applyfilter function holds the value to filter by.
...a menulist is used to allow one to select either a specific country, or select all to show all of the photos.
...And 11 more matches
tabbrowser - Archive of obsolete content
roup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, 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, reloadwithfl...
...ags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
... properties browsers type: nodelist of browser elements holds a list of the browser elements inside the tabbrowser.
...And 11 more matches
Looping code - Learn web development
s.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } btn.addeventlistener('click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } random(x), defined earlier in the c...
...: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = 'cont...
...="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } e...
...And 11 more matches
Client-side storage - Learn web development
eryselector('.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.personal-greeting'); next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want.
... add this snippet below your previous code: // stop the form from submitting when a button is pressed form.addeventlistener('submit', function(e) { e.preventdefault(); }); now we need to add an event listener, the handler function of which will run when the "say hello" button is clicked.
...add this to the bottom of your code: // run function when the 'say hello' button is clicked submitbtn.addeventlistener('click', function() { // store the entered name in web storage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an event handler to run a function when the "forget" button is clicked — this is only displayed after the "...
...And 11 more matches
Arrays - Learn web development
previous overview: first steps next in the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name.
... arrays are generally described as "list-like objects"; they are basically single objects that contain multiple values stored in a list.
... array objects can be stored in variables and dealt with in much the same way as any other type of value, the difference being that we can access each value inside the list individually, and do super useful and efficient things with the list, like loop through it and do the same thing to every value.
...And 11 more matches
Server-side web frameworks - Learn web development
we then explain some of the criteria you can use for choosing a web framework, and then list some of your options.
... @app.route("/") def hello(): return "hello world!" while django expects developers to define a list of url mappings between a url pattern and a view function.
...the field definitions may also specify their maximum size, default values, selection list options, help text for documentation, label text for forms etc.
...And 11 more matches
Accessibility in React - Learn web development
and they can filter their task list by all, active, or completed tasks.
...this array is a list of values useeffect() should depend on.
... focusing when the user deletes a task there's one last keyboard experience gap: when a user deletes a task from the list, the focus vanishes.
...And 11 more matches
Componentizing our React app - Learn web development
objective: to show a sensible way of breaking our todo list app into components.
...let's take the second bullet point as inspiration and make a component out of the most reused, most important piece of the ui: a todo list item.
...go back to src/app.js, copy the first <li> from inside the unordered list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" ...
...And 11 more matches
Mozilla accessibility architecture
for example, they all expose an accessible name, or text representation, of each object, and they all use an enumerated integer value from a finite list, to expose the role of an object.
... examples of accessible role constants are role_button, role_checkbox and role_list, although they can have slightly different names and values in each api.
... nshtmlcomboboxaccessible: an html combo box doesn't have a dom node or anonymous content for its s textfield, button or list.
...And 11 more matches
Embedding Tips
implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::addwebbrowserlistener() method.
...alternatively, implement a nsiuricontentlistener as described below.
... implement the nsiuricontentlistener interface, and register it with the appropriate web browser object via the nsiwebbrowser::parenturicontentlistener attribute.
...And 11 more matches
NSS Memory allocation
when a plarenapool is freed, all the arenas in that pool are put on an arena free list.
... when nss attempts to allocate more memory for an arena pool, the plarenapool code attempts to use an arena from its free list, and only gets a new arena from the heap if there are no arenas in the free list that are large enough to satisfy the request.
...at the end of execution of a program, all the arenas in the free list will appear to have been leaked.
...And 11 more matches
NSS Tools certutil
it can also list, generate, modify, or delete certificates within the cert8.db file and create or change the password, generate new public and private key pairs, display the contents of the key database, or delete key pairs within the key3.db file.
... syntax to run the certificate database tool, type the command certutil option [arguments ] where options and arguments are combinations of the options and arguments listed in the following section.
... -k list the keyid of keys in the key database.
...And 11 more matches
Redis Tips
redis data types include: strings hashes lists sets ordered sets (called zsets in redis) transactions publishers and subscribers this table lists some common programming tasks and data structures, and suggests some redis functions or data structures for them: dictionary lookup set, get, setnx, etc.
... counters set, incr, incrby list manipulation lpush, rpush, lpop, rpop, llen, linsert, lindex, etc.
... event logging lists, zsets, pubsub queues lists (rpush, blpop, blpoprpush, etc.) priority queues zsets membership sets, bitstrings state hashes heartbeats zsets hit counters zsets message broadcast pubsub search reverse indexes (never use keys in production) documentation redis has fantastic documentation.
...And 11 more matches
nsIControllers
content/xul/document/public/nsicontrollers.idlscriptable represents a list of nsicontroller elements.
...you should not normally need to create an instance, as you normally need to alter the window or element's existing list of controllers.
...controller controller); void insertcontrollerat(in unsigned long index, in nsicontroller controller); void removecontroller(in nsicontroller controller); nsicontroller removecontrollerat(in unsigned long index); attributes attribute type description commanddispatcher nsidomxulcommanddispatcher obsolete since gecko 1.9 methods appendcontroller() adds a controller to the end of the list.
...And 11 more matches
XPCOM Interface Reference
component; nsiprefbranchextensionmanager (toolkit)iaccessible2iaccessibleactioniaccessibleapplicationiaccessiblecomponentiaccessibleeditabletextiaccessiblehyperlinkiaccessiblehypertextiaccessibleimageiaccessiblerelationiaccessibletableiaccessibletable2iaccessibletablecelliaccessibletextiaccessiblevalueidispatchijsdebuggeramiinstallcallbackamiinstalltriggeramiwebinstallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentativecolorcallbackmozispellcheckingenginemozistorageaggregatefunctionmozistorag...
...pplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensica...
...chesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthesizernsiconsolelistenernsiconsolemessagensiconsoleservicensicontainerboxobjectnsicontentframemessagemanagernsicontentprefnsicontentprefcallback2nsicontentprefobservernsicontentprefservicensicontentprefservice2nsicontentsecuritypolicynsicontentsniffernsicontentviewnsicontentviewmanagernsicontentviewernsicontrollernsicontrollersnsiconver...
...And 11 more matches
Mozilla
adding phishing protection data providers phishing protection technology lets firefox help protect users by comparing the urls the user visits to a list of known scam sites, and presenting a warning to the user when they visit a site on the list.
... building mozilla in this article, we list documents that will guide you in building firefox or other projects based upon mozilla code.
... creating a localized windows installer of seamonkey preamble: not all of the programs listed below are necessary.
...And 11 more matches
Migrating from Firebug - Firefox Developer Tools
the following list aims to help firebug users to find their way into the developer tools.
...the difference 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.
...both tools allow to display wrapped event listeners (e.g.
...And 11 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
example in this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, outputting a hierarchical directory listing.
... html content the html establishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing".
... <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
...And 11 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
example in this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, outputting a hierarchical directory listing.
... html content the html establishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing".
... <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
...And 11 more matches
Intersection Observer API - Web APIs
targeting an element to be observed once you have created the observer, you need to give it a target element to watch: let target = document.queryselector('#listitem'); observer.observe(target); // the callback we setup for the observer will be executed now for the first time // it waits until we assign a target to our observer (even if the target is currently not visible) whenever the target meets a threshold specified for the intersectionobserver, the callback is invoked.
... the callback receives a list of intersectionobserverentry objects and the observer: let callback = (entries, observer) => { entries.foreach(entry => { // each entry describes an intersection change for one observed // target element: // entry.boundingclientrect // entry.intersectionratio // entry.intersectionrect // entry.isintersecting // entry.rootbounds // entry.target // entry.time }); }; the list of entries received by the callback includes one entry for each target which reporting a change in its intersection status.
... for example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer.
...And 11 more matches
PannerNode - Web APIs
pannernode.distancemodel an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.
... pannernode.maxdistance a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further.
... pannernode.refdistance a double value representing the reference distance for reducing volume as the audio source moves further from the listener.
...And 11 more matches
Using Touch Events - Web APIs
interfaces touch events consist of three interfaces (touch, touchevent and touchlist) and the following event types: touchstart - fired when a touch point is placed on the touch surface.
... the touchlist interface represents a list of contact points with a touch surface, one touch point per contact.
... thus, if the user activated the touch surface with one finger, the list would contain one item, and if the user touched the surface with three fingers, the list length would be three.
...And 11 more matches
Using Web Workers - Web APIs
re uris as parameters to resources to import; all of the following examples are valid: importscripts(); /* imports nothing */ importscripts('foo.js'); /* imports just "foo.js" */ importscripts('foo.js', 'bar.js'); /* imports two scripts */ importscripts('//example.com/hello.js'); /* you can import scripts from other origins */ the browser loads each listed script and executes it.
...calling start() is only needed if the message event is wired up via the addeventlistener() method.
... first, we create a queryableworker class that takes the url of the worker, a default listener, and an error handler, and this class is going to keep track of a list of listeners and help us communicate with the worker: function queryableworker(url, defaultlistener, onerror) { var instance = this, worker = new worker(url), listeners = {}; this.defaultlistener = defaultlistener || function() {}; if (onerror) {worker.onerror = onerror;} this.postmessa...
...And 11 more matches
Testing media queries programmatically - CSS: Cascading Style Sheets
the dom provides features that can test the results of a media query programmatically, via the mediaquerylist interface and its methods and properties.
... once you've created a mediaquerylist object, you can check the result of the query or receive notifications when the result changes.
... creating a media query list before you can evaluate the results of a media query, you need to create the mediaquerylist object representing the query.
...And 11 more matches
Creating a cross-browser video player - Developer guides
once again the html is quite straightforward, using an unordered list with list-style-type:none set to enclose the controls, each of which is a list item with float:left.
...this list is inserted after the <video> element, but inside the <figure> element (this is important for the fullscreen functionality, which is explained later on).
...most of these buttons require a simple click event listener to be added, and a media api defined method and/or attributes to be called/checked on the video.
...And 11 more matches
Communicating With Other Scripts - Archive of obsolete content
a page-mod and a context-menu) they can directly communicate by dispatching and listening for customevents on dom objects they can access (e.g.
...ripts if a page includes its own scripts using <script> tags, either embedded in the page or linked to it using the src attribute, there are a couple of ways a content script can communicate with it: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox 31 code in content scripts can't use window to access postmessage() and addeventlistener() and instead must use document.defaultview.
... messaging from content script to page script suppose we have a page called "listen.html" hosted at "my-domain.org", and we want to send messages from the add-on to a script embedded in that page.
...And 10 more matches
remote/child - Archive of obsolete content
it provides two main things: access to web content loaded into this child process port mechanisms to communicate with the main process interacting with web content to interact with web content, the sdk/remote/child module provides a frames property that's a list of all content frames loaded into this child process.
... each frame then has a content property that's the top-level dom window for the frame, and addeventlistener/removeeventlistener functions that enable you to listen to dom events dispatched by the frame.
... frames a list of the content frames in this process.
...And 10 more matches
ui/button/action - Archive of obsolete content
responding to click events you can respond to click events by assigning a listener to the button's click event.
... you can do this in the button's constructor, by assigning the listener to the onclick option.
... you can also add, or change, the listener afterwards: 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: firstclick }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } the listener is passed a state object that contains all the button's properties.
...And 10 more matches
Monitoring downloads - Archive of obsolete content
firefox 3 introduces new api that allows any number of listeners to observe downloads.
...the result is a window you can open by choosing "download log" in the tools menu, which lists all downloads that have been started since you installed the extension.
... in the list is the name of the file, the start and end times of the download, the download speed, and the status of the download.
...And 10 more matches
Commands - Archive of obsolete content
you might use this to have a listbox respond to cut, copy and paste operations, for instance.
... you can get the command dispatcher using the document's commanddispatcher property, or you can retrieve it from the controllers list on an element or a window.
...a controller is expected to implement four methods, which are listed below: supportscommand (command) this method should return true if the controller supports a command.
...And 10 more matches
More Event Handlers - Archive of obsolete content
in the addeventlistener form, the first argument passed to the listener function will be the event object.
... other arguments can be passed to a listener function, if required.
...for a full list, see the reference.
...And 10 more matches
XUL Event Propagation - Archive of obsolete content
but to use events effectively in xul, you must be aware of what the actual process for raising, listening to, and handling events is.
...it's passive in that it doesn't look for a listener; it propagates or "bubbles up" the hierarchy of nodes within the interface until it is either handled in some way or passes out of the interface unhandled.
...the availability of event listeners is also somewhat pre-determined, though xul provide generalized event listeners (i.e., oncommand event listeners) for most of the elements in the widget hierarchy.
...And 10 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
previous overview: client-side javascript frameworks next as we near the end of our react journey (for now at least), we'll add the finishing touches to the main areas of functionality in our todo list app.
... this includes allowing you to edit existing tasks, and filtering the list of tasks between all, completed, and incomplete tasks.
... objective: to learn about conditional rendering in react, and implementing list filtering and an editing ui in our app.
...And 10 more matches
Creating our first Vue component - Learn web development
previous overview: client-side javascript frameworks next now it's time to dive deeper into vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list.
...we'll use this to build our list of todos.
...todolist), and the equivalent custom element is always in hyphenated lower case (e.g.
...And 10 more matches
Creating Sandboxed HTTP Connections
it takes two arguments: a listener and a context that is passed to the listener's methods.
... channel.asyncopen(listener, null); http notifications the above mentioned listener is a nsistreamlistener, which gets notified about events such as http redirects and data availability.
... since nsistreamlistener does not cover cookies, the current channel being used will need to be stored as a global, since another listener will be used for cookie notifications (covered in the next section).
...And 10 more matches
L20n Javascript API
you can listen to the ready event (emitted by the context instance when all the resources have been compiled) and use ctx.getsync and ctx.getentitysync to get translations synchronously.
... ctx.localize(['hello', 'new'], function(l10n) { var node = document.queryselector('[data-l10n-id=hello]'); node.textcontent = l10n.entities.hello.value; node.classlist.remove('hidden'); }); ctx.registerlocales(defaultlocale: string?, availablelocales: array<string>?) register the default locale of the context instance, as well as all other locales available to the context instance before the language negotiation.
... the final list of locales supported by the context instance will be negotiated asynchronously by the negotiator registered by registerlocalenegotiator.
...And 10 more matches
XPCOM array guide
MozillaTechXPCOMGuideArrays
for example: // handlelist cannot modify the array because of const void handlelist(const nstarray<t>&); in-place enumeration most of the arrays presented here provide callback-style means to enumerate members of an array.
... example: a content node's list of nsicontent children.
... c++ example void getlist(nsiarray** aresult) { nscomptr<nsimutablearray> array = do_createinstance(ns_array_contractid); // append some elements ...
...And 10 more matches
nsIDownloadManager
es["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); method overview nsidownload adddownload(in short adownloadtype, in nsiuri asource, in nsiuri atarget, in astring adisplayname, in nsimimeinfo amimeinfo, in prtime astarttime, in nsilocalfile atempfile, in nsicancelable acancelable, in boolean aisprivate); void addlistener(in nsidownloadprogresslistener alistener); void canceldownload(in unsigned long aid); void cleanup(); void endbatchupdate(); obsolete since gecko 1.9.1 void flush(); obsolete since gecko 1.8 nsidownload getdownload(in unsigned long aid); void onclose(); obsolete since gecko 1.9.1 void open(in nsidomwindow aparent, in nsidownload...
...nload); obsolete since gecko 1.9.1 void openprogressdialogfor(in nsidownload adownload, in nsidomwindow aparent, in boolean acanceldownloadonclose); obsolete since gecko 1.9.1 void pausedownload(in unsigned long aid); void removedownload(in unsigned long aid); void removedownloadsbytimeframe(in long long abegintime, in long long aendtime); void removelistener(in nsidownloadprogresslistener alistener); void resumedownload(in unsigned long aid); void retrydownload(in unsigned long aid); void savestate(); obsolete since gecko 1.8 void startbatchupdate(); obsolete since gecko 1.9.1 attributes attribute type description activedownloadcount long the number of files currently bei...
... listener nsidownloadprogresslistener the download manager's progress listener.
...And 10 more matches
Introduction to DOM Inspector - Firefox Developer Tools
inspecting content documents the inspect content document menupopup can be accessed from the file menu, and it will list currently loaded content documents.
...for thunderbird and seamonkey mail and news, any messages you're viewing will be listed here.
... inspecting chrome documents the inspect chrome document menupopup can be accessed from the file menu , and it will contain the list of currently loaded chrome windows and subdocuments.
...And 10 more matches
Using Service Workers - Web APIs
we can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them?
...in this version, we pass in a json fragment containing all the data for a single image (see what they look like in image-list.js).
... if your service worker is active on a client being served with the service-worker-allowed header, you can specify a list of max scopes for that worker.
...And 10 more matches
Example and tutorial: Simple synth keyboard - Web APIs
<div class="settingsbar"> <div class="left"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.5" list="volumes" name="volume"> <datalist id="volumes"> <option value="0.0" label="mute"> <option value="1.0" label="100%"> </datalist> </div> we specify a default value of 0.5, and we provide a <datalist> element which is connected to the range using the name attribute to find an option list whose id matches; in this case, the data set is named "volume".
... let audiocontext = new (window.audiocontext || window.webkitaudiocontext)(); let osclist = []; let mastergainnode = null; audiocontext is set to reference the global audiocontext object (or webkitaudiocontext if necessary).
... osclist is set up to be ready to contain a list of all currently-playing oscillators.
...And 10 more matches
Cross-browser audio basics - Developer guides
myaudio.addeventlistener("loadstart", function() { //grabbing the file }); durationchange if you just want to know as soon as the duration of your media is established, this is the event for you.
... myaudio.addeventlistener("durationchange", function() { //you can display the duration now }); loadedmetadata metadata can consist of more than just duration — if you want to wait for all the metadata to download before doing something, you can detect the loadedmetadata event.
... myaudio.addeventlistener("loadedmetadata", function() { //you can display the duration now }); loadeddata the loadeddata event is fired when the first bit of media arrives.
...And 10 more matches
Using Feature Policy - HTTP
essentially, you write a policy, which is an allowed list of origins for each feature.
... for every feature controlled by feature policy, the feature is only enabled in the current document or frame if its origin matches the allowed list of origins.
... for each policy-controlled feature, the browser maintains a list of origins for which the feature is enabled, known as an allowlist.
...And 10 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
first we’ll sketch out a simple interface for it (listing 1).
... listing 1: calc.js (stage 1) function rpncalc() { } rpncalc.prototype = { init: function() { }, push: function(val) { }, plus: function() { }, pop: function() { } } implement the addition operation create test case begin by creating the test case.
...next, click the edit button to set up the “2 1+” test case (listing 2).
...And 9 more matches
Tabbed browser - Archive of obsolete content
each snippet normally includes some code to run at initialization, these are best run using a load listener.
...if you need to do something with gbrowser right after the window is opened, listen for the load event and use gbrowser in the event listener.
... // wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
...And 9 more matches
In-Depth - Archive of obsolete content
a list of the different operating system colours can be found on the w3c's web site.
...this is only a list of properties which may be useful to you; it is in no way all of the mozilla specific properties available.
... other sites which list mozilla specific css properties xulplanet.com [dead link, 26.03.13] mozilla-prefixed properties on the standard track 26.03.13 -moz-appearance makes a widget look like it's from your operating system.
...And 9 more matches
XUL controls - Archive of obsolete content
the following table lists the xul user interface controls.
... <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element.
... label reference <listbox> the listbox is used to select an item from a list of labelled items.
...And 9 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
there are several ways in which trees are used, as listed below.
... the second column lists the interfaces available via the tree's view property.
... flags type: space-separated list of the values below a set of flags used for miscellaneous purposes.
...And 9 more matches
Organizing your CSS - Learn web development
you will typically have rules set up for: body p h1, h2, h3, h4, h5 ul and ol the table properties links in this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.
...} after this section we could define a few utility classes, for example a class that removes the default list style for lists we're going to display as flex items or in some other way.
... /* || utilities */ .nobullets { list-style: none; margin: 0; padding: 0; } ...
...And 9 more matches
Video and Audio APIs - Learn web development
first of all, add the following to the bottom of your code, so that the playpausemedia() function is invoked when the play button is clicked: play.addeventlistener('click', playpausemedia); now to define playpausemedia() — add the following, again at the bottom of your code: function playpausemedia() { if(media.paused) { play.setattribute('data-icon','u'); media.play(); } else { play.setattribute('data-icon','p'); media.pause(); } } here we use an if statement to check whether the video is paused.
...add the following addeventlistener() lines below the previous one you added: stop.addeventlistener('click', stopmedia); media.addeventlistener('ended', stopmedia); the click event is obvious — we want to stop the video by running our stopmedia() function when the stop button is clicked.
... we do however also want to stop the video when it finishes playing — this is marked by the ended event firing, so we also set up a listener to run the function on that event firing too.
...And 9 more matches
Introduction to client-side frameworks - Learn web development
consider a common kind of application: a to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters.
... this application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application.
... we can examine the difficulty of this problem by looking at just one feature of our todo list app: rendering a list of tasks.
...And 9 more matches
Creating reftest-based unit tests
to run all the reftests, go to the directory where you save firefox's source code and run: ./mach reftest if you want to run a particular set of reftests, pass the path as an argument: ./mach reftest path/from/sourcedir/reftest.list and to run a single reftest just pass the path to the test file (not the reference file): ./mach reftest path/from/sourcedir/reftest-name.html there is no reftest equivalent to mach mochitest --keep-open, but temporarily adding the reftest-wait class to a test (or disabling the script that removes it) will keep it open longer.
...to run: moz_layers_force_shmem_surfaces=1 make -c $(objdir) reftest-ipc note: right now, automation currently only runs layout/reftests/reftest-sanity/reftest.list!
... step 3 create a file named foo.html with the following: <html><head><title>reftest0001</title> <body><strong>hello!</strong></body> </html> step 4 create a file named bar.html with the following: <html><head><title>reftest0001</title> <body><b>hello!</b></body> </html> step 5 create a file named reftest.list with the following: == foo.html bar.html you are now ready to run the test (but first you must go back to the root of firefox's source code tree): $ ./mach reftest path/to/reftest.list 2>&1 | grep reftest reftest pass: file:///users/ray/mozilla-central/path/to/foo.html $ congratulations!
...And 9 more matches
Communicating with frame scripts
the example below sends a message named "my-e10s-extension-message", with a data payload containing details and tag properties, and exposes the event.target object as a cpow: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.target.tagname }, { target : event.target }); }, false); to receive messages from content, a chrome script needs to add a message listener using the message manager's addmessagelistener() api.
... the message passed to the listener is an object containing the following properties: name string containing the message name.
... objects an object whose properties are any cpows exposed by the sender as the third argument to sendasyncmessage() in the example below the listener just logs all the messages details: // chrome script messagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give...
...And 9 more matches
NSS tools : crlutil
MozillaProjectsNSStoolscrlutil
name crlutil — list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
... synopsis crlutil [options] arguments description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
... this document discusses certificate revocation list management.
...And 9 more matches
Hacking Tips
this page list a few tips to help you investigate issues related to spidermonkey.
... all tips listed here are dealing with the javascript shell obtained at the end of the build documentation of spidermonkey.
... debugging tips getting help (from js shell) use the help function to get the list of all primitive functions of the shell with their description.
...And 9 more matches
Handling Mozilla Security Bugs
the mozilla security bug group will have a private mailing list, security-group@mozilla.org, to which everyone in the security bug group will be subscribed.
... this list will act as a forum for discussing group policy and the addition of new members, as described below.
...ipate in security bug group activities and have access to otherwise-confidential security bug reports: a person who reports a security bug will have continued access to all bugzilla activities associated with that bug, even if the bug is marked "security-sensitive." any other persons may be given access to a particular security bug, by someone else (who does have access) adding them to the cc list for that bug.
...And 9 more matches
Using XPCOM Components
the nsicookiemanager interface removeall remove all cookies from the cookie list.
... enumerator enumerate through the cookie list.
... remove remove a particular cookie from the list.
...And 9 more matches
inIDOMUtils
s;1"] .getservice(components.interfaces.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void getcsspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array, size_is(acount)] out wstring aprops); nsisupportsarray getcssstylerules(in nsidomelement aelement, [optional] in do...
...uleline(in nsidomcssstylerule arule); unsigned long getrulecolumn(in nsidomcssstylerule arule); unsigned long getselectorcount(in nsidomcssstylerule arule); astring getselectortext(in nsidomcssstylerule arule, in unsigned long aselectorindex); unsigned long long getspecificity(in nsidomcssstylerule arule, in unsigned long aselectorindex); nsidomfontfacelist getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomeleme...
... getchildrenfornode() returns a list of dom nodes that are children of the specified node.
...And 9 more matches
nsIMsgDBHdr
ments); void setprioritystring(in string priority); unsigned long orflags(in unsigned long flags); unsigned long andflags(in unsigned long flags); void setreferences(in string references); acstring getstringreference(in long refnum); void setrecipientsarray(in string names, in string addresses,in unsigned long numaddresses); void setcclistarray(in string names, in string addresses,in unsigned long numaddresses); void setbcclistarray(in string names, in string addresses,in unsigned long numaddresses);new in thunderbird 3.1 [noscript] void getauthorcollationkey(out octetptr key, out unsigned long len); [noscript] void getsubjectcollationkey(out octetptr key, out unsigned long len); [noscript] void ...
...see nsmsgmessageflags for a list of what may or may not be set on this message.
... cclist string indicates the cc list of this message; the equivalent header is the cc: header.
...And 9 more matches
nsINavBookmarksService
aindex the index to insert at, or default_index to append to the end of the list.
... index the index to insert at, or default_index to append to the end of the list.
...pass in a reference to a tarray; it will get cleared and filled with the resulting list of folder ids.
...And 9 more matches
Address Book examples
formulate a boolean search string (see nsiabcard for built-in property names): var searchquery = "(or(primaryemail,bw,@v)(nickname,bw,@v)(and(ismaillist,=,true)(notes,bw,@v)))"; searchquery = searchquery.replace(/@v/g, encodeuricomponent("mystr") the search queries use lisp syntax with operators enumerated in nsabquerystringtoexpression.cpp.
... how do i add/edit/delete mailing lists?
... adding a mailing list first create a mailing list object and initialize it: var maillist = components.classes["@mozilla.org/addressbook/directoryproperty;1"] .createinstance(components.interfaces.nsiabdirectory); maillist.ismaillist = true; now fill in the details you want to store: maillist.dirname = "my mailing list"; maillist.listnickname = "nickname for list"; maillist.description = "list description"; add the cards you want to include in the list: for (let i = 0; i < numcards; i++) maillist.addresslists.appendelement(card[i], false); now save the list: var parentdirectory = ...; // an nsiabdirectory for the parent of the mailing list.
...And 9 more matches
Introduction to the DOM - Web APIs
for example, the standard dom specifies that the getelementsbytagname method in the code below must return a list of all the <p> elements in the document: const paragraphs = document.getelementsbytagname("p"); // paragraphs[0] is the first <p> element // paragraphs[1] is the second <p> element, etc.
...though we focus exclusively on javascript in this reference documentation, implementations of the dom can be built for any language, as this python example demonstrates: # python dom example import xml.dom.minidom as m doc = m.parse(r"c:\projects\py\chap1.xml") doc.nodename # dom property of document object p_list = doc.getelementsbytagname("para") for more information on what technologies are involved in writing javascript on the web, see javascript technologies overview.
... nodelist a nodelist is an array of elements, like the kind that is returned by the method document.getelementsbytagname().
...And 9 more matches
Element - Web APIs
WebAPIElement
element.classlist read only returns a domtokenlist containing the list of class attributes.
...set using the part attribute), returned as a domtokenlist.
... eventtarget.addeventlistener() registers an event handler to a specific event type on the element.
...And 9 more matches
Signaling and video calling - Web APIs
function sendtooneuser(target, msgstring) { var isunique = true; var i; for (i=0; i<connectionarray.length; i++) { if (connectionarray[i].username === target) { connectionarray[i].send(msgstring); break; } } } this function iterates over the list of connected users until it finds one matching the specified username, then sends the message to that user.
...otherwise, the message is broadcast to all users by iterating over the connection list, sending the message to each user.
... ui to start a call the code which handles the "userlist" message calls handleuserlistmsg().
...And 9 more matches
Event reference
this article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, mozilla-specific events are listed so that add-ons can use them to interact with the browser.
... mouseenter a pointing device is moved onto the element that has the listener attached.
... mouseleave a pointing device is moved off the element that has the listener attached.
...And 9 more matches
HTML attribute: multiple - HTML: Hypertext Markup Language
most browsers displaying a scrolling list box for a <select> control with the multiple attribute set versus a single line dropdown when the attribute is ommitted.
... <input type="email" multiple name="emails" id="emails"> if and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated e-mail addresses.
... any trailing and leading whitespace is removed from each address in the list.
...And 9 more matches
<input type="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string ("").
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, telephone number inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum length, in utf-16 characters, to accept as a valid input minlength the minimum length that is considered valid for the field's contents pattern a regular expression the entered value must match to pass constraint validation placeholder an example value to display inside the field when it has no value readonly a boolean attribute which, if present, indicates that the field's contents should not ...
...be user-editable size the number of characters wide the input field should be onscreen list the values of the list attribute is the id of a <datalist> element located in the same document.
...And 9 more matches
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange().
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, url inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder ...
...the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document.
...And 9 more matches
<li> - HTML: Hypertext Markup Language
WebHTMLElementli
the html <li> element is used to represent an item in a list.
... it must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).
... in menus and unordered lists, list items are usually displayed using bullet points.
...And 9 more matches
JavaScript modules - JavaScript
createreportlist() — creates an unordered list appended inside a specified wrapper element, which can be used to output report data into.
... returns the list's id.
... reportarea() — writes a square's area to a specific report list, given its length.
...And 9 more matches
port - Archive of obsolete content
from the content script to the main add-on code: // content-script.js var mymessagepayload = "some data"; self.port.emit("mymessage", mymessagepayload); from the main add-on code to the content script: // main.js var mymessagepayload = "some data"; worker.port.emit("mymessage", mymessagepayload); on() the port.on() function registers a function as a listener for a particular message sent from the other side using port.emit().
... in a content script, to listen for "mymessage" sent from the main add-on code: // content-script.js self.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); in the main add-on code, to listen for "mymessage" sent from a a content script: // main.js worker.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); once() often you'll want to receive a message just once, then stop listening.
... this example rewrites the content script in the port.removelistener() example so that it uses once(): // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("get-first-para", getfirstparagraph); removelistener() you can use port.on() to listen for messages.
...And 8 more matches
windows - Archive of obsolete content
enumerate and examine open browser windows, open new windows, and listen for window events.
...with this module, you can: enumerate the currently opened browser windows open new browser windows listen for common window events such as open and close private windows if your add-on has not opted into private browsing, then you won't see any private browser windows.
...windows.open("http://www.example.com"); // open a new window and set a listener for "open" event.
...And 8 more matches
dev/panel - Archive of obsolete content
"my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", onready: function() { this.postmessage("message from the add-on"); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document script: // my-panel.js window.addeventlistener("message", function(event) { var content = document.getelementbyid("content"); content.textcontent = event.data; }); note that at the moment you have to pass an array of ports into postmessage, even if you don't need to use them: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/he...
...document this.postmessage("message from the add-on", [panelside]); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document: retrieve the messageport from the event, and use it to send messages to the add-on // my-panel.js window.addeventlistener("message", function(event) { // retrieve the port var toaddon = event.ports[0]; toaddon.start(); toaddon.postmessage("message from the panel document"); console.log(toaddon); }); communicating with the debugger server the firefox developer tools use a client/server protocol: a tool, such as a javascript debugger or style editor, is the client, and the program being debugged, such...
... for example, here's a main.js which sends the listtabs message to the debugger server, and logs the response: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my panel", tooltip: "my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", setup: function(o...
...And 8 more matches
remote/parent - Archive of obsolete content
we don't yet have a full list of all the modules that a module in the child process can't load, but the sorts of things listed in limitations of frame scripts broadly apply.
...t argument is always the process, then the message payload process.port.once("id", (process, id) => { console.log("child process is remote:" + process.isremote); console.log("child process id:" + id); }); }); content frame manipulation this demonstrates telling every current frame to link to a specific anchor element: // remote.js const { frames } = require("sdk/remote/child"); // listeners receive the frame the event was for as the first argument frames.port.on("changelocation", (frame, ref) => { frame.content.location += "#" + ref; }); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); frames.port.emit("changelocation", "foo"); tab information this shows sending a message when a tab loads; this is similar t...
... // remote.js const { frames } = require("sdk/remote/child"); frames.addeventlistener("pageshow", function() { // `this` is bound to the frame the event came from let frame = this; frame.port.emit("pageshow"); }, true); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); // the first argument is the frame the message came from frames.port.on("pageshow", (frame) => { console.log(frame.frameelement.currenturi.host + ": pageshow"); }); globals functions remoterequire(id, module = null) loads a module in any existing and future child processes.
...And 8 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
unfortunately, adding listeners for any of these events to a document has a highly deleterious effect on performance, an effect which is not mitigated in the slightest by later removing those listeners.
... for this reason, it is best to avoid using mutation listeners at all costs, especially from extensions.
...event listeners for those events are the preferred method for detecting dom modifications when feasible.
...And 8 more matches
XUL Events - Archive of obsolete content
the events listeners can be attached using addeventlistener and removed using removeeventlistener.
...when attaching event listeners using attributes, be aware that only one listener can be attached at a time.
... any previously attached listeners are disconnected.
...And 8 more matches
PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu.
...the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary.
...other keys are ignored by the menu key listener, however, the event does not propagate to the main window.
...And 8 more matches
Advanced Rules - Archive of obsolete content
let's say you have a list of cities described in the following rdf/xml fragment: <rdf:seq about="http://www.xulplanet.com/rdf/weather/cities"> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/paris"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/manchester"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/melbourne"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/cit...
...to do this, use the member element as in the following: <tree id="citiestree" datasources="weather.rdf" ref="http://www.xulplanet.com/rdf/weather/cities"> <template> <rule> <conditions> <content uri="?list"/> <member container="?list" child="?city"/> </conditions> <rule> <template> </tree> the template builder starts by grabbing the value of the ref attribute, which in this case is http://www.xulplanet.com/rdf/weather/cities.
... this resource will be placed in the 'list' variable as specified by the content tag.
...And 8 more matches
RDF Datasources - Archive of obsolete content
some of them are listed here with a few examples.
...the history list the history datasource provides access to the user's history list which is the list of urls the user has visited recently.
...page page http://home.netscape.com/nc-rdf#page page name referrer http://home.netscape.com/nc-rdf#referrer referrer of the page url http://home.netscape.com/nc-rdf#url url of the page visit count http://home.netscape.com/nc-rdf#visitcount number of page visits a typical history list will display a tree with a selection of these fields.
...And 8 more matches
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
« previousnext » xul provides a way to create tabular or hierarchical lists using a tree.
...it can be used with rows either in a flat list or arranged into a hierarchy.
...some examples of trees include the list of messages in a mail application, or the bookmarks window in mozilla.
...And 8 more matches
XPCOM Examples - Archive of obsolete content
creating a window menu the list of currently open mozilla windows can be used as an rdf datasource.
... this allows you to create a window menu with a list of the currently open windows in the application.
...we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows.
...And 8 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
found 528 pages: # page tags and summary 1 mdn web docs glossary: definitions of web-related terms beginner, definitions, dictionary, glossary, index, landing, terminology web technologies contain long lists of jargon and abbreviations that are used in documentation and coding.
... 40 breadcrumb accessibility, glossary, navigation, search, site map, breadcrumb a breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in relation to the the site's structure, from top level to current page, or a list of the links the user followed to get to the current page, in the order visited.
... 49 cors-safelisted request header cors, fetch a cors-safelisted request header is one of the following http headers: 50 cors-safelisted response header cors, fetch, glossary, http a cors-safelisted response header is an http header which has been safelisted so that it will not be filtered when responses are processed by cors, since they're considered safe (as the headers listed in a...
...And 8 more matches
Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements.
... the list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the microsoft core fonts for the web initiative in the late 90s and early 2000s): name generic type notes arial sans-serif it's often considered best practice to also add he...
... verdana sans-serif note: among various resources, the cssfontstack.com website maintains a list of web safe fonts available on windows and macos operating systems, which can help you make your decision about what you consider safe for your usage.
...And 8 more matches
Making decisions in your code — conditionals - Learn web development
elect the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); select.addeventlistener('change', setweather); function setweather() { const choice = select.value; if (choice === 'sunny') { para.textcontent = 'it is nice and sunny outside today.
... in the javascript, we are storing a reference to both the <select> and <p> elements, and adding an event listener to the <select> element so that when its value is changed, the setweather() function is run.
...e following example executes the code inside only if both or statements return true, meaning that the overall and statement will return true: if ((x === 5 || y > 3 || z <= 10) && (loggedin || username === 'steve')) { // run the code } a common mistake when using the logical or operator in conditional statements is to try to state the variable whose value you are checking once, and then give a list of values it could be to return true, separated by || (or) operators.
...And 8 more matches
TypeScript support in Svelte - Learn web development
note: remember that you can run npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript to get the complete to-do list application in javascript before you start porting it to typescript.
... porting our to-do list app to typescript now we are ready to start porting our to-list application to take advantage of all the features that typescript offers to us.
... to fix it, replace tabindex="-1" with tabindex={-1}, like this: <h2 id="list-heading" bind:this={headingel} tabindex={-1}>{completedtodos} out of {totaltodos} items completed</h2> this way typescript can prevent us from incorrectly assigning it to a string variable.
...And 8 more matches
source-editor.jsm
method overview initialization and destruction void destroy(); void init(element aelement, object aconfig, function acallback); search operations number find(string astring, [optional] object options); number findnext(boolean awrap); number findprevious(boolean awrap); event management void addeventlistener(string aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations ...
...otationruler false sourceeditor.defaults.showlinenumbers false sourceeditor.defaults.showoverviewruler false sourceeditor.defaults.tabsize 4 sourceeditor.defaults.theme sourceeditor.themes.mozilla sourceeditor.defaults.undolimit 200 event name constants these constants provide the names of the editor events for which you can listen.
... addeventlistener() adds a new event listener to the editor.
...And 8 more matches
Mozilla DOM Hacking Guide
"what do you want to code today?" ;-) all the dom classes are listed in an enum defined in nsidomclassinfo.h, nsdomclassinfoid.
..."interface flattening is the ability to call methods on an object regardless of the interface it was defined on." for example, when we have the document object in javascript, we can call indistinctly document.getelementbyid(), or document.addeventlistener(), although they are defined on two different interfaces (domdocument and domeventtarget.
...there we have a long list of macros.
...And 8 more matches
NSS tools : crlutil
name crlutil — list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
...please contribute to the initial review in mozilla nss bug 836477[1] description the certificate revocation list (crl) management tool, crlutil, is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
... this document discusses certificate revocation list management.
...And 8 more matches
NSS Tools crlutil
using the certificate revocation list management tool newsgroup: mozilla.dev.tech.crypto the certificate revocation list (crl) management tool is a command-line utility that can list, generate, modify, or delete crls within the nss security database file(s) and list, create, modify or delete certificates entries in a particular crl.
... this document discusses certificate revocation list management.
... syntax to run the certificate revocation list management tool, type the command crlutil option [arguments] where options and arguments are combinations of the options and arguments listed in the following section.
...And 8 more matches
Using XPCOM Utilities to Make Things Easier
to write a different component library, you could copy the listing at the end of the chapter, change very little, and paste it into a new project.
...to get an idea about how much can be handled with the macros described in this section, compare the code listing in weblock2.cpp at the end of the chapter with weblock1.cpp in the previous chapter.
...xpcom module macros lists the macros discussed in this section.
...And 8 more matches
nsIDeviceMotion
method overview void addlistener(in nsidevicemotionlistener alistener); void addwindowlistener(in nsidomwindow awindow); native code only!
... void removelistener(in nsidevicemotionlistener alistener); void removewindowlistener(in nsidomwindow awindow); native code only!
... methods addlistener() when called, the accelerometer support implementation must begin to notify the specified nsidevicemotionlistener by calling its nsidevicemotionlistener.onaccelerationchange() method as appropriate to share updated acceleration data.
...And 8 more matches
Accessibility Inspector - Firefox Developer Tools
if you do this, the ways listed above for activating the accessibility inspector do nothing.
...each item has two properties listed: role — the role this item has on the page (e.g., pushbutton, or footer).
...the listed properties are as follows: name — the item's name, as described above.
...And 8 more matches
DevTools API - Firefox Developer Tools
window.document.body.addeventlistener("click", this.handleclick); } mypanel.prototype = { open: function() { // any asynchronous operations should be done here.
... this.window.document.body.removeeventlistener("click", this.handleclick); // async destruction.
... when an event is emitted on the eventemitter, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.
...And 8 more matches
Web Console remoting - Firefox Developer Tools
the web console is split between a client with its user interface, and the server which has listeners for all the things that happen in the tab.
... the new web console actors are: the webconsoleactor allows js evaluation, autocomplete, start/stop listeners, etc.
... to attach to the webconsoleactor, follow these steps: connecttoserver() // the usual listtabs() pickthetabyouwant() debuggerclient.attachconsole(tab.consoleactor, listeners, onattachconsole) the listeners argument is an array which specifies listeners you want to start in the web console.
...And 8 more matches
CSSStyleSheet - Web APIs
the cssstylesheet interface represents a single css stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet.
...the rules are contained in a cssrulelist, which can be obtained from the stylesheet's cssrules property.
... cssrules read only returns a live cssrulelist which maintains an up-to-date list of the cssrule objects that comprise the stylesheet.
...And 8 more matches
Timing element visibility with the Intersection Observer API - Web APIs
below that, we define the site's sidebar as a list of links within an <aside> block.
...the sidebar is represented using an <aside> element, and is styled as follows: aside { grid-column: 1; grid-row: 2; background-color: cornsilk; padding: 5px 10px; } aside ul { padding-left: 0; } aside ul li { list-style: none; } aside ul li a { text-decoration: none; } the most important thing to note here is that the grid-column is set to 1, to place the sidebar on the left-hand side of the screen.
... previouslyvisibleads used to temporarily store the list of visible ads while the document is not visible (for example, if the user has tabbed to another page).
...And 8 more matches
system - CSS: Cascading Style Sheets
cyclic cycles through the list of symbols provided.
... once the end of the list of symbols is reached, it will loop back to the beginning and start over.
... symbolic cycles through the provided list of symbols.
...And 8 more matches
Box-shadow generator - CSS: Cascading Style Sheets
-pointer'; node.appendchild(pointer); this.pointer = pointer; setmousetracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.getattribute('data-type'); var topic = node.getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.addeventlistener("click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.addeventlistener("click", function() { increment(topic); }); } } var setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('input');...
... var unit = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { setvalue(topic, e.target.value | 0); }); subscribe(topic, function(value) { node.children[0].value = value; }); } var increment = function increment(topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value + slider.step <= slider.max) { slider.value += slider.step; setvalue(slider.topic, slider.value) notify.call(slider); } }; var decrement = function decrement(topic) { var slider = sliders[topic]; if (slider ===...
...a = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (value - slider.min) * width / delta; slider.value = value; slider.pointer.style.left = pos - offset / 2 + "px"; slider.node.setattribute('data-value', value); notify.call(slider); } var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener("mousedown", function(e) { callback(e); document.addeventlistener("mousemove", callback); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", callback); }); } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var unsu...
...And 8 more matches
shape-outside - CSS: Cascading Style Sheets
,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list below, which define the float area for float elements.
...the values in the shape functions interpolate as a simple list.
... the list values interpolate as <length>, <percentage>, or calc() where possible.
...And 8 more matches
<input type="range"> - HTML: Hypertext Markup Language
WebHTMLElementinputrange
events change and input supported common attributes autocomplete, list, max, min, and step idl attributes list, value, and valueasnumber methods stepdown() and stepup() validation there is no pattern validation available; however, the following forms of automatic validation are performed: if the value is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering fro...
... additional attributes in addition to the attributes shared by all <input> elements, range inputs offer the following attributes: attribute description list the id of the <datalist> element that contains optional pre-defined options max the maximum permitted value min the minimum permitted value step the stepping interval, used both for user interface and validation purposes list the values of the list attribute is the id of a <datalist> element located in the same document.
... the <datalist> provides a list of predefined values to suggest to the user for this input.
...And 8 more matches
Content negotiation - HTTP
the http/1.1 standard defines list of the standard headers that start server-driven negotiation (accept, accept-charset, accept-encoding, accept-language).
... though strictly speaking user-agent is not in this list, it is sometimes also used to send a specific representation of the requested resource, though this is not considered as a good practice.
... in addition to these, there is an experimental proposal to add more headers to the list of available headers, called client hints.
...And 8 more matches
Content type - SVG: Scalable Vector Graphics
this article lists these types along with their syntax and descriptions of what they're used for.
...the format of an rgb value in the functional notation is an rgb start-function, followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")".
... | "rgb("integer, integer, integer")" | "rgb("integer "%", integer "%", integer "%)" | color-keyword hexdigit ::= [0-9a-fa-f] where color-keyword matches (case insensitively) one of the color keywords listed in css color module level 3, or one of the system color keywords listed in user preferences for colors (css2, section 18.2).
...And 8 more matches
page-worker - Archive of obsolete content
onmessage function use this to add a listener to the page worker's message event.
... on(type, listener) registers an event listener with the page worker.
... parameters type : string the type of event to listen for.
...And 7 more matches
simple-prefs - Archive of obsolete content
{ "type": "directory", "name": "mydirectory", "title": "select a directory" } menulist displayed as a drop-down list.
... { "name": "typeofbreath", "type": "menulist", "title": "type of breath", "value": 0, "options": [ { "value": "0", "label": "fire" }, { "value": "1", "label": "cold" }, { "value": "2", "label": "disintegration" } ] } radio displayed as radio buttons.
... when the user clicks the button, the function listening to the on() function for this preference is called.
...And 7 more matches
system/events - Archive of obsolete content
you can find a list of events dispatched by the firefox codebase here.
... var events = require("sdk/system/events"); var { ci } = require("chrome"); function listener(event) { var channel = event.subject.queryinterface(ci.nsihttpchannel); channel.setrequestheader("user-agent", "mybrowser/1.0", false); } events.on("http-on-modify-request", listener); globals functions emit(type, event) send an event to observer service parameters type : string the event type.
... on(type, listener, strong) listen to events of a given type parameters type : string the event type name to watch.
...And 7 more matches
Storing annotations - Archive of obsolete content
neditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the previously entered annotations.
... these three files can all go in a new subdirectory of data which we will call list.
... annotation list content script here's the annotation list's content script: self.on("message", function onmessage(storedannotations) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(event) { event.stoppropagation(); event.preventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-...
...And 7 more matches
On page load - Archive of obsolete content
if you need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners.
... progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
... progress listeners implement the nsiwebprogresslistener interface.
...And 7 more matches
JavaScript Client API - Archive of obsolete content
each engine has a corresponding tracker which listens for changes to data or events it is interested in.
... getallids() must return an iterable list containing the guids of every item being stored on the local system.
... this can be a dictionary-type object where the keys are the guids and the values are whatever; or it can simply be a list of guids.
...And 7 more matches
Priority Content - Archive of obsolete content
update: i've removed documents from this list that have been migrated into the wiki.
... the list of completed documents is available through the devedge page.
... if you would like to sign up to do the migration of any of these works, just "edit" this page and add your name to the "migrators" list for the piece.
...And 7 more matches
Archived Mozilla and build documentation - Archive of obsolete content
blackconnect blackwood bonsai it is a tool that lets you perform queries on the contents of a cvs archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time period.
...generators can also be independently downloaded and installed by users if they include a list of pages to which they apply.
... download manager improvements in firefox 3 firefox 3 offers improvements to the download manager that allow multiple progress listeners, use of the storage api for data management, download resuming, and more.
...And 7 more matches
Common causes of memory leaks in extensions - Extensions
consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically destroyed.
...therefore, your add-on should clean up such intervals and timeouts when the corresponding content document is unloaded, by adding an unload event listener or by similar means.
... failing to clean up event listeners extensions can be disabled and removed by user actions, but it also happens when an add-on is updated.
...And 7 more matches
Attribute selectors - Learn web development
[attr~=value] p[class~="special"] matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.
...this matches all of the list items except the first one.
...it selects the second list item.
...And 7 more matches
Client-side form validation - Learn web development
for a complete list and many examples, consult our regular expressions documentation.
...specifying the email type, for example, validates the inputs value against a well-formed email address pattern or a pattern matching a comma-separated list of email addresses if it has the multiple attribute.
... its usage here acts only as a fallback --> <input type="number" min="12" max="120" step="1" id="n1" name="age" pattern="\d+"> </p> <p> <label for="t1">what's your favorite fruit?<abbr title="this field is mandatory" aria-label="required">*</abbr></label> <input type="text" id="t1" name="fruit" list="l1" required pattern="[bb]anana|[cc]herry|[aa]pple|[ss]trawberry|[ll]emon|[oo]range"> <datalist id="l1"> <option>banana</option> <option>cherry</option> <option>apple</option> <option>strawberry</option> <option>lemon</option> <option>orange</option> </datalist> </p> <p> <label for="t2">what's your e-mail address?</label> <input ...
...And 7 more matches
Getting started with HTML - Learn web development
width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = ...
...'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + t...
...for example, a block-level element might represent headings, paragraphs, lists, navigation menus, or footers.
...And 7 more matches
What is JavaScript? - Learn web development
uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...for example, let's return to the block of javascript we saw in our first example: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updatename() code block (lines 5–8) is run.
...this means that the para object does not exist yet, so we can't add an event listener to it.
...And 7 more matches
Ember app structure and componentization - Learn web development
the rendered output should now look like this: it doesn't take too much effort to get our html looking like a fully-featured to-do list app.
...bs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus c...
... looking at the code next to the rendered todo app, there are a number of ways we could decide how to break up the ui, but let's plan on splitting the html out into the following components: the component groupings are as follows: the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an individual component (green in the image) the footer (blue in the image) something odd to note is that the mark-all-complete checkbox (marked in yellow), while in the "main" section, is rendered next to the "new-to...
...And 7 more matches
Adding a new CSS property
once you know which struct you're going to use (or that the property is a shorthand), you can add appropriate entry to nscssproplist.h.
... every property in nscssproplist.h must have in its flags field exactly one of the four css_property_parse_* flags defined in nscssprops.h.
... if the property's values can be expressed as a single value, or as a space-separated or comma-separated list of values that can be described by the variant_* flags (also in nscssprops.h), you should use css_property_parse_value or css_property_parse_value_list, and set the appropriate variant_* flags in the entry in nscssproplist.h (and maybe also css_property_value_list_uses_commas).
...And 7 more matches
Performance
do some work on the window } function dosomething(message) { result = helper(content, message.data) sendasyncmessage("my-addon:response-from-child", {something: result}) } addmessagelistener("my-addon:request-from-parent", dosomething) why is this bad?
...do some work on the window } function dosomething(message) { frameglobal = message.target result = helper(frameglobal.content, message.data) frameglobal.sendasyncmessage("my-addon:response-from-child", {something: result}) } function addframe(frameglobal) { frameglobal.addmessagelistener("my-addon:request-from-parent", dosomething) } javascript modules are per-process singletons and thus all their objects are only initialized once, which makes them suitable for stateless callbacks.
... store heavyweight state once per process bad: // addon.js var main = new myaddonservice(); main.onchange(statechange); function statechange() { services.mm.broadcastasyncmessage("my-addon:update-configuration", {newconfig: main.serialize()}) } // framescript.js var maincopy; function onupdate(message) { maincopy = myaddonservice.deserialize(message.data.newconfig); } addmessagelistener("my-addon:update-configuration", onupdate) // maincopy used by other functions the main issue here is that a separate object is kept for each tab.
...And 7 more matches
Storage access policy: Block cookies from trackers
firefox uses the tracking protection list to determine which resources are tracking resources.
... the tracking protection list is maintained by disconnect.
... when the list is applied in firefox, we make two important changes: first, we only use the "basic protection" version of the list, which excludes some categories of trackers.
...And 7 more matches
TPS Tests
ute: python create_venv.py --keep-config %path% activate the environment source %path%/bin/activate run some tests note that the testfile is not a path, it should only be the filename from services/sync/tests/tps/ runtps --debug --testfile %test_file_name% --binary %firefox_binary_path% additionally, omitting a --testfile parameter will cause it to run all tps tests listed in services/sync/tests/tps/all_tests.json an example on osx, for running just the test_sync.js testfile against a locally built firefox (where the mozconfig set the objdir to obj-ff-artifact): runtps --debug --testfile test_sync.js --binary obj-ff-artifact/dist/nightly.app/contents/macos/firefox running tps against stage, or dev fxa tps can be configured using the $tps_venv_p...
... data definitions/asset list (optional, but all current tests have them).
... asset lists a test file will contain one or more asset lists, which are lists of bookmarks, passwords, or other types of browser data that are relevant to sync.
...And 7 more matches
XForms Accessibility
xforms elements behavior is implemented in accordance with accessible toolkit checklist.
...or you may be guided by toolkit checklist to check keyboard navigation for xforms controls.
...this section lists accessible presentations for form control elements.
...And 7 more matches
nsIChannel
method overview void asyncopen(in nsistreamlistener alistener, in nsisupports acontext); nsiinputstream open(); attributes attribute type description contentcharset acstring the character set of the channel's content if available and if applicable.
...this means that: the stream listener this channel will be notifying was initially passed to the asyncopen() method of some other channel this channel's uri is a better identifier of the resource being accessed than this channel's originaluri.
...data is fed to the specified stream listener as it becomes available.
...And 7 more matches
nsIDOMWindowUtils
nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollectorlistener alistener); short getcursortype(); astring getdocumentmetadata(in astring aname); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); astring getpccountscriptsummary(in long ascript); astring getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflush...
...layout, out long ascrollx, out long ascrolly); astring getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontext at...
... void garbagecollect( in nsicyclecollectorlistener alistener optional ); parameters alistener optional listener that receives information about the cc graph (see @mozilla.org/cycle-collector-logger;1 for a logger component) getcursortype() get current cursor type from this window.
...And 7 more matches
nsISHistory
to create an instance, use: var shistory = components.classes["@mozilla.org/browser/shistory;1"] .createinstance(components.interfaces.nsishistory); method overview void addshistorylistener(in nsishistorylistener alistener); nsishentry getentryatindex(in long index, in boolean modifyindex); void purgehistory(in long numentries); void reloadcurrententry(); void removeshistorylistener(in nsishistorylistener alistener); attributes attribute type description count long the number of toplevel documents currently...
... use nsisimpleenumerator.getnext() on the object returned by step #1 to obtain handle to the next object in the list.
... methods addshistorylistener() called to register a listener for the session history component.
...And 7 more matches
nsISessionStore
getclosedtabdata() returns a list of closed tabs for a specified window.
... astring getclosedtabdata( in nsidomwindow awindow ); parameters awindow the browser window whose closed tab list is to be retrieved.
... return value a json string representing the list of closed tabs for the window specified by awindow.
...And 7 more matches
Creating a gloda message query
create a collection from the query your listener is notified as messages are added to the collection as the database query completes.
... let mylistener = { /* called when new items are returned by the database query or freshly indexed */ onitemsadded: function mylistener_onitemsadded(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function mylistener_onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system */ onitemsremoved: function mylistener_onitemsremoved(aitems, acollection) { }, /* called when our database query completes */ onquerycompleted: function mylistener_onquerycompleted(acollection) { } }; let collection = query.getcollection(mylistener); message attributes look at t...
... the max number of messages which are returned is governed by a preference: "mailnews.database.global.search.msg.limit" although you can deal with the messages as they show up via the listener, the list of messages in the collection is available in collection.items.
...And 7 more matches
BaseAudioContext.createPanner() - Web APIs
the panner node is spatialized in relation to the audiocontext's audiolistener (defined by the audiocontext.listener attribute), which represents the position and orientation of the person listening to the audio.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 7 more matches
HTMLInputElement - Web APIs
it is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a <datalist> ancestor; its disabled property is true.
... properties that apply only to elements of type file accept string: returns / sets the element's accept attribute, containing comma-separated list of file types accepted by the server when type is file.
... allowdirs boolean: part of the non-standard directory upload api; indicates whether or not to allow directories and files both to be selected in the file list.
...And 7 more matches
PannerNode.distanceModel - Web APIs
the distancemodel property of the pannernode interface is an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 7 more matches
PannerNode.maxDistance - Web APIs
the maxdistance property of the pannernode interface is a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 7 more matches
PannerNode.setOrientation() - Web APIs
in such a case, a sound pointing away from the listener can be very quiet or even silent.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 7 more matches
PannerNode.setPosition() - Web APIs
the setposition() method of the pannernode interface defines the position of the audio source relative to the listener (represented by an audiolistener object stored in the audiocontext.listener attribute.) the three parameters x, y and z are unitless and describe the source's position in 3d space using the right-hand cartesian coordinate system.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 7 more matches
PannerNode.setVelocity() - Web APIs
the velocity relative to the listener is used to control the pitch change needed to conform with the doppler effect due to the relative speed.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 7 more matches
Background audio processing using AudioWorklet - Web APIs
basic code framework the barest framework of an audio processor class looks like this: class myaudioprocessor extends audioworkletprocessor { constructor() { super(); } process(inputlist, outputlist, parameters) { /* using the inputs (or not, as needed), write the output into each of the outputs */ return true; } }; registerprocessor("my-audio-processor", myaudioprocessor); after the implementation of the processor comes a call to the global function registerprocessor(), which is only available within the scope of the audio context's audioworklet, which is th...
... the input and output lists the lists of inputs and outputs can be a little confusing at first, even though they're actually very simple once you realize what's going on.
... then, there can be multiple inputs, so the inputlist is an array of arrays of float32array objects.
...And 7 more matches
ARIA live regions - Accessibility
using javascript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
...below is a list of each related aria live region property with a description.
... aria-controls: the aria-controls=[idlist] is used to associate a control with the regions that it controls.
...And 7 more matches
display - CSS: Cascading Style Sheets
WebCSSdisplay
keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these keywords specify the element’s outer display type, which is essentially its role in flow layout.
... list item <display-listitem> the element generates a block box for the content and a separate list-item inline box.
... a single value of list-item will cause the element to behave like a list item.
...And 7 more matches
Setting up adaptive streaming media sources - Developer guides
both mpeg-dash and hls use a playlist format to structure the component piece of media that make the possible streams.
... various bitrate streams are broken into segments and placed in appropriate server folders — we have to provide our media players with a link to lookup files or playlists specifying the name and location of these stream folders.
... once encoded your file structure may look something like this: play list -> /segments/news.mp4.mpd main segment folder -> /segments/main/ 100 kbps segment folder -> /segments/main/news100 contains (1.m4s, 2.m4s, 3.m4s ...
...And 7 more matches
Overview of events and handlers - Developer guides
the function is said to be a 'listener' or a 'handler' with both names used interchangeably.
...browsers use as the registration method for the function which will handle those data structures a method called addeventlistener which expects as arguments a string event type name and the handler function.
...we could define in the html page a button as: <button id="buttonone">click here to emit a 'click' event</button> and, in our javascript code, we could first define a function to listen to that 'click' event: var example_click_handler = function (ev){ var objkind = (ev instanceof event) ?
...And 7 more matches
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
events change and input supported common attributes autocomplete, list, placeholder, readonly idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty.
... you can set a default value for the input by including a number inside the value attribute, like so: <input id="number" type="number" value="42"> additional attributes in addition to the attributes commonly supported by all <input> types, inputs of type number support these attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the maximum value to accept for this input min the minimum value to accept for this input placeholder an example value to display inside the field when it's empty readonly a boolean attribute indicating whether the value is read-only step a stepping interval to use when using up and down arrows to...
... adjust the value, as well as for validation list the values of the list attribute is the id of a <datalist> element located in the same document.
...And 7 more matches
Grammar and types - JavaScript
this section describes the following types of literals: array literals boolean literals floating-point literals numeric literals object literals regexp literals string literals array literals an array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ([]).
...the following example creates the fish array: let fish = ['lion', , 'angel']; this array has two elements with values and one empty element: fish[0] is "lion" fish[1] is undefined fish[2] is "angel" if you include a trailing comma at the end of the list of elements, the comma is ignored.
...there is no mylist[3].
...And 7 more matches
Understanding WebAssembly text format - WebAssembly
unlike the abstract syntax tree of a programming language, though, webassembly’s tree is pretty flat, mostly consisting of lists of instructions.
... the first label inside the parenthesis tells you what type of node it is, and after that there is a space-separated list of either attributes or child nodes.
... the body is just a linear list of low-level instructions.
...And 7 more matches
jpm - Archive of obsolete content
sdk users and project team members discuss problems and proposals on the project mailing list.
... someone else may have had the same problem you do, so try searching the list.
... you add-on passed validation but it could not be automatically signed because your add-on is listed.
...And 6 more matches
Preferences - Archive of obsolete content
note: this article doesn't cover all available methods for manipulating preferences; please refer to the xpcom reference pages listed in resources section for the complete list of methods.
...look in the resources section below for the link to a list of preferences-related interfaces.
... you can see the list of preferences in about:config (where available).
...And 6 more matches
JavaScript Daemons Management - Archive of obsolete content
note: a minimalistic version of it (minidaemon) is published here.
... * *****************************************/ daemon-methods.js what follows is a module which collects a wide and scalable list of additional methods for instances of daemon (and daemon.safe).
... mydaemon.onstart the start listener (read/write).
...And 6 more matches
XPCOM Objects - Archive of obsolete content
there is no comprehensive list of these (that we know of), and that's understandable since it would be a very long list, and it can be extended by add-ons.
... if you want to see the list in your current firefox installation, just run the following code in the error console: var str = ""; for (var i in components.classes) { str += i + "\n" }; str a run on firefox 3.6.2 with a few extensions installed yields 876 strings.
...a modified version of the last code snippet produces an even longer list of available interfaces.
...And 6 more matches
Editor Embedding Guide - Archive of obsolete content
in calling this method, the editor is created underneath and the event listeners are all prepa if (ns_failed(rv)) return ns_error_failure; // we are not setup??!!
...call a command -- docommand: commandmanager->docommand(acommand, acommandparams); acommand is a const char * to a supported command name (see list below).
... acommandparams could possibly be a null pointer or a pointer to a valid structure filled with relative parameters to acommand (see list below for legal params).
...And 6 more matches
Venkman Introduction - Archive of obsolete content
files are listed in alphabetical order, grouped by file type.
... property flags properties of both scope and this objects are listed alphabetically, grouped by data type.
...flags lists one or more applicable flags for this object.
...And 6 more matches
Menus - Archive of obsolete content
menus a menu provides a list of commands that the user can carry out.
...when the menu or button is clicked the menu is opened, listing the commands that are available.
... menulist a menulist is used when you wish the user to select from a list of items.
...And 6 more matches
PopupEvents - Archive of obsolete content
an overview of these is listed below: contextmenu this event is fired when a request is made to open a context menu, whether by the keyboard or mouse.
...the typical usage of a listener of the popupshowing event is to adjust the content of the popup based on context.
...within the listener for the popupshowing event, you can append to or modify the menu as needed before it is displayed.
...And 6 more matches
Static Content - Archive of obsolete content
« previousnext » creating a menuitem in the filter list to show all items is fairly easy.
... <menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" oncommand="applyfilter(event.target.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/e...
...lements/1.1/title" object="?countrytitle"/> </query> <action> <menupopup> <menuitem uri="?country" label="?countrytitle" value="?country"/> </menupopup> </action> </template> </menulist> the only difference between the previous example and this one is that the menulist element has some additional content added before the template.
...And 6 more matches
menu - Archive of obsolete content
ArchiveMozillaXULmenu
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...this is the default value for menulists.
...for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...And 6 more matches
prefwindow - Archive of obsolete content
this does not work with prefwindows, breaking the general behavior of the window and in particular the list of prefpanes.
... buttons type: comma-separated list of the values below a comma-separated list of buttons to appear in the dialog box.
...the following values can be used in the list: accept: the ok button, which will accept the changes when pressed.
...And 6 more matches
How to enable locale switching in a XULRunner application - Archive of obsolete content
include a xul control for the locale selection the next step is to add a xul control to your application which lists the available locales in the package and makes it possible for the user to select one of them.
... i chose a listbox with a button.
...sample chrome/chrome.manifest content localeswitchdemo content/ locale localeswitchdemo de-de locale/de-de/ locale localeswitchdemo en-gb locale/en-gb/ locale localeswitchdemo fr-fr locale/fr-fr/ how are you going to populate the xul listbox?
...And 6 more matches
Theme changes in Firefox 2 - Archive of obsolete content
the table lists both the changed xul file and the theme's corresponding css file that you might need to update.
... changes to the default theme the table below lists all the changes made in the default theme for firefox 2; you can use this information as a starting point for figuring out the changes you need to make.
... the second icon (yellow here)appears to be used for blocklisted items; trying to confirm.
...And 6 more matches
Call stack - MDN Web Docs Glossary: Definitions of Web-related terms
when the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.
... add the greeting() function to the call stack list.
... call stack list: - greeting execute all lines of code inside the greeting() function.
...And 6 more matches
Pseudo-classes and pseudo-elements - Learn web development
once you know how to use them, you can look at the list to see if there is something which works for the task you are trying to achieve.
... reference section there are a large number of pseudo-classes and pseudo-elements, and it is useful to have a list to refer to.
... below are tables listing them, with links to their reference pages on mdn.
...And 6 more matches
Styling links - Learn web development
htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:vi...
...sited {\n color: #437a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", drawoutput); including icons on links a common practice is to include icons on links to provide more of an indicator as to what kind of content the link points to.
...the last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using background shorthand instead of the individual properties.
...And 6 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
an error message to indicate what's gone wrong: "typeerror: guesssubmit.addeventlistener is not a function" a "learn more" link that links through to an mdn page that explains what this error means in greater detail.
... if we look at line 86 in our code editor, we'll find this line: guesssubmit.addeventlistener('click', checkguess); the error message says "guesssubmit.addeventlistener is not a function", which means that the function we're calling is not recognized by the javascript interpreter.
...here's a shortcut to save you some time in this instance: addeventlistener().
...And 6 more matches
Componentizing our Svelte app - Learn web development
previous overview: client-side javascript frameworks next in the last article we started developing our todo list app.
... update the {#each} block inside todos.svelte like so: <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each filtertodos(filter, todos) as todo (todo.id)} <li class="todo"> <todo {todo} /> </li> {:else} <li>nothing to do here!</li> {/each} </ul> the list of todos is displayed on the page, and the checkboxes should work (try checking/unchecking a couple, and then observing that the filters still work as expe...
...when you dispatch an event you have to pass the name of the event and, optionally, an object with additional information that you want to pass to every listener.
...And 6 more matches
Working with Svelte stores - Learn web development
give it the following content: import { writable } from 'svelte/store' export const alert = writable('welcome to the to-do list app!') note: stores can be defined and used outside of svelte components, so you can organize them in any way you please.
... in the above code we import the writable() function from svelte/store and use it to create a new store called alert with an initial value of "welcome to the to-do list app!".
... using the store contract to persist our todos our little app lets us manage our todos quite easily, but is rather useless if we always get the same list of hardcoded todos when we reload it.
...And 6 more matches
Using Vue computed properties - Learn web development
using computed properties the aim here is to add a summary count of our to-do list.
... this can be useful for users, while also serving to label the list for assistive technology.
... if we have 2 of 5 items completed in our to-do list, our summary could read "3 items completed out of 5".
...And 6 more matches
Cross Process Object Wrappers
for example, this frame script sends a dom node to chrome when the user clicks it, as the clicked property of the third argument: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-e10s-extension-message", {}, { clicked : event.target }); }, false); in the chrome script, the dom node is now accessible through a cross process object wrapper, as a property of the objects property of the message.
... the chrome script can get and set the wrapped object's properties and call its functions: // chrome script windowmm.addmessagelistener("my-e10s-extension-message", handlemessage); function handlemessage(message) { let wrapper = message.objects.clicked; console.log(wrapper.innerhtml); wrapper.innerhtml = "<h2>modified by chrome!</h2>" wrapper.setattribute("align", "center"); } auto-generated cpows add-ons that have not declared themselves multiprocess compatible are set up with a number of compatibility shims.
... bidirectional cpows a common pattern is for chrome code to access content objects and add event listeners to them.
...And 6 more matches
Limitations of chrome scripts
this is one of a pair of articles: the other one lists limitations of frame scripts.
... nsiwebprogresslistener this api will work in the chrome process.
... alternatively, you can use nsiwebprogresslistener in the content process.
...And 6 more matches
Message manager overview
similarly, if you send a message using the global frame message manager, it's received by all content tabs, and is then delivered to any frame scripts that are listening for it.
... its most important functions and attributes are: childcount : contains the number of children (typically, browser windows) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in the browser broadcastasyncmessage() : send a message to frame scripts addmessagelistener() : start listening to a specific message from all frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access access it using components.classes: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager); you can al...
... its most important functions and attributes are: childcount : contains the number of children (typically, browser tabs) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in this window broadcastasyncmessage() : send a message to all frame scripts in this window addmessagelistener() : start listening to a specific message from frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access you can access it as a property of the browser window: // chrome script let windowmm = window.messagemanager; ...
...And 6 more matches
Overview of Mozilla embedding APIs
implemented interfaces: nsiservicemanager related interfaces: nsishutdownlistener nsmemory the nsmemory service provides the global memory manager implementation for xpcom.
...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.
...contract-id: ns_pref_contractid implemented interfaces: nsiprefservice nsiprefbranch related interfaces: nsipreflistener profile manager service contract-id: implemented interfaces: document loader service (webprogress) eventually, this service will be replaced by thewebprogress service...
...And 6 more matches
Localization and Plurals
if you don't know how many plural forms you need, check the pluralrule number in chrome/global/intl.properties, and look up the corresponding entry in the following list of plural rules.
... list of plural rules this section contains a list of plural rules ordered by their plural rule number.
...for each entry, there is a list of families and languages in those families, to help you figure out if it's the rule you should pick for pluralrule.
...And 6 more matches
Thread Sanitizer
ags="-fsanitize=thread -fpic -pie" \ cxxflags="-fsanitize=thread -fpic -pie" \ ldflags="-fsanitize=thread -fpic -pie" \ ../configure --disable-debug --enable-optimize="-o2 -gline-tables-only" --enable-llvm-hacks --disable-jemalloc make -j 8 fi using llvm symbolizer for faster/better traces by default, tsan traces are symbolized because otherwise, the runtime suppression list wouldn't work.
... compile-time blacklisting functions with racy memory access can be flagged, such that the compiler will not instrument them.
... in our codebase, this is done using the moz_tsan_blacklist macro on the function definition.
...And 6 more matches
Building the WebLock UI
weblock indicator in browser user interface package list the user interface described in this section is comprised of four files: weblockoverlay.xul is the file that defines the little status icon in the browser.
..., weblock is initialized as a global javascript variable, available in the scope of these functions and others: var weblock = components.classes["@dougt/weblock"] .getservice() .queryinterface(components.interfaces.iweblock); in addition to this basic setup, you must also write javascript that uses the addsite method to add new sites to the white list.
...in this tutorial, focusing as it is on the weblock functionality (rather than the ui), we'll assume the strings we get from the ui itself are urls we actually want to write to the white list: function addthissite() { 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.
...And 6 more matches
Finishing the Component
when the component starts up, it populates a list of urls read in from a file stored next to the gecko binary on the local system.
...also, provides access to the url that are whitelisted.
... the web locking policy that we are going to put into place is quite simple: for every load request that comes through, we will ensure that the uri is in the list of "good" urls on the white list.
...And 6 more matches
XPCOM Stream Guide
MozillaTechXPCOMGuideStreams
there are two ways of getting the input stream: by calling the channel's .open() method for a synchronous read, or by calling the channel's .asyncopen() method with an nsistreamlistener object.
... stream listeners a stream listener is an object you build to let you know when there is data in a stream ready for you to consume.
...(this is particularly true of streams that reach out over a network connection, like http and ftp channels.) stream listeners implement three methods.
...And 6 more matches
Observer Notifications
topic description download-manager-ui-done called when the list of downloads in the download manager windows finishes updating.
... download-manager-remove-download called when a download of the list is removed or all the list is cleared.
... the subject will be the download id wrapped in nsisupportspruint32, for one download removed, or null for multi download remove, for example when the download list is cleared.
...And 6 more matches
nsIApplicationCache
item_explicit 2 this item was explicitly listed in the application manifest.
... item_foreign 16 this item was listed in the application manifest, but named a different cache group as its manifest.
... item_fallback 32 this item was listed as a fallback entry.
...And 6 more matches
nsIConsoleService
method overview void getmessagearray([array, size_is(count)] out nsiconsolemessage messages, out uint32_t count);obsolete since gecko 19 void getmessagearray([optional] out uint32_t count, [retval, array, size_is(count)] out nsiconsolemessage messages); void logmessage(in nsiconsolemessage message); void logstringmessage(in wstring message); void registerlistener(in nsiconsolelistener listener); void reset(); void unregisterlistener(in nsiconsolelistener listener); methods getmessagearray() to obtain an array of all logged messages.
... registerlistener() registers a listener, to notify when an error is logged.
... note: to guard against stack overflows from listeners which could log messages (this could be done inadvertently through listeners implemented in javascript), we do not call any listeners when another error is already being logged.
...And 6 more matches
nsIMsgHeaderParser
ring line); void removeduplicateaddresses(in string addrs, in string other_addrs, in prbool removealiasestome, out string newaddress); string unquotephraseoraddr(in string line, in boolean preserveintegrity); wstring unquotephraseoraddrwstring(in wstring line, in boolean preserveintegrity); methods extractheaderaddressmailboxes() given a string which contains a list of header addresses, returns a comma-separated list of just the 'mailbox' portions.
... return value a comma-separated list of just the mailbox parts of the addresses.
... exceptions thrown missing exception missing description native code only!extractheaderaddressnames given a string which contains a list of header addresses, returns a comma-separated list of just the 'user name' portions.
...And 6 more matches
nsIMsgIncomingServer
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void clearallvalues(); void cleartemporaryreturnreceiptsfilter(); void closecachedconnections(); void configuretemporaryfilters(in nsimsgfilterlist filterlist); void configuretemporaryreturnreceiptsfilter(in nsimsgfilterlist filterlist); obsolete since gecko 1.8 void displayofflinemsg(in nsimsgwindow awindow); boolean equals(in nsimsgincomingserver server); void forgetpassword(); void forgetsessionpassword(); astring generateprettynameformigration(); boolean getboolattribute(in string name); boolean getboolvalue(in string at...
...tr); acstring getcharattribute(in string name); acstring getcharvalue(in string attr); nsilocalfile getfilevalue(in string relpref, in string abspref); nsimsgfilterlist getfilterlist(in nsimsgwindow amsgwindow); long getintattribute(in string name); long getintvalue(in string attr); nsimsgfolder getmsgfolderfromuri(in nsimsgfolder afolderresource, in acstring auri); void getnewmessages(in nsimsgfolder afolder, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); acstring getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsgwindow amsgwindow, out boolean okayvalue); astring getunicharattribute(in string name); astring getunicharvalue(in string attr); boolean isnewhdrduplicate(in nsimsgdbhdr anewhdr); void onuserorhostnamechanged(in ac...
...iles(); void setboolattribute(in string name, in boolean value); void setboolvalue(in string attr, in boolean value); void setcharattribute(in string name, in acstring value); void setcharvalue(in string attr, in acstring value); void setdefaultlocalpath(in nsilocalfile adefaultlocalpath); void setfilevalue(in string relpref, in string abspref, in nsilocalfile avalue); void setfilterlist(in nsimsgfilterlist afilterlist); void setintattribute(in string name, in long value); void setintvalue(in string attr, in long value); void setunicharattribute(in string name, in astring value); void setunicharvalue(in string attr, in astring value); void shutdown(); void storepassword(); astring tostring(); void writetofoldercache(in nsimsgfoldercache foldercache); attributes...
...And 6 more matches
nsIServerSocket
void close(); void asynclisten(in nsiserversocketlistener alistener); prnetaddr getaddress();native code only!
... methods asynclisten() this method puts the server socket in the listening state.
... it will asynchronously listen for and accept client connections.
...And 6 more matches
nsISyncMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "senders" have a single "other side" to which messages are sent.
...jsval objects, [optional] in nsiprincipal principal); jsval sendrpcmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects, [optional] in nsiprincipal principal); sendsyncmessage() like sendasyncmessage(), except blocks the sender until all listeners of the message have been invoked.
... returns an array containing return values from each listener invoked.
...And 6 more matches
Demo Addon
it lists all your email accounts with their account type - either pop3 or imap - and the associated email addresses.
... demo 2 - find the inbox this demo shows various information: it lists all folders of an account (in this case the first one) and marks the inbox folder with a *.
... furthermore, it shows some messages in the inbox and lists a random attachment.
...And 6 more matches
Blocking By Domain - Plugins
according to the firefox plugin roadmap, the plugin block list is planned for firefox 55.
... there are two versions of plugin blocking: first-party plugin blocking list sites on this list may not use plugins.
... third-party plugin block list sites on this list may not use plugins when they are loaded into a third-party iframe in another site.
...And 6 more matches
about:debugging - Firefox Developer Tools
above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via usb, to firefox preview, on a pixel 2, as well as the title of the page that you are debugging, and the address of the page.
...when you do, it is added to the network locations list along with the devices, as shown below: this firefox the this firefox tab combines the features of extensions, tabs, and workers into a single tab with the following sections: temporary extensions displays a list of the extensions that you have loaded using the load temporary add-on button.
... extensions this section lists information about the extensions that you have installed on your system.
...And 6 more matches
Using the CSS Typed Object Model - Web APIs
we start with some html: a paragraph with a link, as well as a definition list to which we will add all the css property / value pairs.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add javascript to grab our unstyled link and return back a definition list of all the default css property values impacting the link using computedstylemap().
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const defaultcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of defaultcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } the computedstylemap() method returns a stylepropertymapreadonly ob...
...And 6 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
the first element of the list is located at position [0] in the array.
... html <body> <input type="button" value="set paragraph background color" onclick="set_background()"> <p>hi</p> <p>hello</p> </body> javascript function set_background() { // get a list of all the body elements (there will only be one), // and then select the zeroth (or first) such element mybody = document.getelementsbytagname("body")[0]; // now, get all the p elements that are descendants of the body mybodyelements = mybody.getelementsbytagname("p"); // get the second item of the list of p elements myp = mybodyelements[1]; myp.style.background = "rgb(255,0,0)"; } in this example, we set the myp variable to the dom object for the second p element inside the body: first, we get a list of all the body elements via mybody = document.getelementsbytagname("body")...
...[0] since there is only one body element in any valid html document, this list will have only one item, which we retrieve by selecting the first element in that list using [0].
...And 6 more matches
Element.querySelectorAll() - Web APIs
the element method queryselectorall() returns a static (not live) nodelist representing a list of elements matching the specified group of selectors which are descendants of the element on which the method was called.
... syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
... return value a non-live nodelist containing one element object for each descendant node that matches at least one of the specified selectors.
...And 6 more matches
Using the Frame Timing API - Web APIs
function create_frame_observer() { if (window.performanceobserver === undefined) return; // register the performance observer var observe_frame = new performanceobserver(function(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #1: [" + i + "] = " + perfentries[i].name); } }); // only observe 'frame' events observe_frame.observe({entrytypes: ['frame']}); } function init () { create_frame_observer(); var obs = new performanceobserver(frame_observer_2...
...); obs.observe({entrytypes: ['frame']}); } function frame_observer_2(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #2: [" + i + "] = " + perfentries[i].name); } } <body onload="init(event)"> when the browser adds a new "frame" entry to the performance timeline, both of the observer callbacks will be invoked.
... var observe_frame = new performanceobserver(function(list) { // process the frame ...
...And 6 more matches
HTMLMedia​Element​.textTracks - Web APIs
the read-only texttracks property on htmlmediaelement objects returns a texttracklist object listing all of the texttrack objects representing the media element's text tracks, in the same order as in the list of text tracks.
...instead, they're sent to the track list object of the htmlmediaelement that corresponds to the type of track that was added to the element the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically.
... once you have a reference to the list, you can monitor it for changes to detect when new text tracks are added or existing ones removed.
...And 6 more matches
The HTML DOM API - Web APIs
access to lists of elements in the document's <head> block and body, as well as lists of the images, links, scripts, etc.
... htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement...
... htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefon...
...And 6 more matches
Dragging and Dropping Multiple Items - Web APIs
this processing does not use the datatransferitem interface nor the datatransferitemlist interface.
...for example: var dt = event.datatransfer; dt.mozsetdataat("text/uri-list", "url1", 0); dt.mozsetdataat("text/plain", "url1", 0); dt.mozsetdataat("text/uri-list", "url2", 1); dt.mozsetdataat("text/plain", "url2", 1); dt.mozsetdataat("text/uri-list", "url3", 2); dt.mozsetdataat("text/plain", "url3", 2); // [item1] data=url1, index=0 // [item2] data=url2, index=1 // [item3] data=url3, index=2 after you added three items in two different formats, dt.mozclearda...
...taat("text/uri-list", 1); dt.mozcleardataat("text/plain", 1); you've removed the second item clearing all types, then the old third item becomes new second item, and its index decreases.
...And 6 more matches
HTML Drag and Drop API - Web APIs
interfaces the html drag and drop interfaces are dragevent, datatransfer, datatransferitem and datatransferitemlist.
...(firefox supports some gecko-specific extensions to the datatransfer object, but those extensions will only work on firefox.) each datatransfer object contains an items property, which is a list of datatransferitem objects.
... the datatransferitemlist object is a list of datatransferitem objects.
...And 6 more matches
Checking when a deadline is due - Web APIs
the main example application we will be referring to in this article is to-do list notifications, a simple to-do list application that stores task titles and deadline times and dates via indexeddb, and then provides users with notifications when deadline dates are reached, via the notification, and vibration apis.
... you can download the to-do list notifications app from github and play around with the source code, or view the app running live.
... recording the date information to provide a reasonable user experience on mobile devices, and to cut down on ambiguities, i decided to create an html form with: a text input for entering a title for your to-do list.
...And 6 more matches
MediaDeviceInfo.groupId - Web APIs
examples in this example, we assemble a list of the devices which are part of the same group as a given device.
... const getdevicegroup = maindevinfo => { let devlist = []; navigator.mediadevices.enumeratedevices() .then(devices => { devices.foreach(device => { if (device.groupid === maindevinfo.groupid) { devlist.push(device); } }); }); return devlist; }; the getdevicegroup() function takes as input the mediadeviceinfo object describing the device for which a group list is to be built.
... the function starts by initializing the result array, devlist, to be an empty array.
...And 6 more matches
Using the Notifications API - Web APIs
we've written a real world example — a to-do list app — to give more of an idea of how web notifications can be used.
...download the to-do list code, or view the app running live.
... example in our todo list demo, we include an "enable notifications" button that, when pressed, requests notification permissions for the app.
...And 6 more matches
PannerNode.panningModel - Web APIs
example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... you might be moving a character around inside a game world for example, and wanting delivery of audio to change realistically as your character moves closer to or further away from a music player such as a stereo.
...And 6 more matches
RTCRtpTransceiver.setCodecPreferences() - Web APIs
the rtcrtptransceiver method setcodecpreferences() configures the transceiver's codecs given a list of rtcrtpcodeccapability objects specifying the new preferences for each codec.
... return value undefined exceptions invalidaccesserror the codecs list includes one or more codecs which are not supported by the transceiver.
... usage notes getting a list of supported codecs you can only include in the codecs list codecs which the transceiver actually supports.
...And 6 more matches
Using XMLHttpRequest - Web APIs
function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.addeventlistener("load", reqlistener); oreq.open("get", "http://www.example.org/example.txt"); oreq.send(); types of requests a request made via xmlhttprequest can fetch the data in one of two ways, asynchronously or synchronously.
...*/ } oreq.open("get", url); oreq.responsetype = "arraybuffer"; oreq.send(); for more examples check out the sending and receiving binary data page monitoring progress xmlhttprequest provides the ability to listen to various events that can occur while the request is being processed.
... load the transfer is complete; all data is now in the response var oreq = new xmlhttprequest(); oreq.addeventlistener("progress", updateprogress); oreq.addeventlistener("load", transfercomplete); oreq.addeventlistener("error", transferfailed); oreq.addeventlistener("abort", transfercanceled); oreq.open(); // ...
...And 6 more matches
WAI-ARIA Roles - Accessibility
this page lists reference pages covering all the wai-aria roles discussed on mdn.
... for a full list of roles, see using aria: roles, states, and properties aria: alert rolethe alert role can be used to tell the user an element has been dynamically updated.
...he dialog can be interacted with).aria: document rolegenerally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: the document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.aria: feed rolea feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls.
...And 6 more matches
pad - CSS: Cascading Style Sheets
a common usage of the pad descriptor is when you need your list to start numbering from 01 and go through 02, 03 and so on, instead of just 1, 2, 3...
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches
Using media queries - CSS: Cascading Style Sheets
to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods.
...if present in a comma-separated list of queries, it will only negate the specific query to which it is applied.
...each query in a comma-separated list is treated separately from the others.
...And 6 more matches
background - CSS: Cascading Style Sheets
:background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetsbackground-size: relative to the background positioning areacomputed valueas each of the properties of the shorthand:background-image: as specified, but with <url> values made absolutebackground-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentagebackground-size: as specified, but with relative lengths converted into absolute lengthsbackground-repeat: a list, each item consisting of two keywords, one per dimensionbackground-origin: as specifiedbackground-clip: as s...
...pecifiedbackground-attachment: as specifiedbackground-color: computed coloranimation typeas each of the properties of the shorthand:background-color: a colorbackground-image: discretebackground-clip: discretebackground-position: repeatable list of simple list of length, percentage, or calcbackground-size: repeatable list of simple list of length, percentage, or calcbackground-repeat: discretebackground-attachment: discrete formal syntax [ <bg-layer> , ]* <final-bg-layer>where <bg-layer> = <bg-image> | <bg-position> [ / <bg-size> ]?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 6 more matches
content - CSS: Cascading Style Sheets
WebCSScontent
otherwise, for uri values, the absolute uri; for attr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<target> = <target-counter()> | <target-counters()> | <target-text()><leader()> = leader...
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
...And 6 more matches
font-family - CSS: Cascading Style Sheets
the font-family css property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
...the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.
... you should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available.
...And 6 more matches
mask - CSS: Cascading Style Sheets
WebCSSmask
as well as the properties listed below, the mask shorthand also resets mask-border to its initial value.
...rom that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.mask-clip: as specifiedmask-origin: as specifiedmask-size: as specified, but with relative lengths converted into absolute lengthsmask-composite: as specifiedanimation typeas each of the properties of the shorthand:mask-image: discretemask-mode: discretemask-repeat: discretemask-position: repeatable list of simple list of length, percentage, or calcmask-clip: discretemask-origin: discretemask-size: repeatable list of simple list of length, percentage, or calcmask-composite: discretecreates stacking contextyes formal syntax <mask-layer>#where <mask-layer> = <mask-reference> | <position> [ / <bg-size> ]?
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 6 more matches
Protocol upgrade mechanism - HTTP
upgrading http/1.1 connections the upgrade header field is used by clients to invite the server to switch to one of the listed protocols, in descending preference order.
... because upgrade is a hop-by-hop header, it also needs to be listed in the connection header field.
...using more than one sec-websocket-extension header in a request is permitted; the result is the same as if you included all of the listed extensions in one such header.
...And 6 more matches
The "codecs" parameter in common media types - Web media technologies
you can use the javascript encodeuri() function to encode the parameter list; similarly, you can use decodeuri() to decode a previously encoded parameter list.
... when the codecs parameter is used, the specified list of codecs must include every codec used for the contents of the file.
... the list may also contain codecs not present in the file.= codec options by container the containers below support extended codec options in their codecs parameters: 3gp av1 iso bmff mpeg-4 quicktime webm several of the links above go to the same section; that's because those media types are all based on iso base media file format (iso bmff), so they share the same syntax.
...And 6 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames 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>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe"> a-frame category</a> in the <a href="http://2017.js13kgames.com">js13kgames 2017</a> competition.
... the app's only job is to list all the a-frame entries from the js13kgames 2017 competition.
...And 6 more matches
Porting the Library Detector - Archive of obsolete content
the script listens to gbrowser's domcontentloaded event.
... once the list is built, the switchlibraries() function constructs a xul statusbarpanel element for each library it found, populates it with the icon at the corresponding chrome:// url, and adds it to the box.
... finally, it listens to gbrowser's tabselect event, to update the contents of the box for that window.
...And 5 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
if the install.rdf contains any targetplatform entries then the platform of the currently running application must be listed or the installation will be rejected.
...it lists information about 2 different versions of the extension with id foobar@developer.mozilla.org.
...you can list multiple add-ons information in the same rdf file.
...And 5 more matches
Install Manifests - Archive of obsolete content
this means that the add-on will work with the application identified by the id property (<em:id>) specified (for a comprehensive list of application ids and valid min/maxversions for them see valid application versions for add-on developers), from the minimum version (<em:minversion>) up to and including the maximum version (<em:maxversion>).
...if this property is specified, in the about:addons extensions list, the about...
... examples <em:homepageurl>https://www.example.com/</em:homepageurl> iconurl a chrome:// url to an icon to display in the add-ons list.
...And 5 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 1: xml syntax <elementname someattribute="somevalue"> content </elementname> as shown in listing 1, xml uses elements, which consist of an opening tag, a closing tag, and content.
...as shown in listing 1, it has an extremely simple syntax.
... by separating the structure of the data, expressed through html or xml, and the display style, indicated by css, data can be reused better than it is when structural and stylistic markup are both embedded in html.
...And 5 more matches
Monitoring WiFi access points - Archive of obsolete content
code with universalxpconnect privileges can monitor the list of available wifi access points to obtain information about them including their ssid, mac address, and signal strength.
...example this example simply displays a list of the available access points.
...erhtml += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>"; } var c = document.getelementbyid("c"); c.innerhtml = "<p>" + count++ + "</p>"; }, onerror: function (value) { alert("error: " +value); }, queryinterface: function(iid) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); if (iid.equals(components.interfaces.nsiwifilistener) || iid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_error_no_interface; }, } netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var listener = new test(); var wifi_service = components.classes["@mozilla.org/wifi/monitor;1"].getservice(components.interfaces.nsiwifimonitor); wifi_service...
...And 5 more matches
Creating a Help Content Pack - Archive of obsolete content
the glossary file is written in rdf and consists of a simple list of terms with corresponding urls to the term definition.
...(we're still not actually to the point where we're describing the actual data in each of these, so we'll just use some filler data for now.) add the following code inside the rdf:description element you just created: <nc:panellist> <rdf:seq> </rdf:seq> </nc:panellist> you'll create the relevant information descriptions within the rdf:seq element.
... nc:datasources is a space-separated list of rdf datasources used in construction of the structure of referenced topics.
...And 5 more matches
Introduction to XUL - Archive of obsolete content
this linkage can be accomplished by including javascript in the xul, or by application code which walks the content model after it has been built from xul, and hooks up event listeners.
...menubars across the top of its applications' windows): main window containing menubar area at top across width of window containing menubar (and its contents) toolbar area below menubar across width of window containing main toolbar (and its contents) application-specific content area below toolbar area structure of a xul file our language of choice is xml, flavoured with css stylistic information.
...check the xptoolkit index for the most recent list.
...And 5 more matches
Introduction to RDF - Archive of obsolete content
rdf can also populate other xul elements as well such as listboxes and menus.
...rdf database let's take the example of a bookmarks list generated from rdf.
... a bookmarks list contains a set of records, each with a set of data associated with it, such as a url, a bookmark title and a visited date.
...And 5 more matches
XUL Changes for Firefox 1.5 - Archive of obsolete content
this lists the most notable changes to xul in firefox 1.5 (gecko 1.8).
... <richlistbox> and <richlistitem> the <richlistbox> and <richlistitem> elements are used for creating lists containing arbitrary content.
... this element works similarly to the <listbox> which is designed primarily for lists of textual items.
...And 5 more matches
toolbar - Archive of obsolete content
the value of this attribute should be a comma-separated list of item ids from the toolbarpalette or, additionally, any of the following strings: "separator", "spring", "spacer".
... customindex not in seamonkey 1.x type: integer this value is the index of the toolbar in the list of the custom toolbars.
... defaultset not in seamonkey 1.x type: comma-separated list of item ids the default set of displayed items on the toolbar.
...And 5 more matches
Processing XML with E4X - Archive of obsolete content
b smith</name> <likes> <os>linux</os> <browser>firefox</browser> <language>javascript</language> <language>python</language> </likes> </person>; alert(person.name); // bob smith alert(person['name']); // bob smith alert(person.likes.browser); // firefox alert(person['likes'].browser); // firefox if you access something with more than one matching element, you get back an xmllist: alert(person.likes.language.length()); // 2 as with the dom, * can be used to access all child nodes: alert(person.likes.*.length()); // 4 while the .
...operator accesses all children no matter how deeply nested: alert(person..*.length()); // 11 the length() method here returns 11 because both elements and text nodes are included in the resulting xmllist.
...ul methods, some of which are illustrated below: todo: add all of the methods to the javascript reference, link from here alert(person.name.text()) // bob smith var xml = person.name.toxmlstring(); // a string containing xml var personcopy = person.copy(); // a deep copy of the xml object var child = person.child(1); // the second child node; in this case the <likes> element working with xmllists in addition to the xml object, e4x introduces an xmllist object.
...And 5 more matches
Accessing XML children - Archive of obsolete content
operator can also be used to replace particular child nodes var elem1 = <foo> <bar/> </foo>; var elem2 = <red> <blue/> </red>; elem1.bar = elem2; replaces the <bar/> element with all of the content in elem2, giving: <foo> <red> <blue/> </red> <foo> xml lists many times, however, a single element will have two or more children of the same type.
... in this case, accessing foo.bar will return an xml list object, of all child elements of the type "bar".
... important it is your responsibility to determine whether you have an xml list or a single element when using the .
...And 5 more matches
Reference - Archive of obsolete content
--nickolay 11:50, 26 aug 2005 (pdt) i'll add it to my todo list for the new skins.
...--jonnyq i've already added those methods in the methods listing, but i haven't defined them yet.
...if downloading the stuff is your priority you are free to field ideas/concept to the devmo mailing list for discussion, and then actually code it (or find someone to do so).
...And 5 more matches
Mozilla XForms User Interface - Archive of obsolete content
days list - used when the data has a data type of day.
... months list - used when the data has a data type of month.
... select list control.
...And 5 more matches
Cascade and inheritance - Learn web development
note: on mdn css property reference pages you can find a technical information box, usually at the bottom of the specifications section, which lists a number of data points about that property, including whether it is inherited or not.
...in the example below we have a <ul>, with two levels of unordered lists nested inside it.
... the color has applied to the direct children, but also the indirect children — the immediate child <li>s, and those inside the first nested list.
...And 5 more matches
HTML basics - Learn web development
for example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
... lists a lot of the web's content is lists and html has special elements for these.
... marking up lists always consist of at least 2 elements.
...And 5 more matches
What’s in the head? Metadata in HTML - Learn web development
note: in google, you will see some relevant subpages of mdn web docs listed below the main homepage link — these are called sitelinks, and are configurable in google's webmaster tools — a way to make your site's search results better in the google search engine.
...for example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.
...the most commonly used of these is the favicon (short for "favorites icon", referring to its use in the "favorites" or "bookmarks" lists in browsers).
...And 5 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
passing parameters to a settimeout() function any parameters that you want to pass to the function being run inside the settimeout() must be passed to it as additional parameters at the end of the list.
... clearing with cleartimeout() or clearinterval() cleartimeout() and clearinterval() both use the same list of entries to clear from.
...with "cancel", not "clear" as with the "set..." methods.) just pass it the value returned by the requestanimationframe() call to cancel, which you stored in the variable raf: cancelanimationframe(raf); active learning: starting and stopping our spinner in this exercise, we'd like you to test out the cancelanimationframe() method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.
...And 5 more matches
A first splash into JavaScript - Learn web development
{ lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const reset...
...the constructs that listen out for the event happening are called event listeners, and the blocks of code that run in response to the event firing are called event handlers.
... add the following line below your checkguess() function: guesssubmit.addeventlistener('click', checkguess); here we are adding an event listener to the guesssubmit button.
...And 5 more matches
Getting started with Vue - Learn web development
the cli will then give you a list of project configurations you can use.
... initializing a new project to explore various features of vue, we will be building up a sample todo list app.
... .browserslistrc: this is a config for browserslist.
...And 5 more matches
Focus management with Vue refs - Learn web development
the list of lifecycle methods are below, in the order that they fire.
... we're already tracking the number of elements in our list heading — the <h2> in app.vue — and it's associated with our list of to-do items.
... first, we need to add a ref to our list heading.
...And 5 more matches
Command line crash course - Learn web development
linux/unix as hinted at above, linux/unix systems have a terminal available by default, listed among your applications.
... listing directory contents another built-in unix command is ls (short for list), which lists the contents of the directory you’re currently in.
... try running this now in your terminal: ls this gives you a list of the files and directories in your present working directory, but the information is really basic — you only get the name of each item present, not whether it is a file or a directory, or anything else.
...And 5 more matches
Creating JavaScript callbacks in components
a common pattern used with interfaces to create a bi-directional communication between two groups of code is the observer (or listener) pattern.
... basically, the component defines an observer (or listener) interface which is implemented by some external code and this implementation is passed to the component.
...javascript functions as callbacks another common use of the pattern is found in addeventlistener / removeeventlistener.
...And 5 more matches
How Mozilla's build system works
to view information about the tiers, you can execute the following special make targets: command effect make echo-tiers show the final list of tiers.
... make echo-dirs show the list of non-static source directories to iterate over, as determined by the tier list.
... make echo-variable-static_dirs show the list of static source directories to iterate over, as determined by the tier list.
...And 5 more matches
HTML parser threading
actual network data is passed to an nsistreamlistener.
... nshtml5streamparser is the nsistreamlistener implementation obtained by calling nsistreamlistener* nshtml5parser::getstreamlistener().
... the nsistreamlistener methods (onstartrequest, ondataavailable and onstoprequest) are called on the main thread.
...And 5 more matches
IME handling guide
preedit string), suggests a list of what the user attempts to input, commits composition string as a selected item off the list and commits composition string without any conversion.
... if one or more clauses were not converted as expected, the user can choose one of the clauses with arrow keys and look for the expected result form the list in the drop down menu (in the following screenshot, the clause with the thicker underline is called "selected clause").
...when an instance is created, it's registered to the list.
...And 5 more matches
Investigating leaks using DMD heap scan mode
the command you need to run firefox will look something like this: xpcom_mem_bloat_log=1 moz_cc_log_shutdown=1 moz_disable_content_sandbox=t moz_cc_log_directory=$logdir moz_cc_log_process=content moz_cc_log_thread=main moz_dmd_shutdown_log=$logdir moz_dmd_log_process=tab ./mach run --dmd --mode=scan breaking this down: xpcom_mem_bloat_log=1: this reports a list of the counts of every object created and destroyed and tracked by the xpcom leak tracking system.
...if your leak is happening in a different process or thread, change the options, which are listed in xpcom/base/nscyclecollector.cpp.
... the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
...And 5 more matches
Refcount tracing and balancing
xpcom_mem_log_classes this variable should contain a comma-separated list of names which will be used to compare against the types of the objects being logged.
...note that setting xpcom_mem_log_classes will also list the serial number of each object that leaked in the "bloat log" (that is, the file specified by the xpcom_mem_bloat_log variable; see the bloatview documentation for more details).
... you may use an object's serial number with the following variable to further restrict the reference count tracing: xpcom_mem_log_objects set this variable to a comma-separated list of object serial number or ranges of serial number, e.g., 1,37-42,73,165 (serial numbers start from 1, not 0).
...And 5 more matches
Certificate functions
the public functions listed here are used to interact with certificate databases.
... if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference.
... function name/documentation source code nss versions cert_addcerttolisttail mxr 3.2 and later cert_addextension mxr 3.5 and later cert_addocspacceptableresponses mxr 3.6 and later cert_addokdomainname mxr 3.4 and later cert_addrdn mxr 3.2.1 and later cert_asciitoname mxr 3.2 and later cert_cachecrl mxr 3.10 and later cert_clearocspcache mxr 3.11.7 and later cert_certchainfromcert mxr 3.2 and later cert_certlistfr...
...And 5 more matches
PKCS #11 Module Specs
valid names inside nss_params are: flags - comma separated list of flag values, parsed case-insensitive.
... ciphers - comma separated list of ciphers this token will enable that isn't already enabled by the library (currently only fortezza is defined) (case-insensitive).
... slotparams - space separated list of name/value pairs where the name is a slotid and the value is a space separated list of parameters related to that slotid.
...And 5 more matches
Gecko object attributes
object attributes list aria attributes all aria attributes used on dom element (i.e., any attribute prefixed by 'aria-') are exposed as object attributes; name is preserved except the 'aria-' prefix is cut.
...the role string may be a space-delimited list of roles.
... applied to: grid, heading, listitem, row, tablist exposed in aria: aria-level posinset if this item is in a group, what is the item number within the group, where the size is defined by the setsize attribute.
...And 5 more matches
nsIAlertsService
@mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional] in nsiprincipal principal); methods showalertnotification() displays a notification window.
... void showalertnotification( in astring imageurl, in astring title, in astring text, in boolean textclickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional in astring lang, optional in astring data, optional in nsiprincipal principal, optional in boolean inprivatebrowsing, optional ); parameters imageurl a url identifying the image to display in the notification alert.
... textclickable optional if true, if the user clicks on it, the listener is notified; when hovered the notification background becomes lighter and the cursor turns to a pointer.
...And 5 more matches
nsIPromptService
wstring apassword, in wstring acheckmsg, inout boolean acheckstate); boolean promptpassword(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring apassword, in wstring acheckmsg, inout boolean acheckstate); boolean select(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in pruint32 acount, [array, size_is(acount)] in wstring aselectlist, out long aoutselection); constants the following flags are combined to form the abuttonflags parameter passed to confirmex.
... return value true for ok, false for cancel select() shows a dialog box with a list box of strings from which the user may make a single selection.
...boolean select( in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in pruint32 acount, [array, size_is(acount)] in wstring aselectlist, out long aoutselection ); aparent the parent window for the dialog.
...And 5 more matches
nsIScriptError
owid(in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindowid); autf8string tostring(); attributes attribute type description category string a string indicating the category of error that occurred see categories for a list.
... flags pruint32 flags; see flag constants for a list.
... flags one of flags listed in flag constants.
...And 5 more matches
nsIStreamConverter
inherits from: nsistreamlistener last changed in gecko 1.7 suppose you had code that converted plain text into html.
... asynchronous: nsistreamlistener to nsistreamlistener.
... you can supply data directly to the converter by calling it's nsistreamlistener.ondataavailable() method.
...And 5 more matches
nsIXULTemplateBuilder
a template builder, given an input source of data, a template, and a reference point, generates a list of results from the input, and copies part of the template for each result.
...as an example, for an xml data source the initial reference point would be a specific node in the dom tree and a template might generate a list of all child nodes.
... getresultforid(in astring aid); nsixultemplateresult getresultforcontent(in nsidomelement aelement); boolean hasgeneratedcontent(in nsirdfresource anode, in nsiatom atag); void addrulefilter(in nsidomnode arule, in nsixultemplaterulefilter afilter); [noscript] void init(in nsicontent aelement); [noscript] void createcontents(in nsicontent aelement, in boolean aforcecreation); void addlistener(in nsixulbuilderlistener alistener); void removelistener(in nsixulbuilderlistener alistener); attributes attribute type description root nsidomelement readonly: the root node in the dom to which this builder is attached.
...And 5 more matches
Search - Firefox Developer Tools
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 the list, and return to open the file you want: searching within a file to search for a particular substring in the file currently loaded into the source pane, press control + f (or command + f on a mac) while the source pane is focused.
...the outline tab lists the functions in the current file.
...And 5 more matches
Edit CSS filters - Firefox Developer Tools
css filter properties in the rules view have a circular gray and white swatch next to them: clicking the swatch opens a filter editor: the filter editor lists each of the effects performed by that filter on a separate line.
... you can also add new effects by selecting an effect from the dropdown list at the bottom of the dialog.
... once you have selected the effect you want to add, click the plus sign (+) to the right of the dropdown list.
...And 5 more matches
Edit fonts - Firefox Developer Tools
"all fonts on page" — this section lists all of the fonts in use on the page.
...empty elements will not have any fonts used and will display the message "no fonts were found for the current element." fonts will be included in this section for one of the following reasons: they are listed in the element's font-family css declaration value.
... for standard (static) fonts, you will be able to change the settings listed below size the font-size for the inspected element.
...And 5 more matches
Examine and edit CSS - Firefox Developer Tools
examine css rules the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific: the four buttons on the right top of the rules view allow you to change the display of certain css and rules view features.
...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.
... filter rules containing this property: next to overridden declarations is an icon you can click to filter the rules list to show only those rules that include that property.
...And 5 more matches
about:debugging (before Firefox 68) - Firefox Developer Tools
whether or not system add-ons appear in the list on this page depends on the setting of the devtools.aboutdebugging.showsystemaddons preference.
... this page enables you to do two things: load an add-on temporarily from disk connect the add-on debugger to any restartless add-ons connecting the add-on debugger the add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your firefox).
... tabs in firefox 49 onwards, a tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current firefox instance.
...And 5 more matches
Document.querySelectorAll() - Web APIs
the document method queryselectorall() returns a static (not live) nodelist representing a list of the document's elements that match the specified group of selectors.
... syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
... return value a non-live nodelist containing one element object for each element that matches at least one of the specified selectors or an empty nodelist in case of no matches.
...And 5 more matches
Using the Gamepad API - Web APIs
in addition to these events, the api also adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getgamepads() method which you can use to get a list of gamepads known to the page.
... you can use gamepadconnected like this: window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
...gamepadconnected), a second event is dispatched to the focused window, gamepaddisconnected: window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same type are used.
...And 5 more matches
HTMLSelectElement.selectedOptions - Web APIs
the read-only htmlselectelement property selectedoptions contains a list of the <option> elements contained within the <select> element that are currently selected.
... the list of selected options is an htmlcollection object with one entry per currently selected option.
... syntax var selectedcollection = htmlselectelement.selectedoptions; value an htmlcollection which lists every currently selected htmloptionelement which is either a child of the htmlselectelement or of an htmloptgroupelement within the <select> element.
...And 5 more matches
Pointer Lock API - Web APIs
if ("onpointerlockchange" in document) { document.addeventlistener('pointerlockchange', lockchangealert, false); } else if ("onmozpointerlockchange" in document) { document.addeventlistener('mozpointerlockchange', lockchangealert, false); } function lockchangealert() { if(document.pointerlockelement === canvas || document.mozpointerlockelement === canvas) { console.log('the pointer lock status is now locked'); // do something useful in respons...
... document.addeventlistener('pointerlockerror', lockerror, false); document.addeventlistener('mozpointerlockerror', lockerror, false); function lockerror(e) { alert("pointer lock failed"); } note: until firefox 50 the above events were prefixed with moz in firefox.
... canvas.requestpointerlock = canvas.requestpointerlock || canvas.mozrequestpointerlock; document.exitpointerlock = document.exitpointerlock || document.mozexitpointerlock; now we set up an event listener to run the requestpointerlock() method on the canvas when it is clicked, which initiates pointer lock.
...And 5 more matches
Using the Resource Timing API - Web APIs
function calculate_load_times() { // check performance support if (performance === undefined) { console.log("= calculate load times: performance not supported"); return; } // get a list of "resource" performance entries var resources = performance.getentriesbytype("resource"); if (resources === undefined || resources.length <= 0) { console.log("= calculate load times: there are no `resource` performance records"); return; } console.log("= calculate load times"); for (var i=0; i < resources.length; i++) { console.log("== resource[" + i + "] - " + resources[...
... if (performance === undefined) { console.log("= display size data: performance not supported"); return; } var list = performance.getentriesbytype("resource"); if (list === undefined) { console.log("= display size data: performance.getentriesbytype() is not supported"); return; } // for each "resource", display its *size property values console.log("= display size data"); for (var i=0; i < list.length; i++) { console.log("== resource[" + i + "] - " + list[i].name); if ("decodedbodys...
...ize" in list[i]) console.log("...
...And 5 more matches
SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
... */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
... "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...And 5 more matches
TouchEvent - Web APIs
lists of touches are represented by touchlist objects.
... touchevent.changedtouches read only a touchlist of all the touch objects representing individual points of contact whose states changed between the previous touch event and this one.
... touchevent.targettouchesread only a touchlist of all the touch objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event.
...And 5 more matches
XRInputSourceArray - Web APIs
the interface xrinputsourcearray represents a live list of webxr input sources, and is used as the return value of the xrsession property inputsources.
... in addition to being able to access the input sources in the list using standard array notation (that is, with index numbers insize square brackets), methods are available to allow the use of iterators and the foreach() method is also available.
... length read only the number of xrinputsource objects in the list.
...And 5 more matches
Web accessibility for seizures and physical reactions - Accessibility
only a few types of epilepsies are photosensitive though, and the vast majority of epilepsies are not." in addition to seizures brought about by photosensitivity, listening to certain pieces of music can also trigger what are called musicogenic seizures, although these types of seizures seem to be much more rare.
...the epilepsy foundation's article, photosensitivity and seizures, provides a list of triggers that may cause seizures in photosensitive people; here's an excerpt from that list: television screens or computer monitors due to the flicker or rolling images.
...the physical disorders listed below are all possible consequences: each of these physical reactions may be so severe as to be incapacitating.
...And 5 more matches
additive-symbols - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 5 more matches
negative - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 5 more matches
prefix - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 5 more matches
suffix - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 5 more matches
symbols - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 5 more matches
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
you can also browse key css concepts and a list of selectors organized by type.
... basic rule syntax style rule syntax style-rule ::= selectors-list { properties-list } ...
... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] see the index of selectors, pseudo-classes, and pseudo-elements below.
...And 5 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of ava...
...ilable values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; values standard keywords value demo browser description none div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <div>lorem</div> firefox chrome safari edge no special styling is applied.
... menulist-button div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <div>lorem</div> firefox chrome safari edge the element is styled as a button that would indicate a menulist can be opened.
...And 5 more matches
cross-fade() - CSS: Cascading Style Sheets
specification syntax the cross-fade() function takes a list of images with a percentage defining how much of each image is retained in terms of opacity when it is blended with the other images.
...the 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%.
..., <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
...And 5 more matches
<input type="month"> - HTML: Hypertext Markup Language
WebHTMLElementinputmonth
events change and input supported common attributes autocomplete, list, readonly, and step.
...="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"> var monthcontrol = document.queryselector('input[type="month"]'); monthcontrol.value = '1978-06'; additional attributes in addition to the attributes common to <input> elements, month inputs offer the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the latest year and month to accept as a valid input min the earliest year and month to accept as a valid input readonly a boolean which, if present, indicates that the input's value can't be edited step a stepping interval to use when incrementing an...
...d decrementing the value of the input field list the values of the list attribute is the id of a <datalist> element located in the same document.
...And 5 more matches
<menu> - HTML: Hypertext Markup Language
WebHTMLElementmenu
this includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked.
... permitted content if the element is in the list menu state: flow content, or alternatively, zero or more occurrences of <li>, <script>, and <template>.
... (list menu is the default state, unless the parent element is a <menu> in the context menu state.) if the element is in the context menu state: zero or more occurrences, in any order, of <menu> (context menu state only), <menuitem>, <hr>, <script>, and <template>.
...And 5 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
see the html autocomplete attribute for a complete list of values and details on how to use autocomplete.
... multiple this boolean attribute indicates that multiple options can be selected in the list.
...when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
...And 5 more matches
keyTimes - SVG: Scalable Vector Graphics
the keytimes attribute represents a list of time values used to control the pacing of the animation.
... each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation.
... each time value in the keytimes list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the duration of the animation element.
...And 5 more matches
Content Scripts - Archive of obsolete content
event listeners you can listen for dom events in a content script just as you can in a normal page script, but there are two important differences: first, if you define an event listener by passing it as a string into setattribute(), then the listener is evaluated in the page's context, so it will not have access to any variables defined in the content script.
... for example, this content script will fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("onclick", "alert(themessage);"); second, if you define an event listener by direct assignment to a global event handler like onclick, then the assignment might be overridden by the page.
...("sdk/page-mod").pagemod({ include: "*", contentscript: myscript, contentscriptwhen: "start" }); this will work fine on most pages, but will fail on pages which also assign to onclick: <html> <head> </head> <body> <script> window.onclick = function() { window.alert("it's my click now!"); } </script> </body> </html> for these reasons, it's better to add event listeners using addeventlistener(), defining the listener as a function: var themessage = "hello from content script!"; anelement.onclick = function() { alert(themessage); }; anotherelement.addeventlistener("click", function() { alert(themessage); }); communicating with the add-on to enable add-on scripts and content scripts to communicate with each other, each end of the conversation has acc...
...And 4 more matches
Content Processes - Archive of obsolete content
an event emitter maintains a list of callbacks (or listeners) for one or more named events.
... each event emitter has several methods: the method on is used to add a listener for an event.
... conversely, the method removelistener is used to remove a listener for an event.
...And 4 more matches
Downloading Files - Archive of obsolete content
downloading binary files with a progress listener to download a binary file with custom progress listener: components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk"...
...var privacy = privatebrowsingutils.privacycontextfromwindow(aurlsourcewindow); var progresselement = document.getelementbyid("progress_element"); persist.progresslistener = { onprogresschange: function(awebprogress, arequest, acurselfprogress, amaxselfprogress, acurtotalprogress, amaxtotalprogress) { var percentcomplete = math.round((acurtotalprogress / amaxtotalprogress) * 100); progresselement.textcontent = percentcomplete +"%"; }, onstatechange: function(awebprogress, arequest, astateflags, astatus) { // do something } } persist.saveuri(...
...obj_uri, null, null, null, "", targetfile, privacy); downloading files that require credentials before calling nsiwebbrowserpersist.saveuri(), you need to set the progresslistener property of the nsiwebbrowserpersist instance to an object that implements nsiauthprompt.
...And 4 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
see here for the list of stuff you can't have in addition to no resource:// uris or file:// uris to files inside your xpi.
...until you get your bootstrap.js running you should use a basic overlay onto the xul window with an event listener for "load" to catch overlay load and then run your manual ui construction function.
...a basic bootstrap.js file: components.utils.import("resource://gre/modules/services.jsm"); function startup(data,reason) { components.utils.import("chrome://myaddon/content/mymodule.jsm"); mymodule.startup(); // do whatever initial startup stuff you need to do foreachopenwindow(loadintowindow); services.wm.addlistener(windowlistener); } function shutdown(data,reason) { if (reason == app_shutdown) return; foreachopenwindow(unloadfromwindow); services.wm.removelistener(windowlistener); mymodule.shutdown(); // do whatever shutdown stuff you need to do on addon disable components.utils.unload("chrome://myaddon/content/mymodule.jsm"); // same url as above // hack warning: t...
...And 4 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.
...let's look at the attributes we used: the toolbarname is the name that will appear on the view > toolbars menulist.
... the defaultset attribute lists the ids of the icons you want to include on your toolbar by default.
...And 4 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
passing around functions/code as strings often you'll want to pass functions or code to other functions, most notoriously settimeout and addeventlistener.
...settimeout("dosomething();", 100); addeventlistener("load", "myaddon.init(); myaddon.onload();", true); setinterval(am_i_a_string_or_function_reference_qmark, 100); that in itself is certainly not elegant, but it may also become a security issue if you pass code that was externally retrieved (or at least contains bits of externally retrieved data): // do not use!
... addeventlistener("load", function() { myaddon.init(); myaddon.onload(); }, true); function doxhr() { //...
...And 4 more matches
Handling Preferences - Archive of obsolete content
this xul page lists all the preferences defined in the firefox installation, allowing you to change them as you please.
...right-clicking on the list reveals several options that allow you to modify preference values and add new ones.
... the list in about:config is not complete.
...And 4 more matches
Supporting search suggestions in search plugins - Archive of obsolete content
once the list has been retrieved, it's displayed in a popup box that appears under the search bar, which lets the user select a suggested search term.
... if the user continues to type, a new set of suggestions is requested from the search engine, and the displayed list is refreshed.
...-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}"/> if the user types "fir" into the search bar, then pauses, firefox inserts "fir" in place of {searchterms} and queries that url: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/> the results are used to construct the suggestion list box.
...And 4 more matches
Drag and Drop Example - Archive of obsolete content
<vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="text box" elem="textbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> </vbox> the nsdraganddrop object will be called to do most of the work.
... we'll create a listobserver object that will set the data to be dragged.
...next, we'll define the two listener objects.
...And 4 more matches
A XUL Bestiary - Archive of obsolete content
if, however, you write event handlers inside event listeners, as we will describe shortly, you can use these events to set off other actions.
... the term isn't used very often, but an "event listener" is a special attribute of an object that listens to its own events.
... the document, for example, has an "onload" event listener to listen for its "load" event.
...And 4 more matches
Sorting Results - Archive of obsolete content
for instance, the photos are listed in the same order in this example as they appear in the seq in the datasource.
...for instance, if a list of photos was displayed in a two column tree showing the title and description, you could sort by either title or description.
...in this example, the list of people is sorted ascending by name.
...And 4 more matches
menuitem - Archive of obsolete content
utes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut key (accelerator key) to use to invoke the command.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...And 4 more matches
Table Reflow Internals - Archive of obsolete content
it gains, loses children) style changed - a target changed stylisticly (recall, size is a style property) content changed - a target's content changed (e.g.
... a text run) user defined - currently only used for fixed positioned frames kinds of reflows incremental reflow (continued) reflower not allowed to change available size of reflowee reflow commands get coalesced to streamline processing style change a target changed stylistic if there is a target, otherwise every frame may need to respond parent of target usually turns it into an incremental reflow with a style changed command type table frames nstableouter frame ↙ ↘ nstable frame nstablecaption frame ↙ ↘ ↓ nstablecol groupframe nstablerow groupframe nsblockframe ↓ ↓ nstablecol frame nstablerow frame ↓ nstablecell frame ↓ nsblock frame ...
...caption is a target when it changes stylistically (style changed).
...And 4 more matches
XForms Select1 Element - Archive of obsolete content
introduction allows the user to choose a single value from a list of pre-defined values (see the spec).
... the list of pre-defined items can be specified by either item (see the spec) or itemset (see the spec) elements.
... single-node binding special selection - this attribute, when set to 'open', allows the user to provide free entry to the list.
...And 4 more matches
CSS and JavaScript accessibility best practices - Learn web development
"standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.6rem; } you should: select sensible font sizes, line heights, letter spacing, etc.
...your lists should look like lists.
...ambiguously linked to their inputs, so screen readers can read them out alongside: <label for="name">enter your name:</label> <input type="text" name="name" id="name"> we only do the validation when the form is submitted — this is so that we don't update the ui too often and potentially confuse screen reader (and possibly other) users: form.onsubmit = validate; function validate(e) { errorlist.innerhtml = ''; for(let i = 0; i < formitems.length; i++) { const testitem = formitems[i]; if(testitem.input.value === '') { errorfield.style.left = '360px'; createlink(testitem); } } if(errorlist.innerhtml !== '') { e.preventdefault(); } } note: in this example, we are hiding and showing the error message box using absolute positioning rather than another m...
...And 4 more matches
HTML: A good basis for accessibility - Learn web development
text content one of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc.
... an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document.
... you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content.
...And 4 more matches
HTML: A good basis for accessibility - Learn web development
text content one of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc.
... an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document.
... you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content.
...And 4 more matches
CSS values and units - Learn web development
when you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page.
...for example, if you look at the page for <color> you will see that the browser compatibility section lists different types of color value and support for them.
...some of the most useful units for web development are listed in the table below.
...And 4 more matches
What are browser developer tools? - Learn web development
file list the first pane on the left contains the list of files associated with the page you are debugging.
... select the file you want to work with from this list.
... watch expressions and breakpoints the right-hand pane shows a list of the watch expressions you have added and breakpoints you have set.
...And 4 more matches
Advanced form styling - Learn web development
these include: elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>.
... if you look at the reference page you'll see a lot of different possible values listed for -webkit-appearance, however by far the most helpful value, and probably the only one you'll use, is none.
... also bear in mind that we've added some javascript to the page that lists the files selected by the file picker, below the control itself.
...And 4 more matches
Example 4 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */...
... /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -we...
...cal-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { pa...
...And 4 more matches
Example 5 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" role="listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { po...
...sition : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius :...
...cal-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { pa...
...And 4 more matches
Debugging on Mac OS X
select "build" from the left of the scheme editor window, and check that there is nothing listed under targets (otherwise it may cause problems when you try to run the executable for debugging since you will get build errors).
... one important issue that the mozilla .lldbinit file fixes is that by default some breakpoints will be listed as "pending", and xcode will not stop at them.
...:-( dummy_bp_list = lldb.sbbreakpointlist(target) debugger.getdummytarget().findbreakpointsbyname("nsthread::processnextevent", dummy_bp_list) dummy_bp_id = dummy_bp_list.getbreakpointatindex(0).getid() + 1 debugger.getdummytarget().breakpointdelete(dummy_bp_id) # "source" the mozilla project .lldbinit: os.chdir(target.executable.fullpath.split("/dist/")[0]) debugger.handlecommand("command...
...And 4 more matches
Commenting IDL for better documentation
special commands you can use special commands in your doxygen comments; the ones listed below are interpreted by our tools.
...used at the beginning of a comment line to indicate an unordered list item.
... there must be a space between the list marker and the item.
...And 4 more matches
How Mozilla determines MIME Types
externalhelperappservice (located at uriloader/exthandler/nsexternalhelperappservice.cpp) the file->mime type mapping works like this: on beos, the operating system is asked for the type of the file (not quite yet, bug 217723) on macos, the type and creator code will be used to lookup the type of the file from the os a hardcoded list of extensions is checked (containing currently 13 entries, nsexternalhelperappservice.cpp line 463 (this is done for speed – it is faster to find data in the hardcoded list than asking the os or looking in preferences) if the extension is not listed there, it becomes interesting.
...the list in edit/preferences/helper applications) if that failed, a list of "extra" mime types is searched for an extension match.
... see line 507 for the complete list.
...And 4 more matches
How to implement a custom autocomplete search component
the xul textbox element supports an autocomplete mechanism that is used to create a textbox with a popup containing a list of possible completions for what the user has started to type.
... implement the list of matched strings using the nsiautocompleteresult interface.
...) { return this._results[index]; }, queryinterface: xpcomutils.generateqi([ ci.nsiautocompleteresult ]) }; /** * @constructor * * @implements {nsiautocompletesearch} */ function providerautocompletesearch() { } providerautocompletesearch.prototype = { classid: class_id, classdescription : class_name, contractid : contract_id, /** * searches for a given string and notifies a listener (either synchronously * or asynchronously) of the result * * @param searchstring the string to search for * @param searchparam an extra parameter * @param previousresult a previous result to use for faster searchinig * @param listener the listener to notify when the search is complete */ startsearch: function(searchstring, searchparam, previousresult, listener) { va...
...And 4 more matches
Dict.jsm
method overview dict copy(); boolean del(string akey); object get(string akey, [optional] object adefault); boolean has(string akey); array listitems(); array listkeys(); array listvalues(); void set(string akey, object avalue); string tojson(); string tostring(); properties attribute type description count number the number of items in the dictionary.
... listitems() returns an array of the key/value pairs in the dictionary.
... array listitems(); parameters none.
...And 4 more matches
DownloadSummary
provides an aggregated view on the contents of a downloadlist.
...method overview promise bindtolist(downloadlist alist); promise addview(object aview); promise removeview(object aview); properties attribute type description allhavestopped read only boolean indicates whether all the downloads are currently stopped.
... methods bindtolist() this method may be called once to bind this object to a downloadlist.
...And 4 more matches
PromiseWorker.jsm
self.addeventlistener('message', msg => worker.handlemessage(msg)); abstractworker is a base class for the worker, and it's designed to be used by derived class, which provides above four methods (dispatch, postmessage, close, and log).
... post syntax promise = myworker.post(afunctionname, aargs, aclosure, atransferlist); parameters afunctionname the name of the function to be called as it appears in the worker file.
...if any of the arguments needs to be transferred instead of copied, this may be specified by making the argument an instance of basepromiseworker.meta or by using the atransferlist argument.
...And 4 more matches
Localizing with Koala
choose "koala" in the categories list.
... choose "koala" in the templates list.
...switch to "koala file view" in the sidebar (choose it from the list that appears when you click on the arrow pointing down situated next to the sidebar's [x] button).
...And 4 more matches
Scroll-linked effects
scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases.
... <body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
... as the scroll event listener runs in the javascript on the browser's main thread, it will be asynchronous relative to the user-visible scrolling.
...And 4 more matches
PRHostEnt
a structure that defines a list of network addresses.
... syntax #include <prnetdb.h> typedef struct prhostent { char *h_name; char **h_aliases; #if defined(_win32) print16 h_addrtype; print16 h_length; #else print32 h_addrtype; print32 h_length; #endif char **h_addr_list; } prhostent; fields the structure has the following fields: h_name pointer to the official name of host.
... h_aliases pointer to a pointer to list of aliases.
...And 4 more matches
Cryptography functions
the public functions listed here perform cryptographic operations based on the pkcs #11 interface.
... if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference.
... pk11_exportencryptedprivatekeyinfo mxr 3.2 and later pk11_exportencryptedprivkeyinfo mxr 3.9 and later pk11_exportprivatekeyinfo mxr 3.2 and later pk11_finalize mxr 3.2 and later pk11_findbestkeamatch mxr 3.2 and later pk11_findcertandkeybyrecipientlist mxr 3.2 and later pk11_findcertandkeybyrecipientlistnew mxr 3.2 and later pk11_findcertbyissuerandsn mxr 3.2 and later pk11_findcertfromdercert mxr 3.2 and later pk11_findcertfromnickname mxr 3.2 and later pk11_findcertinslot mxr 3.2 and later ...
...And 4 more matches
NSS_3.12_release_notes.html
bug 354403: nsslist_createiterator returns pointer to a freed memory if the function fails to allocate a lock bug 399236: pkix wrapper must print debug output into stderr bug 399300: pkix error results not freed after use.
...bug 402773: verify the list of public header files in nss 3.12 bug 403470: strsclnt + tstclnt crashes when pkix enabled.
...bug 417024: convert libpkix error code into nss error code bug 422859: libpkix builds & validates chain to root not in the caller-provided anchor list bug 425516: need to destroy data pointed by certvaloutparam array in case of error bug 426450: pkix_pl_hashtable_remove leaks hashtable key object bug 429230: memory leak in pkix_checkcert function bug 392696: fix copyright boilerplate in all new pkix code bug 300928: integrate libpkix to nss bug 303457: extensions newly supported in libpkix must be marked supported bug 331096: nss softoken must detect forks on all unix-ish platforms bug 390710: certnameconstraintstemplate is incorre...
...And 4 more matches
nss tech note5
you can find a list of cipher mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_en_de_.
...you can find a list of digest mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_digest.
...you can find a list of hmac mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_sn_vr, and choose the mechanisms that contain hmac in the name ck_mechanism_type hmacmech = ckm_md5_hmac; <big>(for example)</big> choose a slot on which to to do the operation pk11slotinfo* slot = pk11_getbestslot(hmacmech, null); or pk11slotinfo* slot = pk11_getinternalkeyslot(); /* always returns int slot, ...
...And 4 more matches
Index
9 hacking tips spidermonkey this page list a few tips to help you investigate issues related to spidermonkey.
... all tips listed here are dealing with the javascript shell obtained at the end of the build documentation of spidermonkey.
...the new object has the same code and argument list as funobj.
...And 4 more matches
IAccessibleText
lists, trees, and tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed.
...lists, trees, and tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed.
...a change of the selection() is notified to the accessibility event listeners with an ::ia2_event_text_selection_changed event.
...And 4 more matches
nsIApplicationUpdateService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void adddownloadlistener(in nsirequestobserver listener); astring downloadupdate(in nsiupdate update, in boolean background); void pausedownload(); void removedownloadlistener(in nsirequestobserver listener); nsiupdate selectupdate([array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); attributes attribute type description backgroundchecker nsiupdatechecker the update check...
... methods adddownloadlistener() adds a listener that receives progress and state information about the update that is currently being downloaded.
...void adddownloadlistener( in nsirequestobserver listener ); parameters listener an object implementing nsirequestobserver and optionally nsiprogresseventsink that will be notified of state and progress information as the update is downloaded.
...And 4 more matches
nsICacheSession
inherits from: nsisupports last changed in gecko 14 (firefox 14 / thunderbird 14 / seamonkey 2.11) method overview void asyncopencacheentry(in acstring key, in nscacheaccessmode accessrequested, in nsicachelistener listener, [optional] in boolean nowait); void evictentries(); prbool isstorageenabled(); nsicacheentrydescriptor opencacheentry(in acstring key, in nscacheaccessmode accessrequested, in boolean blockingmode); void doomentry(in acstring key, in nsicachelistener listener); attributes attribute type description doomentriesifexpired prbool expired entries will be doomed or evicte...
...instead, the listener will be notified when the descriptor is available.
... void asyncopencacheentry( in acstring key, in nscacheaccessmode accessrequested, in nsicachelistener listener, [optional] in boolean nowait ); parameters key the key for cache entry.
...And 4 more matches
nsIDNSService
method overview nsicancelable asyncresolve(in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtarget alistenertarget); void init(); obsolete since gecko 1.8 nsidnsrecord resolve(in autf8string ahostname, in unsigned long aflags); void shutdown(); obsolete since gecko 1.8 attributes attribute type description myhostname autf8string read only.
...a specified nsidnslistener is invoked when the resolution process is completed.
... nsicancelable asyncresolve( in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtarget alistenertarget ); parameters ahostname the host name or ip-address-literal to resolve.
...And 4 more matches
nsIDOMXULElement
66 introduced gecko 1.0 inherits from: nsidomelement last changed in gecko 1.9 (firefox 3) method overview void blur(); void click(); void docommand(); void focus(); nsidomnodelist getelementsbyattribute(in domstring name, in domstring value); nsidomnodelist getelementsbyattributens(in domstring namespaceuri, in domstring name, in domstring value); attributes attribute type description align domstring gets/sets the value of the element's align attribute.
...gets or creates a box object for the element; browser, editor, iframe, listbox, menu, menupopup, scrollbox, tooltip and tree elements receive specialized box objects allowing access to additional properties not normally available from script.
...nsidomnodelist getelementsbyattribute( in domstring name, in domstring value ); parameters name the name of the attribute to search for.
...And 4 more matches
nsIHttpChannelInternal
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void getrequestversion(out unsigned long major, out unsigned long minor); void getresponseversion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type description canceled boolean returns true if and only if the channel has been canceled.
...the nsihttpupgradelistener will have its nsihttpupgradelistener.ontransportavailable() method invoked if a matching 101 is processed.
... the arguments to nsihttpupgradelistener.ontransportavailable() provide to the new protocol the low level transport streams that are no longer used by http.
...And 4 more matches
Component; nsIPrefBranch
me); void deletebranch(in string astartingat); boolean getboolpref(in string aprefname, requires gecko 54 [optional] in boolean adefaultvalue); string getcharpref(in string aprefname,requires gecko 54 [optional] in string adefaultvalue); requires gecko 58 utf8tring getstringpref(in string aprefname, [optional] in utf8string adefaultvalue); void getchildlist(in string astartingat, [optional] out unsigned long acount, [array, size_is(acount), retval] out string achildarray); void getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqiresult avalue); long getintpref(in string aprefname,requires gecko 54 [optional] in long adefaultvalue); long getpreftype(in string aprefname); void loc...
... void addobserver( in string adomain, in nsiobserver aobserver, in boolean aholdweak ); parameters adomain the preference on which to listen for changes.
... getchildlist() returns an array of strings representing the child preferences of the root of this branch.
...And 4 more matches
nsIUpdateManager
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a global application service that maintains a list of previously installed updates, as well as the currently in use update.
...this update is not in the history list.
... updatecount long the number of updates in the history list; the updates can be fetched by calling getupdateat().
...And 4 more matches
nsIWebSocketChannel
to create an instance, use: var websocketchannel = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsiwebsocketchannel); method overview void asyncopen(in nsiuri auri, in acstring aorigin, in nsiwebsocketlistener alistener, in nsisupports acontext); void close(in unsigned short acode, in autf8string areason); void sendbinarymsg(in acstring amsg); void sendmsg(in autf8string amsg); attributes attribute type description extensions acstring sec-websocket-extensions response header value.
...received messages are fed to the socket listener as they arrive.
... the socket listener's methods are called on the thread that calls asyncopen() and are not called until after asyncopen() returns.
...And 4 more matches
nsIXMLHttpRequestEventTarget
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the event listeners used when uploading data using the xmlhttprequest object.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsidomeventtarget last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) attributes attribute type description onabort nsidomeventlistener a javascript function object that gets invoked if the operation is canceled by the user.
... onerror nsidomeventlistener a javascript function object that gets invoked if the operation fails to complete due to an error.
...And 4 more matches
nsIZipReader
example demonstrating this function: list contents of xpi and read file contents extract() extracts a zip entry into a local file specified by outfile.
... example demonstrating this function: list contents of xpi and read file contents getentry() returns a nsizipentry describing a specified zip entry.
... example demonstrating this function: list contents of xpi and read file contents getinputstream() returns an input stream containing the contents of the specified zip entry.
...And 4 more matches
UI Tour - Firefox Developer Tools
the ui is split vertically into three panels source list pane source pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar watch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all the javascript source files loaded into the page, and enables you to select one to debug.
... web extensions are listed in the source list pane using the extension's name.
... set directory root changes the source list view so that only that item and its children are visible.
...And 4 more matches
Responsive Design Mode - Firefox Developer Tools
from left to right, the display includes: name of the selected device - a drop-down list that includes whatever devices you have selected from the device settings screen.
... dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example 2g, 3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch events.
... device selection just above the viewport there is a label "no device selected"; click this to see a list of device names.
...And 4 more matches
Background Tasks API - Web APIs
variable declarations let tasklist = []; let totaltaskcount = 0; let currenttasknumber = 0; let taskhandle = null; these variables are used to manage the list of tasks that are waiting to be performed, as well as status information about the task queue and its execution: tasklist is an array of objects, each representing one task waiting to be run.
...that function, enqueuetask(), looks like this: function enqueuetask(taskhandler, taskdata) { tasklist.push({ handler: taskhandler, data: taskdata }); totaltaskcount++; if (!taskhandle) { taskhandle = requestidlecallback(runtaskqueue, { timeout: 1000 }); } schedulestatusrefresh(); } enqueuetask() accepts as input two parameters: taskhandler is a function which will be called to handle the task.
... to enqueue the task, we push an object onto the tasklist array; the object contains the taskhandler and taskdata values under the names handler and data, respectively, then increment totaltaskcount, which reflects the total number of tasks which have ever been enqueued (we don't decrement it when tasks are removed from the queue).
...And 4 more matches
console - Web APIs
WebAPIConsole
console.dir() displays an interactive listing of the properties of a specified javascript object.
... this listing lets you use disclosure triangles to examine the contents of child objects.
... there are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.
...And 4 more matches
ContentIndex.getAll() - Web APIs
the getall() method of the contentindex interface returns a promise that resolves with an iterable list of content index entries.
...used in user-visible lists of content.
...used in user-visible lists of content.
...And 4 more matches
DataTransfer - Web APIs
datatransfer.files contains a list of all the local files available on the data transfer.
... if the drag operation doesn't involve dragging files, this property is an empty list.
... datatransfer.items read only gives a datatransferitemlist object which is a list of all of the drag data.
...And 4 more matches
Examples of web and XML development using the DOM - Web APIs
() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.
...when the body of this html document loads, an event listener is registered with the top row of the table.
... the event listener handles the event by executing the function stopevent, which changes the value in the bottom cell of the table.
...And 4 more matches
Event - Web APIs
WebAPIEvent
many dom elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them.
... event-handlers are usually connected (or "attached") to various html elements (such as <button>, <div>, <span>, etc.) using eventtarget.addeventlistener(), and this generally replaces using the old html event handler attributes.
... further, when properly added, such handlers can also be disconnected if needed using removeeventlistener().
...And 4 more matches
HTMLFormElement - Web APIs
events listen to these events using addeventlistener(), or by assigning an event listener to the oneventname property of this interface.
... formdata the formdata event fires after the entry list representing the form's data is constructed.
... usage notes obtaining a form element object to obtain an htmlformelement object, you can use a css selector with queryselector(), or you can get a list of all of the forms in the document using its forms property.
...And 4 more matches
MutationRecord - Web APIs
properties property type description mutationrecord.type string returns "attributes" if the mutation was an attribute mutation, "characterdata" if it was a mutation to a characterdata node, and "childlist" if it was a mutation to the tree of nodes.
... for childlist, it is the node whose children changed.
... mutationrecord.addednodes nodelist return the nodes added.
...And 4 more matches
Using Performance Timeline - Web APIs
function perfentry_tojson() { // create a few performance entries performance.mark("mark-1"); performance.mark("mark-2"); performance.measure("meas-1", "mark-1", "mark-2"); var pelist = performance.getentries(); var pe = pelist[0]; if (pe.tojson === undefined) { log ("performanceentry.tojson() is not supported"); return; } // print the performanceentry object var json = pe.tojson(); var s = json.stringify(json); log("performanceentry.tojson = " + s); } performance observers the performance observer interfaces allow an application to register an ob...
...when the observer (callback) is invoked the callback's parameters include a performance observer entry list that only contains observed performance entries.
... that is, the list only contains entries for the event types that were specified when the observer's observe() method was invoked.
...And 4 more matches
SpeechRecognition - Web APIs
speechrecognition.abort() stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a speechrecognitionresult.
... speechrecognition.start() starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current speechrecognition.
... speechrecognition.stop() stops the speech recognition service from listening to incoming audio, and attempts to return a speechrecognitionresult using the audio captured so far.
...And 4 more matches
TouchEvent.changedTouches - Web APIs
the changedtouches read-only property is a touchlist whose touch points (touch objects) varies depending on the event type, as follows: for the touchstart event, it is a list of the touch points that became active with the current event.
... for the touchmove event, it is a list of the touch points that have changed since the last event.
... for the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface).
...And 4 more matches
Touch events - Web APIs
touchlist represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.
... function startup() { var el = document.getelementbyid("canvas"); el.addeventlistener("touchstart", handlestart, false); el.addeventlistener("touchend", handleend, false); el.addeventlistener("touchcancel", handlecancel, false); el.addeventlistener("touchmove", handlemove, false); } document.addeventlistener("domcontentloaded", startup); this simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they occur.
...then we get the context and pull the list of changed touch points out of the event's touchevent.changedtouches property.
...And 4 more matches
Using DTMF with WebRTC - Web APIs
initialization when the page loads, we do some basic setup: we fetch references to the dial button and the log output box elements, and we use addeventlistener() to add an event listener to the dial button so that clicking it calls the connectanddial() function to begin the connection process.
... window.addeventlistener("load", function() { logelement = document.queryselector(".log"); dialbutton = document.queryselector("#dial"); dialbutton.addeventlistener("click", connectanddial, false); }); starting the connection process when the dial button is clicked, connectanddial() is called.
...nders) { dtmfsender = callerpc.getsenders()[0].dtmf; } else { log("your browser doesn't support rtcpeerconnection.getsenders(), so " + "falling back to use <strong>deprecated</strong> createdtmfsender() " + "instead."); dtmfsender = callerpc.createdtmfsender(audiotracks[0]); } dtmfsender.ontonechange = handletonechangeevent; } after setting audiotracks to be a list of the audio tracks on the stream from the user's microphone, it's time to add the media to the caller's rtcpeerconnection.
...And 4 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
if you are unaware of how one sounds you can listen to one here.
...tack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">release</label> <input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = document.queryselector('#attack'); attackcontrol.addeventlistener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol = document.queryselector('#release'); releasecontrol.addeventlistener('input', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function.
... let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.addeventlistener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { let osc = audioctx.createoscillator(); osc.
...And 4 more matches
window.postMessage() - Web APIs
the dispatched event otherwindow can listen for dispatched messages by executing the following javascript: window.addeventlistener("message", receivemessage, false); function receivemessage(event) { if (event.origin !== "http://example.org:8080") return; // ...
... security concerns if you do not expect to receive messages from other sites, do not add any event listeners for message events.
... the secret response is: rheeeeet!" } window.addeventlistener("message", receivemessage, false); /* * in the popup's scripts, running on <http://example.com>: */ // called sometime after postmessage is called function receivemessage(event) { // do we trust the sender of this message?
...And 4 more matches
ARIA: button role - Accessibility
in this case, the action is to add a new name to the list of names.
...the button will cause the name to be added to a list.
... html <h1>aria button example</h1> <ul id="namelist"></ul> <label for="newname">enter your name: </label> <input type="text" id="newname"> <span role="button" tabindex="0" onclick="handlecommand()" onkeydown="handlecommand()">add name</span> css [role="button"] { padding: 2px; background-color: navy; color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active { background-color: white; color: navy; } ul { list-style: none; } javascript function handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space // get the new name value from the input element let newnameinput = document.getelementbyid('newname'); let name = newnameinput.value; newnamein...
...And 4 more matches
ARIA: textbox role - Accessibility
for example, in a combobox, focus may remain on the textbox while the value of aria-activedescendant on the textbox element refers to a descendant of a popup listbox that is controlled by the textbox.this attribute must be updated programmatically as the focus changes.
... list: predicted text is presented as a collection of values.
... if list or both is set, the aria-controls and aria-haspopup attributes should also be included.
...And 4 more matches
-webkit-box-reflect - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 4 more matches
Using CSS animations - CSS: Cascading Style Sheets
.slidein { animation-duration: 3s; animation-name: slidein; animation-iteration-count: 3; animation-direction: alternate; } @keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } adding the animation event listeners we’ll use javascript code to listen for all three possible animation events.
... this code configures our event listeners; we call it when the document is first loaded in order to set things up.
... var element = document.getelementbyid("watchme"); element.addeventlistener("animationstart", listener, false); element.addeventlistener("animationend", listener, false); element.addeventlistener("animationiteration", listener, false); element.classname = "slidein"; this is pretty standard code; you can get details on how it works in the documentation for eventtarget.addeventlistener().
...And 4 more matches
Border-radius generator - CSS: Cascading Style Sheets
text; -ms-user-select: text; user-select: text; float: right; } javascript content 'use strict'; /** * ui-inputslidermanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parseint(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); subscribe(obj.topic, function(value) { input.value = value + obj.unit; }); return input; } var slidercomponent = function sliderco...
...mponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mousemove", slidermotion); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step +...
...checkbox.id = id; checkbox.setattribute('type', 'checkbox'); checkbox.checked = state; label.setattribute('for', id); if (name) { label.classname = 'text'; if (align) label.classname += ' ' + align; label.textcontent = name; } node.appendchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call(this); }.bind(this)); buttons[topic] = this; } var getnode = function getnode(topic) { return buttons[topic].node; } var setvalue = function setvalue(topic, value) { try { buttons[topic].checkbox.checked = value; } catch(error) { console.log(error); } } var subscribe = function subscribe(topic, callback) { if (subscribers...
...And 4 more matches
Using CSS transitions - CSS: Cascading Style Sheets
css transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g.
...as it doesn't make sense to animate some properties, the list of animatable properties is limited to a finite set.
...only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.
...And 4 more matches
background-image - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 4 more matches
border-image-source - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 4 more matches
font-variant-alternates - CSS: Cascading Style Sheets
/* keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms; /* functional notation values */ font-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2); /* global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-va...
...riant-alternates: unset; the @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with opentype parameters.
... syntax this property may take one of two forms: either the keyword normal or one or more of the other keywords and functions listed below, space-separated, in any order.
...And 4 more matches
mask-border-source - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 4 more matches
mask-image - CSS: Cascading Style Sheets
, <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]?
... , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]?
..., <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]?
...And 4 more matches
Adding captions and subtitles to HTML5 video - Developer guides
itlesmenu.appendchild(createmenuitem('subtitles-off', '', 'off')); for (var i = 0; i < video.texttracks.length; i++) { subtitlesmenu.appendchild(createmenuitem('subtitles-' + video.texttracks[i].language, video.texttracks[i].language, video.texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu.
... the creation of each list item and button is done by the createmenuitem() function, which is defined as follows: var subtitlemenubuttons = []; var createmenuitem = function(id, lang, label) { var listitem = document.createelement('li'); var button = listitem.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'inactive'); button.appendchild(document.createtextnode(label)); button.addeventlistener('click', function(e) { ...
... never match so all will subtitles be turned off if (video.texttracks[i].language == lang) { video.texttracks[i].mode = 'showing'; this.setattribute('data-state', 'active'); } else { video.texttracks[i].mode = 'hidden'; } } subtitlesmenu.style.display = 'none'; }); subtitlemenubuttons.push(button); return listitem; } this function builds the required <li> and <button> elements, and returns them so they can be added to the subtitles menu list.
...And 4 more matches
Creating and triggering events - Developer guides
creating custom events events can be created with the event constructor as follows: const event = new event('build'); // listen for the event.
... elem.addeventlistener('build', function (e) { /* ...
... for example, the event could be created as follows: const event = new customevent('build', { detail: elem.dataset.time }); this will then allow you to access the additional data in the event listener: function eventhandler(e) { console.log('the time is: ' + e.detail); } the old-fashioned way the older approach to creating events uses apis inspired by java.
...And 4 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
we're going to touch on most of what you'll need to know when using color, including a list of what you can color and what css properties are involved, how you describe colors, and how to actually use colors both in stylesheets and in scripts.
...for each, we'll see a list of the css properties that apply color to them.
... borders see the section borders for a list of the css properties you can use to set the colors of a box's borders.
...And 4 more matches
HTML attribute reference - HTML: Hypertext Markup Language
attribute list attribute name elements description accept <form>, <input> list of types the server accepts, typically a file type.
... accept-charset <form> list of supported charsets.
... height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> specifies the height of elements listed here.
...And 4 more matches
Block-level elements - HTML: Hypertext Markup Language
elements the following is a complete list of all html "block-level" elements (although "block-level" is not technically defined for elements that are new in html5).
... <dd> describes a term in a description list.
... <dl> description list.
...And 4 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
instead, they're sent to the track list object within the <audio> element's htmlmediaelement that corresponds to the type of track that was added to the element: htmlmediaelement.audiotracks an audiotracklist containing all of the media element's audio tracks.
... you can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element.
... htmlmediaelement.videotracks add an addtrack listener to this videotracklist object to be informed when video tracks are added to the element.
...And 4 more matches
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size.
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, search field inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder ...
...the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document.
...And 4 more matches
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
events change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list.
... var starttime = document.getelementbyid("starttime"); var valuespan = document.getelementbyid("value"); starttime.addeventlistener("input", function() { valuespan.innertext = starttime.value; }, false); when a form including a time input is submitted, the value is encoded before being included in the form's data.
... additional attributes in addition to the attributes common to all <input> elements, time inputs offer the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max the latest time to accept, in the syntax described under time value format min the earliest time to accept as a valid input readonly a boolean attribute which, if present, indicates that the contents of the time input should not be user-editable step the stepping interval to use both for user interfaces purposes a...
...And 4 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
controlslist the controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g.
...instead, they're sent to the track list object within the <video> element's htmlmediaelement that corresponds to the type of track that was added to the element: htmlmediaelement.audiotracks an audiotracklist containing all of the media element's audio tracks.
... you can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element.
...And 4 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
t” is one that meets all the following conditions: one of the allowed methods: get head post apart from the headers automatically set by the user agent (for example, connection, user-agent, or the other headers defined in the fetch spec as a “forbidden header name”), the only headers which are allowed to be manually set are those which the fetch spec defines as a “cors-safelisted request-header”, which are: accept accept-language content-language content-type (but note the additional requirements below) dpr downlink save-data viewport-width width the only allowed values for the content-type header are: application/x-www-form-urlencoded multipart/form-data text/plain no event listeners are registered on any xmlhttprequestupload obj...
...what values webkit/safari consider “nonstandard” is not documented, except in the following webkit bugs: require preflight for non-standard cors-safelisted request headers accept, accept-language, and content-language allow commas in accept, accept-language, and content-language request headers for simple cors switch to a blacklist model for restricted accept headers in simple cors requests no other browsers implement these extra restrictions, because they’re not part of the spec.
...like access-control-allow-methods, access-control-allow-headers is a comma separated list of acceptable headers.
...And 4 more matches
Feature Policy - HTTP
essentially, you write a policy, which is an allowed list of origins for each feature.
... for every feature controlled by feature policy, the feature is only enabled in the current document or frame if its origin matches the allowed list of origins.
... for each policy-controlled feature, the browser maintains a list of origins for which the feature is enabled, known as an allowlist.
...And 4 more matches
HTTP headers - HTTP
WebHTTPHeaders
custom proprietary headers have historically been used with an x- prefix, but this convention was deprecated in june 2012 because of the inconveniences it caused when nonstandard fields became standard in rfc 6648; others are listed in an iana registry, whose original content was defined in rfc 4229.
... access-control-expose-headers indicates which headers can be exposed as part of the response by listing their names.
... host specifies the domain name of the server (for virtual hosting), and (optionally) the tcp port number on which the server is listening.
...And 4 more matches
Indexed collections - JavaScript
array object an array is an ordered list of values that you refer to with a name and an index.
... creating an array the following statements create equivalent arrays: let arr = new array(element0, element1, ..., elementn) let arr = array(element0, element1, ..., elementn) let arr = [element0, element1, ..., elementn] element0, element1, ..., elementn is a list of values for the array's elements.
... note that the elements of an array that are omitted when the array is defined are not listed when iterating by foreach, but are listed when undefined has been manually assigned to the element: let array = ['first', 'second', , 'fourth'] array.foreach(function(element) { console.log(element) }) // first // second // fourth if (array[2] === undefined) { console.log('array[2] is undefined') // true } array = ['first', 'second', undefined, 'fourth'] array.foreach(function(element...
...And 4 more matches
Performance fundamentals - Web Performance
a television probably looks choppy and unrealistic to a hummingbird, for example.
...er-perceived events, generally speaking: the first is the application first paint — the point at which sufficient application resources have been loaded to paint an initial frame the second is when the application becomes interactive — for example, users are able to tap a button and the application responds the final event is full load — for example when all the user's albums have been listed in a music player the key to fast startup is to keep two things in mind: upp is all that matters, and there's a "critical path" to each user-perceived event above.
... for example, to paint an application's first frame that comprises visually some html and css to style that html: the html must be parsed the dom for that html must be constructed resources like images in that part of the dom have to be loaded and decoded the css styles must be applied to that dom the styled document has to be reflowed nowhere in that list is "load the js file needed for an uncommon menu"; "fetch and decode the image for the high scores list", etc.
...And 4 more matches
Progressive web app structure - Progressive web apps (PWAs)
the folder structure looks like this: the html from the html point of view, the app shell is everything outside the content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames 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>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe">a-frame category</a> in the <a href="http://2017.js13kgames.com">js13kgames 2017</a> competition.
... the app's only job is to list all the a-frame entries from the js13kgames 2017 competition.
...And 4 more matches
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
installation the api allows us to add event listeners for key events we are interested in — the first one is the install event: self.addeventlistener('install', (e) => { console.log('[service worker] install'); }); in the install listener, we can initialize the cache and add files to it for offline use.
... first, a variable for storing the cache name is created, and the app shell files are listed in one array.
... var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); then we can manage the install event itself: self.addeventlistener('install', (e) => { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then((cache) => { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); there are two things that need an explanation here: what extendableevent.waituntil does, and what the caches object is.
...And 4 more matches
content/worker - Archive of obsolete content
onmessage function functions that will registered as a listener to a 'message' events.
... onerror function functions that will registered as a listener to an 'error' events.
... worker worker is composed from the eventemitter trait, therefore instances of worker and their descendants expose all the public properties exposed by eventemitter along with additional public properties that are listed below.
...And 3 more matches
Miscellaneous - Archive of obsolete content
</div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and related preferences.
... you can listen to mouse wheel click events just like normal click events (via mousedown and mouseup events).
... var focusedcontrol; window.addeventlistener("load", function(e) { onwindowload(e); }, false); function onwindowload() { gbrowser.addeventlistener("load", onpageload, true); } function onpageload() { pagedoc = document.commanddispatcher.focusedwindow.document; var inputlist = pagedoc.getelementsbytagname('input'); for (var i=1; i<inputlist.length; i++) { inputlist.item(i).
...And 3 more matches
Inline options - Archive of obsolete content
bool checkbox boolean boolint checkbox integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string color colorpicker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu item values radio radio buttons dependent on the radio values control button no pref stored the pref attribute should have the full name of the preference to be stored.
...title="text"/> <setting pref="extensions.myaddon.password" type="string" title="password" inputtype="password"/> <!-- color example --> <setting pref="extensions.myaddon.color" type="color" title="color"/> <!-- file and directory examples --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" title="options 1"> <menulist> <menupopup> <menuitem value="500" label="small"/> <menuitem value="800" label="medium"/> <menuitem value="1200" label="large"/> </menupopup> </menulist> </setting> <!-- radio button example (this example would be stored a...
... some discussion on the subject at stackoverflow: how to use addeventlistener on inputchanged of inline options display notifications if you want to use the settings ui for anything more than storing preferences, then you will probably need to initialize them when they first appear.
...And 3 more matches
Adding Events and Commands - Archive of obsolete content
window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need.
...also, note that the addeventlistener method receives the event name without the "on" prefix, while element attributes do have the prefix.
... there's a long list of events you can listen to, and which you use depend on the situation.
...And 3 more matches
Setting Up a Development Environment - Archive of obsolete content
in cygwin installations you'll have to explicitly check the make and zip utilities from the long list of packages to download and install.
...if your system is not listed in the supported builds, you'll have to build the sdk yourself from the mozilla source.
...a good place to look for them is the mozilla add-ons site, and there's also a good development extension list here.
...And 3 more matches
Performance best practices in extensions - Archive of obsolete content
defer everything that you can most extensions have a load event listener in the main overlay that runs their startup functions.
... avoid dom mutation event listeners dom mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance.
... avoid mouse movement events avoid using mouse event listeners, including mouseover, mouseout, mouseenter, mouseexit, and especially mousemove.
...And 3 more matches
Index of archived content - Archive of obsolete content
tabs/utils test/assert test/harness test/httpd test/runner test/utils ui/button/action ui/button/toggle ui/frame ui/id ui/sidebar ui/toolbar util/array util/collection util/deprecate util/list util/match-pattern util/object util/uuid window/utils release notes tools cfx cfx to jpm console jpm jpm-mobile jpmignore package.json ...
... implementing the widget overview storing annotations chrome authority creating event targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying web pages based on url modifying the page hosted by a tab open a web page troubleshooting unit testing using xpcom without chrome using third-party modul...
...service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix miscellaneous modules on page load page loading post data to window preferences progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets ...
...And 3 more matches
JXON - Archive of obsolete content
the text content of each element is stored into the keyvalue property, while nodeattributes, if they exist, are listed under the child object keyattributes.
... algorithm #2: a less verbose way here is another, simpler, conversion method, in which nodeattributes are listed under the same object of child nodes but have the “@” prefix (as suggested by the badgerfish convention).
... algorithm #4: a very minimalist way the following is another possible way to do the conversion.
...And 3 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
// go through the ldap replicas list for(i = 0; i < ldap_servers.length; i ++) { // search for attribute mail & cn through ldap servers where uid = $user|$username getldapattributes(ldap_servers[i], "ou=people,dc=int-evry,dc=fr", "uid=" + env_user, "uid,cn,mail"); // if we catch a running ldap server, exit the loop, if(ldap_values) { running_ldap_server = ldap_servers[i]; // if $mozilla_d...
...etenv("home"); } else { // windows settings var env_user = getenv("username"); var env_home = getenv("homepath"); } var env_mozdebug= getenv("mozilla_debug"); final production script here's the complete final and commented production script: //mozilla autoconfiguration, jehan procaccia & roberto aguilar //put everything in a try/catch try { /* 1) define environment variables, 2) list & randomize ldap replicas, 3) define processldapvalues(), 4) call ldap server to get ldap attributes (mail & cn) getldapattributes() 5) set user preferences */ // 1) env variables if(getenv("user") != "") { // *nix settings var env_user = getenv("user"); var env_home = getenv("home"); } else { // windows settings var env_user = getenv("username"); var env_home = getenv("homepa...
...// go through the ldap replicas list for(i = 0; i < ldap_servers.length; i ++) { // search for attribute mail & cn through ldap servers where uid = $user|$username getldapattributes(ldap_servers[i], "ou=people,dc=int-evry,dc=fr", "uid=" + env_user, "uid,cn,mail"); // if we catch a running ldap server, exit the loop, if(ldap_values) { running_ldap_server = ldap_servers[i]; // if $mozilla_d...
...And 3 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
here the package for the sidebar is created, the files included are listed below.
...it is listed in example 2.
...the overlay file is listed in example 4.
...And 3 more matches
Getting Started - Archive of obsolete content
in the file you'll see a list.
...list all the skins being supplied by this theme <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> in the code search for the part listed above.
...that is what the user sees in the preference panels list of themes.
...And 3 more matches
Space Manager High Level Design - Archive of obsolete content
the classes that are considered part of the space manager are: nsspacemanager nsbanddata nsblockbanddata bandrect / bandlist (private structs) frameinfo (private struct) nsbandtrapezoid outside of the space manager itself, the clients of the space manager also play an important part in the management of he available and used space.
...bandrects are a linked list (provided by prcliststr super-class) and also provide some geometry-management methods (splitvertically, splithorizontally) and some methods that query or manipulate the frames associated with the band (isoccupiedby, addframe, removeframe).
... bandlist: a subclass of bandrect that provides a list interface - head(), tail(), isempty(), etc.
...And 3 more matches
Building accessible custom components in XUL - Archive of obsolete content
you can find a list of all the supported roles in firefox 1.5 on mozilla.org.
...<code> var gfocuscell = null; function install_handlers() { var spreadsheet = window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spreadsheet_click, true); } function spreadsheet_focus(e) { if (e.target.tagname == 'grid') { if (!gfocuscell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfocuscell = e.target; } } function spreadsheet_click(e) { ...
...other compound controls such as lists and treeviews support two-phased keyboard navigation.
...And 3 more matches
MenuItems - Archive of obsolete content
you might do this if the key associated with the item changes, for instance a list of open windows displayed on a window menu.
...instead of specifying the icon with the image attribute, you can also reference the image in a style sheet with the 'list-style-image' property.
... #add-bookmark { list-style-image: url('addbookmark.png'); } this technique can also be used to apply an image for the menu element, except you would want to use the "menu-iconic:" class instead.
...And 3 more matches
SQLite Templates - Archive of obsolete content
this simple example shows how to display a listbox containing the values in one column in a database table.
... <listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the query returns the list of values from the 'name' column in the table 'myfriends'.
...if the query returns six results, six listitems will be generated.
...And 3 more matches
XML Templates - Archive of obsolete content
an example: <listbox datasources="people.xml" ref="*" querytype="xml"> <template> ...
... </template> <listbox> the url in the datasources attribute may be a relative url or an absolute url.
... for this and the following examples, we are going to use the following xml document containing a list of people: <people> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> xml query syntax the query syntax is fairly simple for xml datasources.
...And 3 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
you can find a list of uris for the most commonly overlaid documents at the bottom of this page.
...see below for the list of common palette ids.
... 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.
...And 3 more matches
Modifying a XUL Interface - Archive of obsolete content
this is used to insert into the middle of a list of children of the parent element instead of at the end like appendchild() does.
... the replacechild() function removes an existing child and adds a new one in its place at the same position in the list of its parent element.
... finally the removechild() function removes a child from the list of its parent element.
...And 3 more matches
XUL element attributes - Archive of obsolete content
it may be set to a space-separated list of rdf properties or resources.
... datasources type: space separated list of datasource uris a space-separated list of datasources that an element's template will use for content generation.
... flags type: space-separated list of the values below a set of flags used for miscellaneous purposes.
...And 3 more matches
browser - Archive of obsolete content
nkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: boolean set...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(),...
... hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
...And 3 more matches
dialog - Archive of obsolete content
buttons type: comma-separated list of the values below a comma-separated list of buttons to appear in the dialog box.
...the following values can be used in the list: accept: the ok button, which will accept the changes when pressed.
... properties buttons type: comma-separated list of the values below a comma-separated list of buttons to appear on the dialog box.
...And 3 more matches
key - Archive of obsolete content
ArchiveMozillaXULkey
in order to use (non-default) key commands within specific elements, you will need to listen for key events.
...valid keys are listed at keyboard shortcuts.
... modifiers type: space-separated list of the values below a list of modifier keys that should be pressed to invoke the keyboard shortcut.
...And 3 more matches
menupopup - Archive of obsolete content
there are several ways in which a menupopup may be used: it may be placed inside a menu, menulist, toolbarbutton, or a button with the type attribute set to "menu" to create a popup that will open when the menu or button is pressed.
... attributes ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist.
... <menulist> <menupopup> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net"/> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> the following example shows how a menupopup can be used as a context menu for an element.
...And 3 more matches
prefpane - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... preferenceelements type: dom nodelist holds a list of the ui elements in the pane that are attached to preferences.
... preferences type: dom nodelist holds a list of the preference elements in the pane.
...And 3 more matches
radiogroup - Archive of obsolete content
for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
...for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
...And 3 more matches
tabbox - Archive of obsolete content
attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tabpanels examples <tabbox id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel fourth elemen...
...ts go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indicates where keyboard navigation events are listened to.
... if this attribute is not specified, events are listened to from the tabbox.
...And 3 more matches
Deploying XULRunner - Archive of obsolete content
after that, the app could be installed to the registered xulrunner and appear in start menus, lists of installed programs, etc.
...here's how the entire application bundle looks: myapp.app/ contents/ info.plist pkginfo resources/ application.ini app_icon.icns components/ ...
...the complete bundle structure is as follows: myapp.app/ contents/ info.plist pkginfo frameworks/ xul.framework/ files copied from /library/frameworks/xul.framework/versions/1.8/...
...And 3 more matches
calICalendarView - Archive of obsolete content
this explains the need for the fairly large list off attributes and methods that must be implemented, so that outside code can be able to gain a decent picture of the current state of those nodes.
...calicalendar displaycalender; attribute calicalendarviewcontroller controller; void showdate(in calidatetime adate); void setdaterange(in calidatetime astartdate, in calidatetime aenddate); readonly attribute calidatetime startdate; readonly attribute calidatetime enddate; readonly attribute boolean supportsdisjointdates; readonly attribute boolean hasdisjointdates; void setdatelist(in unsigned long acount, [array,size_is(acount)] in calidatetime adates); void getdatelist(out unsigned long acount, [array,size_is(acount),retval] out calidatetime adates); attribute caliitembase selecteditem; attribute calidatetime selectedday; attributes displaycalendar the displaycalendar is an implementation of the calicalendar interface.
... supportsdisjointdates consumers of calicalendarview should check this attribute to determine whether or not the implementation allows for calls to setdatelist.
...And 3 more matches
Paddle and keyboard controls - Game development
two event listeners for keydown and keyup events.
...to listen for key presses, we will set up two event listeners.
... add the following lines just above the setinterval() line at the bottom of your javascript: document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false); when the keydown event is fired on any of the keys on your keyboard (when they are pressed), the keydownhandler() function will be executed.
...And 3 more matches
Plug-in Development Overview - Gecko Plugin API Reference
this exported c function should return a string containing the type, extension list, and type description separated by colons.
... to determine the supported mime types, gecko first checks for registry information in the plugins info.plist.
...plugins should use the info.plist approach, and only use the following method as a supplement to support older browsers.
...And 3 more matches
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
model view controller example imagine a simple shopping list app.
... all we want is a list of the name, quantity and price of each item we need to buy this week.
... going back to our shopping list app, the model would specify what data the list items should contain — item, price, etc.
...And 3 more matches
Practical positioning examples - Learn web development
and now an ordered list: how exciting!</p> <ol> <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> <li>aliquam ut porttitor urna.</li> <li>nulla facilisi</li> </ol> </article> </div> </section> so here we've got a <section> element with a class of info-box, which contains a <ul> and a <div>.
... the unordered list contains three list items with links inside, which will become the actual tabs to click on for displaying our content panels.
...first, add the following rule at the bottom of your css to remove the default padding-left and margin-top from the unordered list: .info-box ul { padding-left: 0; margin-top: 0; } note: we are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.
...And 3 more matches
How do I start to design my website? - Learn web development
list all the goals you want to reach.
... once you have such a list, you need to prioritize.
...(should i implement these features, use these services, create these designs?) so now that you have a prioritized list of goals, let's move on to the next question.
...And 3 more matches
Example 1 - Learn web development
basic state html <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* -------...
...cal-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .hi...
...ghlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ ...
...And 3 more matches
Example 3 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit" tabindex="-1"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles...
... */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : ...
...cal-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { pa...
...And 3 more matches
Introduction to web APIs - Learn web development
this seemingly small detail has had a huge impact on the performance and behaviour of sites — if you just need to update a stock listing or list of available new stories, doing it instantly without having to reload the whole entire page from the server can make the site or app feel much more responsive and "snappy".
... the youtube api, which allows you to embed youtube videos on your site, search youtube, build playlists, and more.
...tn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.getattribute('class') === 'paused') { audioelement.play(); this.setattribute('class', 'playing'); this.textcontent = 'pause' // if track is playing, stop it }...
...And 3 more matches
Working with JSON - Learn web development
for example, to access the third superpower of the second hero listed in the members list, you'd do this: superheroes['members'][1]['powers'][2] first we have the variable name — superheroes.
...s the superhero cards: function showheroes(jsonobj) { const heroes = jsonobj['members']; for (let i = 0; i < heroes.length; i++) { const myarticle = document.createelement('article'); const myh2 = document.createelement('h2'); const mypara1 = document.createelement('p'); const mypara2 = document.createelement('p'); const mypara3 = document.createelement('p'); const mylist = document.createelement('ul'); myh2.textcontent = heroes[i].name; mypara1.textcontent = 'secret identity: ' + heroes[i].secretidentity; mypara2.textcontent = 'age: ' + heroes[i].age; mypara3.textcontent = 'superpowers:'; const superpowers = heroes[i].powers; for (let j = 0; j < superpowers.length; j++) { const listitem = document.createelement('li'); listite...
...m.textcontent = superpowers[j]; mylist.appendchild(listitem); } myarticle.appendchild(myh2); myarticle.appendchild(mypara1); myarticle.appendchild(mypara2); myarticle.appendchild(mypara3); myarticle.appendchild(mylist); section.appendchild(myarticle); } } to start with, we store the members property of the javascript object in a new variable.
...And 3 more matches
Aprender y obtener ayuda - Learn web development
note: you might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with.
...the following have different scopes, but are all realistic and achievable: i want to become a professional web developer in two years' time.
...it is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.
...And 3 more matches
Client-Server Overview - Learn web development
the different methods/verbs and their associated actions are listed below: get: get a specific resource (e.g.
... an html file containing information about a product, or a list of products).
... the diagram below shows the main elements of the "team coach" website, along with numbered labels for the sequence of operations when the coach accesses their "best team" list.
...And 3 more matches
Getting started with Svelte - Learn web development
<main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.
...that's svelte's syntax for listening to dom events.
...g git, to clone the repository you should execute: git clone https://github.com/opensas/mdn-svelte-tutorial.git then at the beginning of each article, you can just cd into the corresponding folder and start the app in dev mode to see what its current state should be, like this: cd 02-starting-our-todo-app npm install npm run dev if you want lo learn more about git and github, we've compiled a list of links to useful guides — see git and github.
...And 3 more matches
Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-fam...
... before: after: noticeable changes include the removal of the list bullets, background color changes, and changes to the base button and input styles.
... 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } </style> if you check the app, you'll see that our todo list is now in a card, and we have some better formatting of our to-do items.
...And 3 more matches
Software accessibility: Where are we today?
if a person was unable to do one of the above-listed tasks, they found themselves unable to use many popular computer applications.
...some, like stephen hawking, enter information by choosing among lists of options.
... they might press a switch down to begin moving a highlight bar through the list, and release the switch when the desired option is highlighted.
...And 3 more matches
Eclipse CDT
to show a filterable list of open documents (similar to the way emacs gives you a list of open buffers), use cmd-e/ctrl-e.
...for example, if you are using a mac and you search for callers of nsdisplaylistbuilder::isintransform, the results will not include the caller in nsobjectframe.cpp because that caller is wrapped in "#ifndef xp_macosx".
... to get a list of autocomplete options in an editor tab, start typing the name of an identifier and then type ctrl-space.
...And 3 more matches
Contributing to the Mozilla code base
step 1: find something to work on bugs listed as 'assigned' are not usually a good place to start unless you're sure you have something worthy to contribute.
...see pages on bugzilla for further help learn the bugzilla component, with which your pet peeve is implemented, using the components list.
... visit firefox-dev.tools - we list firefox developer tools bugs for new contributors.
...And 3 more matches
mach
if it works, you can look at compiler warnings: $ ./mach warnings-list try running the program: $ ./mach run try running your program in a debugger: $ ./mach run --debug try running some tests: $ ./mach xpcshell-test services/common/tests/unit/ or run an individual test: $ ./mach mochitest browser/base/content/test/general/browser_pinnedtabs.js you run mach from the source directory, so you should be able to use your shell's tab completion to tab-complete ...
... mach will colorize terminal output (on terminals that support it - typically most terminals except on windows) mach will scan build output for compiler warnings and will automatically record them to a database which can be queried with mach warnings-list and mach warnings-summary.
...to see the list of the 4 available settings ( which are: alias , test , try , runprefs ) type : $ ./mach settings should i implement x as a mach command?
...And 3 more matches
Frame script environment
addeventlistener() listen to events from content.
... removeeventlistener() stop listening to events from content.
... addmessagelistener() listen to messages from chrome.
...And 3 more matches
Frame script environment
addeventlistener() listen to events from content.
... removeeventlistener() stop listening to events from content.
... addmessagelistener() listen to messages from chrome.
...And 3 more matches
Frame script loading and lifetime
if you want a frame script to do something when a new document is loaded, you need to listen for an appropriate dom event, generally domwindowcreated, domcontentloaded, or load.
... to listen for an event, when your frame script is unloaded (due to tab close for instance), you must set the third argument of addmessagelistener to true.
... for example, from bootstrap.js: services.mm.addmessagelistener( 'my-addon-id', { receivemessage: function() { console.log('incoming message from frame script:', amsg.data); } }, true // must set this argument to true, otherwise sending message from framescript will not work during and after the unload event on the contentmessagemanager triggers ); then in your frame script, listen for the unload event of the message manager (which is the global this), and sending a message.
...And 3 more matches
Message manager overview
communicate with frame scripts using addmessagelistener() and broadcastasyncmessage() or sendasyncmessage() functions.
... it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster you can access the global message manager like this: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager); window message manager the window message manager is associated with a specific browser window, and operates on every <browser> (that is, every content tab) loaded into that window: loa...
... it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster the window message manager can be accessed as a property of the browser window: // chrome script let windowmm = window.messagemanager; browser message manager the browser message manager is specific to a single xul <browser> element (which essentially corresponds to a single tab): loadframescript() loads the given script only into its <browser> sendasyncmessage() sends the message only to that <browser>.
...And 3 more matches
Firefox UI considerations for web developers
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.
... 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.
... 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.
...And 3 more matches
Browser API
api extensions: the api includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface.
...the following methods are used to deal with those events: the <iframe> gains support for the methods of the eventtarget interface addeventlistener(), removeeventlistener(), and dispatchevent().
... the methods removed in firefox 65 are: htmliframeelement.addnextpaintlistener() defines a handler to listen for the next mozafterpaint event in the browser <iframe>.
...And 3 more matches
Getting Started with Chat
note: for a complete list of irc clients go here.
... channels here is a list of channels you should be aware of as a member of the mozilla community: (remember to use irc.mozilla.org and port 6697 or 6667 for your server settings) #qa a channel for qa discussion #developers a channel for mozilla development discussion #sumo a channel for support with firefox for more information about the mozilla irc network and more channels, go here.
... commands the following is a list of commands you should be familiar with.
...And 3 more matches
AddonInstall
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.
...the process will continue in the background until it fails, completes, one of the registered installlisteners pauses it, or the process is canceled by a call to the cancel() method.
... void cancel( ) addlistener() adds a new installlistener if the listener is not already registered to monitor this specific addoninstall.
...And 3 more matches
Add-on Manager
for example: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getalladdons(function(aaddons) { // here aaddons is an array of addon objects }); // this code will execute before the code inside the callback notifications about changes to installed add-ons are dispatched to any registered addonlisteners.
... they must be registered through the addaddonlistener() method.
...addoninstall instance to the callback, which can then be used to install the add-on: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getinstallforurl("http://www.foo.com/test.xpi", function(ainstall) { // ainstall is an instance of addoninstall ainstall.install(); }, "application/x-xpinstall"); the progress of addoninstalls can be monitored using an installlistener.
...And 3 more matches
Interfacing with the Add-on Repository
you an use the code module to get lists of add-ons and even install new add-ons.
... this article provides some sample code that queries the recommended add-ons list on amo and lets the user click a button to install an add-on from the list.
... .getservice(components.interfaces.nsiprefservice); var prefbranch = prefsservice.getbranch("extensions."); var recurl = ""; try { recurl = prefbranch.getcharpref("getaddons.recommended.url"); } catch(e) { recurl = ""; } if (recurl == "") { prefbranch.setcharpref("getaddons.recommended.url", "https://services.addons.mozilla.org/%locale%/%app%/api/%api_version%/list/recommended/all/%max_results%/%os%/%version%?src=firefox"); prefsservice.savepreffile(null); } this fetches the value of the extensions.getaddons.recommended.url preference, and, if the preference doesn't exist or has no value, sets the value of the preference to the correct one for the amo site.
...And 3 more matches
TraceMalloc
if you run with --trace-malloc -, your code can call ns_tracemallocdumpallocations(pathname) at opportune times, and a human-readable listing of the current heap, including stack traces for every allocation, will be written to pathname.
...8 76824 94 146300 36 69476 3.83 nsscripterror 253 25070 842 91548 589 66478 3.67 nshtmldocument.mreferrer 177 21550 691 85460 514 63910 3.53 nshtmlvalue 139 7846 1215 68734 1076 60888 3.36 htmlcontentsink 6 4816 12 57782 6 52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size.
... tracemallocdumpallocations(pathname) - dump a human-readable listing of all traced, live allocations.
...And 3 more matches
An overview of NSS Internals
nss offers lots of functionality; we'll walk through the list of modules, design principles, and important relevant standards.
...the trust assigned by the third party might be restricted to certain uses, which are listed in certificate extensions that are contained in the certificate.
...storage consists of multiple files: a key database file, which contains your secret keys, and a certificate database file which contains the public portion of your own certificates, the certificates of peers or cas, and a list of trust decisions (such as to not trust a built-in ca, or to explicitly trust other cas).
...And 3 more matches
NSS Developer Tutorial
please update this list if you do.
... the mozilla c++ language features guide, and the chromium c++ usage guide, list c++ features that are known to be widely available and compatible.
... symbol export lists the manifest.mn file, in a directory in the nss source tree, specifies which headers are public, and which headers are private.
...And 3 more matches
NSS Sample Code Sample1
in this case, the primary maintains a list of the // secondary hosts.
...the secondary host sends its rsa public key to the primary host as // part of a request for a particular key, or to be added to a list // of secondary hosts.
... free the key using seckey_destroyprivatekey int server::getprivatekey(seckeyprivatekey **prvkey) { int rv = 0; pk11slotinfo *slot = 0; seckeyprivatekeylist *list = 0; seckeyprivatekeylistnode *n; char *nickname; slot = pk11_getinternalkeyslot(); if (!slot) goto done; // listprivkeysinslot looks like it should check the // nickname and only return keys that match.
...And 3 more matches
PKCS11 Implement
c_getfunctionlist the nss calls c_getfunctionlist on startup or when it loads a new module.
... the function list returned should include all the pkcs 2.0 function calls.
... slot and token management c_getslotlist the nss calls c_getslotlist on startup or when it loads a new module, requests all the module's slots, and keeps track of the list from that point on.
...And 3 more matches
NSS tools : pk12util
the tool can import certificates and keys from pkcs#12 files into security databases, export certificates, and list certificates and keys.
... -l p12file list the keys and certificates in pkcs#12 file.
... pk12util -o p12file -n certname [-c keycipher] [-c certcipher] [-m|--key_len keylen] [-n|--cert_key_len certkeylen] [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example: # pk12util -o certs.p12 -n server-cert -d sql:/home/my/sharednssdb enter password for pkcs12 file: re-enter password: listing keys and certificates the information in a .p12 file are not human-readable.
...And 3 more matches
NSS tools : pk12util
the tool can import certificates and keys from pkcs#12 files into security databases, export certificates, and list certificates and keys.
... -l p12file list the keys and certificates in pkcs#12 file.
... pk12util -o p12file -n certname [-c keycipher] [-c certcipher] [-m|--key_len keylen] [-n|--cert_key_len certkeylen] [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example: # pk12util -o certs.p12 -n server-cert -d sql:/home/my/sharednssdb enter password for pkcs12 file: re-enter password: listing keys and certificates the information in a .p12 file are not human-readable.
...And 3 more matches
Network Security Services
for a list of frequently asked questions, see the faq.
... third-party code a list of third-party code included in the nss library.
...lists the cryptographic algorithms used by nss 3.11.
...And 3 more matches
Shell global objects
note: this list overlaps with "built-in functions" in introduction to the javascript shell and is probably not complete.
... this page lists variables and functions available on spidermonkey 53.
... you can get the list of functions by help() function in js shell.
...And 3 more matches
Querying Places
the defaults for these objects will result in a query that returns all of your browser history in a flat list: chromeutils.definemodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); // no query options set will get all history, sorted in database order, // which is nsinavhistoryqueryoptions.sort_by_none.
...the different values for this property are listed below.
...typically, you will only have one folder id in this list, which will given you the contents of that folder.
...And 3 more matches
Fun With XBL and XPConnect
<method name="autocomplete"> <argument name="asearchstring"/> <argument name="resultlistener"/> <body> <![cdata[ return this.autocompletesession.autocomplete(null, anonymouscontent[0], asearchstring, this.autocompletelistener); ]]> </body> </method> you can see that the body of the method is just getting the auto complete session object and calling the auto complete method on it.
...i could apply a trick similar to what i did for the xpcom object: <property name="autocompletelistener"> <![cdata[ ({ onautocompleteresult: function(aitem, aoriginalstring, amatch) { if ( aitem ) { anonymouscontent[0].value = amatch; } } }) ]]> </property> as long as the js for the value of autocompletelistener evaluates to an object (and wrapping the expression with a set of parens like i did, does this), then the value of autocom...
...pletelistener is an object that implements my interface.
...And 3 more matches
mozISpellCheckingEngine
method overview void adddirectory(in nsifile dir); boolean check(in wstring word); void getdictionarylist([array, size_is(count)] out wstring dictionaries, out pruint32 count); void removedirectory(in nsifile dir); void suggest(in wstring word,[array, size_is(count)] out wstring suggestions, out pruint32 count); attributes attribute type description copyright wstring a string indicating the copyright of t...
...this will be either element from the array returned by getdictionarylist() or an empty string if no dictionary is selected.
...getdictionarylist() gets the list of dictionaries.
...And 3 more matches
nsIEditorSpellCheck
teinstance(components.interfaces.nsieditorspellcheck); method overview void addwordtodictionary(in wstring word); boolean canspellcheck(); void checkcurrentdictionary(); boolean checkcurrentword(in wstring suggestedword); boolean checkcurrentwordnosuggest(in wstring suggestedword); astring getcurrentdictionary(); void getdictionarylist([array, size_is(count)] out wstring dictionarylist, out pruint32 count); wstring getnextmisspelledword(); void getpersonaldictionary(); wstring getpersonaldictionaryword(); wstring getsuggestedword(); void ignorewordalloccurrences(in wstring word); void initspellchecker(in nsieditor editor, in boolean enableselectionchecking); void re...
...getdictionarylist() retrieves a list of the currently available dictionaries.
...void getdictionarylist( [array, size_is(count)] out wstring dictionarylist, out pruint32 count ); parameters dictionarylist an array into which the list of dictionary name strings are placed.
...And 3 more matches
nsIExternalHelperAppService
to access this service, use: var externalhelperappservice = components.classes["@mozilla.org/uriloader/external-helper-app-service;1"] .getservice(components.interfaces.nsiexternalhelperappservice); method overview boolean applydecodingforextension(in autf8string aextension, in acstring aencodingtype); nsistreamlistener docontent(in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in boolean aforcesave); methods applydecodingforextension() determines whether or not data whose filename has the specified extension should be decoded from the specified encoding type before being saved or delivered to helper applications.
...docontent() binds an external helper application to a stream listener.
... the caller should pump data into the returned stream listener.
...And 3 more matches
nsIMessenger
ttachment); void saveallattachments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(count)] in string urlarray, [array, size_is(count)] in string displaynamearray, [array, size_is(count)] in string messageuriarray); void saveattachmenttofile(in nsifile afile, in acstring aurl, in acstring amessageuri, in acstring acontenttype, in nsiurllistener alistener); void detachattachment(in string contenttpe, in string url, in string displayname, in string messageuri, in boolean savefirst, [optional] in boolean withoutwarning); void detachallattachments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(count)] in string urlarray, [array, size_is(count)] in string displaynamearray, [a...
... saveallattachments() launches a filepicker and saves all attachments listed in an array.
... void saveattachmenttofile(in nsifile afile, in acstring aurl, in acstring amessageuri, in acstring acontenttype, in nsiurllistener alistener); parameters afile the nsifile to save to.
...And 3 more matches
nsIMsgFilterCustomAction
* recommended form: extensionname@example.com#actionname */ readonly attribute acstring id; /* action name to display in action list.
... * @param actionfolder folder in the filter list * @param filtertype filter type (manual, offlinemail, etc.) * * @return errormessage a localized message to display if invalid * set to null if the actionvalue is valid */ autf8string validateactionvalue(in autf8string actionvalue, in nsimsgfolder actionfolder, in nsms...
...gfiltertypetype filtertype); /* allow duplicate actions in the same filter list?
...And 3 more matches
nsISmsRequestManager
to create an instance, use: var smsrequestmanager = components.classes["@mozilla.org/sms/smsrequestmanager;1"] .createinstance(components.interfaces.nsismsrequestmanager); method overview long addrequest(in nsidommozsmsrequest arequest); long createrequest(in nsidommozsmsmanager amanager, out nsidommozsmsrequest arequest); void notifycreatemessagelist(in long arequestid, in long alistid, in nsidommozsmsmessage amessage); void notifygetsmsfailed(in long arequestid, in long aerror); void notifygotnextmessage(in long arequestid, in nsidommozsmsmessage amessage); void notifygotsms(in long arequestid, in nsidommozsmsmessage amessage); void notifymarkedmessageread(in long arequestid, in bool aread); void notifymarkmessagereadfailed(in long...
... arequestid, in long aerror); void notifynomessageinlist(in long arequestid); void notifyreadmessagelistfailed(in long arequestid, in long aerror); void notifysmsdeleted(in long arequestid, in bool adeleted); void notifysmsdeletefailed(in long arequestid, in long aerror); void notifysmssendfailed(in long arequestid, in long aerror); void notifysmssent(in long arequestid, in nsidommozsmsmessage amessage); constants all sms related errors that could apply to smsrequest objects.
...notifycreatemessagelist() void notifycreatemessagelist( in long arequestid, in long alistid, in nsidommozsmsmessage amessage ); parameters arequestid a number representing the id of the request.
...And 3 more matches
nsIThreadPool
listener nsithreadpoollistener an optional listener that will be notified when a thread is created or destroyed in the course of the thread pool's operation.
... a listener will only receive notifications about threads created after the listener is set so it is recommended that the consumer set the listener before dispatching the first event.
... a listener that receives an nsithreadpoollistener.onthreadcreated() notification is guaranteed to always receive the corresponding nsithreadpoollistener.onthreadshuttingdown() notification.
...And 3 more matches
nsIWifiMonitor
netwerk/wifi/nsiwifimonitor.idlscriptable this interface can be used to be alerted when the list of available wifi access points changes.
...implemented by @mozilla.org/wifi/monitor;1 as a service: var wifimonitor = components.classes["@mozilla.org/wifi/monitor;1"] .getservice(components.interfaces.nsiwifimonitor); method overview void startwatching(in nsiwifilistener alistener); void stopwatching(in nsiwifilistener alistener); methods startwatching() starts listening for changes to the wifi access point list.
... void startwatching( in nsiwifilistener alistener ); parameters alistener the nsiwifilistener object to receive notifications when the wifi access point list changes.
...And 3 more matches
nsIWinTaskbar
to create an instance, use: var wintaskbar = components.classes["@mozilla.org/windows-taskbar;1"] .getservice(components.interfaces.nsiwintaskbar); method overview nsijumplistbuilder createjumplistbuilder(); nsitaskbartabpreview createtaskbartabpreview(in nsidocshell shell, in nsitaskbarpreviewcontroller controller); nsitaskbarprogress gettaskbarprogress(in nsidocshell shell); nsitaskbarwindowpreview gettaskbarwindowpreview(in nsidocshell shell); void setgroupidforwindow(in nsidomwindow aparent, in astring aidentifier); attributes attribute type descrip...
...this id is used by the taskbar for grouping windows and when associating pinned shortcuts with running instances and jump lists.
...methods createjumplistbuilder() retrieve a taskbar jump list builder.
...And 3 more matches
nsIWindowWatcher
it maintains a list of open top-level windows, and allows some operations on them.
...nsiwindowwatcher keeps a list of all top-level dom windows currently open, along with their corresponding chrome interfaces.
...it will automatically be added to our list.
...And 3 more matches
nsIXMLHttpRequest
here is a comment from johnny stenback <jst@netscape.com>: the mozilla implementation of nsixmlhttprequest implements the interface nsidomeventtarget and that's how you're supported to add event listeners.
... try something like this: nscomptr<nsidomeventtarget> target(do_queryinterface(myxmlhttpreq)); target->addeventlistener(ns_literal_string("load"), mylistener, pr_false) where mylistener is your event listener object that implements the interface nsidomeventlistener.
... though actually, if you use addeventlistener from c++ weird things will happen too, since the result will depend on what js happens to be on the stack when you do it....
...And 3 more matches
Mail and RDF
in the example of mail folders, each folder datasource first registers itself with the mail session as a nsifolderlistener because it wants information about when a folder changes.
...when a folder's contents or properties change, it tells the mail session to notify the folder listeners that the data has changed.
... the calling chain essentially looks like this: registration: folder datasource registers itself with the mail session as a folder listener rdf template registers itself with the datasource as a content observer.
...And 3 more matches
Plug-in Development Overview - Plugins
this exported c function should return a string containing the type, extension list, and type description separated by colons.
... to determine the supported mime types, gecko first checks for registry information in the plugins info.plist.
...plugins should use the info.plist approach, and only use the following method as a supplement to support older browsers.
...And 3 more matches
Network request details - Firefox Developer Tools
the request details pane appears when you click on a network request in the request list.
... clicking the icon at the right-hand end of the toolbar closes the details pane and returns you to the list view.
... cookies tab this tab lists full details of any cookies sent with the request or response: as with headers, you can filter the list of cookies displayed.
...And 3 more matches
Drawing shapes with canvas - Web APIs
drawing rectangles unlike svg, <canvas> only supports two primitive shapes: rectangles and paths (lists of points connected by lines).
...a path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color.
...internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape.
...And 3 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
blocks occupy the full width available and are stacked on top of each other, which means that we end up with a layout composed of this list of blocks: <block>⏎⇥</block> <block>◦◦hello◦◦</block> <block>⏎◦◦◦</block> <block>◦◦world!◦◦</block> <block>◦◦⏎</block> this is then simplified further by applying the processing rules for whitespace in inline formatting contexts to these blocks: <block></block> <block>hello</block> <block></block> <block>world!</block> <block></block> the 3 empt...
... consider this example (again, the whitespace characters in the html are marked so they are visible): .people-list { list-style-type: none; margin: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; } <ul class="people-list">⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ </ul> this renders as follows: hidden example 3 .people-list { list-style-type: none; margin...
...: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; } <ul class="people-list"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> you probably don't want the gaps in between the blocks — depending on the use case (is this a list of avatars, or horizontal nav buttons?), you probably want the element sides flush with each other, and to be able to control any spacing yourself.
...And 3 more matches
Event.eventPhase - Web APIs
WebAPIEventeventPhase
possible values are listed in event phase constants.
...event listeners registered for capture mode when eventtarget.addeventlistener() was called are triggered during this phase.
...event listeners registered for this phase are called at this time.
...And 3 more matches
EventTarget - Web APIs
eventtarget is a dom interface implemented by objects that can receive events and may have listeners for them.
... methods eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget.
... eventtarget.removeeventlistener() removes an event listener from the eventtarget.
...And 3 more matches
HTMLFormElement.elements - Web APIs
the htmlformelement property elements returns an htmlformcontrolscollection listing all the form controls contained in the <form> element.
... note: similarly, you can get a list of all of the forms contained within a given document using the document's forms property.
... syntax nodelist = htmlformelement.elements value an htmlformcontrolscollection containing all non-image controls in the form.
...And 3 more matches
HTMLMediaElement.audioTracks - Web APIs
the read-only audiotracks property on htmlmediaelement objects returns an audiotracklist object listing all of the audiotrack objects representing the media element's audio tracks.
... the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically.
... once you have a reference to the list, you can monitor it for changes to detect when new audio tracks are added or existing ones removed.
...And 3 more matches
HTMLMediaElement.videoTracks - Web APIs
the read-only videotracks property on htmlmediaelement objects returns a videotracklist object listing all of the videotrack objects representing the media element's video tracks.
... the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically.
... once you have a reference to the list, you can monitor it for changes to detect when new video tracks are added or existing ones removed.
...And 3 more matches
HTMLMediaElement - Web APIs
htmlmediaelement.audiotracks a audiotracklist that lists the audiotrack objects contained in the element.
... htmlmediaelement.controlslist read only returns a domtokenlist that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls.
... the domtokenlist takes one or more of three possible values: nodownload, nofullscreen, and noremoteplayback.
...And 3 more matches
KeyboardEvent.key - Web APIs
WebAPIKeyboardEventkey
its value is determined as follows: key values see a full list of key values.
...these events get mapped to dom keyboard events, and are listed among the "virtual key codes" for windows, even though they aren't actually key codes.
...1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); }); textarea.addeventlistener('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); }); textarea.addeventlistener('input', (e) => { logmessage(`key "${e.data}" input [event: input]`...
...And 3 more matches
MutationEvent - Web APIs
performance adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).
... moreover, removing the listeners does not reverse the damage.
... the performance effect is limited to the documents that have the mutation event listeners.
...And 3 more matches
Page Visibility API - Web APIs
when the user minimizes the window or switches to another tab, the api sends a visibilitychange event to let listeners know the state of the page has changed.
... hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } var videoelement = document.getelementbyid("videoelement"); // if the page is hidden, pause the video; // if the page is shown, play the video function handlevisibilitychange() { if (document[hidden]) { videoelement.pause(); } else { videoelement.play(); } } // warn if the browser doesn't support addeventlistener or the page visibility api if (typeof document.addeventlistener === "undefined" || hidden === undefined) { console.log("this demo requires a browser, such as google chrome or firefox, that supports the page visibility api."); } else { // handle page visibility change document.addeventlistener(visibilitychange, handlevisibilitychange, false); // when the video pauses, set the title.
... // this shows the paused videoelement.addeventlistener("pause", function(){ document.title = 'paused'; }, false); // when the video plays, set the title.
...And 3 more matches
ParentNode.querySelectorAll() - Web APIs
the parentnode mixin defines the queryselectorall() method as returning a nodelist representing a list of elements matching the specified group of selectors which are descendants of the object on which the method was called.
... note: this method is implemented as element.queryselectorall(), document.queryselectorall(), and documentfragment.queryselectorall() syntax elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
... return value a non-live nodelist containing one element object for each descendant node that matches at least one of the specified selectors.
...And 3 more matches
ParentNode.replaceChildren() - Web APIs
this html might look something like this: <h2>party food option list</h2> <main> <div> <label for="no">no thanks!</label> <select id="no" multiple size="10"> <option>apples</option> <option>oranges</option> <option>grapes</option> <option>bananas</option> <option>kiwi fruits</option> <option>chocolate cookies</option> <option>peanut cookies</option> <option>chocolate bars</option> <option>ham sandwi...
...option>vegan veggie pizza</option> </select> </div> <div class="buttons"> <button id="to-yes">transfer to "yes" --&gt;</button> <button id="to-no">&lt;-- transfer to "no"</button> </div> <div> <label for="yes">yes please!</label> <select id="yes" multiple size="10"> </select> </div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } what we want to do is transfer any selected options in the "no" list over to the "yes" list when the "yes" button is pre...
...ssed, and transfer any selected options in the "yes" list over to the "no" list when the "no" button is pressed.
...And 3 more matches
RTCIceCandidatePairStats.state - Web APIs
the state property in an rtcicecandidatepairstats object indicates the state of the check list of which the candidate pair is a member.
... ice check lists during ice negotiation, the ice layer builds up a check list, which is a list of potential pairings of ice candidates.
... when a candidate pair is added to the check list, it begins in the frozen state.
...And 3 more matches
RTCPeerConnection - Web APIs
also included is a list of any ice candidates that may already have been generated by the ice agent since the offer or answer represented by the description was first instantiated.currentremotedescription read only the read-only property rtcpeerconnection.currentremotedescription returns an rtcsessiondescription object describing the remote end of the connection as it was most recently successfully negotiated since the ...
...also included is a list of any ice candidates that may already have been generated by the ice agent since the offer or answer represented by the description was first instantiated.getdefaulticeservers() the getdefaulticeservers() method of the rtcpeerconnection interface returns an array of objects based on the rtciceserver dictionary, which indicates what, if any, ice servers the browser will use by default if none are provided to the rtcpeerconnection in its rtcconfiguration.
...such an event is sent when the associated identity provider (idp) encounters an error while validating an identity assertion.onnegotiationneeded the rtcpeerconnection interface's onnegotiationneeded property is an eventlistener which specifies a function which is called to handle the negotiationneeded event when it occurs on an rtcpeerconnection instance.
...And 3 more matches
SVGAnimatedPathData - Web APIs
interface overview also implement none methods none properties svgpathseglist animatednormalizedpathseglist svgpathseglist animatedpathseglist svgpathseglist normalizedpathseglist svgpathseglist pathseglist normative document svg 1.1 (2nd edition) properties this interface also inherits properties from its parent, svgpathelement.
... name type description animatednormalizedpathseglist svgpathseglist provides access to the current animated contents of the 'd' attribute in a form where all path data commands are expressed in terms of the following subset of svgpathseg types: svg_pathseg_moveto_abs (m), svg_pathseg_lineto_abs (l), svg_pathseg_curveto_cubic_abs (c) and svg_pathseg_closepath (z).
... animatedpathseglist svgpathseglist provides access to the current animated contents of the 'd' attribute in a form which matches one-for-one with svg's syntax.
...And 3 more matches
Using the Screen Capture API - Web APIs
note: constraints never cause changes to the list of sources available for capture by the screen sharing api.
... this ensures that web applications can't force the user to share specific content by restricting the source list until only one item is left.
... finally, event listeners are established to detect user clicks on the start and stop buttons.
...And 3 more matches
SpeechSynthesis - Web APIs
speechsynthesis.getvoices() returns a list of speechsynthesisvoice objects representing all the available voices on the current device.
... events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
... voiceschanged fired when the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.getvoices() method has changed.
...And 3 more matches
TextTrack.mode - Web APIs
WebAPITextTrackmode
the text track mode is one of the values listed below, under text track mode constants.
...the user agent is keeping a list of the active cues (in the track's activecues property) and events are being fired at the corresponding times, even though the text isn't being displayed.
...if the track's cues list hasn't been obtained yet, it will be soon.
...And 3 more matches
A simple RTCDataChannel sample - Web APIs
starting up when the script is run, we set up an load event listener, so that once the page is fully loaded, our startup() function is called.
... function startup() { connectbutton = document.getelementbyid('connectbutton'); disconnectbutton = document.getelementbyid('disconnectbutton'); sendbutton = document.getelementbyid('sendbutton'); messageinputbox = document.getelementbyid('message'); receivebox = document.getelementbyid('receivebox'); // set event listeners for user interface widgets connectbutton.addeventlistener('click', connectpeers, false); disconnectbutton.addeventlistener('click', disconnectpeers, false); sendbutton.addeventlistener('click', sendmessage, false); } this is quite straightforward.
... we grab references to all the page elements we'll need to access, then set event listeners on the three buttons.
...And 3 more matches
Taking still photos with WebRTC - Web APIs
the startup() function the startup() function is run when the page has finished loading, courtesy of window.addeventlistener().
... this function's job is to request access to the user's webcam, initialize the output <img> to a default state, and to establish the event listeners needed to receive each frame of video from the camera and react when the button is clicked to capture an image.
... listen for the video to start playing after calling htmlmediaelement.play() on the <video>, there's a (hopefully brief) period of time that elapses before the stream of video begins to flow.
...And 3 more matches
WebSocket - Web APIs
WebAPIWebSocket
websocket.onclose an event listener to be called when the connection is closed.
... websocket.onerror an event listener to be called when an error occurs.
... websocket.onmessage an event listener to be called when a message is received from the server.
...And 3 more matches
Writing a WebSocket server in C# - Web APIs
luckily, c# has a tcplistener class which does as the name suggests.
... tcplistener constructor: tcplistener(system.net.ipaddress localaddr, int port) localaddr specifies the ip of the listener, and port specifies the port.
... here's a barebones server implementation: ​using system.net.sockets; using system.net; using system; class server { public static void main() { tcplistener server = new tcplistener(ipaddress.parse("127.0.0.1"), 80); server.start(); console.writeline("server has started on 127.0.0.1:80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstream getstream() gets the...
...And 3 more matches
Writing WebSocket servers - Web APIs
a websocket server is nothing more than an application listening on any port of a tcp server that follows a specific protocol.
... the websocket handshake first, the server must listen for incoming socket connections using a standard tcp socket.
...for example, let's assume that your server is listening on example.com, port 8000, and your socket server responds to get requests at example.com/chat.
...And 3 more matches
Using the Web Animations API - Web APIs
if your keyframe list has only one entry, element.animate() may throw a notsupportederror exception in some browsers until they are updated.
...we aren’t listing an easing value here because, unlike css animations where the default animation-timing-function is ease, in the web animations api the default easing is linear — which is what we want here.
... nommingcake.play(); } when a user holds their mouse down or presses their finger on the cake on a touch screen, we can now call growalice to make all the animations play: cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); other useful methods in addition to pausing and playing, we can use the following animation methods: animation.finish() skips to the end of the animation.
...And 3 more matches
OpenType font features guide - CSS: Cascading Style Sheets
in addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages.
... in the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other opentype features.
... numerals within paragraphs of text set as 'oldstyle' sit more comfortably between lower-case letters, and likewise setting them as 'tabular numbers' will make them line up better when setting a list of costs in a table say.
...And 3 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } you can also pass in a track listing, this will repeat.
... the following track listing will create an initial implicit row track as 100 pixels and a second as 200px.
...that could be items that do not have a logical order such as a gallery of photos, or product listing.
...And 3 more matches
<basic-shape> - CSS: Cascading Style Sheets
syntax the <basic-shape> data type is defined with one of the basic shape functions listed below.
... each pair argument in the list represents xi and yi - the x and y axis coordinates of the ith vertex of the polygon.
... a <border-radius> value in inset() is computed as an expanded list of all eight <length> or percentage values.
...And 3 more matches
<color> - CSS: Cascading Style Sheets
syntax the <color> data type is specified using one of the options listed below.
... note: the list of accepted keywords has undergone many changes during the evolution of css: css level 1 only included 16 basic colors, called the vga colors as they were taken from the set of displayable colors on vga graphics cards.
... although various colors not in the specification (mostly adapted from the x11 colors list) were supported by early browsers, it wasn't until svg 1.0 and css colors level 3 that they were formally defined.
...And 3 more matches
grid-template-rows - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-rows: none; /* <track-list> values */ grid-template-rows: 100px 1fr; grid-template-rows: [linename] 100px; grid-template-rows: [linename1] 100px [linename2 linename3]; grid-template-rows: minmax(100px, 1fr); grid-template-rows: fit-content(40%); grid-template-rows: repeat(3, 200px); grid-template-rows: subgrid; /* <auto-track-list> values */ grid-template-rows: 200px repeat(auto-fill, 100px) 300px; grid-template-rows: min...
... repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-rows: inherit; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value.
... repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.
...And 3 more matches
Video player styling basics - Developer guides
the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items.
...'unmute' : 'mute'); } } this function is then called by the relevant event handlers: video.addeventlistener('play', function() { changebuttonstate('playpause'); }, false); video.addeventlistener('pause', function() { changebuttonstate('playpause'); }, false); stop.addeventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; // update the play/pause button's 'data-state' which allows the correct button image to be set via css changebuttonstat...
...e('playpause'); }); mute.addeventlistener('click', function(e) { video.muted = !video.muted; changebuttonstate('mute'); }); you might have noticed that there are new handlers where the play and pause events are reacted to on the video.
...And 3 more matches
Mutation events - Developer guides
performance adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).
... moreover, removing the listeners does not reverse the damage.
... the performance effect is limited to the documents that have the mutation event listeners.
...And 3 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
ping a space-separated list of urls.
...a comma-separated list of coordinates.
... background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; } javascript var canvas = document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlistener('mousedown', () => isdrawing = true); canvas.addeventlistener('mouseup', () => isdrawing = false); document.queryselector('a').addeventlistener('click', event => event.target.href = canvas.todataurl() ); result security and privacy <a> elements can have consequences for users’ security and privacy...
...And 3 more matches
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
ple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the htmlinputelement object representing the <input> in the dom, saving...
...addeventlistener() is then used to establish a function that will be run when click events occur on the button.
... in this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your browser/os combination; see accesskey for a useful list of those).
...And 3 more matches
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange().
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, text inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder ...
...the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document.
...And 3 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
the table below lists the valid values for this attribute and the elements or resources they apply to.
... setting the disabled property in the dom causes the stylesheet to be removed from the document's document.stylesheets list.
... notes: in html 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille.
...And 3 more matches
Browser detection using the user agent - HTTP
ack to user agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberry|webos|iphone|iemobile)\b/i.test(ua) || /\b(android|windows phone|ipad|ipod)\b/i.test(ua) ); } } if (hastouchscreen) document.getelementbyid("examplebutton").style.padding="1em"; as for the screen size, simply use window.innerwidth and window.addeventlistener("resize", function(){ /*refresh screen size dependent things*/ }).
...if there is a lot calculated by this layout function before it determines the new layout of the page, then consider debouncing the event listener such that it is not called as often.
...for example, webkit 6 has a bug whereby when the device orientation changes, the browser might not fire mediaquerylist listeners when it should.
...And 3 more matches
Index - HTTP
WebHTTPHeadersIndex
11 access-control-expose-headers cors, http, reference, header the access-control-expose-headers response header indicates which headers can be exposed as part of the response by listing their names.
... 16 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource.
... 17 alt-svc draft, http, http header, needscompattable, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this website.
...And 3 more matches
JavaScript data types and data structures - JavaScript
this article attempts to list the built-in data structures available in javascript and what properties they have.
...for instance, with a separator, one could emulate a list (while a javascript array would be more suitable).
... unfortunately, when the separator is used in one of the "list" elements, then, the list is broken.
...And 3 more matches
Basic shapes - SVG: Scalable Vector Graphics
since the list of points can get quite long, all the points are included in one attribute: <polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/> points a list of points.
...so, the list (0,0), (1,1), and (2,2) would be written as 0, 0 1, 1 2, 2.
... polygon a <polygon> is similar to a <polyline>, in that it is composed of straight line segments connecting a list of points.
...And 3 more matches
Using custom elements - Web Components
customized built-in elements now let's have a look at another customized built in element example — expanding-list (see it live also).
... this turns any unordered list into an expanding/collapsing menu.
... first of all, we define our element's class, in the same manner as before: class expandinglist extends htmlulistelement { constructor() { // always call super first in constructor super(); // write element functionality in here ...
...And 3 more matches
self - Archive of obsolete content
postmessage() send a message from a content script to a listener in the main add-on code: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value.
... on() start listening to messages from the main add-on code: self.on("message", function(addonmessage) { // handle the message }); this takes two parameters: the name of the event, and the handler function.
... once() exactly like on(), but stop listening after the first message is received.
...And 2 more matches
Troubleshooting - Archive of obsolete content
this page lists some starting points that might help you track down your problem.
...other users often post problems to the project mailing list.
... you can also browse the list of known issues or search for specific keywords.
...And 2 more matches
Adding windows and dialogs - Archive of obsolete content
window.open( "chrome://xulschoolhello/content/somewindow.xul", "xulschoolhello-some-window", "chrome,centerscreen"); the first argument is the url to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window.
...in general, windows should not be resizable unless they display dynamically generated content from a datasource, such as lists or trees that may need resizing to have a better view of the content.
...there isn't much we need to add from what the xul tutorial explains, so go ahead and read the following sections: input controls numeric controls list controls there are some other aspects to take into account when handling input controls, which we cover in the following sections.
...And 2 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
for (var key in elemattr) { var val = elemattr[key]; if (nodes && key == "key") { nodes[val] = elem; continue; } var attrns = namespace(key); if (typeof val == "function") { // special case for function attributes; don't just add them as 'on...' attributes, but as events, using addeventlistener elem.addeventlistener(key.replace(/^on/, ""), val, false); } else { // note that the default namespace for xml attributes is, and should be, blank (ie.
...event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, ...
... safely generating event listeners and scripts it is occasionally necessary to generate event listeners and script fragments from dynamic content.
...And 2 more matches
Observer Notifications - Archive of obsolete content
observerservice.removeobserver(testobserver, "xulschoolhello-test-topic"); after you have registered some observers to listen to a notification topic, you can then use the notifyobservers method to send a notification to all of them.
... in a chrome browser overlay file, we register an observer to listen to the notification topic "xulschoolhello-test-topic" when the window loads.
... */ observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { asubject.queryinterface(ci.nsisupportsstring); window.alert("subject: " + asubject.data); // => "this is a test" window.alert("data: " + adata); // => "hello" } } } window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); window.addeventlistener( "unload", function() { xulschoolchrome.browseroverlay.uninit(); }, false); in the observe method the notification topic is verified because you can have one observer listening to several topics.
...And 2 more matches
MMgc - Archive of obsolete content
mmgc keeps a list of all gcroots in the system and makes sure that it marks them.
...also finalize builds up a lists of pages that need sweeping so sweep doesn't need to visit every page.
...each fixed size allocator maintains a doubly linked list of 4k blocks that it obtains from the gcheap.
...And 2 more matches
Layout System Overview - Archive of obsolete content
css2 defines several (block, inline, list-item, marker, run-in, compact, and various table types) and the standard html form controls require their own special frame types to be formatted as expected.
...the most basic is a list of all of the frames starting at the root frame.
...presumably it is more time and space-efficient to prevent frame creation for elements with no display.) the frame manager also maintains a list of forms and form controls, as content nodes.
...And 2 more matches
Helper Apps (and a bit of Save As) - Archive of obsolete content
bird's eye view flow of control uriloader tries to find a content listener for the mime type in question.
... nsimimeinfo lookup look in built-in list which the user cannot override (types we handle internally).
... look in second built-in list, which the user can override.
...And 2 more matches
New Security Model for Web Services - Archive of obsolete content
white-listing by creating a white list of trusted uris from which scripts are trusted to not compromise internal resources, it is possible to release domains from the stricter same-source sandbox.
... a white list is a good tool for including always-trusted domains, but on the web, it is often a script from a relatively-untrusted domain that must be granted access to other untrusted domains, without compromising internal domains.
... more-complex access lists could be created to try to establish, with finer granularity, which domains are to be accessible or permitted from which other domains, but this requires extensive management which at best is quite error-prone for the end user and easily opens holes in a firewall that do not directly hurt the user who reconfigured his browser to try to access some external service but hurts the owners of other services behind the firewall.
...And 2 more matches
Supporting private browsing mode - Archive of obsolete content
a private browser listener helper object this helper object registers listeners for private browsing mode changes.
...function privatebrowsinglistener() { this.init(); } privatebrowsinglistener.prototype = { _os: null, _inprivatebrowsing: false, // whether we are in private browsing mode _watcher: null, // the watcher object init : function () { this._inited = true; this._os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); this._os.addobserver(this, "private-browsing", false); this._os.addobserver(this, "quit-application", false); try { var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .getservice(components.interfaces.nsiprivatebrowsingservice); this._inprivate...
... simply instantiate the helper, then you can use its inprivatebrowsing flag to detect whether or not private browsing is currently enabled, as shown here: var listener = new privatebrowsinglistener(); if (listener.inprivatebrowsing) { // we are in private browsing mode!
...And 2 more matches
Anonymous Content - Archive of obsolete content
the anonymous content is not accessible via the childnodes list for the bound element, nor is it accessible using firstchild/nextsibling to iterate over the children of the bound element.
...on any anonymous content element in a template, an inherits attribute can be used to specify a comma-separated list of attributes that should be inherited.
... <xbl:binding id="fileuploadcontrol"> <xbl:content> <html:input type="text" xbl:inherits="value"/> <html:input type="button" value="browse..."/> </xbl:content> </xbl:binding> each entry in the inherits list can either simply list an attribute (such as value in the example above), or it can specify an = separated pair consisting of the attribute on the anonymous content that should be tied to the attribute on the bound element.
...And 2 more matches
Extensions - Archive of obsolete content
for a list of the ids of the menus for firefox, see firefox menus.
...for example, the following may be used to insert a command just after the 'select all' command: <popup id="contentareacontextmenu"> <menuitem label="select links" oncommand="thumbnails.selectalllinks();" insertafter="context-selectall"/> </popup> see firefox context menu for a list of the ids of the items found on the firefox context menu.
... showing and hiding context menu items to have a menuitem you have added be shown or hidden based on the context, you can use an event handler that listens for the popupshowing event.
...And 2 more matches
Multiple Queries - Archive of obsolete content
the following is the basic structure of a template with multiple queries: <listbox datasources="..." ref="..."> <queryset> <query> ...
... </rule> </queryset> </listbox> each queryset holds a query and its set of rules.
...here is an example using an rdf datasource: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> ...
...And 2 more matches
Simple Query Syntax - Archive of obsolete content
since the photos list iterates over the children of a container, we can use the simple syntax.
...for example, to filter for photos with a specific country: <hbox id="photoslist" datasources="template-guide-photos4.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:r="http://www.xulplanet.com/rdf/"> <template> <rule r:country="http://www.daml.org/2001/09/countries/iso#it"> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </rule> </template>...
...naturally, if you want to set a filter dynamically, as the photos example does with a menulist, you will need to set the attribute on the rule element and rebuild the template.
...And 2 more matches
Things I've tried to do with XUL - Archive of obsolete content
this is a grab-bag type of faq, with a list of things that should work (hopefully with bug numbers), things that don't work (hopefully with explanations), and workarounds for both of the above.
... xbl in listboxes using xbl bindings in listboxes is not easy because there is a big bug there: if you create from js an element you want to bind, and if it is hidden when the listbox is first rendered, the listbox does not create a frame for it, and the xbl doesn't get attached...
... multi-column listboxes when adding items to multi-column listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...
...And 2 more matches
XUL accessibility guidelines - Archive of obsolete content
list of popular assistive technologies and their respective compatibility levels with xul.
...a full list of keyboard shortcuts for the various mozilla applications.
...other elements, such as arrowscrollbox and listbox, are made to scroll automatically.
...And 2 more matches
commandset - Archive of obsolete content
events type: comma-separated list a comma-separated list of event names that the command updater will update upon.
...valid events are listed below, or you can use your own events.
... targets type: comma-separated list of element ids a comma-separated list of element ids that the command updater will update upon.
...And 2 more matches
menuseparator - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
...And 2 more matches
preference - Archive of obsolete content
overview an onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
... for a textbox it also clears the undo transaction list (gecko 1.9).
...And 2 more matches
radio - Archive of obsolete content
ArchiveMozillaXULradio
radio buttons are almost always listed together in groups.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...And 2 more matches
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
...for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setatt...
...And 2 more matches
textbox - Archive of obsolete content
a listener for the command event should update search results.
... note: prior to firefox 3, and always in thunderbird and seamonkey, the label property of an autocomplete textbox returns its value, for compatibility with the menulist element.
... for a textbox it also clears the undo transaction list (gecko 1.9).
...And 2 more matches
treecell - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... properties type: space-separated list of property names sets the properties of the element, which can be used to style the element.
...for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...And 2 more matches
treecol - Archive of obsolete content
*/ list-style-image: none; } treechildren::-moz-tree-checkbox(checked){ /* css for checked cells.
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } for example: create a css file.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...And 2 more matches
wizardpage - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...the wizard always starts with the wizardpage that appears first in the wizard child list.
...the wizard always starts with the wizardpage that appears first in the wizard child list.
...And 2 more matches
Mozilla release FAQ - Archive of obsolete content
(some people receive the newsgroups via a mailing list.
...if you posted it to the mailing list/newsgroups, remember that on usenet, people are not always polite to each other.
...this list will be updated with time, but (according to netscape.public.mozilla.general) the following platforms have been built successfully: solaris 2.4, 2.5, 2.6 freebsd 2.2, 3.0 linux/intel and alpha 2.0, 2.1 macos winnt 4.0 irix 5.3, 6.2, 6.3, 6.4 win95, win98 digital unix 4.0 netbsd openbsd bsdi hp/ux 9.05, 10.20, 11.0 (see 2.7) hurd .03 dg/ux mac os x i'm *still* havin...
...And 2 more matches
Adobe Flash - Archive of obsolete content
a complete code listing which expands on the above approach can be found in the flashversion.js file used in the samples.
...these block-listed modules include various fingerprinting and http_cookie#supercookie modules.
... var myflash = document.getelementbyid("myflash").setvariable("myvar", sendtext); a more expanded code example that shows how example 2 was created is shown in this source listing.
...And 2 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the problem is commonly caused by a -moz-appearance:menulist style rule in chrome://global/skin/menulist.css.
...the following css rules also need to be copied to the proper location in the browser.css file and modified as necessary: /* page proxy icon */ #page-proxy-favicon { width: 16px; height: 16px; margin: 1px 3px; list-style-image: url(chrome://browser/skin/identity-icons-generic.png); -moz-image-region: rect(0, 16px, 16px, 0); } .verifieddomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chr...
... about:permissions domain names don't line up in about:permissions the domains on the domain list of about:permissions do not line up properly due to missing placeholder icons for domains without favicons.
...And 2 more matches
E4X for templating - Archive of obsolete content
d != undefined) { // we need undefined condition for e4x return h(cond); } else if (_else) { return _else(cond); } return ''; // empty string allows conditions in attribute as well as element content } for example: {_if(elems.length(), function () <description>{elems[0]}</description>, function _else () <label>no data</label> )} note that the simple xmllist() constructor (<></>) may be useful to still be able to use an expression closure (i.e., without needing return statements and braces): {_if(elems.length(), function () <> <markup/> <markup/> </>)} note that, while it is convenient to store such e4x in separate file templates (to be eval()d at a later time, taking into account security considerations, such as escaping with the abo...
...ve), e4x content using such functions can also be easily serialized inline (and then perhaps converted to the dom) as needed: var list = <>{_if(elems.length(), function () <> <markup/> <markup/> </>)}</>.toxmlstring(); iterating functions such as the following foreach (which can work with arrays, objects, or e4x objects) are quite convenient in iterating over complex structures such as e4x would not normally allow.
...} } else { for (k in arr) { if (it < min) { ++it; continue; } if (it > max) { break; } ret+=h(k, arr[k], it, lev); ++it; } } return ret; } the following real case example iterates over an array of the lines in an e4x child element to produce an xmllist of multiple vbox's representing each line: <vbox> {foreach(e(someel.somechild[0]).split('\n'), function (line) <description>{line}</description> )} </vbox> the following example shows iteration over an e4x object itself: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} or if the e4x child...
...And 2 more matches
background-size - Archive of obsolete content
should not the "browser compatibility" table also list google chrome and konqueror?
...konqueror is listed below the table, which seems inconsistent.
...these tables should be revised over time to list gecko, webkit, internet explorer, and opera, with perhaps a tooltip on each that provides details on which browsers are encompassed by each.
...And 2 more matches
XForms Custom Controls - Archive of obsolete content
should the form author instead choose to use appearance='compact' on this control, we would render a listbox widget.
...in mozilla, every bound xforms control has a typelist attribute of moztype namespace that contains the inheritance chain of data types that we detected.
...for example, if a control is bound to a node of type xsd:integer then the typelist attribute will be "http://www.w3.org/2001/xmlschema#integer http://www.w3.org/2001/xmlschema#decimal".
...And 2 more matches
XForms Input Element - Archive of obsolete content
(xhtml/xul) datepicker - used to represent data of type xsd:date (xhtml/xul) calendar - used to represent data of type xsd:date when appearance attribute also has the value 'full' (xhtml/xul) month list - used to represent data of type xsd:gmonth (xhtml only) days list - used to represent data of type xsd:gday (xhtml only) number field - used to represent data of numeric type (fx 3.0 only, xul only) more detail about each of these widgets follows below.
... months list this widget is similar to a combo box populated with the sequence of the 12 month names that comprise a year.
... specific handling of attributes incremental - if "true", the bound instance node will be updated when the user selects a value from the list.
...And 2 more matches
XForms Select Element - Archive of obsolete content
introduction allows the user to choose one or more selections from a list of pre-defined items (see the spec).
... the list of pre-defined items can be specified by either item (see the spec) or itemset (see the spec) elements.
...this attribute, when set to 'open', allows the user to provide free entry to the list.
...And 2 more matches
Archive of obsolete content
if anyone might realistically need the information in a living product, it may not be appropriate to move it here.
... archived open web documentation the documentation listed below is archived, obsolete material about open web topics.
... list of former mozilla-based applications the following is a list of all known applications that at one point used mozilla technologies or that are no longer being actively maintained.
...And 2 more matches
Desktop mouse and keyboard controls - Game development
that way we can broaden the list of supported platforms.
...first, we'd need an event listener to listen for the pressed keys: document.addeventlistener('keydown', keydownhandler, false); document.addeventlistener('keyup', keyuphandler, false); whenever any key is pressed down, we're executing the keydownhandler function, and when press finishes we're executing the keyuphandler function, so we know when it's no longer pressed.
... to do that we'll hold the information on whether the keys we are interested in are pressed or not: var rightpressed = false; var leftpressed = false; var uppressed = false; var downpressed = false; then we will listen for the keydown and keyup events and act accordingly in both handler functions.
...And 2 more matches
Visual typescript game engine - Game development
*/ private appusebroadcaster: boolean = false; /** * possible variant by default : * "register", "login" */ private startuphtmlform: string = "register"; private gamelist: any[]; /** * implement default gameplay variable's */ private defaultgameplaylevelname: string = "level1"; private autostartgameplay: boolean = true; start the dependency system from app.ts the first game template is platformer.
... gameslist args for ioc constructor is for now just symbolic for now.
... 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.
...And 2 more matches
Grids - Learn web development
change your track listing to the following definition, creating three 1fr tracks.
... .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; gap: 20px; } repeating track listings you can repeat all, or a section of, your track listing using repeat notation.
... change your track listing to the following: .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } you will now get 3 1fr tracks just as before.
...And 2 more matches
Beginner's guide to media queries - Learn web development
each feature is documented on mdn along with browser support information, and you can find a full list at using media queries: media features.
... more complex media queries with all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.
...lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.
...And 2 more matches
How CSS is structured - Learn web development
each css rule starts with a selector—or a list of selectors—in order to tell the browser which element or elements the rules should apply to.
... all the examples below are valid selectors, or lists of selectors.
... properties and values at its most basic level, css consists of two components: properties: these are human-readable identifiers that indicate which stylistic features you want to modify.
...And 2 more matches
How to structure a web form - Learn web development
if possible, each time you build a form, try to listen to how a screen reader interprets it.
... as you can see in the examples, it's common practice to wrap a label and its widget with a <li> element within a <ul> or <ol> list.
...lists are recommended for structuring multiple checkboxes or radio buttons.
...And 2 more matches
Define terms with HTML - Learn web development
objective: learn how to introduce new keywords and how to build description lists.
... how to build a description list description lists are just what they claim to be: a list of terms and their matching descriptions (e.g., definition lists, dictionary entries, faqs, and key-value pairs).
... description lists are not suitable for marking up dialogue, because conversation does not directly describe the speakers.
...And 2 more matches
Debugging HTML - Learn web development
if you look at the listing, you can probably see how println!(hello, world!"); might logically be missing a double quote.
...let's look at an example: <a href="https://www.mozilla.org/>link to mozilla homepage</a> </ul> let's review the problems: the paragraph and list item elements have no closing tags.
... in the dom inspector, you can see what the rendered markup looks like: using the dom inspector, let's explore our code in detail to see how the browser has tried to fix our html errors (we did the review in firefox; other modern browsers should give the same result): the paragraphs and list items have been given closing tags.
...And 2 more matches
Responsive images - Learn web development
each value contains a comma-separated list, and each part of those lists is made up of three sub-parts.
... work out which media condition in the sizes list is the first one to be true.
... load the image referenced in the srcset list that has the same size as the slot or, if there isn't one, the first image that is bigger than the chosen slot size.
...And 2 more matches
Graceful asynchronous programming with Promises - Learn web development
the application has a window with a list of the user's friends, and clicking on a button next to a user starts a video call to that user.
... at their most basic, promises are similar to event listeners, but with a few differences: a promise can only succeed or fail once.
... note: the way that a .then() block works is similar to when you add an event listener to an object using addeventlistener().
...And 2 more matches
Basic math in JavaScript — numbers and operators - Learn web development
enter the commands listed below into your developer tools javascript console.
... note: a full list of all javascript operators and their precedence can be found in expressions and operators.
...for example, say you wanted to loop through a list of prices, and add sales tax to each one.
...And 2 more matches
Object-oriented JavaScript for beginners - Learn web development
object-oriented programming — the basics to start with, let's give you a simplistic, high-level view of what object-oriented programming (oop) is.
... we say simplistic, because oop can quickly get very complicated, and giving it a full treatment now would probably confuse more than help.
... specialist classes in this case we don't want generic people — we want teachers and students, which are both more specific types of people.
...And 2 more matches
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
mponent from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class footercomponent extends component { @service('todo-data') todos; } now we need to go back to our todo-data.js file and add some functionality that will allow us to return the number of incomplete todos (useful for showing how many are left), and clear the completed todos out of the list (which is what the “clear completed” functionality needs).
... next, add the following action underneath the existing add(text) action: @action clearcompleted() { this.todos = this.incomplete; } this is rather nice for clearing the todos — we just need to set the todos array to equal the list of incomplete todos.
...however, because *eventually*, we'll want to persist or sync all changes to the todos list to local storage (see the final version of the app), it makes sense to have all persistent-state-changing operations be in the same place.
...And 2 more matches
Deployment and next steps - Learn web development
follow the steps listed under the push an existing folder heading: cd your_root_directory # go into your project's root directory git init git remote add origin https://gitlab.com/[your-user]/mdn-svelte-todo.git git add .
...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.
...then we provided you with a list of svelte resources to go further with your svelte learning.
...And 2 more matches
Handling common JavaScript problems - Learn web development
you should see a package called lint at the top of the list.
... under call stack, you'll see a few entries — this is basically a list of the series of functions that were invoked to cause the current function to be invoked.
... note: some features are known to be undetectable — see modernizr's list of undetectables.
...And 2 more matches
Strategies for carrying out testing - Learn web development
when doing cross-browser testing, you need to work out a list of browsers you will need to test on to start with.
...you can see that opera is listed as having small but visible usage figures, so we should add it to our support chart too as grade c.
... ie8 is listed as being significant too, but it is older and no longer capable.
...And 2 more matches
Introducing a complete toolchain - Learn web development
introducing our case study the toolchain that we are creating in this article will be used to build and deploy a mini site that lists data (taken from one of nasa's open apis) concerning potentially hazardous space objects that threaten our existence on earth!
... a couple of prerequisites besides the tools we're going to install that contribute to our toolchain, we mentioned two web services in the above list of tools.
... once you've signed up for github (click the sign up link on the homepage if you don't already have an account, and follow the instructions), you can use your github account for authentication on netlify (click sign up, then choose github from the "sign up with one of the following" list), so technically you only need to create one new account.
...And 2 more matches
Information for External Developers Dealing with Accessibility
accessible toolkit checklist a list of what needs to be done for accessibility when building new toolkits, widget by widget.
... in addition, here is a list of official keyboard ui guidelines for each desktop: windows keys: guidelines on keyboard ui design and on implementing keyboard shortcuts: an excellent resource from microsoft.
... mac keys: keyboard shortcuts quick reference for mac os x complete reference on keyboard for mac os x: this document list all functions of specified keys, known keyboard shortcuts, explains how to create keyboard shortcuts, explains appropriate use for the arrow keys, how to move the insertion point with keys, how to extent text selection with keys, functions of function keys, what are reserved keyboard shortcuts, how to create your own keyboard shortcuts, keyboard focus and navigation, type-ahead and key-repeat, etc.
...And 2 more matches
Debugging on Windows
changing/setting the executable to debug vc++ 6.0: to change or set the executable to debug, go to project > settings..., debug tab and select general from the drop down list.
... command line parameters and environment variables vc++ 6.0: to change or set the command line options, go to project > settings..., debug tab and select general from the drop down list.
... setting breakpoints in dlls which are not yet loaded in memory vc++ 6.0: go to project > settings..., debug tab and select "additional dlls" from the drop down list.
...And 2 more matches
HTTP logging
go to the "logging section" adjust the location of the log file if you don't like the default adjust the list of modules that you want to log: this list has the exact same format as the moz_log environment variable (see below).
... generally the default list is ok, unless a mozilla developer has told you to modify it.
...the commands listed here assume a bash-compatible shell.
...And 2 more matches
The Firefox codebase: CSS Guidelines
classlist is generally better than classname.
...consider using an actual <img> tag (for html documents) or list-style-image (for xul documents) if rendering the image is important.
...in general, the following colors are used: -moz-field: textbox or field background colors, also used as the background color of listboxes or trees.
...And 2 more matches
Displaying Places information using views
property type description flatlist boolean if true the view does not recurse into containers.
...at least one of flatlist and showroot must be false.
...only applies if property flatlist is true.
...And 2 more matches
Multiple Firefox profiles
this list is by no means exhaustive.
... please add any helpful tools you discover to the list!
... the page presents a list of all of your profiles, each beginning with "profile: " followed by its name.
...And 2 more matches
Performance best practices for Firefox front-end engineers
here’s a simple example, cribbed from this blog post by paul rouget: div1.style.margin = "200px"; // line 1 var height1 = div1.clientheight; // line 2 div2.classlist.add("foobar"); // line 3 var height2 = div2.clientheight; // line 4 dosomething(height1, height2); // line 5 at line 1, we’re setting some style information on a dom node that’s going to result in a reflow - but (at just line 1) it’s okay, because that reflow will happen after the style calculation.
... here's a list of things that javascript can ask for that can cause uninterruptible reflow, to help you think about the problem.
... note that some items in the list may be browser-specific or subject to change, and that an item not occurring explicitly in the list doesn't mean it doesn't cause reflow.
...And 2 more matches
Firefox and the "about" protocol
here is a complete list of urls in the about: pseudo protocol: about: page description about:about provides an overview of all about: pages available for your current firefox version about:addons add-ons manager about:buildconfig displays the configuration and platform used to build firefox about:cache displays information about the memory, disk, and appcache about:checkerboard switches to the checkerboarding measurement page, which allows to dete...
...ct checkerboarding issues about:config provides a way to inspect and change firefox preferences and settings about:compat lists overriding site compatability fixes, linked to specific bug issues.
... about:crashes lists all crashes, which happened during the runtime of firefox (in case the user enabled the crash reporter) about:credits lists all contributors to the firefox project about:debugging switches to the developer tools debugging page, which allows you to debug add-ons, tabs and service workers about:devtools summarizes the developer tools and provides links to documentation for each tool about:downloads displays all downloads done within firefox about:home start page of firefox when opening a new window about:license displays licensing information about:logo firefox logo about:memory provides a way to display memory usage, save it as report and run the gc and cc ab...
...And 2 more matches
Addon
overview of required methods void iscompatiblewith(in string appversion, in string platformversion) void findupdates(in updatelistener listener, in integer reason, in string appversion, in string platformversion) overview of optional methods void uninstall() void canceluninstall() boolean hasresource(in string path) nsiuri getresourceuri(in string path) void getdatadirectory(in datadirectorycallback callback) required properties attribute type descr...
...iption appdisabled read only boolean true if this add-on cannot be used in the application based on version compatibility, dependencies, and blocklisting.
... blockliststate read only integer the current blocklist state of this add-on; see nsiblocklistservice for possible values.
...And 2 more matches
XPCOMUtils.jsm
pseudocode this section provides some pseudocode that demonstrates how to put together a javascript class based on the steps listed above.
... create an array of component constructors you need to create an array that lists the constructors for each component.
... when the generated method is invoked on that object, it checks to see if the specified iid is listed in the array specified by the interfaces parameter; if it is, this (that is, the object itself) is returned.
...And 2 more matches
Localizing without a specialized tool
at the bottom of the list of search engines that appears, you'll see, "manage search engines...".
... at the second to bottom of the list of search engines that appears, you'll see, "add %s", where %s is replaced by the name of the site.
...--> after the localization notes, you will see a list of <!entity> strings like the following: <!entity certerror.pagetitle "untrusted connection"> you should go through each entity, translating the value in the parameters (e.g.
...And 2 more matches
Midas
the given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.
...if the caret is inside a list, that item becomes a sub-item one level deeper.
... insertorderedlist depends on the selection.
...And 2 more matches
PR_NEXT_LINK
returns the next element in a list.
... syntax #include <prclist.h> prclist *pr_next_link (prclist *elemp); parameter elemp a pointer to the element.
... returns a pointer to a list element.
...And 2 more matches
PR_PREV_LINK
returns the preceding element in a list.
... syntax #include <prclist.h> prclist *pr_prev_link (prclist *elemp); parameter elemp a pointer to the element.
... returns a pointer to a list element.
...And 2 more matches
NSS 3.24 release notes
also, partial support for rsa probabilistic signature scheme (rsa-pss) certificates has been added.
... new elements this section lists and briefly describes the new functions, types, and macros in nss 3.24.
... notable changes in nss 3.24 additions, deprecations, and other changes in nss 3.24 are listed below.
...And 2 more matches
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
once you've installed the module, the module's certificates simply appear in the list of certificates displayed in the certificate window.
... can mozilla provide a list of all pkcs #11 functions that nss will use?
...nss continues to evolve, and periodically enhances it's functionality by using a more complete list of pkcs #11 functions.
...And 2 more matches
Python binding for NSS
for simplicity you can receive a block of formatted text but if you need more control, such as when building gui elments you can access a list of "lines", each line is paired with an indentation level value.
...de nss.certverifylog error.certverifyerror (exception) nss.authorityinfoaccess nss.authorityinfoaccesses the following class methods were added: nss.certificate.is_ca_cert nss.certificate.verify nss.certificate.verify_with_log nss.certificate.get_cert_chain nss.certificate.check_ocsp_status nss.pk11slot.list_certs nss.certverifylognode.format_lines nss.certverifylog.format_lines nss.crldistributionpts.format_lines the following class properties were added: nss.certverifylognode.certificate nss.certverifylognode.error nss.certverifylognode.depth nss.certverifylog.count the following module functions were added:...
... nss.x509_cert_type nss.key_usage_flags nss.list_certs nss.find_certs_from_email_addr nss.find_certs_from_nickname nss.nss_get_version nss.nss_version_check nss.set_shutdown_callback nss.get_use_pkix_for_validation nss.set_use_pkix_for_validation nss.enable_ocsp_checking nss.disable_ocsp_checking nss.set_ocsp_cache_settings nss.set_ocsp_failure_mode nss.set_ocsp_timeout nss.clear_ocsp_cache nss.set_ocsp_default_responder nss.enable_ocsp_default_responder nss.disable_ocsp_default_responder the following files were added: src/py_traceback.h doc/examples/verify_cert.py test/test_misc.py the follo...
...And 2 more matches
NSS_3.12.3_release_notes.html
backwards compatibility (wildcards) bug 334678: prng_fips1861.c redefines the macro bsize on hp-ux bug 335016: mpp_pprime (miller-rabin probabilistic primality test) may choose 0 or 1 as the random integer bug 347037: make shlibsign depend on the softoken only bug 371522: auto-update of crls stops after first update bug 380784: pk11mode in non fips mode failed.
...: tolerate incorrect encoding of dsa signatures in ssl 3.0 handshakes bug 444404: libpkix reports unknown issuer for nearly all certificate errors bug 452391: certutil -k incorrectly reports ec private key as an orphan bug 453234: support for seed cipher suites to tls rfc4010 bug 453364: improve pk11_cipherop error reporting (was: pk11_createcontextbysymkey returns null bug 456406: slot list leaks in symkeyutil bug 461085: rfe: export function cert_comparecerts bug 462293: crash on fork after softoken is dlclose'd on some unix platforms in nss 3.12 bug 463342: move some headers to freebl/softoken bug 463452: sql db creation does not set files protections to 0600 bug 463678: need to add rpath to 64-bit libraries on hp-ux bug 464088: option to build nss without dbm (handy f...
... bug 478931: object leak in pkix_list_mergelists function bug 478994: allow softoken's fork check to be disabled bug 479029: ocsp response signature cert found invalid if issuer is trusted only for ssl bug 479601: wrong type (utf8 string) for email addresses in subject by cert_asciitoname bug 480142: use sizeof on the correct type of ckc_x509 in lib/ckfw bug 480257: ocsp fails when response > 1k byte bug 480280: the cka_e...
...And 2 more matches
NSS Tools certutil-tasks
nss security tools: certutil tasks newsgroup: mozilla.dev.tech.crypto task list better error reporting.
... improve certificate listings.
... allow listing and lookup of keys by index and nickname.
...And 2 more matches
SpiderMonkey 1.8.8
here is a list of the most significant changes.
...new c apis ...list and link to new apis here...
... ...list new c++ helpers here...
...And 2 more matches
SpiderMonkey 17
here is a list of the most significant changes.
...new c apis ...list and link to new apis here...
... ...list new c++ helpers here...
...And 2 more matches
SpiderMonkey 24
here is a list of the most significant changes.
... ...list new c++ helpers here...
... obsolete apis ...list obsolete methods/structs/apis here...
...And 2 more matches
Feed content access API
nsifeedprogresslistener implemented by the program that wants to parse an rss or atom feed to receive messages during the parsing process.
... nsifeedresultlistener implemented by the program that wants to parse an rss or atom feed to receive notification when parsing is complete.
...s.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri(feedurl, null, null); if (data.length) { var parser = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } catch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } ...
...And 2 more matches
The Publicity Stream API
getpublicitystream( onsuccess: <function>, { [ onerror: <function> ], [ for_apps: <list> ], [ since: <date> ], [ before: <date> ], [ count: <int> ]): provides a means for a web store to receive a list of the current user's socially relevant app activity by being called from an origin which hosts a web store.
...it is suggested that the list be processed and condensed into an attractive, cohesive format for users (eg., multiple tweets show as 'adam tweeted 4 times').
... onsuccess will be called with a single argument: a json list of the current user's socially relevant app activity in the fixme: deadlinkactivity streams open specification.
...And 2 more matches
Component Internals
there are two types of manifests that xpcom uses to track components: component manifests when xpcom first starts up, it looks for the component manifest, which is a file that lists all registered components, and stores details on exactly what each component can do.
...this file also lists all known interfaces and links to the type library files that define these interface structures.
...for example, this is the object that may start a network download and implement interfaces that will listen to the progress.
...And 2 more matches
imgIEncoder
methods addimageframe() void addimageframe( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions ); parameters data list of bytes in the format specified by inputformat.
...initfromdata() void initfromdata( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions ); parameters data list of bytes in the format specified by inputformat.
...outputoptions semicolon-delimited list of name=value pairs that can give options to the output encoder.
...And 2 more matches
nsICategoryManager
xpcom/components/nsicategorymanager.idlscriptable this interface provides access to a data structure that holds a list of name-value pairs, called categories, where each value is a list of strings.
... examples print out a list of all categories this snippet shows how to print out a list of all categories in c++.
... nscomptr<nsisupports> elem; cats->getnext(getter_addrefs(elem)); nscomptr<nsisupportscstring> category = do_queryinterface(elem, &rv); if (ns_failed(rv)) break; nsembedcstring categoryname; rv = category->getdata(categoryname); if (ns_failed(rv)) break; printf("%s\n", categoryname.get()); } return ns_ok; } this snippet shows how to print out a list of all categories in javascript.
...And 2 more matches
nsIComponentRegistrar
see ns_gre_dir, ns_xpcom_component_dir, and ns_xpcom_component_dir_list in nsdirectoryservice.
...enumeratecids() this method returns an enumerator over the list of registered classids.
...return value an nsisimpleenumerator over the list of registered classes.
...And 2 more matches
nsIFilePicker
rs(in long filtermask); void init(in nsidomwindow parent, in astring title, in short mode); void open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform).
...for the most up to date list see filepicker.properties.
...the filter appended first will be used to display the nsifilepicker dialog, the user may then select another from the list.
...And 2 more matches
nsIMsgSendLater
inherits from: nsistreamlistener implemented by: @mozilla.org/messengercompose/sendlater;1.
... to create an instance, use var msgsendlater = components.classes["@mozilla.org/messengercompose/sendlater;1"] .getservice(components.interfaces.nsimsgsendlater); method overview void sendunsentmessages(in nsimsgidentity identity); void removelistener(in nsimsgsendlaterlistener listener); void addlistener(in nsimsgsendlaterlistener listener); nsimsgfolder getunsentmessagesfolder](in nsimsgidentity identity); attributes attribute type description msgwindow nsimsgwindow methods sendunsentmessages() sends all unsent messages for an identity.
... void sendunsentmessages(in nsimsgidentity identity) parameters identity the nsimsgidentity to send unsent messages for removelistener() remove an event listener from this nsisendmsglater instance void removelistener(in nsimsgsendlaterlistener listener); parameters listener the nsimsgsendlaterlistener to remove.
...And 2 more matches
nsINavHistoryQuery
setting this is equivalent to listing all bookmark folders in the folders parameter.
... tags nsivariant a list of tags to use for filtering query results.
...duplicate tags may be specified, but when reading the list, only unique tags are returned.
...And 2 more matches
nsIPluginHost
void instantiateembededplugin(in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner); obsolete since gecko 1.8 void instantiatefullpageplugin(in string amimetype, in nsiuri auri, in nsiplugininstanceowner aowner, out nsistreamlistener astreamlistener); native code only!
... nsistreamlistener instantiatepluginforchannel(in nsichannel achannel, in nsiplugininstanceowner aowner); native code only!
...ce gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void instantiateembededplugin( in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner ); parameters amimetype aurl aowner native code only!instantiatefullpageplugin void instantiatefullpageplugin( in string amimetype, in nsiuri auri, in nsiplugininstanceowner aowner, out nsistreamlistener astreamlistener ); parameters amimetype auri aowner astreamlistener native code only!instantiatepluginforchannel instantiate an embedded plugin for an existing channel.
...And 2 more matches
nsIToolkitProfileService
profiles nsisimpleenumerator an enumerator providing access to the list of profiles; each profile is an nsitoolkitprofile object (though you must first call aprofile.queryinterface(components.interfaces.nsitoolkitprofile) to get access to its attributes and methods).
... flush() flushes the profile list to disk.
... the profile list file is constructed in memory, then written out as one large chunk, in order to reduce the risk of the profile list file being corrupted by disk errors.
...And 2 more matches
nsIXULTemplateQueryProcessor
the query is expected to consist of either text or dom nodes that, when executed by a call to the generateresults() method, will allow the generation of a list of results.
...for instance, when examining an xml source, an xml query processor might begin at the node referred by the reference variable and end at a list of that node's children.
...the list of datasources in a template is specified using the datasources attribute as a space separated list of uris.
...And 2 more matches
Using nsIDirectoryService
header files containing known keys are listed in the known locations section of this document.
... bear in mind that this list is not static.
...when the service is asked for a file location, it goes through its list of providers asking each if it knows the requested location until it finds one that does.
...And 2 more matches
XPIDL Syntax
MozillaTechXPIDLSyntax
idl_file = 1*definition definition = [type_decl / const_decl / interface] ";" interface = [prop_list] "interface" ident [[inheritance] "{" *(ifacebody) "}"] inheritance = ":" *(scoped_name ",") scoped_name] ifacebody = [type_decl / op_decl /attr_decl / const_decl] ";" / codefrag type_decl = [prop_list] "typedef" type_spec *(ident ",") ident type_decl /= [prop_list] "native" ident [parens] const_decl = "const" type_spec ident "=" expr op_decl = [prop_list] (type_spec / "void") parameter_d...
...ecls raise_list parameter_decls = "(" [*(param_decl ",") param_decl] ")" param_decl = [prop_list] ("in" / "out" / "inout") type_spec ident attr_decl = [prop_list] ["readonly"] "attribute" type_spec *(ident ",") ident ; descending order of precedence expr /= expr ("|" / "^" / "&") expr ; unequal precedence "|" is lowest expr /= expr ("<<" / ">>") expr expr /= expr ("+" / "-") expr expr /= expr ("*" / "/" / "%") expr expr /= ["-" / "+" / "~"] (scoped_name / literal / "(" expr ")" ) ; numeric literals: quite frankly, i'm sure you know how these kinds of ; literals work, and these are annoying to specify in abnf.
... string_literal = 1*(%x22 *(any char except %x22 or %x0a) (%x22 / %x0a)) ; same as above, but s/"/'/g char_literal = 1*(%x27 *(any char except %x27 or %x0a) (%x27 / %x0a)) type_spec = "float" / "double" / "string" / "wstring" type_spec /= ["unsigned"] ("short" / "long" / "long" "long") type_spec /= "char" / "wchar" / "boolean" / "octet" type_spec /= scoped_name prop_list = "[" *(property ",") property "]" property = ident [parens] raise_list = "raises" "(" *(scoped_name) ",") scoped_name ")" scoped_name = *(ident "::") ident / "::" ident ; in regex: [a-za-z_][a-za-z0-9_]*; identifiers beginning with _ cause warnings ident = (%x41-5a / %x61-7a / "_") *(%x41-5a / %x61-7a / %x30-39 / "_") parens = "(" 1*(any char except ")") ")" functionality not used in xpi...
...And 2 more matches
XPIDL
the built-in native types are those listed under the type_spec production above.
... in addition to this list, nearly every idl file includes nsrootidl.idl in some fashion, which also defines the following types: table 2: types provided by nsrootidl.idl idl typedef c++ in parameter c++ out parameter js type notes prtime (xpidl unsigned long long typedef, 64 bits) number prtime is in microseconds, while js date assumes time in milliseconds nsresult ...
...most native types are not scriptable: if it is not present in the list above, then it is certainly not scriptable (some of the above, particularly jsid, are not scriptable).
...And 2 more matches
Gloda examples
a) show all messages in a conversation regardless of the folder in which they are stored, b) search messages by subject assuming that you have a message (glodamessage) in the conversation already, this is straight forward using glodamessage.conversation.getmessagescollection() alistener = { /* called when new items are returned by the database query or freshly indexed */ onitemsadded: function _onitemsadded(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function _onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system ...
...s, acollection) { }, /* called when our database query completes */ onquerycompleted: function _onquerycompleted(conversation_coll) { try { for (var conv in conversation_coll) { //do something with the conversation here alert(conv.subject); } } catch (e) {} } } glodamessage.conversation.getmessagescollection(alistener) alternatively if you need to get a conversation based on the subject, you need to do a query (using the same listener as above).
... if you search for a message based on subject, use noun_message instead of noun_conversation and modify the listener accordingly.
...And 2 more matches
Add to iPhoto
cfindex a core foundation long integer type used to represent indexes into lists.
... cfrange cfrange is a structure that identifies a range; that is, it identifies an offset to an item in a list and a number of items.
... this.struct_lsapplicationparameters.ptr, // description of the app to launch ctypes.voidptr_t, // psn array pointer cfindex); // max psn count this function returns an osstatus indicating the result of the launch attempt, and accepts these parameters: a cfarrayref providing a list of cfurl objects for the files to open in the application.
...And 2 more matches
Standard OS Libraries
windows also has the "winapilists" and ".net framework" (i'm not sure if it can be accessed jsctypes but probably).
... a complete list of windows apis can be found at the msdn api index.
...a list of all the functions available through this api can be found at the msdn winapi index.
...And 2 more matches
Storage Inspector - Firefox Developer Tools
cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.
... storage inspector user interface the storage inspector ui is split into three main components: storage tree table widget sidebar storage tree the storage tree lists all the storage types that the storage inspector can inspect: under each type, objects are organized by origin.
... under "cache storage", objects are organized by origin and then by the name of the cache: indexeddb objects are organized by origin, then by database name, then by object store name: with the cookies, local storage, and session storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin: you can click on each item in the tree to expand or collapse its children.
...And 2 more matches
Style Editor - Firefox Developer Tools
the style sheet pane the style sheet pane, on the left, lists all the style sheets being used by the current document.
...you can save any changes you've made to the style sheet to your local computer by clicking the save button in the bottom-right corner of each sheet's entry in the list.
...just start typing, and it will offer you a list of suggestions.
...And 2 more matches
CSSStyleSheet.cssRules - Web APIs
the read-only cssstylesheet property cssrules returns a live cssrulelist which provides a real-time, up-to-date list of every css rule which comprises the stylesheet.
... each item in the list is a cssrule defining a single rule.
... syntax var rules = cssstylesheet.cssrules; value a live-updating cssrulelist containing each of the css rules making up the stylesheet.
...And 2 more matches
CacheStorage.keys() - Web APIs
WebAPICacheStoragekeys
use this method to iterate over a list of all cache objects.
... syntax caches.keys().then(function(keylist) { //do something with your keylist }); parameters none.
...here we have a whitelist containing the names of the caches we want to keep (cachewhitelist).
...And 2 more matches
Advanced animations - Web APIs
radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); boundaries without any boundary collision testing our ball runs out of the canvas quickly.
...); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); acceleration to make the motion more real, you can play with the velocity like this, for example: ball.vy *= .99; ball.vy += .25; this slows down the vertical velocity each frame, so that the ball will just b...
...learrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; ball.vy *= .99; ball.vy += .25; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); trailing effect until now we have made use of the clearrect method when clearing prior frames.
...And 2 more matches
Detecting device orientation - Web APIs
it is different from the deviceorientationevent because it is listening for changes in acceleration as opposed to orientation.
... processing orientation events all you need to do in order to begin receiving orientation change is to listen to the deviceorientation event: note: gyronorm.js is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices.
... window.addeventlistener("deviceorientation", handleorientation, true); after registering your event listener (in this case, a javascript function called handleorientation()), your listener function periodically gets called with updated orientation data.
...And 2 more matches
DirectoryReaderSync - Web APIs
you can do that by passing a list of filesystem: urls—which are just strings—instead of a list of entries.
... console.log(fileentry.name); }); }); }; worker.postmessage({'cmd': 'list'}); the following is worker.js code that gets the contents of the directory.
...self.requestfilesystemsync = self.webkitrequestfilesystemsync || self.requestfilesystemsync; // global for holding the list of entry file system urls.
...And 2 more matches
Document.getElementsByTagNameNS() - Web APIs
returns a list of elements with the given tag name belonging to the given namespace.
... syntax elements = document.getelementsbytagnamens(namespace, name) elements is a live nodelist (but see the note below) of found elements in the order they appear in the tree.
... note: while the w3c specification says elements is a nodelist, this method returns a htmlcollection both in gecko and internet explorer.
...And 2 more matches
Events and the DOM - Web APIs
the event interface itself is described, as well as the interfaces for event registration on nodes in the dom, and event listeners, and several longer examples that show how the various event interfaces relate to one another.
... registering event listeners there are 3 ways to register event handlers for a dom element.
... eventtarget.addeventlistener // assuming mybutton is a button element mybutton.addeventlistener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages.
...And 2 more matches
Element: mouseenter event - Web APIs
in such cases, it is better to listen for mouseover events.
...it then adds an item to the list with the number of the mouseenter or mouseleave event.
... html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible.
...And 2 more matches
EventSource - Web APIs
var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } each received event causes our eventsource object's onmessage event handler to be run.
... it, in turn, creates a new <li> element and writes the message's data into it, then appends the new element to the list element already in the document.
... to listen to named events, you'll require a listener for each type of event sent.
...And 2 more matches
FeaturePolicy - Web APIs
featurepolicy.features returns a list of names of all features supported by the user agent.
... feature whose name appears on the list might not be allowed by the feature policy of the current execution context and/or might not be accessible because of user's permissions.
... featurepolicy.allowedfeatures returns a list of names of all features supported by the user agent and allowed by the feature policy.
...And 2 more matches
HTMLElement: animationcancel event - Web APIs
an event handler for this event can be added by setting the onanimationcancel property, or using addeventlistener().
... bubbles yes cancelable no interface animationevent event handler property onanimationcancel examples this code gets an element that's currently being animated and adds a listener to the animationcancel event.
... const animated = document.queryselector('.animated'); animated.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of addeventlistener(): const animated = document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></di...
...And 2 more matches
IDBDatabase - Web APIs
idbdatabase.objectstorenames read only a domstringlist that contains a list of the names of the object stores currently in the connected database.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...for a complete working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the idbdatabase object, // when the database is opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
...And 2 more matches
IDBObjectStore.indexNames - Web APIs
the indexnames read-only property of the idbobjectstore interface returns a list of the names of indexes on objects in this object store.
... syntax var myindexnames = objectstore.indexnames; value a domstringlist.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...And 2 more matches
IDBObjectStore - Web APIs
properties idbobjectstore.indexnames read only a list of the names of indexes on objects in this object store.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in db.
...ther one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: fal...
...And 2 more matches
IDBTransaction - Web APIs
idbtransaction.objectstorenames read only returns a domstringlist of the names of idbobjectstore objects associated with the transaction.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
...And 2 more matches
KeyboardEvent.code - Web APIs
code values the code values for windows, linux, and macos are list on the keyboardevent: code values page.
... examples exercising keyboardevent html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample, click in the output box below before pressing keys.
... handle keyboard events in a game this example establishes an event listener for keydown events that handle keyboard input for a game that uses the typical "wasd" keyboard layout for steering forward, left, backward, and right.
...And 2 more matches
MediaSource - Web APIs
properties mediasource.sourcebuffers read only returns a sourcebufferlist object containing the list of sourcebuffer objects associated with this mediasource.
... mediasource.activesourcebuffers read only returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within mediasource.sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
... mediasource.addsourcebuffer() creates a new sourcebuffer of the given mime type and adds it to the mediasource.sourcebuffers list.
...And 2 more matches
MessagePort - Web APIs
the messageport interface of the channel messaging api represents one of the two ports of a messagechannel, allowing messages to be sent from one port and listening out for them arriving at the other.
... start() starts the sending of messages queued on the port (only needed when using eventtarget.addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active.
... event handlers inherits event handlers from its parent, eventtarget onmessage an eventlistener called when messageevent of type message is fired on the port—that is, when the port receives a message.
...And 2 more matches
Using Navigation Timing - Web APIs
for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and ...
... html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above.
... for a list of the available timing values you can look for in performancetiming, see the performancetiming interface's properties section.
...And 2 more matches
PannerNode.orientationX - Web APIs
if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
...however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...And 2 more matches
PannerNode.orientationY - Web APIs
if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
...however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...And 2 more matches
PannerNode.orientationZ - Web APIs
if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
...however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...And 2 more matches
performance.getEntriesByName() - Web APIs
the getentriesbyname() method returns a list of performanceentry objects for the given name and type.
... the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time.
...the valid entry types are listed in performanceentry.entrytype.
...And 2 more matches
performance.getEntriesByType() - Web APIs
the getentriesbytype() method returns a list of performanceentry objects for a given type.
... the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time.
...the valid entry types are listed in performanceentry.entrytype.
...And 2 more matches
Performance - Web APIs
performance.navigation read only a legacy performancenavigation object that provides useful context about the operations included in the times listed in timing, including whether the page was a load or a refresh, how many redirections occurred, and so forth.
... performance.getentries() returns a list of performanceentry objects based on the given filter.
... performance.getentriesbyname() returns a list of performanceentry objects based on the given name and entry type.
...And 2 more matches
SVGAnimationElement - Web APIs
the new instance time is added to the begin instance times list.
...the new instance time is added to the begin instance times list.
...the new instance time is added to the end instance times list.
...And 2 more matches
SVGTextPositioningElement - Web APIs
svgtextpositioningelement.x read only returns an svganimatedlengthlist reflecting the x attribute of the given element.
... svgtextpositioningelement.y read only returns an svganimatedlengthlist reflecting the y attribute of the given element.
... svgtextpositioningelement.dx read only returns an svganimatedlengthlist reflecting the dx attribute of the given element.
...And 2 more matches
Sensor APIs - Web APIs
listening for errors thrown during its use.
... let accelerometer = null; try { accelerometer = new accelerometer({ referenceframe: 'device' }); accelerometer.addeventlistener('error', event => { // handle runtime errors.
... } else if (event.error.name === 'notreadableerror' ) { console.log('cannot connect to the sensor.'); } }); accelerometer.addeventlistener('reading', () => reloadonshake(accelerometer)); accelerometer.start(); } catch (error) { // handle construction errors.
...And 2 more matches
Using server-sent events - Web APIs
for example, assuming the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do...
... not have an event field on them) and appends the message text to a list in the document's html.
... you can also listen for events with addeventlistener(): evtsource.addeventlistener("ping", function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information.
...And 2 more matches
ServiceWorkerRegistration - Web APIs
the browser maintains a persistent list of active serviceworkerregistration objects.
... event handlers serviceworkerregistration.onupdatefound read only an eventlistener property called whenever an event of type updatefound is fired; it is fired any time the serviceworkerregistration.installing property acquires a new service worker.
...next, it adds an updatefound listener in which it uses the service worker registration to listen for further changes to the service worker's state.
...And 2 more matches
TextTrack - Web APIs
WebAPITextTrack
texttrack.activecues read only a texttrackcuelist object listing the currently active set of text track cues.
... texttrack.cues read only a texttrackcuelist which contains all of the track's cues.
...permitted values are listed under text track mode constants.
...And 2 more matches
TouchEvent.targetTouches - Web APIs
the targettouches read-only property is a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same target element as the current target element.
... syntax var touches = touchevent.targettouches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same target element as the current target element.
...the touchevent.targettouches property is a touchlist object that includes those tps that are currently touching the surface and started on the element that is the target of the current event.
...And 2 more matches
TouchEvent.touches - Web APIs
touches is a read-only touchlist listing all the touch objects for touch points that are currently in contact with the touch surface, regardless of whether or not they've changed or what their target element was at touchstart time.
... syntax var touches = touchevent.touches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface, regardless of whether or not they've changed or what their target element was at touchstart time.
...the touchevent.touches property is a touchlist object and containing a list of touch objects for every point of contact currently touching the surface.
...And 2 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
gaming-related situations are listed separately since they are often a special case specific to gaming, but any of these perspectives might apply to any 3d graphics scene.
...realistically, though, not only do humans not see anywhere near that much, but viewing devices such as monitors and vr goggles tend to reduce the field of view even further.
... this information includes the xrviewerpose describing the position and facing direction of the viewer within the scene as well as a list of xrview objects, each representing one perspective on the scene.
...And 2 more matches
Using the Web Audio API - Web APIs
controlling sound programmatically from javascript code is covered by browsers' autoplay support policies, as such is likely to be blocked without permission being granted by the user (or a whitelist).
... // select our play button const playbutton = document.queryselector('button'); playbutton.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audiocontext.state === 'suspended') { audiocontext.resume(); } // play or pause track depending on state if (this.dataset.playing === 'false') { audioelement.play(); this.dataset.playing = 'true'; } else if (this.dataset.playing === 'true') { audioele...
...our htmlmediaelement fires an ended event once it's finished playing, so we can listen for that and run code accordingly: audioelement.addeventlistener('ended', () => { playbutton.dataset.playing = 'false'; }, false); modifying sound let's delve into some basic modification nodes, to change the sound that we have.
...And 2 more matches
Window.ondragdrop - Web APIs
WebAPIWindowondragdrop
syntax window.ondragdrop = funcref; window.addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered.
... the window.ondragdrop property and the ondragdrop attribute are not implemented in gecko (bug 112288), you have to use addeventlistener.
... see addeventlistener for details.
...And 2 more matches
Window - Web APIs
WebAPIWindow
for overriding the prototype of built-in elements) are listed in a separate section below.
... window.matchmedia() returns a mediaquerylist object representing the specified media query string.
... methods implemented from elsewhere eventtarget.addeventlistener() register an event handler to a specific event type on the window.
...And 2 more matches
XRSession.inputSources - Web APIs
the read-only inputsources property of the xrsession interface returns an xrinputsourcearray object which lists all controllers and input devices which are expressly associated with the xr device and are currently available.
... syntax inputsources = xrsession.inputsources; value an xrinputsourcearray object listing all of the currently-connected input controllers which are linked specifically to the xr device currently in use.
... the returned object is live; as devices are connected to and removed from the user's system, the list's contents update to reflect the changes.
...And 2 more matches
ARIA: Navigation Role - Accessibility
<div role="navigation" aria-label="main"> <!-- list of links to main website locations --> </div> this is a website's main navigation.
...lists) of links that are intended to be used for website or page content navigation.
... <header> <nav id="main-nav" aria-label="main"> <!-- list of links to main website locations --> </nav> </header> ...
...And 2 more matches
Perceivable - Accessibility
1.2.9 provide a transcript for live audio (aaa) for any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to.
... lists.
... if the order of list items is important, use an ordered list (<ol>).
...And 2 more matches
:not() - CSS: Cascading Style Sheets
WebCSS:not
the :not() css pseudo-class represents elements that do not match a list of selectors.
... syntax the :not() pseudo-class requires a comma-separated list of one or more selectors as its argument.
... the list must not contain another negation selector or a pseudo-element.
...And 2 more matches
:nth-child() - CSS: Cascading Style Sheets
/* selects the second <li> element in a list */ li:nth-child(2) { color: lime; } /* selects every fourth element among any group of siblings */ :nth-child(4n) { color: lime; } syntax the nth-child pseudo-class is specified with a single argument that describes a pattern for matching element indices in a list of siblings.
... functional notation <an+b> represents elements in a list whose indices match those found in a custom pattern of numbers, defined by an+b, where: a is an integer step size, b is an integer offset, n is all positive integers, starting from 0.
... it can be read as the an+bth element of a list.
...And 2 more matches
@counter-style - CSS: Cascading Style Sheets
@counter-style thumbs { system: cyclic; symbols: "\1f44d"; suffix: " "; } ul { list-style: thumbs; } the initial version of css defined a set of useful counter styles.
...once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.
... @counter-style winners-list { system: fixed; symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); suffix: " "; } additive-symbols while the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor.
...And 2 more matches
@keyframes - CSS: Cascading Style Sheets
syntax @keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(100%); } } values <custom-ident> a name identifying the keyframe list.
...each @keyframes rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.
... you can list the keyframe percentages in any order; they will be handled in the order they should occur.
...And 2 more matches
CSS values and units - CSS: Cascading Style Sheets
css identifiers, listed in the specifications as <ident> or <custom-ident>, must be unquoted.
... in the css specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a <custom-ident>, <string>, or both.
... when both quoted and unquoted user defined text values are permitted, the specification will list <custom-ident> | <string>, meaning quotes are optional, such as is the case with animation names: @keyframe validident { /* keyframes go here */ } @keyframe 'validstring' { /* keyframes go here */ } some text values are not valid if encompassed in quotes.
...And 2 more matches
animation - CSS: Cascading Style Sheets
WebCSSanimation
lex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = button[i]; var anim = ...
...animation[i]; if (btn.classlist.contains('play')) { anim.style.animationplaystate = 'running'; togglebutton(btn, 'pause'); } else if (btn.classlist.contains('pause')) { anim.style.animationplaystate = 'paused'; togglebutton(btn, 'play'); } else { anim.classlist.remove('a' + (i + 1)); settimeout(function () { togglebutton(btn, i === 0 ?
... 'play' : 'pause'); anim.style.animationplaystate = ''; anim.classlist.add('a' + (i + 1)); }, 100) } } animation.foreach(function (node, index) { node.addeventlistener('animationstart', function () { togglebutton(button[index], 'pause'); }); node.addeventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting that this description is also valid for css transitions.
...And 2 more matches
box-shadow - CSS: Cascading Style Sheets
to specify multiple shadows, provide a comma-separated list of shadows.
... interpolation each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components.
...if any pair of input shadows has one inset and the other not inset, the entire shadow list is uninterpolable.
...And 2 more matches
<custom-ident> - CSS: Cascading Style Sheets
@counter-style list-style-type forbids the global css values (unset, initial, and inherit), as well as the values none, inline, and outside.
... css counter styles level 3the definition of '<custom-ident> for list-style-type' in that specification.
... candidate recommendation uses <custom-ident> instead of a finite list of keywords.
...And 2 more matches
filter - CSS: Cascading Style Sheets
WebCSSfilter
st(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-function> [<filter-function>]* | none for a reference to an svg <filter> element, use the following: filter: url(file.svg#filter-element-id) interpolation if both the beginning and end filters have a function list of the same length without <url>, each of their filter functions is interpolated according to its specific rules.
... if they have different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list using their lacuna values, then all filter functions are interpolated according to their specific rules.
... if one filter is none, it is replaced with the filter functions list of the other one using the filter function default values, then all filter functions are interpolated according to their specific rules.
...And 2 more matches
grid-template-columns - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-columns: none; /* <track-list> values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); grid-template-columns: subgrid; /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px;...
... repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
... formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list formal syntax none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where <track-list> = [ <line-names>?
...And 2 more matches
transition-timing-function - CSS: Cascading Style Sheets
you may specify multiple timing functions; each one will be applied to the corresponding property as specified by the transition-property property, which acts as a transition-property list.
... if there are fewer timing functions specified than in the transition-property list, the user agent must calculate which value is used by repeating the list of values until there is one for each transition property.
... if there are more timing functions, the list is simply truncated to the right size.
...And 2 more matches
word-break - CSS: Cascading Style Sheets
syntax /* keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */ /* global values */ word-break: inherit; word-break: initial; word-break: unset; the word-break property is specified as a single keyword chosen from the list of values below.
...<code>word-break: normal</code></p> <p class="normal narrow">this is a long and honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>2.
... <code>word-break: break-all</code></p> <p class="breakall narrow">this is a long and honorificabilitudinitatibus califragilisticexpialidocious taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>3.
...And 2 more matches
Getting Started - Developer guides
for a more realistic example, see step 3 of this article.
...} the full list of the readystate values is documented at xmlhttprequest.readystate and is as follows: 0 (uninitialized) or (request not initialized) 1 (loading) or (server connection established) 2 (loaded) or (request received) 3 (interactive) or (processing request) 4 (complete) or (request finished and response is ready) next, check the http response status codes of the http response.
... the possible codes are listed at the w3c.
...And 2 more matches
Audio and video manipulation - Developer guides
o.ended) { return; } this.computeframe(); var self = this; settimeout(function () { self.timercallback(); }, 16); // roughly 60 frames per second }, doload: function() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext("2d"); var self = this; this.video.addeventlistener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var g...
...utton" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setplaybackrate() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setplaybackrate(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setplaybackrate); window.addeventlistener('load', setplaybackrate); note: try the playbackrate example live.
...diaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code.
...And 2 more matches
Challenge solutions - Developer guides
see css color value for a complete list as well as other ways of specifying colors.
... you see two items listed, one that references an internal resource and one that references your stylesheet file.
... solution add this rule to your stylesheet: p:before{ content: url("yellow-pin.png"); } lists lower roman numerals challenge add a rule to your stylesheet, to number the oceans using roman numerals from i to v.
...And 2 more matches
DOM onevent handlers - Developer guides
two common approaches are addeventlistener() and the specific onevent handlers.
...in order to allow multiple handlers to be installed for the same event on a given object, you can call its addeventlistener() method, which manages a list of handlers for the given event on the object.
... a handler can then be removed from the object by calling its removeeventlistener() function.
...And 2 more matches
Index - Developer guides
WebGuideIndex
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
...two common approaches are addeventlistener() and the specific onevent handlers.
... 20 media events intermediate, media various events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section lists them and provides some helpful information about using them.
...And 2 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
fully standards-compliant implementations automatically apply the css display: list-item to the <summary> element.
... you can use an event listener for the toggle event to detect when the widget changes state: details.addeventlistener("toggle", event => { if (details.open) { /* the element was toggled open */ } else { /* the element was toggled closed */ } }); examples a simple disclosure example this example shows a <details> element with no provided summary.
... the <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image).
...And 2 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
WebHTMLElementsource
sizes is a list of source sizes that describes the final rendered width of the image represented by the source.
... each source size consists of a comma-separated list of media condition-length pairs.
... srcset a list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use.
...And 2 more matches
Global attributes - HTML: Hypertext Markup Language
list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element.
... this attribute consists of a space-separated list of characters.
... off or none, no autocapitalization is applied (all letters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital letter; all other letters default to lowercase characters, all letters should default to uppercase class a space-separated list of the classes of the element.
...And 2 more matches
Access-Control-Allow-Headers - HTTP
the header may list any number of headers, separated by commas.
...note that the authorization header can't be wildcarded and always needs to be listed explicitly.
...it indicates that in addition to the cors-safelisted request headers, a custom header named x-custom-header is supported by cors requests to the server.
...And 2 more matches
Access-Control-Expose-Headers - HTTP
the access-control-expose-headers response header indicates which headers can be exposed as part of the response by listing their names.
... by default, only the 7 cors-safelisted response headers are exposed: cache-control content-language content-length content-type expires last-modified pragma if you want clients to be able to access other headers, you have to list them using the access-control-expose-headers header.
...access-control-expose-headers: * directives <header-name> a list of exposed headers consisting of zero or more header names other than the cors-safelisted request headers that the resource might use and can be exposed.
...And 2 more matches
CSP: script-src - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
... examples violation case given this csp header: content-security-policy: script-src https://example.com/ the following script is blocked and won't be loaded or executed: <script src="https://not-example.com/js/library.js"></script> note that inline event handlers are blocked as well: <button id="btn" onclick="dosomething()"> you should replace them with addeventlistener calls: document.getelementbyid("btn").addeventlistener('click', dosomething); unsafe inline script note: disallowing inline styles and inline scripts is one of the biggest security wins csp provides.
...And 2 more matches
Feature-Policy - HTTP
header type response header forbidden header name yes syntax feature-policy: <directive> <allowlist> <directive> the feature policy directive to apply the allowlist to.
... see directives below for a list of the permitted directive names.
... <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...And 2 more matches
Upgrade - HTTP
WebHTTPHeadersUpgrade
header type request header, response header forbidden header name yes overview the upgrade header field may be used by clients to invite a server to switch to one (or more) of the listed protocols, in descending preference order.
... for example, the client might send a get request as shown, listing the preferred protocols to switch to (in this case "example/1" and "foo/2"): get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 note: connection: upgrade must be set whenever upgrade is sent.
... protocols are listed, comma-separated, in order of descending preference.
...And 2 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
the most common host environment is the browser, but javascript interpreters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
...things are a lot easier if we stick with the first diagram, however, so we'll discuss the types listed there for now.
...the rest parameter operator is used in function parameter lists with the format: ...variable and it will include within that variable the entire list of uncaptured arguments that the function was called with.
...And 2 more matches
Working with objects - JavaScript
for example, let's create an object named mycar and give it properties named make, model, and year as follows: var mycar = new object(); mycar.make = 'ford'; mycar.model = 'mustang'; mycar.year = 1969; the above example could also be written using an object initializer, which is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}): var mycar = { make: 'ford', model: 'mustang', year: 1969 }; unassigned properties of an object are undefined (and not null).
...ter out properties from the object's prototype chain if (obj.hasownproperty(i)) { result += `${objname}.${i} = ${obj[i]}\n`; } } return result; } so, the function call showprops(mycar, "mycar") would return the following: mycar.make = ford mycar.model = mustang mycar.year = 1969 enumerate the properties of an object starting with ecmascript 5, there are three native ways to list/traverse object properties: for...in loops this method traverses all enumerable properties of an object and its prototype chain.
... before ecmascript 5, there was no native way to list all properties of an object.
...And 2 more matches
The arguments object - JavaScript
it returns a string list using each argument in the list: // returns "red, orange, blue" myconcat(', ', 'red', 'orange', 'blue'); // returns "elephant; giraffe; lion; cheetah" myconcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); // returns "sage.
...', 'sage', 'basil', 'oregano', 'pepper', 'parsley'); defining a function that creates html lists this example defines a function that creates a string containing html for a list.
... the only formal argument for the function is a string that is "u" if the list is to be unordered (bulleted), or "o" if the list is to be ordered (numbered).
...And 2 more matches
Function.prototype.bind() - JavaScript
[[boundarguments]] a list of values whose elements are used as the first arguments to any call to the wrapped function.
...the arguments to the internal method are a this value and a list containing the arguments passed to the function by a call expression.
...this : otherthis, baseargs ); }; if (this.prototype) { // function.prototype doesn't have a prototype property fnop.prototype = this.prototype; } fbound.prototype = new fnop(); return fbound; }; })(); some of the many differences (there may well be others, as this list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are: the partial implementation relies on array.prototype.slice(), array.prototype.concat(), function.prototype.call() and function.prototype.apply(), built-in methods to have their original values.
...And 2 more matches
handler.construct() - JavaScript
syntax const p = new proxy(target, { construct: function(target, argumentslist, newtarget) { } }); parameters the following parameters are passed to the construct() method.
... argumentslist the list of arguments for the constructor.
... const p = new proxy(function() {}, { construct: function(target, argumentslist, newtarget) { console.log('called: ' + argumentslist.join(', ')); return { value: argumentslist[0] * 10 }; } }); console.log(new p(1).value); // "called: 1" // 10 the following code violates the invariant.
...And 2 more matches
Digital audio concepts - Web media technologies
special low frequency enhancement (lfe) channels provide the signal for special speakers designed to produce the low frequency sounds and vibration to create a visceral sensation when listening to the audio.
...generally, lossy compression results in significantly smaller output than lossless compression methods; also, many lossy codecs are excellent, with the loss in quality and detail being difficult or even impossible for the average listener to discern.
... use cases for lossless audio include scenarios such as: any situation in which the listener expects precise audio reproduction and may have an ear for sound that's good enough to make out the intricate details of unaltered audio audio loops and samples used in music and sound effects production work situations in which audio clips or samples may be remixed and then compressed; using lossless audio for the mastering process avoids compressing previously compressed data, resulting i...
...And 2 more matches
class - SVG: Scalable Vector Graphics
WebSVGAttributeclass
usage context categories none value <list-of-class-names> animatable yes normative document svg 1.1 (2nd edition): the class attribute list-of-ts <list-of-ts> (where t is some type.) a list consists of a separated sequence of values.
... unless explicitly described differently, lists within svg's xml attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated.
... white space in lists is defined as one or more of the following consecutive characters: "space" (u+0020), "tab" (u+0009), "line feed" (u+000a), "carriage return" (u+000d), and "form-feed" (u+000c).
...And 2 more matches
kernelMatrix - SVG: Scalable Vector Graphics
the kernelmatrix attribute defines the list of numbers that make up the kernel matrix for the <feconvolvematrix> element.
...the number of entries in the list must equal to <orderx> by <ordery> as defined in the order attribute.
...0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none animatable yes <list of numbers> the list of <number>s that make up the kernel matrix for the convolution.
...And 2 more matches
values - SVG: Scalable Vector Graphics
WebSVGAttributevalues
the values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animation, or itʼs a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed.
... five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <fecolormatrix> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, values is a list of values defining the sequence of values over the course of the animation.
... value <list-of-values> default value none animatable no <list-of-values> the value holds a semicolon-separated list of one or more values.
...And 2 more matches
<altGlyph> - SVG: Scalable Vector Graphics
WebSVGElementaltGlyph
value type: <list-of-coordinates> ; default value: absolute x-coordinate of ancestor <text> or <tspan>; animatable: yes y this attribute defines the corresponding absolute y-coordinates for rendering the element.
... value type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; animatable: yes dx this attribute indicates a shift along the x-axis on the position of the element.
... value type: <list-of-coordinates> ; default value: relative x-coordinate of ancestor <text> or <tspan>; animatable: yes dy this attribute indicates a shift along the x-axis on the position of the element.
...And 2 more matches
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementnumber
the default value is single: single numbers sibling nodes sequentially, as in the items in a list.
... the processor goes to the first node in the ancestor-or-self axis that matches the count attribute and then counts that node plus all its preceding siblings (stopping when it reaches a match to the from attribute, if there is one) that also match the count attribute.if no match is found, the sequence will be an empty list.
...for each node in this list that matches the count attribute, the processor counts how many preceding matching siblings it has, and adds one for the node itself.
...And 2 more matches
Communicating using "postMessage" - Archive of obsolete content
again, panel and page integrate worker directly: // post a message to the panel's content scripts panel.postmessage(addonmessage); however, for page-mod objects you need to listen to the onattach event and use the worker supplied to that: var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.postmessage(addonmessage); } }); to receive messages from a content script, use the worker's on function.
... to simplify this most content modules provide an onmessage property as an argument to the constructor: panel = require("sdk/panel").panel({ onmessage: function(contentscriptmessage) { // handle message from the content script } }); message events versus user-defined events you can use message events as an alternative to user-defined events: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.postmessage(event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { console.log('mouseover: ' + message); }); } }); the reason to prefer user-de...
...now we have to embed the event type in the message payload, and implement a switch function in the receiver to dispatch the message: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.postmessage({" + " kind: 'mouseover'," + " element: event.target.tostring()" + " });" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.postmessage({" + " kind:...
... worker.on('message', function(message) { switch(message.kind) { case 'mouseover': console.log('mouseover: ' + message.element); break; case 'mouseout': console.log('mouseout: ' + message.element); break; } }); } }); implementing the same add-on with user-defined events is shorter and more readable: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.port.emit('mouseover', event.target.tostring());" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.port.emit('mouseout', event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ incl...
selection - Archive of obsolete content
usage registering for selection notifications to be notified when the user makes a selection, register a listener for the "select" event.
... each listener will be called after a selection is made.
... function mylistener() { console.log("a selection has been made."); } var selection = require("sdk/selection"); selection.on('select', mylistener); // you can remove listeners too.
... selection.removelistener('select', mylistener); iterating over discontiguous selections discontiguous selections can be accessed by iterating over the selection module itself.
preferences/event-target - Archive of obsolete content
listen to changes to the preferences system in firefox.
... this enables add-ons to listen to change events to the system-wide settings.
... example var { prefstarget } = require("sdk/preferences/event-target"); // listen to the same branch which reqire("sdk/simple-prefs") does var target = prefstarget({ branchname: "extensions." + require("sdk/self").preferencesbranch + "." }); target.once("test", function(prefname) { console.log(prefname) // logs "test" console.log(target.prefs[name]) // logs true }); target.once("", function() { console.log(prefname) // logs "test" console.log(target.prefs[name]) //...
... logs true }) // changing a pref which our target listens to require("sdk/simple-prefs").prefs.test = true; ...
cfx - Archive of obsolete content
e, to pass the -jsconsole argument to firefox, which will launch the javascript error console, try the following: cfx run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: cfx run --binary-args '-url "www.mozilla.org" -jsconsole' --extra-packages=extra_packages extra packages to include, specified as a comma-separated list of package names.
... --extra-packages=extra_packages extra packages to include, specified as a comma-separated list of package names.
...use cfx testcfx -v for the specific list of tests.
...configurations are listed under a key called "configs".
jpm-mobile - Archive of obsolete content
sdk users and project team members discuss problems and proposals on the project mailing list.
... someone else may have had the same problem you do, so try searching the list.
... $ adb shell pm list packages | grep org.mozilla package:org.mozilla.firefox $ jpm-mobile run -b firefox # the package name is firefox -v --verbose verbose operation.
... $ adb shell pm list packages | grep org.mozilla package:org.mozilla.firefox $ jpm-mobile run -b firefox # the package name is firefox -v --verbose verbose operation.
Display a Popup - Archive of obsolete content
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 the // script can prepare the panel for display.
... text_entry.on("show", function() { text_entry.port.emit("show"); }); // listen for messages called "text-entered" coming from // the content script.
...var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
... text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code.
Tutorials - Archive of obsolete content
this page lists practical hands-on articles about how to accomplish specific tasks using the sdk.
... listen for page load use the tabs module to get notified when new web pages are loaded, and access their content.
... get the list of open tabs use the tabs module to iterate through the currently open tabs, and access their content.
... listen for load and unload get notifications when your add-on is loaded or unloaded by firefox, and pass arguments into your add-on from the command line.
Bookmarks - Archive of obsolete content
specifying default_index as the index at which to insert the new folder places it at the end of the list.
... var parentfolderid = bmsvc.getfolderidforitem(newbkmkid); observing changes to bookmarks and tags to set up an observer to listen for changes related to bookmarks, you will need to create an nsinavbookmarkobserver object and use the nsinavbookmarksservice.addobserver() and nsinavbookmarksservice.removeobserver() methods.
... // an nsinavbookmarkobserver var myext_bookmarklistener = { onbeginupdatebatch: function() {}, onendupdatebatch: function() {}, onitemadded: function(aitemid, afolder, aindex) {}, onitemremoved: function(aitemid, afolder, aindex) {}, onitemchanged: function(abookmarkid, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: f...
...unction() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
Forms related code snippets - Archive of obsolete content
g", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.addeventlistener ?
... addeventlistener("load", buildcalendars, false) : window.attachevent ?
... attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addeventlistener ?
... document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ?
Examples and demos from articles - Archive of obsolete content
what follows is a brief list of examples and demos from our theoretical articles.
...[article] typewriter effect [html] the following example will delete and re-type simulating a typewriter all the text content of the nodelist which match a specified group of selectors.
... here is a possible and minimalist example of such abstraction, which for this reason we named minidaemon.
... multipage ajax navigation example this article provides a working (minimalist) example of a pure-ajax web site composed only of three pages.
HTML to DOM - Archive of obsolete content
the returned <body> object is of type element here is a sample that counts the number of paragraphs in a string: var dompars = htmlparser('<p>foo</p><p>bar</p>'); alert(dompars.getelementsbytagname('p').length); if htmlparser() returns the element name html (instead of body), you have all document object with its complete functions list, therefore you can retrieve info within div tag like this: var dompars = htmlparser("<div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>"); alert(dompars.getelementbyid('userinfo').innerhtml); to parse a complete html page, load it into an iframe whose type is content (not chrome).
...main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" setti...
...if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file.
... the most interesting piece of code here is the domcontentloaded event listener we define for the element.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
first of all, it lists the subdirectories that make up the extension, so the build system knows where to look for additional makefiles.
...(if something goes wrong, figure out what, fix it and then come back here and add it to this article.) to make sure that the build really finished, launch firefox and check that your extension is listed when you select tools/extensions.
...zip) file with all the chrome files listed in jar.mn as well as a complete directory structure mirroring that of the jar file.
...ffix) \ $(dist)/lib/$(lib_prefix)xpcomglue_s.$(lib_suffix) \ $(dist)/lib/$(lib_prefix)xul.$(lib_suffix) \ $(dist)/lib/$(lib_prefix)nss3.$(lib_suffix) \ $(null) cppsrcs = \ advanced.cpp \ $(null) include $(topsrcdir)/config/rules.mk local_includes += \ -i$(srcdir)/../intricate/src \ -i$(srcdir)/../multifarious/src \ $(null) the makefile in the advanced/ directory should list the intricate/, multifarious/ and build/ directories in its dirs variable.
Multiple item extension packaging - Archive of obsolete content
the individual packages contained in the multiple item package will not be listed).
...the manager will not display the multiple item package in the list of items after the download has completed.
...do not add to this list without contacting benjamin smedberg.
... note that this page is included from the pages listed below.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
range of uses restricted to author unrestricted book print, publish, revise read music record, perform, revise listen movie distribute, screen, revise watch software copy, distribute, modify execute licenses are a use permit in order to use (in the authorial sense) a copyrighted work, the user must either receive a use permit from the copyright holder, or must be assigned partial rights by the author.
...redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
...redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
...ic license http://www.mozilla.org/mpl/mpl-1.1.html mpl faq http://www.mozilla.org/mpl/mpl-faq.html common public license http://opensource.org/licenses/cpl1.0.php gnu general public license (gpl) http://www.gnu.org/licenses/gpl.html gnu lesser general public license (lgpl) http://www.gnu.org/licenses/lgpl.html various licenses and comments about them http://www.gnu.org/licenses/license-list.html the bsd license problem http://www.gnu.org/philosophy/bsd.html the free software license diagnostic (in japanese) http://www.rubyist.net/~matz/20030608.html#p02 openoffice.org joint copyright assignment (jca) http://www.openoffice.org/licenses/jca.pdf gnu free documentation license (gfdl) http://www.gnu.org/licenses/fdl.html creative commons http://www.creativecommons.cc/ gnu gplv...
Custom XUL Elements with XBL - Archive of obsolete content
you should see a new item in the hello world menu, that opens a binding test window where you can add "persons" to a list.
... personlist.appendchild(person); // ...
... methods our "person" binding has a single method that removes the item from the list: <method name="remove"> <parameter name="aevent" /> <body><![cdata[ this.parentnode.removechild(this); ]]></body> </method> as you can see, it's very easy to define a method and the parameters it takes.
... with inheritance you could take the richlistbox element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked.
Session store API - Archive of obsolete content
if your extension wants to be able to restore data when tabs are restored, you can install a listener like this: function myextensionhandlerestore(aevent) { var tab = event.originaltarget; /* the tab being restored */ var uri = tab.linkedbrowser.contentdocument.location; /* the tab's uri */ components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage("restoring tab: " + uri); }; document.add...
...eventlistener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myextensionhandlerestore() with whatever you need to do when the tab is restored.
... new windows are opened as required (one for each window that was saved in the session store), and cookies and the list of recently closed tabs are restored.
...see the list in observer notifications.
Signing an XPI - Archive of obsolete content
certutil.exe) in the system directory (\windows\system32\) so ensure the new paths are first in the path search list.
...tree "signed/" signed successfully re-package xpi change to the signed/ folder, create a new zip with the meta-inf/zigbert.rsa file listed first, then add the remaining files.
... press the ok button and you'll see your new certificate in the list of authorities.
... object signing certificates --------------------------------------- mytestcert issued by: mytestcert (xpi test) expires: tue mar 14, 2006 code signing (certum) issued by: certum level iii ca (certum level iii ca) expires: tue mar 14, 2006 --------------------------------------- for a list including ca's, use "signtool -l" now you must export the new key/certificate pair from the mozilla firefox certificate database and into the nss certificate database.
Updating addons broken by private browsing changes - Archive of obsolete content
ingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your addon will require updating to correctly support the new per-window private browser feature in firefox 20 (and will require updating to work correctly in releases of firefox since the ones listed).
... nsidownloadmanager's addlistener method is deprecated.
... addprivacyawarelistener should be used instead, or no notifications will be received for private downloads.
... observer notifications none of the ones listed above will be sent as of firefox 20.
No Proxy For configuration - Archive of obsolete content
this feature was originally designed as a "blacklist" of sites or domains that was within the intranet, and should not be accessed via the proxy server.
... due to various limitations, this feature should be used for only the most simple blacklist scenarios.
... 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.
...ip address "1.2.3.4" does not block hostnames that resolve to the ip address ("127.0.0.1" does not block "localhost") a network network w/ cidr block "10.0.0.0/8" does not block hostnames that resolve to the ip address range (10.0.0.0/8 is not "no proxy for intranet hostnames") optional - port-specific (optional) ":" + port number "<filter>:81" only black-lists port.
Notes on HTML Reflow - Archive of obsolete content
stylechange, when the entire frame hierarchy must be traversed to recover from stylistic change; for example, a change in the default font size.
... a style change reflow is performed when the presentation shell's global stylistic information is changed; e.g., addition or removal of a style sheet, a change to the shell's default font.
...in order to correctly dispatch the reflow to the child frame, the frame may need to perform some state recovery ; for example, a block frame will traverse its line list to recover the space occupied by floated frames.
... stylechanged indicates that the stylistic information corresponding to the target frame has changed; for example, the font size has increased.
Download Manager improvements in Firefox 3 - Archive of obsolete content
firefox 3 offers improvements to the download manager that allow multiple progress listeners, use of the storage api for data management, download resuming, and more.
... download manager interfaces nsidownloadmanager gives applications and extensions access to the download manager, allowing them to add and remove files to the download list, retrieve information about past and present downloads, and request notifications as to the progress of downloads.
... nsidownloadprogresslistener applications and extensions implement this interface to be made aware of changes in the status of downloads.
... other download manager documentation download manager preferences this article lists preferences used by the download manager as well as their default values.
Download Manager preferences - Archive of obsolete content
this article provides a list of them.
... browser.download.manager.addtorecentdocs a boolean value that indicates whether or not new downloads should be added to the recent documents list.
...this folder is enabled when browser.download.folderlist equals 2.
... browser.download.folderlist indicates the default folder to download a file to.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
getsupportedflavours() this function should return a list of flavors that the object being dragged over can accept.
...the getsupportedflavours function should return a list of flavours that the element being dragged over can accept for dropping.
...var textobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("text/unicode"); return flavours; } } the flavours list contains only one flavour, which is 'text/unicode'.
... the flavourset object can be used to hold a list of flavours.
Content states and the style system - Archive of obsolete content
this is done by walking the list of all css2.1 simple selectors in all style sheets applied to the page that have a state-dependent pseudo-class as part of the selector.
... this list is created during the parsing of the stylesheets involved.
... for each selector in this list we check whether it might have stopped matching the node or started matching it.
...so the effect will be that of matching a node against the selectors: a a div the code that implements this is in the selectormatches method, which is passed the list of states that changed in the astatemask parameter.
Style System Overview - Archive of obsolete content
detail: !important declarations cause an extra rule object cssimportantrule to be created since they are in a separate part of the cascade other nsistylerule implementations nshtmlmappedattributes represents stylistic html attributes turned into a style rule (one instance per unique set of attributes) bodyrule handles marginwidth/marginheight mixes on body and on frame.
... to match rules, we do lookups in the rulehash's tables, remerge the lists of rules using stored indices, and then call selectormatchestree to find which selectors really match.
...(i'll call this the data-struct-based hint mechanism.) caller of nsiframemanager::computestylechangefor processes the change list, which has been built to avoid duplication.
... presshell::reconstructstyledata calls framemanager::computestylechangefor (reresolve) and then processes the frame-change list.
Using microformats - Archive of obsolete content
to use the api, you need to first load the object: components.utils.import("resource://gre/modules/microformats.js"); once you've loaded the microformats api, you can manage microformats using the methods listed here; for information about parsing microformats, see parsing microformats in javascript.
... getnamesfromnode() returns a space-delineated list of microformat names that correspond to the specified microformat node.
... var namelist = microformats.getnamesfromnode(node); parameters node the node for which to retrieve a list of microformat names.
... return value if the specified node is a microformat, the result is a space-delineated string listing all the microformat names that correspond to the node.
Enabling Experimental Jetpack Features - Archive of obsolete content
to get a list of mount paths that are available, see the method below.
...list() arrayreturns an array of the set of potential stringmountpath as used in jetpack.future.import().
...a quick way of displaying the list is to write it to the console.log.
... var list = jetpack.future.list();console.log(list); open the firebug console to view.
Enabling - Archive of obsolete content
to get a list of mount paths that are available, see the method below.
...list()returns an array of the set of potential stringmountpath as used in jetpack.future.import().
...a quick way of displaying the list is to write it to the console.log.
... var list = jetpack.future.list(); console.log(list); open the firebug console to view.
Enabling Experimental Jetpack Features - Archive of obsolete content
ArchiveMozillaJetpackdocsMetaFuture
to get a list of mount paths that are available, see the method below.
...list() arrayreturns an array of the set of potential stringmountpath as used in jetpack.future.import().
...a quick way of displaying the list is to write it to the console.log.
... var list = jetpack.future.list(); console.log(list); open the firebug console to view.
jspage - Archive of obsolete content
||"iframe",d);var b=function(){var g=$try(function(){return c.contentwindow.location.host;});if(!g||g==window.location.host){var h=new window(c.contentwindow); new document(c.contentwindow.document);$extend(h.element.prototype,element.prototype);}e.call(c.contentwindow,c.contentwindow.document);};var a=$try(function(){return c.contentwindow; });((a&&a.document.body)||window.frames[d.id])?b():c.addlistener("load",b);return c;}});var elements=new native({initialize:function(f,b){b=$extend({ddup:true,cash:true},b); f=f||[];if(b.ddup||b.cash){var g={},e=[];for(var c=0,a=f.length;c<a;c++){var d=document.id(f[c],!b.cash);if(b.ddup){if(g[d.uid]){continue;}g[d.uid]=true; }if(d){e.push(d);}}f=e;}return(b.cash)?$extend(f,this):f;}});elements.implement({filter:function(a,b){if(!a){return this;}return new...
...this;},haschild:function(l){l=document.id(l,true);if(!l){return false; }if(browser.engine.webkit&&browser.engine.version<420){return $a(this.getelementsbytagname(l.tagname)).contains(l);}return(this.contains)?(this!=l&&this.contains(l)):!!(this.comparedocumentposition(l)&16); },match:function(l){return(!l||(l==this)||(element.get(this,"tag")==l));}});native.implement([element,window,document],{addlistener:function(o,n){if(o=="unload"){var l=n,m=this; n=function(){m.removelistener("unload",n);l();};}else{h[this.uid]=this;}if(this.addeventlistener){this.addeventlistener(o,n,false);}else{this.attachevent("on"+o,n); }return this;},removelistener:function(m,l){if(this.removeeventlistener){this.removeeventlistener(m,l,false);}else{this.detachevent("on"+m,l);}return this; },retrieve:function(m,l){var...
... o=c(this.uid),n=o[m];if(l!=undefined&&n==undefined){n=o[m]=l;}return $pick(n);},store:function(m,l){var n=c(this.uid);n[m]=l; return this;},eliminate:function(l){var m=c(this.uid);delete m[l];return this;}});window.addlistener("unload",d);})();element.properties=new hash;element.properties.style={set:function(a){this.style.csstext=a; },get:function(){return this.style.csstext;},erase:function(){this.style.csstext="";}};element.properties.tag={get:function(){return this.tagname.tolowercase(); }};element.properties.html=(function(){var c=document.createelement("div");var a={table:[1,"<table>","</table>"],select:[1,"<select>","</select>"],tbody:[2,"<table><tbody>","</tbody></table>"],tr:[3,"<table><tbody><tr>","</tr></tbody></table>"]}; a.thead=a.tfoot=a.tbody;var b={set:function(){var e=array.f...
...g)){return this; }h[e].keys.push(g);var f=e,a=element.events.get(e),c=g,i=this;if(a){if(a.onadd){a.onadd.call(this,g);}if(a.condition){c=function(j){if(a.condition.call(this,j)){return g.call(this,j); }return true;};}f=a.base||f;}var d=function(){return g.call(i);};var b=element.nativeevents[f];if(b){if(b==2){d=function(j){j=new event(j,i.getwindow()); if(c.call(i,j)===false){j.stop();}};}this.addlistener(f,d);}h[e].values.push(d);return this;},removeevent:function(c,b){var a=this.retrieve("events");if(!a||!a[c]){return this; }var f=a[c].keys.indexof(b);if(f==-1){return this;}a[c].keys.splice(f,1);var e=a[c].values.splice(f,1)[0];var d=element.events.get(c);if(d){if(d.onremove){d.onremove.call(this,b); }c=d.base||c;}return(element.nativeevents[c])?this.removelistener(c,e):this;},addevents:func...
Mozilla Crypto FAQ - Archive of obsolete content
for the very latest information about psm, nss, and other crypto-related mozilla developments, see the mozilla.dev.tech.crypto newsgroup or the corresponding dev-tech-crypto mailing list.
... for more information on nss 3.1 see the nss 3.1 plan and the nss 3.1 build instructions; for more information on psm 1.3 see the psm 1.3 task list posted by david drinan.
...specific questions about licensing of the psm and nss source code should be directed to the netscape.public.mozilla.license newsgroup or the associated mozilla-license mailing list.
...munitions list to the commerce control list (ccl) of the ear.
Tamarin Build System Documentation - Archive of obsolete content
the smoke test list is constantly updated to contain the most recent failures, most frequent failures, and the newest testcases.
... the list of smoke tests are located in the tamarin-repository, test/run-smokes.txt, assume the start directory is test format is cd testdir; command to run test above the test should be a # comment describing why the test in the smokes, when test failed, possibly a bugzilla bug the tests can be run by following the above instructions for running buildbot scripts locally and executing the all/run-smoke-tes...
...ts.sh as a rule any test failure should be immediately added to the top of the smoke test list so the list is prioritized how to exclude tests from acceptance or mark them as known failures?
... the test/acceptance/testconfig.txt file contains a list of tests marked as expected failures or skipped with the configuration see the testconfig.txt for current instructions generally the format is comma separated list with regular expressions for test and configuration.
Event Handlers - Archive of obsolete content
a handler specifies what event it is listening for using the event attribute.
... the most basic handler specifies the event to listen for and an action to take when the handler fires.
...this attribute is a comma-separated list of modifier keys that must be down at the time the key or mouse event occurs in order for the handler to execute.
... examples of common keys in the list are shift and control.
Learn XPI Installer Scripting by Example - Archive of obsolete content
most installation scripts, including the one discussed here, take the following basic form (in pseudo-code and with links to the sections in which these installation steps are documented): initinstall(); if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } as you can see in the code listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the main installation block, is on lines 24 to 41; the registration part of the main installation block is on lines 42-58; and the execution at the end of the main block is on lines 59 to 71.
...in the example above, all of the contents of the "bin" directory in the archive are queued for installation, and the target of that installation (when the installation is actually begun with a call to performinstall at the end), is the communicatorfolder directory defined at line 22 as "program." "program" is one of a short list of keywords that can be used in place of full path names in methods such as addfile.
... "program" represents the directory where software itself is installed (e.g., c:\program files\ on win32 systems), as opposed to supporting directories like "components", "chrome", or "temporary" (see getfolder in the xpinstall api reference for a list of keywords).
...when you install new chrome, for example, like the browser.xpi install does, you need to alert the chrome registry to these changes, so that skins, user preferences, packaging lists, and localization bundles will all track the new software.
Deprecated and defunct markup - Archive of obsolete content
the list below may include a few elements which are actually in use, but at a deeper level in the code.
... elements <actions> (listed here by mistake or was it a container tag?) typo for <action> --neil 03 march 2011 <autorepeatbutton> (action occurs repeatedly on mouse hover--used to construct other elements; used in <arrowscrollbox> and large drop-down menus) so, not deprecated?
... --neil 03 march 2011 <bulletinboard> (made to support left/top styles, but <stack> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <listboxbody> (internal use only; part of xbl for <listbox>) <menubutton> (experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (former name for <tree>; <listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <scrollbar>) so, not deprecated, but internal use only?
...ment --neil 03 march 2011 <treecaption> (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 ...
Writing to Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...see file errors for a list of errors that might occur.
...however, here is an example of how they might be used: var stream = io.newoutputstream(file, "text nocreate append"); the flags are specified in a space separated list as the second argument to the newoutputstream method.
...for a list of supported character encodings, see supported character sets.
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirs...
... movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection ...
... related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:element.getelementsbytagnamens dom:element.getfeature fixme: brokenlink dom:element.getuserdata dom:element.hasattribute dom:element.hasattributens dom:element.hasattributes dom:element.haschildnodes dom:element.insertbefore dom:element.isequalnode dom:element.issamenode dom:element.issupported dom:element.lookupnamespaceuri dom:element.lookupprefix dom:element.normalize dom:element.removeattribute dom:element.removeattributenode dom:element.removeattrib...
...utens dom:element.removechild dom:element.removeeventlistener dom:element.replacechild dom:element.setattribute dom:element.setattributenode dom:element.setattributenodens dom:element.setattributens dom:element.setuserdata ...
ContextMenus - Archive of obsolete content
although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case.
... <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute.
... function checkcontextmenu(event) { if (event.target.localname == "textbox") event.preventdefault(); } function init() { var container = document.getelementbyid("container"); container.addeventlistener("contextmenu", checkcontextmenu, true); } the 'checkcontextmenu' function checks to see if the textbox was the target of the context menu and, if so, cancels the event using the preventdefault method.
...the event listener is attached using the addeventlistener method within the 'init' function.
OpenClose - Archive of obsolete content
if you do want to open a submenu, open the parent menu first, and then open the child menu in a popupshown event listener.
...for instance, let's say that a file menu has a submenu containing a list of recent files.
...attaching an event listener which listens for the popuphiding event can be used to remove any commands that were adding during the popupshowing event.
...here is an example mouse click event listener: function mouseclicked(event) { var panel = document.getelementbyid("some-panel"); panel.openpopup(null, "", event.clientx, event.clienty, false, false); } the openpopupatscreen method a second method, openpopupatscreen, may be used to open up a popup and place it at a specific screen coordinate.
Popup Guide - Archive of obsolete content
a brief overview of each type is listed here; more details for each type can be found by following the corresponding links.
...specifically, the first two types in the list below are menus.
...a menu is normally hidden, and when activated, a popup appears containing the list of commands.
...it displays items in a list, can display submenus, and provides keyboard navigation between the items.
Building Trees - Archive of obsolete content
rather than generate content for every row in the tree, the results are stored in a list inside the builder.
...here is an example (using an rdf source): <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/...
...for example: <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="photo" label="photo" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell src="rdf:*"/> </treerow> </treeitem> </treechildren> </template> </tree> t...
...untry" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <treechildren> <treeitem uri="?photo"> <treerow properties="?countrytitle"> <treecell src="?photo"/> </treerow> </treeitem> </treechildren> </action> </rule> you might use the following css to change the border around rows listing a particular country: treechildren::-moz-tree-row(netherlands) { border: green 1px solid; } the result of this example is a tree where one row has a green border around it.
Focus and Selection - Archive of obsolete content
you can also add event handlers dynamically using the dom function addeventlistener.
...example 3 : source view <window id="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init(){ addeventlistener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </script> <hbox> <label control="username" value="user name:"/> <textbox id="username"/> </hbox> <button label="hello"/> <checkbox label="remember this decision"/> <label id="focused" value="-no focu...
...we want to use a capturing event handler, so the addeventlistener method needs to be used.
...this means that when the fka preference is off, only textboxes and lists/trees are focusable with the keyboard, as well as from your code using focus().
Manifest Files - Archive of obsolete content
g/ xpcnativewrappers=yes content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes overlay chrome://global/content/viewsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://global/content/viewpartialsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul two packages are listed here, 'branding' and 'browser'.
...add the following to the file: content findfile file:///findfile/content/ skin findfile classic/1.0 file:///findfile/skin/ locale findfile en-us file:///findfile/locale/ create the new directories listed above.
...however, applications installed with a script will not be listed in the extension manager and there is no automated method to uninstall them.
...check if your application is listed.
More Button Features - Archive of obsolete content
example 1 : source view <button label="help" image="happy.png"/> button with css image another way to specify the image is by using the css list-style-image style property on the button.
...example 2 : source view <button id="find-button" label="find" style="list-style-image: url('happy.png')"/> in this case, the image 'happy.png' is displayed on the button.
...button with menupopup you can place a menupopup inside the button to cause a menu to drop down when the button is pressed, much like the menulist.
...note that selecting one of these menu items does not change the label on the button, unlike a menulist.
Styling a Tree - Archive of obsolete content
you can set the image with the list-style-image property.
... treechildren::-moz-tree-row(readonly) { border: 1px solid red; } treechildren::-moz-tree-row(readonly, unread) { background-color: rgb(80%, 80%, 80%); } default properties the properties list for tree elements contain a small number of default properties, which you can also use in a style sheet.
... prior to gecko 22 the last argument to each of these functions is a properties list which the view is expected to fill with a list of properties.
... getservice(components.interfaces.nsiatomservice); props.appendelement(aserv.getatom("makeitblue")); } } the properties list requires an array of atom objects, which can be thought of as constant strings.
Templates - Archive of obsolete content
<button class="rdf:http://www.example.com/rdf#class" uri="rdf:*" label="rdf:http://www.example.com/rdf#name" crop="rdf:http://www.example.com/rdf#crop"/> as you can see, you can dynamically generate lists of elements with the attributes provided by a separate datasource.
... more examples by adding these features to the container the template is in, which in this case is a box, and to the elements inside the template, we can generate various interesting lists of content from external data.
...this is a separator in the bookmark list.
... rule example the following example demonstrates the earlier example with two rules: example 4 : source <window id="example-window" title="bookmarks list" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <rule rdf:type="http://home.netscape.com/nc-rdf#bookmarkseparator"> <spacer uri="rdf:*" height="16"/> </rule> <rule> ...
Tree View Details - Archive of obsolete content
<window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> </window> we use a simple tree here with no data in the treechildren.
... function init() { document.getelementbyid("elementlist").view = treeview; } the custom tree view will need to implement a number of methods, of which the important ones will be examined individually.
...they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "lead"], liquids: ["mercury"], gases: ["helium", "nitrogen"] }, visibledata : [ ["solids", true, false], ["liquids", true, false], ["gases", true, false] ]...
...n(col, elem) {}, selectionchanged: function() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: function(idx, column, prop) {}, getcolumnproperties: function(column, element, prop) {}, }; function init() { document.getelementbyid("elementlist").view = treeview; } ]]></script> </window> next, we'll look in more detail at the tree box object.
Updating Commands - Archive of obsolete content
a command updater will listen for these situations and code can be executed which enables and disables commands as necessary.
...the events attribute is used to list the events that the command updater listens for.
...in the example above, the command updater listens for the focus event.
...command updaters have a number of events which they can respond to which are listed below.
Using Remote XUL - Archive of obsolete content
however, there is a whitelist that lets you specify sites that can still use remote xul.
... the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces.
...we add an id attribute to the iframe element so we can reference it from our function, and we add an oncommand event listener to the menubar element that calls the function every time the user clicks a button or selects a menu item.
... the oncommand event listener is a generic listener that fires whenever the user manipulates an element in some conclusive way.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale scri...
...e textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image list...
...s --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (moz...
...illa autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandset command broadcaster broadcasterset observes key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods attributes defined for all xul elements style classes event handlers deprecated/defunct markup ...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial listbox <label control='listid'><!--label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list label-->' /> <listbox rows="5" id='listid2'> <listcols> <listcol/> <listcol/> <listcol/> </listcols> <listhead> <listheader label="name" /> <listheader label="sex" /> <listhead...
...er label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws.
... items are read per line as in "pearl female gray" listitem see listbox menuitem see menulist and menubar menubar <menubar hidden="false"> <menu label="file" accesskey="f"> <menupopup> <menuitem label="new" accesskey="n" key="file-new-key"/> </menupopup> </menu> </menubar> menulist <label value="<!--label text-->" control="comboid" /> <menulist id="comboid"> <menupopup> <menuitem label="<!--option1-->" /> <menuitem label="<!--option2-->" selected="true" /> <menuitem label="<!--option3-->" /> </menupopup> </menulist> menupopup see menulist and menubar popup see popupset popupset be careful regarding keyboard access of popups...
... tree elements that do not expose anything to screen readers/have no discovered accessibility issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitter stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane prefwindow resizer richlistbox richlistitem resizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip treeseparator triple wizard wizardpage cases to r...
colorpicker - Archive of obsolete content
overview an onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
... value property gets and sets color attribute methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement bugs the onchange event only fires if attribute type is set to "button".
command - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...this means that, to execute these commands, key events won't be passed to content, and event listeners registered for them in content will not be executed.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related xul:list of commands ...
notification - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setatt...
promptBox - Archive of obsolete content
method overview nsidomelement appendprompt(args, onclosecallback); void removeprompt(nsidomelement aprompt); nodelist listprompts(nsidomelement aprompt); methods appendprompt() creates a new prompt, adding it to the tab.
... listprompts() returns a list of all the prompts on the tabbrowser.
... nodelist listprompts( nsidomelement aprompt ); parameters aprompt this parameter isn't used; i don't know why it's even there.
... return value a nodelist containing all of the prompt elements on the tabbrowser.
toolbarpalette - Archive of obsolete content
it is not displayed, but is used by the toolbar customization dialog to display the list of items.
... the children of the toolbarpalette should be the complete list of toolbarbuttons and toolbaritems that can be added to the toolbar.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbox - Archive of obsolete content
the external toolbars associated with a toolbox are listed in the array of elements provided by the toolbox's externaltoolbars property.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(),...
... hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendcustomtoolbar( name, currentset ) firefox only return type: element adds a custom toolbar to the toolbox with the given name.
... you can supply a comma-separated list of toolbar item ids as the second argument to add some items by default.
window - Archive of obsolete content
listen to the sizemodechange event dispatched to the dom window to get notified when the window state changes.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata see also: dom window object methods note the error message "xml parsing error: undefined entity...<window" can be caused by a missing or unreachable dtd file referenced in the xul file.
... <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <!-- icon from chrome --> <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png"/> <!-- from a remote site --> <html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/> since firefox 3.6 the above listed code does not work correctly - it produces the following message: "warning: xul box for box element contained an inline link child, forcing all its children to be wrapped in a block".
reftest opportunities files - Archive of obsolete content
for now, create a bug in the core product, testing component in the bugzilla, if you can point to a file in this list and can attach the html reference that can be used to compare the output.
...test/sec051103b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbaron.org/css/test/shortbox http://dbaron.org/css/test/shortbox2 http://dbaron.org/css/test/rootbox http://dbaron.org/css/test/listbox http://dbaron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortborder2 http://dbaron.org/css/test/sec0805 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec090205 http://dbaron.org/css/test...
.../htmlparser/tests/html/pre001.html parser/htmlparser/tests/html/param002.html parser/htmlparser/tests/html/param001.html parser/htmlparser/tests/html/option.html parser/htmlparser/tests/html/obj003.html parser/htmlparser/tests/html/obj002.html parser/htmlparser/tests/html/obj001.html parser/htmlparser/tests/html/nulltest.html parser/htmlparser/tests/html/newlines.html parser/htmlparser/tests/html/list003.html parser/htmlparser/tests/html/list002.html parser/htmlparser/tests/html/list001.html parser/htmlparser/tests/html/layer01.html parser/htmlparser/tests/html/layer003.html parser/htmlparser/tests/html/layer002.html parser/htmlparser/tests/html/layer001.html parser/htmlparser/tests/html/java.html parser/htmlparser/tests/html/insdel02.html parser/htmlparser/tests/html/insdel01.html parser/html...
...s/html/home01.html parser/htmlparser/tests/html/head03.html parser/htmlparser/tests/html/head02.html parser/htmlparser/tests/html/head01.html parser/htmlparser/tests/html/form002.html parser/htmlparser/tests/html/form001.html parser/htmlparser/tests/html/fieldset003.html parser/htmlparser/tests/html/fieldset002.html parser/htmlparser/tests/html/fieldset001.html parser/htmlparser/tests/html/entity_list.html parser/htmlparser/tests/html/entity_attrlist.html parser/htmlparser/tests/html/entity001.html parser/htmlparser/tests/html/endswithcr.html parser/htmlparser/tests/html/doc002.html parser/htmlparser/tests/html/doc001.html parser/htmlparser/tests/html/del011.html parser/htmlparser/tests/html/del010.html parser/htmlparser/tests/html/del009.html parser/htmlparser/tests/html/del008.html parser/ht...
NPN_RequestRead - Archive of obsolete content
syntax #include <npapi.h> nperror npn_requestread(npstream* stream, npbyterange* rangelist); parameters the function has the following parameters: stream stream of type np_seek from which to read bytes.
... rangelist range of bytes in the form of a linked list of npbyterange objects, each of which specifies a request for a range of bytes.
...for multiple requests, the function creates a linked list of npbyterange structures, each of which represents a separate request.
... if the plug-in requests multiple ranges (either through a list of npbyterange objects in a single call to npn_requestread(), or multiple calls to npn_requestread()), the browser can write individual ranges in any order, and with any number of npp_writeready() and npp_write() calls.
-ms-content-zoom-snap-points - Archive of obsolete content
snaplist( <percentage># ) specifies the position of individual snap-points as a comma-separated list of percentages, each of which represents a zoom factor.
... formal syntax snapinterval( <percentage>, <percentage> ) | snaplist( <percentage># ) examples this example demonstrates both types of values for the -ms-content-zoom-snap-points property.
...in the second selector, each snap-point is listed separately—100%, 200%, 300%, and so on.
...} .snappy2 { -ms-content-zoom-snap-points: snaplist(100%, 200%, 300%, 400%, 500%); ...
-ms-filter - Archive of obsolete content
syntax the -ms-filter property is specified as a string that contains a list of one or more items, separated by spaces, of the following types: filters transitions procedural surfaces formal syntax filter: <-ms-filter-function>+ -ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ] where <-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy> where <-ms-filter-function-progid> = 'progid:' [ <ident-token> ...
...'.' ]* [ <ident-token> | <function-token> <any-value> ')' ] <-ms-filter-function-legacy> = <ident-token> | <function-token> <any-value> ')' the <string> contains the list of filters, transitions, and procedural surfaces.
... alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter.
... initial value"" (the empty string)applies toall elementsinheritednocomputed valueas specifiedanimation typediscrete remarks the following table lists the most popular dx filters and their standards-based alternatives: dx filter standards-based alternative alpha opacity alphaimageloader <img> or background-image and related properties gradient background-image: linear-gradient() dropshadow text-shadow or box-shadow matrix transform, transform-origin in windows ...
-ms-scroll-snap-points-x - Archive of obsolete content
snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.
... formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snaplist( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-x property.
...in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on.
...w-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-x-min: 100%; -ms-scroll-limit-x-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
-ms-scroll-snap-points-y - Archive of obsolete content
snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.
... formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snaplist( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-y property.
...in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on.
...w-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0%, 100%); width: 480px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-y-min: 100%; -ms-scroll-limit-y-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-y: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
Descendants and Filters - Archive of obsolete content
that is, if there are multiple descendants of the requested type, an xml list is returned, instead of the normal element.
... the * selector returns all descendants in an xml list.
...consider var element = <dogs> <fido color="brown"/> <spike color="black"/> <killer color="brown"/> </dogs>; var list = element.*.(@color == "brown"); originally, elements.* returns a list with all 3 dogs in it.
...the filtering conditional therefore creates a list with just fido and killer as members.
Windows Media in Netscape - Archive of obsolete content
example 1: client-side detection scripts browser architecture supports: netscapeplugin windows media player installed: true windows media scriptable: false windows media version: pluginversion a complete source code listing showing how that detection was done can be found here (devedge-temp).
...the code listing below provides a mechanism to to this.
...here's an example of directly instantiating the control programmatically (without an object element) and scripting it: try { var player = null; if (window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if(window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { ; } if (player) { player.currentplaylist = player.mediacollection.getbyname('preludesteel'); player.controls.play(); } callbacks from within windows media player to web pages: script for event netscape 7.1 supports ie's <script for="activexcontrol" event="activexcontrolevent"> script elements.
... the min-object-usage.html sample shows a minimalist control manipulated by scripting and html buttons.
Game promotion - Game development
if you want to learn more about the etiquette of contacting the press you should definitely check out how to contact press - a great guide from pixel prospector, and the video game journaliser site curated by them for the list of sites to contact.
...you should also be realistic however — don't think this alone will skyrocket your downloads or visits, and be prepared to deal with bad reviews as well as good ones.
...this big list of youtubers is a great place to start.
... events if you've gone through all the options listed above you can still find new, creative ways to promote your game — events are another good example.
Building up a basic demo with PlayCanvas editor - Game development
after clicking the button you'll see a dropdown list containing a lot of various entities to choose from.
...click on the plus button in the assets tab, and click on the material option in the dropdown list that appears to create a new material.
...click on the root folder in the hierarchy panel (to make sure that the new shape appears in the root, and not as a child of the box) then click on the big add entity (plus) button and select cylinder from the dropdown list — it will add a new cylinder shape to the scene.
... 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.
Desktop gamepad controls - Game development
the list of supported devices is also quite extensive — most popular gamepads (e.g.
...first, we need an event listener to listen for the connection of the new device: window.addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen when the device is connected: we can also show the id of the device — in the case ...
... you could also create a helper function that would assign proper names to the listed buttons, so for example istead of checking out if gamepadbuttonpressedhandler(3) is pressed, you could do a more descriptive check: gamepadbuttonpressedhandler('dpad-right').
...the connect() and disconnect() functions are bound to the following events: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); they are fired when the gamepad is connected and disconnected respectively.
Mobile touch controls - Game development
pure javascript approach we could implement touch events on our own — setting up event listeners and assigning relevant functions to them would be quite straightforward: var el = document.getelementsbytagname("canvas")[0]; el.addeventlistener("touchstart", handlestart); el.addeventlistener("touchmove", handlemove); el.addeventlistener("touchend", handleend); el.addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events,...
...the function touchhandler will assign proper variables to the ship's position so that we can use it for both cases: when the player touches the screen but doesn't move it (touchstart), and when the finger is moved on the screen (touchmove): document.addeventlistener("touchstart", touchhandler); document.addeventlistener("touchmove", touchhandler); the touchhandler function looks like this: function touchhandler(e) { if(e.touches) { playerx = e.touches[0].pagex - canvas.offsetleft - playerwidth / 2; playery = e.touches[0].pagey - canvas.offsettop - playerheight / 2; output.innerhtml = "touch: "+ " x: " + playerx + ", y: " + p...
... input events instead of using the pointers directly it is also possible to listen for this.game.input events, like ondown, onup, ontap and onhold: this.game.input.ondown.add(itemtouched, this); function itemtouched(pointer) { // do something } the itemtouched() function will be executed when the ondown event is dispatched by touching the screen.
... implementation the easiest way to add an interactive object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is touched.
Unconventional controls - Game development
you can check them by printing the responses out in the console: window.addeventlistener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console.
...all that is needed is checking for key presses: window.addeventlistener("keydown", function(event) { switch(event.keycode) { case 8: { // pause the game break; } case 588: { // detonate bomb break; } // ...
...we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * t...
... an event listener for device proximity would look like this: window.addeventlistener('deviceproximity', function(event) { var min = event.min; var max = event.max; var proximity = event.value; }); the min and max values are the minimum and the maximum distances respectively between which the sensor can detect the exact proximity value.
2D maze game with device orientation - Game development
this.gametitle.anchor.set(0.5,0); this.startbutton = this.add.button(ball._width*0.5, 200, 'button-start', this.startgame, this, 2, 0, 1); this.startbutton.anchor.set(0.5,0); this.startbutton.input.usehandcursor = true; }, startgame: function() { this.game.state.start('howto'); } }; to create a new button there's add.button method with the following list of optional arguments: top absolute position on canvas in pixels.
...here’s the code from the create() function responsible for this: window.addeventlistener("deviceorientation", this.handleorientation, true); we’re adding an event listener to the "deviceorientation" event and binding the handleorientation function which looks like this: handleorientation: function(e) { var x = e.gamma; var y = e.beta; ball._player.body.velocity.x += x; ball._player.body.velocity.y += y; }, the more you tilt the device, the more force is appli...
...if you don't want to loop through the list of items again to add a property to every single one explicitly, you can use setall on a group to apply it to all the items in that group.
...the following line in the update() function adds a listener that fires when the ball gets to the hole.
Test your skills: CSS and JavaScript accessibility - Learn web development
css accessibility 1 in the first task you are presented with a list of links.
... we'd like you to assume that the existing ruleset with the a selector is supplied by some cms, and that you can't change it — instead, you need to create new rules to make the links look and behave like links, and for the user to be able to tell where they are in the list.
...we have a simple app that presents a list of animal names.
... clicking one of the animal names causes a further description of that animal to appear in a box below the list.
Test your skills: WAI-ARIA - Learn web development
wai-aria 1 in our first aria task, we present you with a section of non-semantic markup, which is obviously meant to be a list.
... assuming you are not able to change the elements used, how can you allow screenreader users to recognize this as a list?
...as before, we have a simple app that presents a list of animal names.
... clicking one of the animal names causes a further description of that animal to appear in a box below the list.
Typesetting a community school homepage - Learn web development
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.
... previous overview: styling text in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...
Web fonts - Learn web development
this takes one or more font family names, and the browser travels down the list until it finds a font it has available on the system it is running on: p { font-family: helvetica, "trebuchet ms", verdana, sans-serif; } this system works well, but traditionally web developers' font choices were limited.
... you then need to copy the css declarations listed into your css as appropriate, to apply the custom fonts to your html.
...multiple declarations can be listed, separated by commas — the browser will search through them and use the first one it can find that it understands — it is therefore best to put newer, better formats like woff2 earlier on, and older, not so good formats like ttf later on.
... previous overview: styling text next in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...
Example 2 - Learn web development
js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --...
...------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-l...
...cal-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { pa...
...dding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </u...
Test your skills: Other controls - Learn web development
inside the list, split the choices up into 2 subgroups — "mains" and "snacks".
... other controls 3 in our final task of this set, we start with much the same list of food choices.
... put the food choices into a list that can be associated with a form input.
... associate the list with your text input, so that when you type characters, any of the list options that match the character sequence are given in a dropdown list as autocomplete suggestions.
UI pseudo-classes - Learn web development
there are many others too, but the ones listed above are the most obviously useful.
...the ones listed above all have pretty good browser support, but of course, you should test your form implementations carefully to make sure they work for your target audience.
... now finally, we've used some javascript to toggle the disabling of the billing address fields: // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').addeventlistener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselectorall('#billing input[type="text"]'); // select the billing text labels let billinglabels = document.qu...
...this could be useful for adding an indicator to a list of options to remind the user what the defaults (or starting options) were, in case they want to reset their choices.
JavaScript basics - Learn web development
it's outside the scope of this article—as a light introduction to javascript—to present the details of how the core javascript language is different from the tools listed above.
...see expressions and operators for a complete list.
...these are code structures that listen for activity in the browser, and run code in response.
...if you enjoyed playing, and wish to go further, take advantage of the resources listed below.
Images in HTML - Learn web development
; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = ...
...'show solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = text...
...; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = ...
...tion'; } updatecode(); }); var htmlsolution = '<figure>\n <img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scr...
General asynchronous programming concepts - Learn web development
in our simple-sync.html example (see it running live), we add a click event listener to a button so that when clicked, it runs a time-consuming operation (calculates 10 million dates then logs the final one to the console) and then adds a paragraph to the dom: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { let mydate; for(let i = 0; i < 10000000; i++) { let date = new date(); mydate = date } console.log(mydate); let pe...
... note: the previous example is very unrealistic.
... in our second example, simple-sync-ui-blocking.html (see it live), we simulate something slightly more realistic that you might come across on a real page.
... function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.addeventlistener('click', expensiveoperation); alertbtn.addeventlistener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the alert does not appear until the circles have finished being rendered.
Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... we add a click event listener to it so that when the button is clicked: an alert() message appears.
... an example of an async callback is the second parameter of the addeventlistener() method (as we saw in action above): btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); the first parameter is the type of event to be listened for, and the second parameter is a callback function that is invoked when the event is fire...
... it worked :) if this confuses you, then consider the following smaller example: console.log("registering click handler"); button.addeventlistener('click', () => { console.log("get click"); }); console.log("all done"); this is very similar in behavior — the first and third console.log() messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button.
Third-party APIs - Learn web development
add the following line to your javascript, below the "// event listeners to control the functionality" comment.
... searchform.addeventlistener('submit', submitsearch); now add the submitsearch() and fetchresults() function definitions, below the previous line: function submitsearch(e) { pagenumber = 0; fetchresults(e); } function fetchresults(e) { // use preventdefault() to stop the form submitting e.preventdefault(); // assemble the full url url = baseurl + '?api-key=' + key + '&page=' + pagenumber + '&q=' + searchterm.value + '&fq=document_type:("article")'; if(startdate.value !== '') { url += '&begin_date=' + startdate.value; }; if(enddate.value !== '') { url += '&end_date=' + enddate.value; }; } submitsearch() sets the page number back to 0 to begin with, then...
... this allows us to write a simplistic pagination function easily.
... below the existing addeventlistener() call, add these two new ones, which cause the nextpage() and previouspage() functions to be invoked when the relevant buttons are clicked: nextbtn.addeventlistener('click', nextpage); previousbtn.addeventlistener('click', previouspage); below your previous addition, let's define the two functions — add this code now: function nextpage(e) { pagenumber++; fetchresults(e); }; function previouspage(e) { if(pagenumber > 0) { pagenumber--; } else { return; } fetchresults(e); }; the first function is simple — we increment the pagenumber variable, then run the fetchresults() function again to display the next page's results.
Website security - Learn web development
website security threats this section lists just a few of the most common website threats and how they are mitigated.
...for example, the following code is intended to list all users with a particular name (username) that has been supplied from an html form: statement = "select * from users where name = '" + username + "';" if the user specifies a real name, the statement will work as intended.
... for a comprehensive listing of website security threats see category: web security exploits (wikipedia) and category: attack (open web application security project).
... keep track of the most popular threats (the current owasp list is here) and address the most common vulnerabilities first.
Getting started with Ember - Learn web development
now type the following into your terminal to install ember-cli: npm install -g ember-cli this tool provides the ember program in your terminal, which is used to create, build, develop, test, and scaffold your application (run ember --help for a full list of commands and their options).
... finally, find app.css, located at app/styles/app.css, and paste in the following: :focus, .view label:focus, .todo-list li .toggle:focus + label, .toggle-all:focus + label { /* !important needed because todomvc styles deliberately disable the outline */ outline: #d86f95 solid !important; } this css overrides some of the styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Ember resources and troubleshooting - Learn web development
previous overview: client-side javascript frameworks next our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
... general troubleshooting, gotchas, and misconceptions this is nowhere near an extensive list, but it is a list of things that came up around the time of writing (latest update, may 2020).
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Framework main features - Learn web development
frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.
... in react, listening for the click event requires a special property, onclick.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with React - Learn web development
we don't write a path or extension when importing the react module — this is not a local file; instead, it is listed as a dependency in our package.json file.
...in the next article, we'll start building our first proper application — a todo list.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Introduction to automated testing - Learn web development
lowing test to the bottom of gulpfile.js: function css(cb) { return gulp.src('src/style.css') .pipe(csslint()) .pipe(csslint.formatter('compact')) .pipe(autoprefixer({ browsers: ['last 5 versions'], cascade: false })) .pipe(gulp.dest('build')); cb(); } here we grab our style.css file, run csslint on it (which outputs a list of any errors in your css to the terminal), then runs it through autoprefixer to add any prefixes needed to make nascent css features run in older browsers.
... in the next screen, type in the url of a page you want to test (use http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html, for example), then choose a browser/os combination you want to test by using the different buttons and lists.
...ntents: const saucelabs = require('saucelabs'); let myaccount = new saucelabs({ username: "your-sauce-username", password: "your-sauce-api-key" }); myaccount.getaccountdetails(function (err, res) { console.log(res); myaccount.getservicestatus(function (err, res) { // status of the sauce labs services console.log(res); myaccount.getjobs(function (err, jobs) { // get a list of all your jobs for (let k in jobs) { if ( jobs.hasownproperty( k )) { myaccount.showjob(jobs[k].id, function (err, res) { let str = res.id + ": status: " + res.status; if (res.error) { str += "\033[31m error: " + res.error + " \033[0m"; } console.log(str); }); } } }); }); }); y...
... the basics: manual tests the testingbot dashboard lists the various options you can choose from.
Implementing feature detection - Learn web development
the dive into html5 detecting html5 features page has a lot more useful feature detection tests besides the ones listed above, and you can generally find a feature detection test for most things by searching for "detect support for your-feature-here" in your favorite search engine.
... bear in mind though that some features, however, are known to be undetectable — see modernizr's list of undetectables.
...if you search through the class list, you'll also see others relating to flexbox, like: flexboxlegacy for the old flexbox spec (2009).
... note: you can find a list of what all the class names mean — see features detected by modernizr.
Handling common HTML and CSS problems - Learn web development
one service that can do this is the w3c markup validation service, which allows you to point to your code, and returns a list of errors: css has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the properties they are used on, you are not missing any curly braces, and so on.
... you should see a package called lint at the top of the list.
... once you've identified a list of potential problem technologies you will be using, it is a good idea to research what browsers they are supported in, and what related techniques are useful.
...you can choose which browsers you want to make sure you support using the notation outlined in autoprefixer options; also see browserslist queries, which this is based on, for more detail.
Setting up your own test automation environment - Learn web development
now if you go to your lambdatest automation dashboard, you'll see your test listed; from here you'll be able to see videos, screenshots, and other such data.
... now if you go back to the browserstack automation dashboard page, you'll see your test listed: if you click on the link for your test, you'll get to a new screen where you will be able to see a video recording of the test, and multiple detailed logs of information pertaining to it.
... now if you go to your sauce labs automated test dashboard page, you'll see your test listed; from here you'll be able to see videos, screenshots, and other such data.
...not a beta), and from the list choose a file starting with "selenium-server-standalone".
Accessibility/LiveRegionDevGuide
event types the table for web page mutation event types lists the two major event types associated with live regions, namely text-changed and object changed events.
... filtering events text changed events certain web page mutation events, such as adding to a list, trigger both an object changed and a text changed event.
...the following is a list of potential filtering techniques: the "event-from-input" object attribute can be used to filter events that were triggered by user action.
...(at-spi only) a global variable can be set in a document:load:complete event listener and reset in a object:state-changed:busy listener.
Information for users
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.
... newsgroup and mailing list we have two discussion lists, which can be read via a newsgroup reader, as a mailing list or via google groups.
... purpose newsgroup mailing list google group developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Mozilla’s UAAG evaluation report
there may be accessibility and customizability features not listed here.
...(p1) vg mozilla implements standard keyboard bindings there are a few missing pieces, such as support in xul comboboxes (menulist) for selecting items by typing alphanumeric keystrokes 7.3 operating environment conventions.
... css: text-indent: yes css: text-align: yes css: word-spacing: yes css: letter-spacing: yes css: font-stretch: ni css: margin: yes css: float: yes css: position: yes css: !important: yes css: system fonts: yes css: system colors: yes css: list types: yes css: outline: no css: :before, :after, content: p(oor) 8.2 conform to specifications.
...(p2) p dom inspector provides a type of outline view, although it is not intended for end users page info (ctrl+i) gives lists of links, media, forms/elements can use a user style sheet to implement an outline bug 127030 has been filed for an outline view.
Adding a new event
define event class name you need to add an event class name in eventclasslist.h.
...if all information of the event is stored by its internal event, c++ event handlers can access them with following code: ns_imethodimp aneventlistener::handleevent(nsidomevent* aevent) { internalfooevent* internalevent = aevent->getinternalnsevent()->asfooevent(); if (ns_warn_if(!internalevent)) { return ns_error_unexpected; } dosomethingwith(internalevent->mbar); aevent->preventdefault(); return ns_ok; } implement dom event class generate dom event implementation if it's possible if you're creating simple dom event ...
... register each event into eventnamelist.h if you're in case 3, you can skip this section.
... eventnamelist.h defines mapping between dom event name, internal event message, event handler attribute owner and internal event class.
Adding phishing protection data providers
phishing protection technology lets firefox help protect users by comparing the urls the user visits to a list of known scam sites, and presenting a warning to the user when they visit a site on the list.
... browser.safebrowsing.provider.idnum.lookupurl the url to use to look up urls to see if they're block-listed.
... browser.safebrowsing.provider.idnum.updateurl an url used to request an updated list of phishing sites.
... the server either provides a full list or incremental updates in order to bring the client's tables up to date.
Chrome registration
os=winnt os=darwin see os_target for a more complete list of os names.
.../classic/global/ override chrome://global/content/neterror.xhtml jar:embedder.jar!/global/content/neterror.xhtml content inspector jar:inspector.jar!/content/inspector/ instructions supported in bootstrapped add-ons the following instructions are supported in bootstrapped extensions: manifest content locale skin override debugging a chrome manifest file the chrome list extension shows all registered chrome.
...do not add to this list without contacting benjamin smedberg.
... note that this page is included from the pages listed below.
Command line options
you may list multiple urls, separated by spaces.
... the port argument is optional, and if it is omitted, the server will listen on port 6000.
... print the list of all available command line options.
... other options need to be documented -print-xpcom-dir -print-xpcom-dirlist -kill -killall -f -ftimeout -fwait -unsetdefaultmail gtk options -no-deelevate (running windows as administrator with launcher process enabled causes drag and drop errors - how to fix) references chrome: command line test documentation for command-line features (mozilla.org) toolkit/xre/nsapprunner.cpp browser/components/nsbrowsercontenthandler.js suite/browser/nsbrowsercontentha...
Creating Custom Events That Can Pass Data
what follows a list of the files you'll need to modify, as well as a discussion of each change.
...if you peruse nsdomclassinfoclasses.h you'll see of list of macros of the form domci_class(foo).
...mozilla/content/events/src/nseventdispatcher.cpp note: in the mozilla 1.8.x branch this code is actually in mozilla/content/events/src/nseventlistenermanager.cpp this is quite an important file since this holds the createevent method which acts as a factory method dom events.
...you will find that there is a bunch of code like: if (aeventtype.lowercaseequalsliteral("{somethingsomething}event")) return ns_{somethingsomething}event(adomevent, aprescontext, nsnull); you can either have a function like this or write the code straight in nseventlistenermanager::createevent() like this: if (aeventtype.lowercaseequalsliteral("nsmyevent")){ //note: the lowercase is important!
Error codes returned by Mozilla APIs
the following tables list errors that can occur when calling various mozilla apis.
... each error is listed by its name and an error code in parentheses.
... file errors the following table lists the errors that could occur when using files.
...t (0x804b0014) ns_error_ftp_login (0x804b0015) ns_error_ftp_cwd (0x804b0016) ns_error_ftp_pasv (0x804b0017) ns_error_ftp_pwd (0x804b0018) ns_error_not_resumable (0x804b0019) ns_error_invalid_content_encoding (0x804b001b) the content encoding of the source document was incorrect, for example returning a plain html document advertised as content-encoding: gzip ns_error_ftp_list (0x804b001c) ns_error_unknown_host (0x804b001e) ns_error_redirect_loop (0x804b001f) ns_error_entity_changed (0x804b0020) ns_error_unknown_proxy_host (0x804b002a) ns_error_unknown_socket_type (0x804b0033) ns_error_socket_create_failed (0x804b0034) ns_error_cache_key_not_found (0x804b003d) ns_error_cache_data_is_stream (0x804b003e) ns_error_cache_data_is_not_stre...
Index
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.
... 141 index firefox, index, mozilla found 168 pages: 142 linux compatibility matrix the following table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.
... 169 privacy privacy, security this document lists privacy-related documentation.
Firefox
contents experimental features in firefoxthis page lists features that are in nightly versions of firefox along with information on how to activate them, if necessary.firefox and the "about" protocolthere is a lot of useful information about firefox hidden away behind the about: url protocol.
... the most useful is the url about:config, which displays preferences and settings that can be inspected and changed.firefox ui considerations for web developersthere 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.
... linux compatibility matrixthe following table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.multiple firefox profilesa profile in firefox is the collection of settings, customizations, add-ons, and other personalizations that a user has made or installed into their copy of firefox.
...always keep in mind the side effects your changes may have, from blocking other tasks, to interfering with other user interface elements.privacythis document lists privacy-related documentation.security best practices for firefox front-end engineersthis article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.site identity buttonthe site identity button is a feature in firefox that gives users more information about the sites they visit.
Geckoview-Junit Tests
running tests locally if desired, connect an android device to your computer, or start an emulator, and make sure your device is visible to adb: $ adb devices list of devices attached emulator-5554 device if no device is found, 'mach geckoview-junit' will offer to start an emulator.
... to run just one test: mozilla-central$ mach geckoview-junit <class>#<test> to run more than one test: mozilla-central$ mach geckoview-junit <class1>#<test1> <class2>#<test2> mach geckoview-junit also supports running a list of tests that are specified in a text file.
... each test must be listed on its own line.
... for example: <class1>#<test1> <class2> <class3>#<test2> <class3>#<test3> to run the tests specified in the file: mozilla-central$ mach geckoview-junit --test-filters-file <path-to-filter-file> disabling one failing test there is no manifest listing the geckoview junit tests.
Implementing Download Resuming
if the download gets interrupted, necko will call the stream listener's onstoprequest method with a failure status.
...you may want to use nsisimplestreamlistener to simplify this task; to get progress notifications, you can implement nsiprogresseventsink and set an interface requester as the notificationcallbacks of the channel that gives out such an event sink (this needs to be done before calling asyncopen).
... detecting when a file changed if the file changed (that is, the entity id does not match), then necko will notify the stream listener with an ns_error_entity_changed error code.
...in such a case, the stream listener will get an ns_error_not_resumable status.
Integrated Authentication
mozilla currently supports a whitelist of sites that are permitted to engage in spnego authentication with the browser.
... this list is intended to be configured by an it department prior to distributing mozilla to end-users.
... the preferences are: pref("network.negotiate-auth.trusted-uris", site-list); pref("network.negotiate-auth.delegation-uris", site-list); pref("network.automatic-ntlm-auth.trusted-uris", site-list); where, site-list is a comma-separated list of url prefixes or domains of the form: site-list = "mydomain.com, https://myotherdomain.com" network.negotiate-auth.trusted-uris lists the sites that are permitted to engage in spnego authentication with the browser, and network.negotiate-auth.delegation-uris lists the sites for which the browser may delegate user authorization to the server.
... network.automatic-ntlm-auth.trusted-uris lists the trusted sites to use ntlm authentification.
Introduction to Layout in Mozilla
struction style resolution reflow painting setting up assume basic knowledge of embedding and network apis (doc shell, streams) content dll auto-registers a document loader factory (dlf) @mozilla.org/content-viewer-factory/view;1?type=text/html all mime types mapped to the same class, nscontentdlf nsdocshell receives inbound content via nsdsuricontentlistener invokes nsidlf::createinstance, passes mime type to dlf nscontentdlf creates a nshtmldocument object, invokes startdocumentload.
... creates a parser, returned as nsistreamlistener back to the docshell creates a content sink, which is linked to the parser and the document creates a documentviewerimpl object, which is returned as nsicontentviewer back to the docshell documentviewerimpl creates pres context and pres shell content model construction content arrives from network via nsistreamlistener::ondataavailable parser tokenizes & processes content; invokes methods on nsicontentsink with parser node objects some buffering and fixup occurs here opencontainer, closecontainer, addleaf content sink creates and attaches content nodes using nsicontent interface content sink maintains stack of “live” elements more buffering and...
...notifications passes these to the style set object, who in turn passes to the frame constructor frame constructor creates frames constructframeinternal recursively walks content tree, resolves style and creates frames either created by tag (<select>) or by display type (<p>) frame manager maintains mapping from content to frame style resolution compute stylistic information based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color, background, … inherit vs.
... reset style context object is a placeholder for partially computed stylistic data style data is computed lazily, as it is asked for reflow recursively compute geometry (x, y, w, h) for frames, views, and widgets given w & h constraints of “root frame” compute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame sizes child frame and view based on child’s metrics n.b.
AddonUpdateChecker
iew updateinfo getcompatibilityupdate(in updateinfo updates[], in string version, in boolean ignorecompatibility, in string appversion, in string platformversion) updateinfo getnewestcompatibleupdate(in updateinfo updates[], in string appversion, in string platformversion) void checkforupdates(in string id, in string type, in string updatekey, string url, in updatechecklistener listener) constants constant description error_timeout the update check timed out.
... methods getcompatibilityupdate() retrieves the best matching compatibility update for the application from a list of available update objects.
...y information for ignorecompatibility an optional parameter to get the first compatibility update that is compatible with any version of the application or toolkit appversion the version of the application or null to use the current version platformversion the version of the platform or null to use the current version getnewestcompatibleupdate() returns the newest available update from a list of update objects.
... void checkforupdates( in string id, in string type, in string updatekey, string url, in updatechecklistener listener ) parameters id the id of the add-on being checked for updates type the type of add-on being checked for updates updatekey an optional update key for the add-on url the url of the add-on's update manifest listener an observer to notify of results ...
WebChannel.jsm
method overview listen(function callback); stoplistening(); send(object message, eventtarget target); attributes id string webchannel id methods listen() registers the callback for messages on this channel.
... id - webchannel id of the incoming messages message - incoming message object sendercontext - incoming message context - this should be treated as an opaque object and passed to the .send() method stoplistening() resets the callback for messages on this channel.
... parameters message the message object that will be sent sendercontext the sendercontext parameter passed to the .listen method.
... examples setting up a webchannel between chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.addeventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatchevent(new window.customevent("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
Bootstrapping a new locale
refer to l10n:branches for the list of all branches.
...--> after the localization notes, you will see a list of <!entity> strings like the following: <!entity certerror.pagetitle "untrusted connection"> you should go through each entity, translating the value in the parameters (e.g.
... recommended order of localization for recommended order of localization, refer to the localization "phase list" which provides a very rough guide on where to start and in what order to proceed through translation.
... the localization phase lists (firefox 3.5: ff35.phaselist, firefox 3.6: ff36.phaselist).
Localizing with Mozilla Translator
this will remove obsolete strings and files from the internal database of mt, and will present you with a list of new and updated strings.
... migrating contents when the directory structure changes overall, if you are a ''good'' mt user and you do things like: checking "keep original" flags for strings not needing translation, instead of just leaving the translation empty struggling to get empty lists when running "untranslated strings" and "view fuzzy" if you are up to date in localization regularly running qa checks and trying to minimize them.
... if you are a ''not so good'' mt user, however, you can just create a new product (or several ones; see next recipe to know why), run file -> update on them (you'll get a list of all the strings) and then run edit -> autotranslate.
... mt could be changed for a mt product to have a list of ''root'' directories instead of just one, and maybe someday it will do, but it will probably won't happen before seamonkey 1.1.x dies (and seamonkey 2.0 finally conquers the web, if i may add).
Translation phase
below you'll find the list of all mozilla projects, their associated l10n tools, and links to tutorials outlining their workflows.
...see the list of the most critical strings for localizing in firefox, as well as a guide to understanding how they're organized.
...see the list of localized mozilla websites.
...then you may not be interested in using any of the tools listed above for your localizations.
Creating localizable web applications
listed below are good practices and recommendations that should be followed in order to make your content easily localizable.
...the url http://getpersonas.com/nature/popular/2 points to the second page of the listing of the popular personas in the "nature" category.
... you could easily use list($category, $tab, $page) = explode('/', $path); to get this information directly from the url.
...good: $tab_labels = array( "popular" => _('popular'), "recent" => _('recent'), "all" => _('all'), "my" => _('my'), "favorites" => _('favorites') ); list($category, $tab, $page) = explode('/', $path); if ($tab == 'popular') { // $tab is always english // ....
Mozilla projects on GitHub
it also lists some interesting github repositories containing mozilla project code.
...this is a great place to start looking for any projects not listed below.
... projects this listing covers the larger-scale and more important mozilla projects on github.
...look to github for the most complete list of mozilla projects on github.
Mozilla Style System Documentation
the pres context forwards these calls to its style set object (stylesetimpl, interface nsistyleset), which does the real work (and also maintains the lists of stylesheets and owns the rule tree).
...the structs are listed in, nsstylestruct.hand the many of the values are in nsstyleconsts.h.
...the output of css selector matching as defined by the css specification is an ordered list of rules, where the order determines which declarations override other declarations.
...in mozilla, nscssdeclaration objects correspond to css declaration-blocks.) due to the high similarity of these lists between elements in the content tree, mozilla stores the output of the selector matching process in a lexicographic tree, the rule tree.
BloatView
(should be zero!) interesting things to look for: are your classes in the list?
...not having your classes in the list is not ok.
... to do so, the xpcom_mem_log_classes environment variable should be set to the name of the class from the bloatview table: xpcom_mem_log_classes=myclass mach mochitest [options] multiple class names can be specified by setting xpcom_mem_log_classes to a comma-separated list of names: xpcom_mem_log_classes=myclass,myotherclass,deliberatelyleakedclass mach mochitest [options] test harness scripts typically accept a --setenv option for specifying environment variables, which may be more convenient in some cases: mach mochitest --setenv=xpcom_mem_log_classes=myclass [options] for getting allocation stacks in automation, you can add the appropriate --setenv options t...
... the most likely configs you'll want to modify are listed below: linux: unittests/linux_unittest.py mac: unittests/mac_unittest.py windows: unittests/win_unittest.py android: android/androidarm_4_3.py how to instrument your objects for bloatview first, if your object is an xpcom object and you use the ns_impl_addref and ns_impl_release (or a variation thereof) macro to implement your addref and release methods, then there is nothing you need do.
DMD
look at the "trigger" section below to see the full list of ways to get a dmd report once you have it activated.
... $ killall -34 firefox each one of these steps triggers all the memory reporters and then dmd analyzes the reports, printing commentary like this: dmd[5222] opened /tmp/dmd-1414556492-5222.json.gz for writing dmd[5222] dump 1 { dmd[5222] constructing the heap block list...
... within each section, records are listed from largest to smallest.
...the decision on whether to record is done probabilistically, and larger blocks are more likely to have an allocation stack trace recorded.
Profiling with the Firefox Profiler
thread timeline(s) thread/process timelines: below the tracing markers we have a list of profiled threads.
... if the default threads to be profiled are insufficient, you can choose which threads to profile using moz_profiler_startup_filters, which is a comma separated list.
...at present there is no central list of these thread names, but you can find them by grepping the source.
... display list dump the display list after each refresh with the texture data.
Profile Manager
to use profile manager with an application other than firefox, you need to launch it using the application's name as an argument, for example: profilemanager-bin seamonkey profiles and application versions profile manager manages two different lists: one of user profiles, and the other of application versions that can be used with the profiles.
... by default, this means it tracks a list of firefox applications that are installed on your system, and a list of profiles for use by firefox.
... additionally, you can manually add firefox versions by clicking the "manage firefox versions..." button: each firefox version in the list has the following properties: path, version, and default.
... other operations context-clicking any profile in the profile list will cause a popup menu to appear with the following commands: copy - makes a copy of the profile using a name and location of your choice.
PR_APPEND_LINK
appends an element to the end of a list.
... syntax #include <prclist.h> pr_append_link ( prclist *elemp, prclist *listp); parameters elemp a pointer to the element to be inserted.
... listp a pointer to the list.
... description pr_append_link adds the specified element to the end of the specified list.
PR_INSERT_LINK
inserts an element at the head of the list.
... syntax #include <prclist.h> pr_insert_link ( prclist *elemp, prclist *listp); parameters elemp a pointer to the element to be inserted.
... listp a pointer to the list.
... description pr_insert_link inserts the specified element at the head of the specified list.
NSS 3.12.4 release notes
currently nss 3.12.4 is in the "review pending" state in the fips 140-2 pre-validation list at http://csrc.nist.gov/groups/stm/cmvp/documents/140-1/140inprocess.pdf added crl distribution point support (see cert.h).
...bug 505858: nss_registershutdown can return without unlocking nssshutdownlist.lock bug 507041: invalid build options for vc6 bug 507228: coreconf.dep doesn't need to contain the nss version number bug 507422: crash [[@ port_freearena - lg_mksecretkeyrep] when port_newarena fails bug 507482: nss 3.12.3 (and later) doesn't build on aix 5.1 bug 507937: pwdecrypt program problems bug 508259: pk11mode crashed on linux2.4 bug 508467: libpkix ocsp checker should use date argument...
... documentation for a list of the primary nss documentation pages on developer.mozilla.org, see nss.
... furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.28.5 release notes
this is a patch release to update the list of root ca certificates.
... trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-256 fingerprint: 46:ed:c3:68:90:46:d5:3a:45:3f:b3:10:4a:b8:0d:ca:ec:65:8b:26:60:ea:16:29:dd:7e:86:79:90:64:87:16 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.tr, bel.tr, edu.tr, org.tr the version number of the updated root ca list has been set to 2.14.
... (the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.28.5 bug 1350859 - march 2017 batch of root ca changes.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.34 release notes
new in nss 3.34 new functionality when listing an nss database.
... using certutil -l, and the database hasn't yet been initialized with any non-empty or empty password, the text "database needs user init" will be included in the listing.
... new functions bugs fixed in nss 3.34 this bugzilla query returns all the bugs fixed in nss 3.34: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.34 compatibility nss 3.34 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.35 release notes
experimental apis and functionality the functionality and the apis listed in this section are experimental.
... new experimental apis below is a list of experimental functions, which might not be available in future releases of nss.
... bugs fixed in nss 3.35 this bugzilla query returns all the bugs fixed in nss 3.35: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.35 compatibility nss 3.35 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS tools : cmsutil
to run cmsutil, type the command cmsutil option [arguments] where option and arguments are combinations of the options and arguments listed in the following section.
...specify list of recipients (email addresses) for an encrypted or enveloped message.
... for certificates-only message, list of certificates to send.
...mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat.
sslerr.html
(some _alert codes are listed in other blocks.) ssl_error_handshake_unexpected_alert -12229 "ssl peer was not expecting a handshake message it received." ssl_error_decompression_failure_alert -12228 "ssl peer was unable to successfully decompress an ssl record it received." ssl_error_handshake_failure_alert -12227 "ssl peer was unable to negotiate an acceptable set of s...
... sec_error_krl_not_yet_valid -8079 "the key revocation list for this certificate is not yet valid." sec_error_crl_not_yet_valid -8078 "the certificate revocation list for this certificate is not yet valid." sec_error_unknown_cert -8077 "the requested certificate could not be found." sec_error_unknown_signer -8076 "the signer's certificate could not be found." sec_error_cert_bad_access_location -8075...
... sec_error_unsupported_ec_point_form -8050 "unsupported elliptic curve point form." sec_error_unrecognized_oid -8049 "unrecognized object identifier." sec_error_ocsp_invalid_signing_cert -8048 "invalid ocsp signing certificate in ocsp response." sec_error_revoked_certificate_crl -8047 "certificate is revoked in issuer's certificate revocation list." sec_error_revoked_certificate_ocsp -8046 "issuer's ocsp responder reports certificate is revoked." sec_error_crl_invalid_version -8045 "issuer's certificate revocation list has an unknown version number." sec_error_crl_v1_critical_extension -8044 "issuer's v1 certificate revocation list has a critical extension." sec_error_crl_unknown_critic...
...al_extension -8043 "issuer's v2 certificate revocation list has an unknown critical extension." sec_error_unknown_object_type -8042 "unknown object type specified." sec_error_incompatible_pkcs11 -8041 "pkcs #11 driver violates the spec in an incompatible way." sec_error_no_event -8040 "no new slot event is available at this time." sec_error_crl_already_exists -8039 "crl already exists." sec_error_not_initialized -8038 "nss is not initialized." sec_error_token_not_logged_in -8037 "the operation failed because the pkcs#11 token is not logged in." sec_error_ocsp_responder_cert_invalid -8036 "the configured ocsp responder's certificate is invalid." sec_error_ocsp_bad_signature ...
Utility functions
the public functions listed here perform initialization tasks and other services.
... if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference.
... mxr 3.9.3 and later secmod_candeleteinternalmodule mxr 3.5 and later secmod_createmodule mxr 3.4 and later secmod_deletemodule mxr 3.4 and later secmod_findmodule mxr 3.4 and later secmod_findslot mxr 3.4 and later secmod_freemodulespeclist mxr 3.4 and later secmod_getdbmodulelist mxr 3.9 and later secmod_getdeadmodulelist mxr 3.9 and later secmod_getmodulespeclist mxr 3.4 and later secmod_hasremovableslots mxr 3.9.3 and later secmod_ismodulepresent mxr 3.2 and later ...
....4 and later secmod_lookupslot mxr 3.2 and later secmod_pubcipherflagstointernal mxr 3.4 and later secmod_pubmechflagstointernal mxr 3.4 and later secmod_unloadusermodule mxr 3.4 and later secmod_updatemodule mxr 3.4 and later secmod_updateslotlist mxr 3.9.3 and later secmod_waitforanytokenevent mxr 3.9.3 and later secoid_addentry mxr 3.10 and later secoid_comparealgorithmid mxr 3.2 and later secoid_copyalgorithmid mxr 3.2 and later secoid_destroyalgorithmid mxr 3.2 and later ...
NSS Tools pk12util
the tool allows you to import certificates and keys from pkcs #12 files into nss or export them and also list certificates and keys in such files.
...--cert_key_len certkeylen] [common-options] or pk12util -l p12file [-h tokenname] [-r] [common-options] where [common-options] = [-d dir] [-p dbprefix] [-k slotpasswordfile | -k slotpassword] [-w p12filepasswordfile | -w p12filepassword] syntax to run the pkcs #12 tool, type ther command pk12util option [arguments] where option and arguments are combinations of the options and arguments listed in the following section.
... -l p12file list certificate and private key from from the p12file file.
...a list of ciphers follows.
NSS tools : cmsutil
MozillaProjectsNSStoolscmsutil
to run cmsutil, type the command cmsutil option [arguments] where option and arguments are combinations of the options and arguments listed in the following section.
... specify list of recipients (email addresses) for an encrypted or enveloped message.
... for certificates-only message, list of certificates to send.
... mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat.
Necko Architecture
receiving data & nsistreamlistener you can read or write, from or to a channel using either the synchronous api, or the asynchronous api.
... if you want to move data asynchronously you need to be able to receive callbacks using an implementation of nsistreamlistener.
... an nsistreamlistener is told when the uri transaction has "started," when data is available (in the case of reading data), and when it has "stopped." it is up to the nsistreamlistener implementation to decide what to do with these various notifications.
... the ondataavailable() notification provides a chance for the nsistreamlistener to actually retrieve data that the channel has acquired.
Scripting Java
if we just view the method object by itself we can see the various overloaded forms of the method: js> f.listfiles function listfiles() {/* java.io.file[] listfiles() java.io.file[] listfiles(java.io.filenamefilter) java.io.file[] listfiles(java.io.filefilter) */} this output shows that the file class defines three overloaded methods listfiles: one that takes no arguments, another with a filenamefilter argument, and a third with a filefilter argument.
...using the javascript for..in construct, we can print out all these values: js> for (i in f) { print(i) } exists parentfile mkdir tostring wait [44 others] note that not only the methods of the file class are listed, but also the methods inherited from the base class java.lang.object (like wait).
... javascript functions as java interfaces often we need to implement an interface with only one method, like in the previous runnable example or when providing various event listener implementations.
...function can use it to distinguish on behalf of which method it was called: js> var frame = new packages.javax.swing.jframe(); js> frame.addwindowlistener(function(event, methodname) { if (methodname == "windowclosing") { print("calling system.exit()..."); java.lang.system.exit(0); } }); js> frame.setsize(100, 100); js> frame.visible = true; true js> calling system.exit()...
Garbage collection
the chunkinfo contains a list of unallocated arenas, starting at chunkinfo::freearenashead and linked through arenaheader::next.
... every arena maintains a list of free spans, starting at arenaheader::firstfreespanoffets.
...instead, we append them to a list.
... after marking everything live we scan through the list to null out references to garbage.
JS_ConvertArgumentsVA
converts a series of js values, passed in a va_list, to their corresponding jsapi types.
... syntax bool js_convertargumentsva(jscontext *cx, const js::callargs &args, const char *format, va_list ap); bool js_convertargumentsva(jscontext *cx, unsigned argc, jsval *argv, const char *format, va_list ap); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... ap va_list the list of pointers into which to store the converted types.
...the type va_list is a standard feature of the c programming language.
JS_PushArguments
syntax jsval * js_pusharguments(jscontext *cx, void **markp, const char *format, ...); jsval * js_pushargumentsva(jscontext *cx, void **markp, const char *format, va_list ap); name type description cx jscontext * the context in which to perform any necessary conversions.
... format const char * null-terminated string holding a list of format types to convert the following arguments to.
... ap va_list (in js_pushargumentsva) the list of arguments to be converted to jsvals.
...the type va_list is a standard feature of the c programming language.
Secure Development Guidelines
buffer bounds validations (bbv) thou shalt check the array bounds of all strings (indeed, all arrays), for surely where thou typest "foo" someone someday shall type "supercalifragilisticexpialidocious".
... most memory allocators use a linked list or binary tree bbv: off-by-one the array index starts at 0 not at 1 char array[1024]; array[0] = first element!
... unlock(locka); unlock(lockb); } writing secure code: good coding practices banned api list badly designed apis can often lead to vulnerabilities it’s too easy to use the api inappropriately for example, consider the libc string handling apis strcpy() performs no bounds checking strncpy() doesn’t always 0-terminate strncat() length parameter is very confusing banned api list examples of incorrect strncat usage buffer overflow strncat(buffer, stri...
...ng, sizeof(buffer)); off-by-one strncat(buffer, string, sizeof(buffer) – strlen(string)); correct usage strncat(buffer, string, sizeof(buffer) – strlen(string) – 1)); banned api list: recommendations create wrappers or replacements for standard functions with a bad design libc function name reason to ban it strcpy, strcat, gets, sprintf, vsprintf no bounds checking.
Gecko states
« at apis support page introduction below you will find a list of supported states by gecko.
... states list state_unavailable the object is unavailable, i.e.
...for example, a list box can have both state_invisible and state_offscreen set.
... in this case, the client application can communicate all items in the list to users.
Manipulating bookmarks using Places
specifying default_index as the index at which to insert the new folder places it at the end of the list.
... var parentfolderid = bmsvc.getfolderidforitem(newbkmkid); observing changes to bookmarks and tags to set up an observer to listen for changes related to bookmarks, you will need to create an nsinavbookmarkobserver object and use the nsinavbookmarksservice.addobserver() and nsinavbookmarksservice.removeobserver() methods.
... // an nsinavbookmarkobserver var myext_bookmarklistener = { onbeginupdatebatch: function() {}, onendupdatebatch: function() {}, onitemadded: function(aitemid, afolder, aindex) {}, onitemremoved: function(aitemid, afolder, aindex) {}, onitemchanged: function(abookmarkid, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: f...
...unction() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
Places utilities for JavaScript
string apostdata); boolean showaddlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker); boolean showminimaladdlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashowpicker); boolean showminimaladdmultibookmarkui(array nsiuri aurilist); boolean showbookmarkproperties(int aid); boolean showfolderproperties(int aid); boolean showaddfolderui(string atitle, int adefaultinsertionpoint, boolean ashowpicker); array object getannotationsforuri(nsiuri auri); array object getannotationsforitem(int aitemid); void setannotationsforuri(nsiuri auri, object aannos); void setannot...
...the all take in the same argument and return a boolean true or false, so i'm just going to list them all in one lump: boolean nodeisfolder(anode) determines whether or not a resultnode is a bookmark folder or not.
... showminimaladdmultibookmarkui() show an "add bookmarks" dialog to allow the adding of a folder full of bookmarks corresponding to the objects in the urilist.
... showaddmultibookmarkui(aurilist) parameters aurilist list of nsiuri objects representing the locations to be bookmarked.
An Overview of XPCOM
rts component software development, it also provides much of the functionality that a development platform provides, such as: component management file abstraction object message passing memory management we will discuss the above items in detail in the coming chapters, but for now, it can be useful to think of xpcom as a platform for component development, in which features such as those listed above are provided.
...in this "semi-encapsulated" situation, the only part of the class that is exposed is a well-defined list of callable methods (i.e., the interface).
...in xpcom, all interface methods should return an nsresult error value (see the xpcom api reference for a listing of these error codes).
...the tutorial will show each of these component and services in use, and the xpcom api reference has a complete interface listing of these areas.
Creating the Component Code
this is the object that contains the business logic, that implements functionality such as starting a network download, implementing interfaces that listen to the download progress, or providing a new content type handler.
... in weblock, this is the part that brings together various gecko services and prevents users from leaving the list of acceptable domains.
...the source we're referring to is listed in its entirety at the end of this chapter (see weblock1.cpp).
...a listing of this and other global xpcom functions is in the xpcom api reference.
Preface
the top of each chapter provides a list of the major topics covered.
... organization of the tutorial the following list provides an overview of the steps that we will take to build an xpcom component called weblock, which provides site blocking functionality to gecko-based browsers.
... conventions the formatting conventions listed below are used to designate specific types of information in the book and make things easier to scan.
... format description bold component names appear in bold in the text monospace code listings, interface names and members of interfaces (e.g., createinstance()) appear in monospaced font.
Setting up the Gecko SDK
the file mozilla-config.h lists all of the defines used in the sdk.
... next run the regxpcom to registister the component in firefox (this writes to the complist.dat file in your profile) regxpcom -x "c:\program files (x86)\mozilla firefox\" -c "c:\users\<user>\appdata\roaming\mozilla\firefox\profiles\<profile>\compreg.dat" -d "c:\users\<user>\appdata\roaming\mozilla\firefox\profiles\<profile>\xpti.dat" "c:\users\<user>\appdata\roaming\mozilla\firefox\profiles\<profile>\extensions\bob@george.com\cspecialthing.dll" now if you start up firefox using that...
... below is a listing for a makefile that configures your compiler to work with the sdk.
...for a listing of the commands that appear in this listing, see the make manual.
Mozilla internal string guide
the major string classes the list below describes the main base classes.
... the following is a list of the most common concrete classes.
...the constructor takes parameters which allows it to construct a 8-bit string from a printf-style format string and parameter list.
... setcapacity() is appropriate to use before a sequence of multiple operations from the following list (without operations that are not on the list between the setcapacity() call and operations from the list): append() appendascii() appendliteral() appendprintf() appendint() appendfloat() lossyappendutf16toascii() appendasciitoutf16() do not call setcapacity() if the subsequent operations on the string do not meet the criteria above.
IAccessibleTable
lists, trees, and tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed.
...selectedchildren() returns a list of cell indexes currently selected (0 based).
...selectedcolumns() returns a list of column indexes currently selected (0 based).
...selectedrows() returns a list of row indexes currently selected (0 based).
IAccessibleTable2
lists, trees, and tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed.
...selectedcells() returns a list of accessibles currently selected.
...selectedcolumns() returns a list of column indexes currently selected (0 based).
...selectedrows() returns a list of row indexes currently selected (0 based).
nsIAccessibleRetrieval
nsiaccessnode getcachedaccessnode(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsidomnode getrelevantcontentnodefor(in nsidomnode anode); astring getstringeventtype(in unsigned long aeventtype); astring getstringrelationtype(in unsigned long arelationtype); astring getstringrole(in unsigned long arole); nsidomdomstringlist getstringstates(in unsigned long astates, in unsigned long aextrastates); methods getaccessiblefor() return an nsiaccessible for a dom node in pres shell 0.
...getstringstates() returns a list which contains accessible states as strings.
... nsidomdomstringlist getstringstates( in unsigned long astates, in unsigned long aextrastates ); parameters astates accessible states.
... return value a list which contains accessible states as strings.
nsIAnnotationService
getpageswithannotation() this method returns a list of all uris having a given annotation.
... results returns the list of all uris.
... getitemswithannotation() this method returns a list of all items having a given annotation.
... results returns the list of all items.
nsIAppShell
hod overview void create(inout int argc, inout string argv); obsolete since gecko 1.9 void dispatchnativeevent(in prbool arealevent, in voidptr aevent); obsolete since gecko 1.9 void exit(); void favorperformancehint(in boolean favorperfoverstarvation, in unsigned long starvationdelay); void getnativeevent(in prboolref arealevent, in voidptrref aevent); obsolete since gecko 1.9 void listentoeventqueue(in nsieventqueue aqueue, in prbool alisten); obsolete since gecko 1.9 void resumenative(); void run(); void runinstablestate(in nsirunnable arunnable); void spindown(); obsolete since gecko 1.9 void spinup(); obsolete since gecko 1.9 void suspendnative(); attributes attribute type description eventloopnestinglevel unsigned long the current event loop nesting l...
... listentoeventqueue() obsolete since gecko 1.9 (firefox 3) an event queue has been created or destroyed.
...void listentoeventqueue( in nsieventqueue aqueue, in prbool alisten ); parameters aqueue the queue in question.
... alisten pr_true for a new queue wanting hooking up.
nsIAutoCompleteSearch
results can be sent to the listener either synchronously or asynchronously, depending on the implementation.
... method overview void startsearch(in astring searchstring, in astring searchparam, in nsiautocompleteresult previousresult, in nsiautocompleteobserver listener); void stopsearch(); methods startsearch() search for a given string and notify a listener (either synchronously or asynchronously) of the result.
... void startsearch( in astring searchstring, in astring searchparam, in nsiautocompleteresult previousresult, in nsiautocompleteobserver listener ); parameters searchstring the string to search for.
...listener an nsiautocompleteobserver listener to notify when the search is complete.
nsICachingChannel
an error of ns_error_document_not_cached will be sent to the listener's onstoprequest if network io is necessary to complete the request.
...an error of ns_error_document_not_cached will be sent to the listener's onstoprequest in this case.
...a stream listener can check isfromcache() to determine if the asyncopen will actually result in data being streamed.
...the listener will only see onstartrequest followed by onstoprequest.
nsIClipboard
t changed in gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.27) method overview void emptyclipboard(in long awhichclipboard); void forcedatatoclipboard(in long awhichclipboard); obsolete since gecko 1.8 void getdata(in nsitransferable atransferable, in long awhichclipboard); boolean hasdatamatchingflavors([array, size_is(alength)] in string aflavorlist, in unsigned long alength, in long awhichclipboard); void setdata(in nsitransferable atransferable, in nsiclipboardowner anowner, in long awhichclipboard); boolean supportsselectionclipboard(); boolean supportsfindclipboard(); constants most clipboard operations in firefox use kglobalclipboard, which is the one also used by the typical control-c/control-v keyboa...
...all it does is check if there is data on the clipboard matching any of the flavors in the given list.
... boolean hasdatamatchingflavors( [array, size_is(alength)] in string aflavorlist, in unsigned long alength, in long awhichclipboard ); parameters aflavorlist an array of ascii strings.
... alength the length of the aflavorlist.
nsICollection
xpcom/ds/nsicollection.idlscriptable this interface represents a list of nsisupports items.
...void appendelement( in nsisupports item ) parameters item nsisupports item to be appended to the list.
...return value number of items in the list.
...void removeelement( in nsisupports item ); parameters item nsisupports item to be removed from the list.
nsICookieManager
an optional interface for accessing or removing the cookies that are in the cookie list.
...nt, but should generally be accessed via services.cookies method overview void remove(in autf8string ahost, in acstring aname, in autf8string apath, in boolean ablocked, in jsval aoriginattributes); void removeall(); attributes attribute type description enumerator nsisimpleenumerator called to enumerate through each cookie in the cookie list.
... methods remove() this method is called to remove an individual cookie from the cookie list, specified by host, name, and path.
... removeall() this method is called to remove all cookies from the cookie list.
nsICookieService
var cookiesvc = components.classes["@mozilla.org/cookieservice;1"] .getservice(components.interfaces.nsicookieservice); notifications this service broadcasts the following notifications when the cookie list is changed, or a cookie is rejected: topic subject data cookie-changed broadcast whenever the cookie list changes in some way.
...this typically happens because they have either expired or because the cookie list has grown too large.
... cleared the entire cookie list was cleared.
... reload the entire cookie list was changed, and the observer should reload the list of cookies.
nsIDOMEvent
currenttarget nsidomeventtarget used to indicate the eventtarget whose eventlisteners are currently being processed.
... void serialize( in ipcmessageptr amsg, in boolean aserializeinterfacetype ); parameters amsg aserializeinterfacetype native code only!settarget void settarget( in nsidomeventtarget atarget ); parameters atarget native code only!settrusted void settrusted( in boolean atrusted ); parameters atrusted stopimmediatepropagation() prevents other event listeners from being triggered and, unlike stoppropagation() its effect is immediate.
...if this method is called by any eventlistener the event will cease propagating through the tree.
... the event will complete dispatch to all listeners on the current eventtarget before event flow stops.
nsIDocShell
parenturicontentlistener nsiuricontentlistener uri content listener parent.
... beginrestore() begin firing webprogresslistener notifications for restoring a page presentation.
...finishrestore() finish firing webprogresslistener notifications and dom events for restoring a page presentation.
...this method is identical to loaduri() except that its parameter list is broken out instead of being packaged inside of an nsidocshellloadinfo object.
nsIFeedProcessor
1.0 66 introduced gecko 1.8.1 inherits from: nsistreamlistener last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) implemented by: @mozilla.org/feed-processor;1.
...g/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); method overview void parseasync(in nsirequestobserver requestobserver, in nsiuri uri); void parsefromstream(in nsiinputstream stream, in nsiuri uri); void parsefromstring(in astring str, in nsiuri uri); attributes attribute type description listener nsifeedresultlistener the feed result listener that will respond to feed events.
...the caller must then call the processor's nsistreamlistener methods to drive the parsing process.
... see also nsistreamlistener nsifeedresultlistener interwiki link ...
nsIFrameScriptLoader
if you want a frame script to do something whenever a new document is loaded, you can listen for the document-element-inserted notification.
... removedelayedframescript() removes aurl from the list of scripts which support delayed load.
...the return value is a list of pairs [<url>, <wasloadedinglobalscope>].
... returns list of the delayed scripts.
nsIMessageBroadcaster
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "broadcasters" don't have a single "other side" that they send messages to, but rather a set of subordinate message managers.
...methods void broadcastasyncmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects); nsimessagelistenermanager getchildat(in unsigned long aindex); broadcastasyncmessage() like sendasyncmessage(), but also broadcasts this message to all "child" message managers of this message manager.
... see nsimessagelistener::receivemessage() for the format of the data delivered to listeners.
... returns nsimessagelistenermanager: the message manager at the given index.
nsIMsgSearchSession
alse; searchsession.appendterm(searchterm); searchsession.search(null); inherits from: nsisupports method overview void addsearchterm(in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, in boolean booleanand, in string arbitraryheader); nsimsgsearchterm createterm(); void appendterm(in nsimsgsearchterm term); void registerlistener(in nsimsgsearchnotify listener); void unregisterlistener(in nsimsgsearchnotify listener); void getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); long countsearchscopes(); void getnthsearchscope(in long which,out nsmsgsearchscopevalue scopeid, out nsimsgfolder folder); void a...
... createterm() nsimsgsearchterm createterm(); appendterm() void appendterm(in nsimsgsearchterm term); parameters term registerlistener() adds a listener to the search session.
... void registerlistener(in nsimsgsearchnotify listener); parameters listener unregisterlistener() removes a listener from the search session.
... void unregisterlistener (in nsimsgsearchnotify listener); parameters listener getnthsearchterm() void getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); parameters whichterm attrib op value note: this parameter should be an out.
nsINavHistoryContainerResultNode
childrenreadonly boolean false if the node's list of children can be modified (by adding or removing children, or rearranging them), or true if the user interface should not allow the list of children to be altered.
...for queries and bookmark folders, however, being open means they must keep themselves up-to-date by listening for updates and re-querying as needed.
... nsinavhistoryresultnode getchild( in unsigned long aindex ); parameters aindex the index into the child list of the node to fetch.
... return value the index of the specified node into the list of immediate children of the container.
nsIPrincipal
void getpreferences(out string prefbranch, out string id, out string subjectname, out string grantedlist, out string deniedlist, out boolean istrusted); boolean iscapabilityenabled(in string capability, in voidptr annotation); native code only!
...void getpreferences( out string prefbranch, out string id, out string subjectname, out string grantedlist, out string deniedlist, out boolean istrusted ); parameters prefbranch on return, contains the preference branch to which the preferences pertain.
... grantedlist space-delineated list of capabilities which are explicitly granted by a preference.
... deniedlist space-delineated list of capabilities which are explicitly denied by a preference.
nsISHEntry
refreshurilist nsisupportsarray saved refresh uri list for the content viewer.
...append a child shell to the end of our list.
... return value clearchildshells() clear the child shell list.
...if either contentviewer or windowstate are null, then all of the following members are cleared/reset: contentviewer, sticky, windowstate, viewerbounds, childshells, refreshurilist.
nsISelectionPrivate
method overview void addselectionlistener(in nsiselectionlistener newlistener); void endbatchchanges(); void getcachedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); 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!
... constants constant value description endofprecedingline 0 startofnextline 1 tableselection_none 0 tableselection_cell 1 tableselection_row 2 tableselection_column 3 tableselection_table 4 tableselection_allcells 5 methods addselectionlistener() void addselectionlistener( in nsiselectionlistener newlistener ); parameters newlistener endbatchchanges() will resume user interface updates after a previous call to startbatchchanges().
... removeselectionlistener() void removeselectionlistener( in nsiselectionlistener listenertoremove ); parameters listenertoremove scrollintoview() scrolls a region of the selection, so that it is visible in the scrolled view.
nsISmsDatabaseService
ssage(in domstring asender, in domstring abody, in unsigned long long adate); long savesentmessage(in domstring areceiver, in domstring abody, in unsigned long long adate); void getmessage(in long messageid, in long requestid, [optional] in unsigned long long processid); void deletemessage(in long messageid, in long requestid, [optional] in unsigned long long processid); void createmessagelist(in nsidommozsmsfilter filter, in boolean reverse, in long requestid, [optional] in unsigned long long processid); void getnextmessageinlist(in long listid, in long requestid, [optional] in unsigned long long processid); void clearmessagelist(in long listid); void markmessageread(in long messageid, in boolean value, in long requestid, [optional] in unsigned long long processid) methods s...
... createmessagelist() void createmessagelist( in nsidommozsmsfilter filter, in boolean reverse, in long requestid, [optional] in unsigned long long processid ); parameters filter a smsfilter to filter out sms messages from a list.
... getnextmessageinlist() void getnextmessageinlist( in long listid, in long requestid, [optional] in unsigned long long processid ); parameters listid a number representing the id of the message list.
... clearmessagelist() void getnextmessageinlist( in long listid, ); parameters listid a number representing the id of the message list.
nsIStyleSheetService
allows extensions or embeddors to add to the built-in list of user or agent style sheets.
...type); void unregistersheet(in nsiuri sheeturi, in unsigned long type); constants constant value description agent_sheet 0 user_sheet 1 author_sheet 2 methods loadandregistersheet() synchronously loads a style sheet from sheeturi and adds it to the list of user or agent style sheets.
... return value returns true if a style sheet at sheeturi has previously been added to the list of style sheets specified by type.
... unregistersheet() remove the style sheet at sheeturi from the list of style sheets specified by type.
nsIUpdateChecker
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(in nsiupdatechecklistener listener, in boolean force); void stopchecking(in unsigned short duration); constants constant value description current_check 1 constant for the stopchecking() method indicating that only the current update check should be stopped.
... methods checkforupdates() checks for available updates, notifying a listener of the results.
... void checkforupdates( in nsiupdatechecklistener listener, in boolean force ); parameters listener an object implementing nsiupdatechecklistener to be notified of the results of an update check.
... see also nsiupdatepatch nsiupdate nsiupdatechecklistener nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...
Setting HTTP request headers
for more information about notifications framework and a list of common notification topics, see observer notifications.
...var headername = "x-hello"; var headervalue = "world"; function log(text) { // var consoleservice = components.classes["@mozilla.org/consoleservice;1"].getservice(components.interfaces.nsiconsoleservice); // consoleservice.logstringmessage(text); } function myhttplistener() { } myhttplistener.prototype = { observe: function(subject, topic, data) { if (topic == "http-on-modify-request") { log("----------------------------> (" + subject + ") mod request"); var httpchannel = subject.queryinterface(components.interfaces.nsihttpchannel); httpchannel.setrequestheader(headername, headervalue, false); return; ...
...service(components.interfaces.nsicategorymanager); catmgr.addcategoryentry("app-startup", this.myname, this.myprogid, true, true); }, getclassobject: function (compmgr, cid, iid) { log("----------------------------> getclassobject"); return this.myfactory; }, mycid: components.id("{9cf5f3df-2505-42dd-9094-c1631bd1be1c}"), myprogid: "@dougt/myhttplistener;1", myname: "simple http listener", myfactory: { queryinterface: function (aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsifactory)) throw components.results.ns_error_no_interface; return this; }, createinstance: function (outer, iid) { l...
...og("----------------------------> createinstance"); return new myhttplistener(); } }, canunload: function(compmgr) { return true; } }; function nsgetmodule(compmgr, filespec) { return mymodule; } privacy and security good practice a use case for setting specific a http request header is to have a specific web site be able to check if a specific plugin / addon / extension is installed.
Address book sync client design
// // sync approach - server handles all conflict resolution: // // step 2: // using the sync mapping table and the local records database, generate the change // list to send to the server.
...this interface is defined in mozilla/mailnews/addrbook/public/nsiabsyncdriver.idl #include "nsrootidl.idl" #include "nsiabsynclistener.idl" [scriptable, uuid(91fdfee1-efbc-11d3-8f97-000073757374)] interface nsiabsyncdriver : nsiabsynclistener { void kickit(); }; as you can see, this is a very simple interface which allows for the starting of the address book sync operation.
... the interface of greater interest is the address book sync listener.
...this interface is as follows: #include "nsisupports.idl" #include "nsrootidl.idl" #include "nsifilespec.idl" [scriptable, uuid(e0ed29e0-098a-11d4-8fd6-00a024a7d144)] interface nsiabsynclistener : nsisupports { /** * notify the observer that the ab sync authorization operation has begun.
Building a Thunderbird extension 6: Adding JavaScript
window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the fir...
...st part registers a new event listener that will be executed automatically when thunderbird loads.
... the event listener then calls our startup function which gets our <statusbarpanel>-element with the id my-panel from the document's dom tree.
... further documentation more functions for the dom objects are listed on: dom/window (api reference for the window object) dom/document (api reference for the document object) gecko dom reference (overview of all dom objects in gecko) you may also find the javascript cheat sheet very useful.
Initialization and Destruction - Plugins
in the initialization process, the browser passes the plug-in two tables of function pointers for all api calls: one table lists all api calls from the plug-in to the browser.
... the other table lists all api calls from the browser to the plug-in.
...the data is saved in the history list.
... as long as the plug-in still appears in this list, that saved data is associated with the page; any new instances receive this data.
Plug-in Basics - Plugins
the installed plug-ins page lists each installed plug-in along with its mime type or types, description, file extensions, and the current state (enabled or disabled) of the plug-in for each mime type assigned to it.
...gecko displays a page listing all installed plug-ins and the mime types they handle, as well as optional descriptive information supplied by the plug-in.
...the browser ignores these nonstandard attributes when parsing the html, but it passes all attributes to the plug-in, allowing the plug-in to examine the list for any private attributes that could modify its behavior.
... the plug-in must scan its list of attributes to determine whether it should automatically start the video and loop it on playback.
Streams - Plugins
if the user now requests a specific page of the document, the plug-in calls npn_requestread with a list of byte ranges.
... the npn_requestread method has the following syntax: nperror npn_requestread(npstream *stream, npbyterange *rangelist); the stream parameter is the stream from which to read bytes; the rangelist parameter specifies the range of bytes in the form of a linked list of npbyterange objects, which the plug-in must allocate.
... the plug-in can request multiple ranges, either through a list of npbyterange objects in a single call to npn_requestread or through multiple calls to npn_requestread.
... for the complete list of codes, see "result codes." for an example that demonstrates using this function with npn_newstream and npn_write, see "example of sending a stream." example of sending a stream the following code creates a new stream of html text displayed by the browser in a new window, writes it, and destroys the stream.
All keyboard shortcuts - Firefox Developer Tools
this page lists all keyboard shortcuts used by the developer tools built into firefox.
... the first section lists the shortcut for opening each tool and the second section lists shortcuts that are applicable to the toolbox itself.
... after that there's one section for each tool, which lists the shortcuts that you can use within that tool.
... command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 source editor this table lists the default shortcuts for the source editor.
Inspecting web sockets - Firefox Developer Tools
accessing the inspector when you are inspecting a web app that utilizes a web socket connection, the web socket requests are listed in the list of requests in the network monitor along with all other requests.
... you can use the ws button to filter the list for just web socket connections.
... there are also predefined filters, available in the tool bar of the response pane, grouped into a selection list.
... expanding each message selecting a message in the list shows a preview of the data being sent in that message, at the bottom of the response pane.
Console messages - Firefox Developer Tools
the context menu options listed below are available on all message categories.
... the complete list of security messages is as follows: message details blocked loading mixed active content the page contained mixed active content: that is, the main page was served over https, but asked the browser to load "active content", such as scripts, over http.
...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.
The JavaScript input interpreter - Firefox Developer Tools
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.
...this is like for document.queryselectorall(), but returns an array instead of a nodelist.
... keys() given an object, returns a list of the keys (or property names) on that object.
... values() given an object, returns a list of the values on that object; serves as a companion to keys().
AudioTrack - Web APIs
this id can be used to locate a specific track within an audio track list by calling audiotracklist.gettrackbyid().
... usage notes to get an audiotrack for a given media element, use the element's audiotracks property, which returns an audiotracklist object from which you can get the individual tracks contained in the media: var el = document.queryselector("video"); var tracks = el.audiotracks; you can then access the media's individual tracks using either array syntax or functions such as foreach().
...the list is filtered to only allow certain track kinds through.
... function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
CSSStyleSheet.insertRule() - Web APIs
note: although insertrule() is exclusively a method of cssstylesheet, it actually inserts the rule into cssstylesheet.cssrules — its internal cssrulelist.
...see browser compatibility for details.) return value the newly inserted rule's index within the stylesheet's rule-list.
... if index > cssrulelist.length, the method aborts with an indexsizeerror.
... if rule is @namespace and the rule-list has more than just @import at-rules and/or @namespace at-rules, the method aborts with an invalidstateerror.
Using the CSS Painting API - Web APIs
example let's create a list of items with a background image that rotates between three different colors and three widths.
...when we get our list of argument values, we ask specifically for a <length> unit.
... let's say we add a second argument with how many pixels wide we want the stroke to be: li { background-image: paint(hollowhighlights, stroke, 10px); } when we get our list of argument values, we can ask specifically for a <length> unit.
...gisterpaint('hollowhighlights', class { static get inputproperties() { return ['--boxcolor']; } // input arguments that can be passed to the `paint` function static get inputarguments() { return ['*','']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { // ctx -> drawing context // size -> size of the box being painted // props -> list of custom properties available to the element // args -> list of arguments set when calling the paint() function in the css // where to start the highlight & dimensions const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight = size.height * 0.85; // the values passed in the paint() function in the css const colour = props.get( '--boxcolo...
CSS Typed Object Model API - Web APIs
it consists of a list of string fragments and variable references.
...subclasses include: cssimagevalue objects an interface representing values for properties that take an image, for example background-image, list-style-image, or border-image-source.
... csstransformvalue an interface representing a list of transform list values.
...it consists of a list of string fragments and variable references.
Using channel messaging - Web APIs
var input = document.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.postme...
... receiving the port and message in the iframe over in the iframe, we have the following javascript: var list = document.queryselector('ul'); var port2; // listen for the initial port transfer message window.addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var listitem = document.createelement('li'); listitem.textcontent = e.data; list.app...
...endchild(listitem); port2.postmessage('message received by iframe: "' + e.data + '"'); } when the initial message is received from the main page via the window.postmessage method, we run the initport function.
... when a message is received from the main page we create a list item and insert it in the unordered list, setting the textcontent of the list item equal to the event's data attribute (this contains the actual message).
ChildNode - Web APIs
WebAPIChildNode
childnode.remove() removes this childnode from the children list of its parent.
... childnode.before() inserts a set of node or domstring objects in the children list of this childnode's parent, just before this childnode.
... childnode.after() inserts a set of node or domstring objects in the children list of this childnode's parent, just after this childnode.
... childnode.replacewith() replaces this childnode in the children list of its parent with a set of node or domstring objects.
ContentIndex - Web APIs
contentindex.getall returns a promise that resolves with an iterable list of content index entries.
...ature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving items within the current index the below example shows an asynchronous function that retrieves items within the content index and iterates over each entry, building a list for the interface.
... async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('l...
...i'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
Content Index API - Web APIs
ature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving items within the current index the below example shows an asynchronous function that retrieves items within the content index and iterates over each entry, building a list for the interface.
... async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('l...
...i'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
... self.addeventlistener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); the contentdelete event is only fired when the deletion happens due to interaction with the browser's built-in user interface.
DataTransfer.clearData() - Web APIs
this method does not remove files from the drag operation, so it's possible for there still to be an entry with the type "files" left in the object's datatransfer.types list if there are any files included in the drag.
...</span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addevent...
...listener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change target element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...rhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data.innerhtml = event.datatransfer.getdata('text/plain') || 'empty'; // change border to signify drag is no longer in process event.currenttarget.style.border = '1px solid black'; if (dropped) { // remove all event listeners draggable.removeeventlistener('dragstart', dragstarthandler); draggable.removeeventlistener('dragend', dragendhandler); dropable.removeeventlistener('dragover', dragoverhandler); dropable.removeeventlistener('dragleave', dragleavehandler); dropable.removeeventlistener('drop', drophandler); } } function dragoverhandler (event) { status.innerhtml = 'd...
DataTransfer.files - Web APIs
the datatransfer.files property is a list of the files in the drag operation.
... if the operation includes no files, the list is empty.
... syntax datatransfer.files; return value a list of the files in a drag operation, one list item for each file in the operation.
... if the drag operation had no files, the list is empty.
DataTransfer.items - Web APIs
the read-only datatransfer property items property is a list of the data transfer items in a drag operation.
... the list includes one item for each item in the operation and if the operation had no items, the list is empty.
... syntax itemlist = datatransfer.items; return value a datatransferitemlist object containing datatransferitem objects representing the items being dragged in a drag operation, one list item for each object being dragged.
... if the drag operation had no data, the list is empty.
DataTransfer.mozTypesAt() - Web APIs
the datatransfer.moztypesat() method returns a list of the format types that are stored for an item at the specified index.
... if the index is not in the range from 0 to the number of items minus one, an empty string list is returned.
... return value nsivariant a list of data formats (which are strings).
... if the index is not in the range from 0 to the number of items minus one, an empty string list is returned.
Document: DOMContentLoaded event - Web APIs
examples basic usage document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying domcontentloaded <script> document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); for( let i = 0; i < 1000000000; i++) {} // this synchronous script is going to delay parsing of the dom, // so the domcontentloaded event is going to lau...
...</script> checking whether loading is already complete domcontentloaded may fire before your script has a chance to run, so it is wise to check before adding a listener.
... function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload ...
...{ height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'domcontentloaded' in that specif...
Document.createElement() - Web APIs
content = document.createtextnode("hi there and greetings!"); // add the text node to the newly created div newdiv.appendchild(newcontent); // add the newly created element and its content into the dom const currentdiv = document.getelementbyid("div1"); document.body.insertbefore(newdiv, currentdiv); } web component example the following example snippet is taken from our expanding-list-web-component example (see it live also).
... in this case, our custom element extends the htmlulistelement, which represents the <ul> element.
... // create a class for the element class expandinglist extends htmlulistelement { constructor() { // always call super first in constructor super(); // constructor definition left out for brevity ...
... } } // define the new element customelements.define('expanding-list', expandinglist, { extends: "ul" }); if we wanted to create an instance of this element programmatically, we'd use a call along the following lines: let expandinglist = document.createelement('ul', { is : 'expanding-list' }) the new element will be given an is attribute whose value is the custom element's tag name.
Document.createEvent() - Web APIs
event.initevent('build', true, true); // listen for the event.
... elem.addeventlistener('build', function (e) { // e.target matches elem }, false); // target can be any element or other eventtarget.
... elem.dispatchevent(event); notes event type strings suitable for passing to createevent() are listed in the dom standard — see the table in step 2.
... gecko supports some non-standard event object aliases, which are listed below.
Document.getElementsByName() - Web APIs
the getelementsbyname() method of the document object returns a nodelist collection of elements with a given name in the document.
... syntax var elements = document.getelementsbyname(name); elements is a live nodelist collection, meaning it automatically updates as new elements with the same name are added to/removed from the document.
... the returned nodelist collection contains all elements with the given name, such as <meta>, <object>, and even elements which do not support the name attribute at all.
... both ie and edge return an htmlcollection, not a nodelist specifications specification status comment html living standardthe definition of 'document.getelementsbyname()' in that specification.
Document.styleSheetSets - Web APIs
the stylesheetsets read-only property returns a live list of all of the currently-available style sheet sets.
... syntax var sets = document.stylesheetsets; on return, sets is a list of style sheet sets that are available.
... example given an <ul> (list) element with the id "sheetlist", you can populate it with the names of all the available style sheet sets with code like this: let list = document.getelementbyid('sheetlist'); let sheets = document.stylesheetsets; list.innerhtml = ''; for (let i = 0; i < sheets.length; i++) { let item = document.createelement('li'); item.innerhtml = sheets[i]; list.appendchild(item); } notes the list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're listed in the document.stylesheets attribute, adding the title of each style sheet that has a title to the list.
... duplicates are dropped from the list (using a case-sensitive comparison).
Document Object Model (DOM) - Web APIs
dom interfaces attr cdatasection characterdata childnode comment customevent document documentfragment documenttype domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url window worker xmldocument obsolete dom interfaces the document object model has been highly sim...
...it is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided: documenttouch domconfiguration domerrorhandler domimplementationlist domimplementationregistry domimplementationsource domlocator domobject domsettabletokenlist domuserdata elementtraversal entity entityreference namelist notation typeinfo userdatahandler html dom a document containing html is described using the document interface, which is extended by the html specification to include various html-specific features.
... static type svgangle svgcolor svgicccolor svgelementinstance svgelementinstancelist svglength svglengthlist svgmatrix svgnamelist svgnumber svgnumberlist svgpaint svgpathseg svgpathsegclosepath svgpathsegmovetoabs svgpathsegmovetorel svgpathseglinetoabs svgpathseglinetorel svgpathsegcurvetocubicabs svgpathsegcurvetocubicrel svgpathsegcurvetoquadraticabs svgpathsegcurvetoquadraticrel svgpathsegarcabs svgpathsegarcrel svgpathseglinetoh...
...orizontalabs svgpathseglinetohorizontalrel svgpathseglinetoverticalabs svgpathseglinetoverticalrel svgpathsegcurvetocubicsmoothabs svgpathsegcurvetocubicsmoothrel svgpathsegcurvetoquadraticsmoothabs svgpathsegcurvetoquadraticsmoothrel svgpathseglist svgpoint svgpointlist svgpreserveaspectratio svgrect svgstringlist svgtransform svgtransformlist animated type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgd...
Element: mouseleave event - Web APIs
it then adds an item to the list with the number of the mouseenter or mouseleave event.
... html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible.
... #mousetarget { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a...
... new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
Element: mouseout event - Web APIs
the mouseleave event is added to the <ul> to color the list purple whenever the mouse exits the <ul>.
... mouseout is added to the list to color the targeted element orange when the mouse exits it.
... when you try this out, you'll find that mouseout is delivered to the individual list items, while mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul>.
... html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result ...
Event.cancelable - Web APIs
WebAPIEventcancelable
if the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
... event listeners that handle multiple kinds of events may want to check cancelable before invoking their preventdefault() methods.
... example for example, browser vendors are proposing that the wheel event can only be canceled the first time the listener is called — any following wheel events cannot be canceled.
... console.warn(`the following event couldn't be canceled:`); console.dir(event); } } document.addeventlistener('wheel', preventscrollwheel); notes whether an event can be canceled or not is something that's determined when that event is initialized.
Event.composedPath() - Web APIs
the composedpath() method of the event interface returns the event’s path which is an array of the objects on which listeners will be invoked.
... return value an array of eventtarget objects representing the objects on which an event listener will be invoked.
... let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
...ement's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
FeaturePolicy.features() - Web APIs
the features() method of the featurepolicy interface returns a list of names of all features supported by the user agent.
... feature whose name appears on the list might not be allowed by the feature policy of the current execution context and/or might not be accessible because of user's permissions.
... return value a list of strings that represent names of all feature policy directives supported by the user agent.
... // get the feature policy object const featurepolicy = document.featurepolicy // retreive the list of all supported feature policy directives const supporteddirectives = featurepolicy.features() // print out each directive into the console for (const directive of supporteddirectives){ console.log(directive) } specification specification status comment feature policythe definition of 'features' in that specification.
FontFaceSet - Web APIs
events fontfaceset.onloading an eventlistener called whenever an event of type loading is fired, indicating a font-face set has started loading.
... fontfaceset.onloadingdone an eventlistener called whenever an event of type loadingdone is fired, indicating that a font face set has finished loading.
... fontfaceset.onloadingerror an eventlistener called whenever an event of type loadingerror is fired, indicating that an error occurred whilst loading a font-face set.
... fontfaceset.load() returns a promise which resolves to a list of font-faces for a requested font.
Using FormData Objects - Web APIs
32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error " +...
... using a formdata event a more recent addition to the platform than the formdata object is the formdata event — this is fired on an htmlformelement object after the entry list representing the form's data is constructed.
... typically this is used as shown in our simple formdata event demo — in the javascript we reference a form: const formelem = document.queryselector('form'); in our submit event handler we use preventdefault to stop the default form submission, then invoke a formdata constructor to trigger the formdata event: formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); when the formdata event fires we can access the formdata object using formdataevent.formdata, then do what we like with it (below we post it to the server using xmlhttprequest).
... formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr let request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); note: the formdata event and formdataevent object are available in chrome from version 77 (and other equivalent chromiums), and firefox 72 (first available behind the dom.formdata.event.enabled pref in firefox 71).
Fullscreen API - Web APIs
these are listed in the following sections.
...the full-screen mode feature is identified by the string "fullscreen", with a default allow-list value of "self", meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.
... view live examples watching for the enter key when the page is loaded, this code is run to set up an event listener to watch for the enter key.
... document.addeventlistener("keypress", function(e) { if (e.keycode === 13) { togglefullscreen(); } }, false); toggling full-screen mode this code is called by the event handler above when the user hits the enter key.
GlobalEventHandlers.onerror - Web APIs
error events are fired at various targets for different kinds of errors: when a javascript runtime error (including syntax errors and exceptions thrown within handlers) occurs, an error event using interface errorevent is fired at window and window.onerror() is invoked (as well as handlers attached by window.addeventlistener (not only capturing)).
...these error events do not bubble up to window, but (at least in firefox) can be handled with a window.addeventlistener configured with usecapture set to true.
... syntax for historical reasons, different arguments are passed to window.onerror and element.onerror handlers (as well as on error-type window.addeventlistener handlers).
... window.addeventlistener('error') window.addeventlistener('error', function(event) { ...
Audio() - Web APIs
the audio() constructor creates and returns a new htmlaudioelement which can be either attached to a document for the user to interact with and/or listen to, or can be used offscreen to manage and play audio.
... listen for the canplay event.
... listen for the canplaythrough event.
... the event-based approach is best: myaudioelement.addeventlistener("canplaythrough", event => { /* the audio is now playable; play it if permissions allow */ myaudioelement.play(); }); memory usage and management if all references to an audio element created using the audio() constructor are deleted, the element itself won't be removed from memory by the javascript runtime's garbage collection mechanism if playback is currently underway.
HTMLElement - Web APIs
htmlelement.dropzone read only returns a domsettabletokenlist reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
... htmlelement.itemtype read only returns a domsettabletokenlist… htmlelement.itemid is a domstring representing the item id.
... htmlelement.itemref read only returns a domsettabletokenlist… htmlelement.itemprop read only returns a domsettabletokenlist… htmlelement.itemvalue returns a object representing the item value.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HTMLInputElement.webkitdirectory - Web APIs
pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic2355.jpg pic2356.jpg vacations mars pic5533.jpg pic5534.jpg pic5556.jpg pic5684.jpg pic5712.jpg if the user chooses photoalbums, then the list reported by files will contain file objects for every file listed above—but not the directories.
...this makes it possible to know the hierarchy even though the filelist is flat.
...when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.
... html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
HTMLLinkElement - Web APIs
htmllinkelement.media is a domstring representing a list of one or more media formats to which the resource applies.
... htmllinkelement.rellist read only is a domtokenlist that reflects the rel html attribute, as a list of tokens.
... htmllinkelement.sizes read only is a domsettabletokenlist that reflects the sizes html attribute, as a list of tokens.
... the following properties have been added: rellist, and sizes.
IDBDatabase: abort event - Web APIs
bubbles yes cancelable no interface event event handler property onabort examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event.
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('abort', () => { console.log('tr...
...ansaction aborted'); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'd...
...unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.onabort = () => { console.log('transaction aborted'); }; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; ...
IDBDatabase: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will conta...
...que: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of ad...
...deventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, mo...
...nth: 'january', year: 2020 }; const db = dbopenrequest.result; db.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; ...
IDBDatabase.transaction() - Web APIs
invalidaccesserror the function was called with an empty list of store names.
...for a complete example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // you would then go on to do something to this database // via an object store var objectstore = transaction.objectstore("todolist"); // etc.
IDBObjectStore.add() - Web APIs
to determine if the add operation has completed successfully, listen for the transaction’s complete event in addition to the idbobjectstore.add request’s success event, because the transaction may still fail after the success event fires.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'add()' in that specification.
IDBOpenDBRequest - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these event handlers act on the database being opened.
...this is used a lot below db = dbopenrequest.result; // run the displaydata() function to populate the task // listwith all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result;...
... db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); }; specifications specification status comment indexed database api 2.0the definition of 'idbopendbrequ...
IDBRequest: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data ...
...items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); dbopenrequest.addeventlistener('success', event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); obj...
...ectstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: fal...
...se }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; }; ...
IDBTransaction: abort event - Web APIs
examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event.
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.
...result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore...
...inutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.onabort = (event) => { console.log('transaction was aborted'); }; // abort the transaction transaction.abort(); }; ...
IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectsto...
...re.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.addeventlistener('complete', event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database ...
...const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a re...
...ad/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.oncomplete = event => { console.log('transaction was competed'); }; const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; ...
IDBTransaction: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will c...
...utes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror...
... property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/w...
...rite db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; ...
KeyboardEvent - Web APIs
a list of the constants identifying the locations is shown above in keyboard locations.
...in the list below, each event links to the documentation for the document handler for the event, which applies generally to all of the recipients.
... example <!doctype html> <html> <head> <script> 'use strict'; document.addeventlistener('keydown', (event) => { const keyname = event.key; if (keyname === 'control') { // do not alert when only control key is pressed.
... alert(`combination of ctrlkey + ${keyname}`); } else { alert(`key pressed ${keyname}`); } }, false); document.addeventlistener('keyup', (event) => { const keyname = event.key; // as the user releases the ctrl key, the key is no longer active, // so event.ctrlkey is false.
MSCandidateWindowShow - Web APIs
syntax event property object.oncandidatewindowshow = handler; addeventlistener method object.addeventlistener("mscandidatewindowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
... example in ie11, developers can detect the opening of the ime candidate window by listening to mscandidatewindowshow event, then call getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.getelementbyid("mysearchbox").msgetinputcontext(); context.addeventlistener("mscandidatewindowshow", candidatewindowshowhandler); function candidatewindowshowhandler(e) { var imerect = context.getc...
...andidatewindowclientrect(); var suggestionrect = document.getelementbyid("mysuggestionlist").getboundingclientrect(); // check if the two rects intersect, and position them away from each other.
...developers could listen to them and shift the suggestion ui accordingly.
MediaDevices.getSupportedConstraints() - Web APIs
return value a new object based on the mediatracksupportedconstraints dictionary listing the constraints supported by the user agent.
... because only constraints supported by the user agent are included in the list, each of these boolean properties has the value true.
... example this example outputs a list of the constraints supported by your browser.
... html <p>the following media constraints are supported by your browser:</p> <ul id="constraintlist"> </ul> css body { font: 15px arial, sans-serif; } javascript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.
MediaStream - Web APIs
you can create an empty stream, a stream which is based upon an existing stream, or a stream that contains a specified list of tracks (specified as an array of mediastreamtrack objects).
... mediastream.getaudiotracks() returns a list of the mediastreamtrack objects stored in the mediastream object that have their kind attribute set to audio.
... mediastream.gettracks() returns a list of all mediastreamtrack objects stored in the mediastream object, regardless of the value of the kind attribute.
... mediastream.getvideotracks() returns a list of the mediastreamtrack objects stored in the mediastream object that have their kind attribute set to "video".
MessagePort.postMessage() - Web APIs
syntax port.postmessage(message, transferlist); returns void.
... transferlist optional transferable objects to be transferred — these objects have their ownership transferred to the receiving browsing context, so are no longer usable by the sending browsing context.
...the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MutationObserver.MutationObserver() - Web APIs
the callback function function callback(mutationlist, observer) { mutationlist.foreach( (mutation) => { switch(mutation.type) { case 'childlist': /* one or more children have been added to and/or removed from the tree.
... the kind of change that took place (either a change to the list of children, or a change to an attribute) is detected by looking at the mutation.type property.
... const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true, // omit (or set to false) to observe only changes to the parent node subtree: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); the desired subtree is located by finding an element with the id someelement.
...in it, we specify values of true for both childlist and attributes, so we get the information we want.
MutationObserverInit.attributeFilter - Web APIs
syntax var options = { attributefilter: [ "list", "of", "attribute", "names" ] } value an array of domstring objects, each specifying the name of one attribute whose value is to be monitored for changes.
... function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": switch(mutation.attributename) { case "status": userstatuschanged(mutation.target.username, mutation.target.status); break; case "username": usernamechanged(mutation.oldvalue, mutation.target.username); break; } ...
... break; } }); } var userlistelement = document.queryselector("#userlist"); var observer = new mutationobserver(callback); observer.observe(userlistelement, { attributefilter: [ "status", "username" ], attributeoldvalue: true, subtree: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects.
... when observe() is called, the specified options include both attributefilter and subtree, so that we monitor the attribute values for all of the nodes contained within the subtree rooted at the node with the id "userlist".
Online and offline events - Web APIs
you can register listeners for these events in a few familiar ways: using addeventlistener on the window, document, or document.body by setting the .ononline or .onoffline properties on document or document.body to a javascript function object.
... example there's a simple test case that you can run to verify that the events are working (does not work in chrome due to attaching the event listener to document.body).
... here's the javascript part: window.addeventlistener('load', function() { var status = document.getelementbyid("status"); var log = document.getelementbyid("log"); function updateonlinestatus(event) { var condition = navigator.online ?
... "online" : "offline"; status.classname = condition; status.innerhtml = condition.touppercase(); log.insertadjacenthtml("beforeend", "event: " + event.type + "; status: " + condition); } window.addeventlistener('online', updateonlinestatus); window.addeventlistener('offline', updateonlinestatus); }); a touch of css #status { position: fixed; width: 100%; font: bold 1em sans-serif; color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live result n...
Node - Web APIs
WebAPINode
node.childnodesread only returns a live nodelist containing all the children of this node.
... nodelist being live means that if the children of the node change, the nodelist object is automatically updated.
... node.getboxquads() returns a list of the node's css boxes relative to another node.
... realistic usage the following demonstrates a real-world use of the eachnode() function: searching for text on a web-page.
PannerNode.coneInnerAngle - Web APIs
however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.o...
PannerNode.coneOuterAngle - Web APIs
however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.o...
PannerNode.coneOuterGain - Web APIs
however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.o...
PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types listed below.
... examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(list) { const perfentries = list.getentries().foreach(entry => { // full duration const inputduration = entry.duration; // input delay (before processing event) const inputdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch).
...0 : infinity; document.addeventlistener('visibilitychange', (event) => { firsthiddentime = math.min(firsthiddentime, event.timestamp); }, {once: true}); // sends the passed data to an analytics endpoint.
... const po = new performanceobserver((entrylist) => { entrylist.getentries().foreach(onfirstinputentry); }); // observe entries of type `first-input`, including buffered entries, // i.e.
Performance Timeline - Web APIs
when the observer (callback) is invoked, the callback's parameters include a performance observer entry list that contains only observed performance entries.
... that is, the list contains entries only for the event types that were specified when the observer's observe() method was invoked.
... the performance observer entry list interface has the same three getentries*() methods as the performance interface.
... however, note there is one key difference with these methods; the performance observer entry list versions are used to retrieve observed performance entries within the observer callback.
Using Pointer Events - Web APIs
function startup() { var el = document.getelementsbytagname("canvas")[0]; el.addeventlistener("pointerdown", handlestart, false); el.addeventlistener("pointerup", handleend, false); el.addeventlistener("pointercancel", handlecancel, false); el.addeventlistener("pointermove", handlemove, false); log("initialized."); } this simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they occur.
...its job is to draw the last line segment for the touch that ended and remove the touch point from the ongoing touch list.
...x - 4, evt.clienty - 4, 8, 8); // and a square at the end ongoingtouches.splice(idx, 1); // remove it; we're done } else { log("can't figure out which touch to end"); } } this is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call array.splice(), we simply remove the old entry from the ongoing touch list, without adding in the updated information.
... function handlecancel(evt) { log("pointercancel: id = " + evt.pointerid); var idx = ongoingtouchindexbyid(evt.pointerid); ongoingtouches.splice(idx, 1); // remove it; we're done } since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.
RTCConfiguration.iceServers - Web APIs
description how the list of servers you provide is used is up to the implementation of the user agent.
... while it can be useful to provide a second server as a fallback in case the first is offline, listing too many servers can delay the user's connection being established, depending on the network's performance and how many servers get used for negotiation before a connection is established.
... if the list of servers is changed while a connection is already active by calling the the rtcpeerconnection method setconfiguration(), no immediate effect occurs.
... however, the new list of servers is used for any future renegotiation, such as while handling an ice restart.
RTCPeerConnection.removeTrack() - Web APIs
the rtcpeerconnection.removetrack() method tells the local end of the connection to stop sending media from the specified track, without actually removing the corresponding rtcrtpsender from the list of senders as reported by rtcpeerconnection.getsenders().
... if the track is already stopped, or is not in the connection's senders list, this method has no effect.
... example this example adds a video track to a connection and sets up a listener on a close button which removes the track when the user clicks the button.
... var pc, sender; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.removetrack()' in that specification.
Range.commonAncestorContainer - Web APIs
syntax rangeancestor = range.commonancestorcontainer; example in this example, we create an event listener to handle pointerup events on a list.
... the listener gets the common ancestors of each piece of selected text, and triggers an animation to highlight them.
... .highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { padding: 1px; } javascript document.addeventlistener('pointerup', e => { const selection = window.getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.classlist.remove('highlight...
...'); settimeout(() => { el.classlist.add('highlight'); }, 0); } result specifications specification status comment domthe definition of 'range.commonancestorcontainer' in that specification.
Report - Web APIs
WebAPIReport
this contains the list of reports currently contained in the observer's report queue.
... the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(l...
...istitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue.
... we loop over each report using a basic for loop, then iterate over each entry of in the report's body using a for...in structure, displaying each key/value pair inside a list item.
Screen Wake Lock API - Web APIs
wakelock.release() .then(() => { wakelock = null; }); listening for wake lock release this example updates the ui if the wake lock has been released for any reason (such as navigating away from the active window/tab).
... wakelock.addeventlistener('release', () => { // the wake lock has been released statuselem.textcontent = 'wake lock has been released'; }); reacquiring a wake lock the following code reacquires the wake lock should the visibility of the document change and the wake lock is released.
... document.addeventlistener('visibilitychange', () => { if (wakelock !== null && document.visibilitystate === 'visible') { wakelock = await navigator.wakelock.request('screen'); } }); putting it all together you can find the complete code on github here.
...therefore make sure to re-acquire screen wake lock if necessary when document becomes active (listen for visibilitychange event).
ServiceWorker.onstatechange - Web APIs
an eventlistener property called whenever an event of type statechange is fired; it is basically fired anytime the serviceworker.state changes.
...} serviceworker.addeventlistener('statechange', function(statechangeevent) { ...
...the code listens for any change in the serviceworker.state and returns its value.
...nt.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } note that when statechange fires, the service worker's references may have changed.
SourceBuffer - Web APIs
sourcebuffer.audiotracks read only a list of the audio tracks currently contained inside the sourcebuffer.
... sourcebuffer.texttracks read only a list of the text tracks currently contained inside the sourcebuffer.
... sourcebuffer.videotracks read only a list of the video tracks currently contained inside the sourcebuffer.
..._bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource(); //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
SpeechSynthesis.getVoices() - Web APIs
the getvoices() method of the speechsynthesis interface returns a list of speechsynthesisvoice objects representing all the available voices on the current device.
... return value a list (array) of speechsynthesisvoice objects.
... note: the spec wrongly lists this method as returning as a speechsynthesisvoicelist object, but this was in fact removed from the spec.
... example javascript function populatevoicelist() { if(typeof speechsynthesis === 'undefined') { return; } var voices = speechsynthesis.getvoices(); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); document.getelementbyid("voiceselect").appendchild(option); } } populatevoicelist(); if (typeof speechsynthesis !== 'undefined' && speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } html <select id="voiceselect"></select> ...
SpeechSynthesis.onvoiceschanged - Web APIs
the onvoiceschanged property of the speechsynthesis interface represents an event handler that will run when the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.getvoices() method has changed (when the voiceschanged event fires.) this may occur when speech synthesis is being done on the server-side and the voices list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis application is running.
...}; examples this could be used to populate a list of voices that the user can choose between when the event fires (see our speak easy synthesis demo.) note that firefox doesn't support it at present, and will just return a list of voices when speechsynthesis.getvoices() is fired.
... with chrome however, you have to wait for the event to fire before populating the list, hence the bottom if statement seen below.
... var voices = []; function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } specifications specification status comment web speech apithe definition of 'onvoiceschanged' in that specification.
Using readable streams - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, ...
... if (done) { console.log("stream complete"); para.textcontent = result; return; } charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } closing and cancelling streams we’ve already shown examples of using readablestreamdefaultcontroller.close() to close a reader.
...this example works much the same way as our simple random stream, except that when the button is pressed to stop generating random strings, the custom stream is taken and teed, and both resulting streams are then read: function teestream() { const teedoff = stream.tee(); readstream(teedoff[0], list2); readstream(teedoff[1], list3); } pipe chains one very experimental feature of streams is the ability to pipe streams into one another (called a pipe chain).
SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsa-pss .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "rsa-pss", saltlength: 32, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".ecdsa .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "ecdsa", hash: {name: "sha-384"}, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ async function verifymessage(key) { const signaturevalue = document.queryselector(".hmac .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "hmac", key, signature, encoded ); signaturevalue.classlist.add(result ?
getTrackById() - Web APIs
the texttracklist method gettrackbyid() returns the first texttrack object from the track list whose id matches the specified string.
... syntax var thetrack = texttracklist.gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track list.
... return value a texttrack object indicating the first track found within the texttracklist whose id matches the specified string.
... specifications specification status comment html living standardthe definition of 'texttracklist.gettrackbyid()' in that specification.
getTrackById - Web APIs
the videotracklist method gettrackbyid() returns the first videotrack object from the track list whose id matches the specified string.
... syntax var thetrack = videotracklist.gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track list.
... return value a videotrack object indicating the first track found within the videotracklist whose id matches the specified string.
... specifications specification status comment html living standardthe definition of 'videotracklist.gettrackbyid()' in that specification.
A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup(): window.addeventlistener("load", startup, false); function startup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaderset); aspectratio = glcanvas.width/glcanvas.h...
...the array shaderset contains a list of objects, each describing one shader function to be compiled into the program.
... with the vertex data now provided to webgl, we set vertexnumcomponents to the number of components in each vertex (2, since they're 2d vertexes) and vertexcount to the number of vertexes in the vertex list.
... then, for each shader in the specified list of shaders, we call a compileshader() function to compile it, passing into it the id and type of the shader function to build.
Writing WebSocket client applications - Web APIs
to handle it, add an event listener for the message event, or use the onmessage event handler.
... to begin listening for incoming data, you can do something like this: examplesocket.onmessage = function (event) { console.log(event.data); } receiving and interpreting json objects let's consider the chat client application first alluded to in using json to transmit objects.
... there are assorted types of data packets the client might receive, such as: login handshake message text user list updates the code that interprets these incoming messages might look like this: examplesocket.onmessage = function(event) { var f = document.getelementbyid("chatbox").contentdocument; var text = ""; var msg = json.parse(event.data); var time = new date(msg.date); var timestr = time.tolocaletimestring(); switch(msg.type) { case "id": clientid = msg.id; setusername(); break; case "username": text = "<b>user <em>" + msg.name + "</em> signed in at " + timestr + "</b><br>"; break; case "message": text = "(" + timestr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; break; case "rejectusername": tex...
...t = "<b>your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" break; case "userlist": var ul = ""; for (i=0; i < msg.users.length; i++) { ul += msg.users[i] + "<br>"; } document.getelementbyid("userlistbox").innerhtml = ul; break; } if (text.length) { f.write(text); document.getelementbyid("chatbox").contentwindow.scrollbypages(1); } }; here we use json.parse() to convert the json object back into the original object, then examine and act upon its contents.
Movement, orientation, and motion: A WebXR example - Web APIs
window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector(...
... function sessionstarted(session) { let refspacetype; xrsession = session; xrbutton.innertext = "exit webxr"; xrsession.addeventlistener("end", sessionended); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); if (allowmouserotation) { canvas.addeventlistener("pointermove", handlepointermove); canvas.addeventlistener("contextmenu", (event) => { event.preventdefault(); }); } if (allowkeyboardmotion) { document.addeventlistener("keydown", handlekeydown...
...these buffers include the array of vertex positions, the array of vertex normals, the texture coordinates for each surface of the cube, and the array of vertex indices (specifying which entry in the vertex list represents each corner of the cube).
...try adding more objects to the world, or improve the movement controls to move more realistically.
Window.matchMedia() - Web APIs
WebAPIWindowmatchMedia
the window interface's matchmedia() method returns a new mediaquerylist object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.
... syntax mqlist = window.matchmedia(mediaquerystring) parameters mediaquerystring a string specifying the media query to parse into a mediaquerylist.
... return value a new mediaquerylist object for the media query.
... examples this example runs the media query (max-width: 600px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that.
WindowEventHandlers.onhashchange - Web APIs
syntax using an event handler: window.onhashchange = funcref; using an html event handler: <body onhashchange="funcref();"> using an event listener: to add an event listener, use addeventlistener(): window.addeventlistener("hashchange", funcref, false); parameters funcref a reference to a function.
... function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } } window.onhashchange = locationhashchanged; using an event listener this example uses an event listener to log a notification whenever the hash has changed.
... function hashhandler() { console.log('the hash has changed!'); } window.addeventlistener('hashchange', hashhandler, false); overriding the hash this function sets a new hash dynamically, setting it randomly to one of two values.
... polyfill for event.newurl and event.oldurl // let this snippet run before your hashchange event binding code if (!window.hashchangeevent)(function(){ var lasturl = document.url; window.addeventlistener("hashchange", function(event){ object.defineproperty(event, "oldurl", {enumerable:true,configurable:true,value:lasturl}); object.defineproperty(event, "newurl", {enumerable:true,configurable:true,value:document.url}); lasturl = document.url; }); }()); specifications specification status comment html living standardthe definition of 'onhashchange' i...
Synchronous and asynchronous requests - Web APIs
this is a standard function which uses the xmlhttprequest object asynchronously in order to switch the content of the read file to a specified listener.
...en("get", url, true); xhr.send(null); } usage: function showmessage(message) { console.log(message + this.responsetext); } loadfile("message.txt", showmessage, "new message!\n\n"); the signature of the utility function loadfile declares (i) a target url to read (via an http get request), (ii) a function to execute on successful completion of the xhr operation, and (iii) an arbitrary list of additional arguments that are passed through the xhr object (via the arguments property) to the success callback function.
... window.addeventlistener('unload', logdata, false); function logdata() { var client = new xmlhttprequest(); client.open("post", "/log", false); // third parameter indicates sync xhr.
... window.addeventlistener('unload', logdata, false); function logdata() { navigator.sendbeacon("/log", analyticsdata); } ...
XRInputSourceArray.forEach() - Web APIs
the xrinputsourcearray method foreach() executes the specified callback once for each input source in the array, starting at index 0 and progressing until the end of the list.
... sourcelist optional the xrinputsourcearray object which is being processed.
... examples this example snippet gets the list of inputs for a session and tries to handle each type of input device it supports using.
...putsources = xrsession.inputsources; inputsources.foreach((input) => { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.targetraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } }); for each input in the llist, the callback dispatches gamepad inputs to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we look for tracked-pointer devices in the player's main hand, dispatching those to a handlemainhandinput() method.
XRInputSourceArray.keys() - Web APIs
return value a javascript iterator that can be used to walk through the keys for each entry in the list of input sources.
... the values returned by the iterator are the indexes of each entry in the list; that is, the numbers 0, 1, 2, and so forth through the index of the last item in the list.
... examples this example snippet gets the list of inputs for a session and tries to handle each type of input device it supports using.
... for (const inputidx of xrsession.inputsources.keys()) { /* the keys are the indexes into the list of inputs */ checkinput(xrsession.inputsources[inputidx]); } here, for...of is used to iterate over each of the keys.
XRPermissionDescriptor.requiredFeatures - Web APIs
the xrpermissiondescriptor dictionary's requiredfeatures property should be set prior to calling navigator.permissions.query() to a list of webxr features which must be supported for the app to work.
... syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.requiredfeatures = reqfeaturelist; reqfeaturelist = xrpermissiondescriptor.requiredfeatures; value an array of strings indicating the webxr features which must be available for use by the app or site.
... the permissions check will be performed in such a manner as to verify that all features in the list are available for use with the user's permission.
... the permitted values are: the types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them.
ARIA: feed role - Accessibility
a feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls.
...</section> description a feed is a page structure for a scrollable list of articles where scrolling may cause articles to be added to the top or end of the list.
... the list establishes an interoperability contract between the web page and assistive technologies that governs scroll interactions so that assistive technology users can read articles, jump forward and backward by article, and reliably trigger new articles to load while in reading mode.
... examples include an rss feed, news feeds, social media feeds like facebook, instagram or twitter, or even a list of related products on an ecommerce page.
An overview of accessible web applications and widgets - Accessibility
sliders, menu bars, file list views, and more can be built with a combination of javascript, css, and html.
...--> <!-- we've added role attributes to describe the tab list and each tab.
... --> <ol role="tablist"> <li id="ch1tab" role="tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab" role="tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab" role="tab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <!-- notice the role and aria-labelledby attributes we've added to describe these panels.
...examples include (but are certainly not limited to): aria-checked: indicates the state of a checkbox or radio button aria-disabled: indicates that an element is visible, but not editable or otherwise operable aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation (for a full list of aria states, consult the aria list of states and properties.) developers should use aria states to indicate the state of ui widget elements and use css attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
Accessibility Information for Web Authors - Accessibility
these guidelines are discussed on the wai interest group discussion list.
...(...) contrast is extremely important in web design." wheel of color: pump up the contrast, robert hess, msdn "for this year's list of worst design mistakes, (...) i asked readers of my newsletter to nominate the usability problems they found the most irritating.
... newsgroup and mailing list we have two discussion lists, which can be read via a newsgroup reader, as a mailing list or via google groups.
... purpose newsgroup mailing list google group developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
:nth-last-child() - CSS: Cascading Style Sheets
formal syntax :nth-last-child( <nth> [ of <complex-selector-list> ]?
... )where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
...in this example, list items turn red when there are at least three of them in a given list.
... html <h4>a list of four items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a list of two items (unstyled):</h4> <ol> <li>one</li> <li>two</li> </ol> css /* if there are at least three list items, style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li { color: red; } result specifications specification status comment selectors level 4the definition of ':nth-last-child' in that specification.
range - CSS: Cascading Style Sheets
[ [ | infinite ]{2} ]# defines a comma-separated list of ranges.
...the range of the counter style is the union of all the ranges defined in the list.
... description the value of the range descriptor can be either auto or a comma separated list of lower and upper bounds specified as integers.
... formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { system: cyclic; symbols: "\25a0" "\25a1"; range: 2 4, 7 9; } .list { list-style: range-multi-example; } the above list will display as follows: 1.
src - CSS: Cascading Style Sheets
WebCSS@font-facesrc
the format hint contains a comma-separated list of format strings that denote well-known font formats.
... description the value of this descriptor is a prioritized, comma-separated list of external references or locally-installed font face names.
... when a font is needed the user agent iterates over the set of references listed using the first one it can successfully activate.
... fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list.
@font-feature-values - CSS: Cascading Style Sheets
@stylistic specifies a feature name that will work with the stylistic() functional notation of font-variant-alternates.
... a stylistic feature value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 isn't.
... formal syntax @font-feature-values <family-name># { <feature-value-block-list> }where <family-name> = <string> | <custom-ident>+<feature-value-block-list> = <feature-value-block>+where <feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'where <feature-type> = @stylistic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation<feature-value-declaration-list> = <feature-value-declaration>where <feature-value-declarat...
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 9.3samsung internet android no support no@stylisticchrome no support noedge no support nofirefox full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-fe...
Attribute selectors - CSS: Cascading Style Sheets
[attr~=value] represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
...*/ /* note: you could also use hyphenated attributes without double quotes */ div[data-lang="zh-tw"] { color: purple; } html <div lang="en-us en-gb en-au en-nz">hello world!</div> <div lang="pt">olá mundo!</div> <div lang="zh-cn">世界您好!</div> <div lang="zh-tw">世界您好!</div> <div data-lang="zh-tw">世界您好!</div> result html ordered lists the html specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the type attribute of an ordered list doesn't work without the case-sensitive modifier.
... css /* list types require the case sensitive flag due to a quirk in how html treats the type attribute.
... */ ol[type="a"] { list-style-type: lower-alpha; background: red; } ol[type="a" s] { list-style-type: lower-alpha; background: lime; } ol[type="a" s] { list-style-type: upper-alpha; background: lime; } html <ol type="a"> <li>example list</li> </ol> result specifications specification status comment selectors level 4the definition of 'attribute selectors' in that specification.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
here's what happens when the play() function gets called: the box's list of css classes is reset to simply "box".
...however, changes to the class list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change.
... of course, we also need to add an event handler to our "run" button so it'll actually do something: document.queryselector(".runbutton").addeventlistener("click", play, false); result stopping an animation simply removing the animation-name applied to an element will make it jump or cut to its next state.
...e: .slidein { animation-duration: 5s; animation-name: slidein; animation-iteration-count: infinite; } .stopped { animation-name: none; } @keyframes slidein { 0% { margin-left: 0%; } 50% { margin-left: 50%; } 100% { margin-left: 0%; } } <h1 id="watchme">click me to stop</h1> let watchme = document.getelementbyid('watchme') watchme.classname = 'slidein' const listener = (e) => { watchme.classname = 'slidein stopped' } watchme.addeventlistener('click', () => watchme.addeventlistener('animationiteration', listener, false) ) demo https://jsfiddle.net/morenoh149/5ty5a4oy/ ...
Using multiple backgrounds - CSS: Cascading Style Sheets
these are layered atop one another with the first background you provide on top and the last background listed in the back.
...that is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
...rl(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'.
...so the first listed value for background-repeat applies to the first (frontmost) background, and so forth.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
ainer: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li cl...
...however, the width i have assigned to the list items themselves still applies, and it now makes those items a third of the width of the track: if i reset the width to auto, then this will stop the float behavior happening for older browsers.
...thers: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; min-height: auto; margin: 0; } } <div class="wrapper"> ...
...e item becomes a grid item: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width: auto; margin: 0; } } <div class="wrap...
Pagination - CSS: Cascading Style Sheets
to ensure that the pagination is understandable by people using a screenreader, we mark the items up as a list inside a <nav> element, and then use css to display the layout visually as a row.
...the <nav> element is designated a flex container in order that we can center the list inside using the justify-content property.
... the list itself also becomes a flex container to lay the items out as a row.
... .pagination { list-style: none; margin: 0; padding: 0; display: flex; column-gap: 2px; } accessibility concerns we want to ensure that a person using a screenreader understands what this navigation does, and where they will go when clicking a link.
Mozilla CSS extensions - CSS: Cascading Style Sheets
ic(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...ted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-c...
...cko 62 -moz-grid-lineobsolete since gecko 62 -moz-groupbox -moz-deckobsolete since gecko 62 -moz-popupobsolete since gecko 62 -moz-stackobsolete since gecko 62 -moz-markerobsolete since gecko 62 empty-cells -moz-show-background (default value in quirks mode) font -moz-button -moz-info -moz-desktop -moz-dialog (also a color) -moz-document -moz-workspace -moz-window -moz-list -moz-pull-down-menu -moz-field (also a color) font-family -moz-fixed image-rendering -moz-crisp-edges <length> -moz-calc list-style-type -moz-arabic-indic -moz-bengali -moz-cjk-earthly-branch -moz-cjk-heavenly-stem -moz-devanagari -moz-ethiopic-halehame -moz-ethiopic-halehame-am -moz-ethiopic-halehame-ti-er -moz-ethiopic-halehame-ti-et -moz-ethiopic-numeric ...
...moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-m...
WebKit CSS extensions - CSS: Cascading Style Sheets
t-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
... note: if there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.
...it-media-text-track-container ::-webkit-outer-spin-button ::-webkit-progress-bar ::-webkit-progress-inner-element ::-webkit-progress-value ::-webkit-search-cancel-button ::-webkit-search-results-button ::-webkit-slider-runnable-track ::-webkit-slider-thumb note: generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid.
... if a pseudo-element (but not pseudo-class) has a -webkit- prefix, as of firefox 63, blink, webkit and gecko browsers assume it is valid, not invalidating the selector list.
grid-template - CSS: Cascading Style Sheets
]+ [ / <explicit-track-list> ]?
... sets grid-template-areas to the strings listed, grid-template-rows to the track sizes following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size, and grid-template-columns to the track listing specified after the slash (or none, if not specified).
... note: the repeat() function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ascii art”.
...]+ [ / <explicit-track-list> ]?where <line-names> = '[' <custom-ident>* ']'<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )<explicit-track-list> = [ <line-names>?
pointer-events - CSS: Cascading Style Sheets
events: visible; /* svg only */ pointer-events: painted; /* svg only */ pointer-events: fill; /* svg only */ pointer-events: stroke; /* svg only */ pointer-events: all; /* svg only */ /* global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset; the pointer-events property is specified as a single keyword chosen from the list of values below.
...in these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
... note that preventing an element from being the target of pointer events by using pointer-events does not necessarily mean that pointer event listeners on that element cannot or will not be triggered.
... if one of the element's children has pointer-events explicitly set to allow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate.
Media buffering, seeking, and time ranges - Developer guides
cument.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.addeventlistener('seeked', function() { for (i = 0; i < myaudio.buffered.length; i++) { var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); context.stroke(); } }); } this works b...
... height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; ...
... break; } } } }); myaudio.addeventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; } }); } the progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.
...for example: var played = audio.played; // returns a timeranges object this could be useful for establishing the parts of your media that are most listened to or watched.
User input and controls - Developer guides
for example if you want to add controls when any key gets pressed, you need to add an event listener on the window object: window.addeventlistener("keydown", handlekeydown, true); window.addeventlistener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
...the list of all events using the mouse event interface is provided in the events reference.
... if you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired: element.addeventlistener("touchstart", handlestart, false);
 element.addeventlistener("touchcancel", handlecancel, false);
 element.addeventlistener("touchend", handleend, false);
 element.addeventlistener("touchmove", handlemove, false); where element is the dom element you want to register the touch even...
...
</div> in which we: set the draggable attribute to true on the element that you wish to make draggable add a listener for the dragstart event and set the drag data within this listener note: you can find more information in the mdn drag & drop documentation.
Connection - HTTP
except for the standard hop-by-hop headers (keep-alive, transfer-encoding, te, connection, trailer, upgrade, proxy-authorization and proxy-authenticate), any hop-by-hop headers used by the message must be listed in the connection header, so that the first proxy knows it has to consume them and not forward them further.
... standard hop-by-hop headers can be listed too (it is often the case of keep-alive, but this is not mandatory).
... any comma-separated list of http headers [usually keep-alive only] indicates that the client would like to keep the connection open.
...the list of headers are the name of the header to be removed by the first non-transparent proxy or cache in-between: these headers define the connection between the emitter and the first entity, not the destination node.
Feature-Policy: publickey-credentials-get - HTTP
syntax feature-policy: publickey-credentials-get <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy the default allowlist is 'self'.
... definition of publickey-credentials-get directive, default allowlist.
Strict-Transport-Security - HTTP
while the service is hosted by google, all browsers have stated an intent to use (or actually started using) the preload list.
... information regarding the hsts preload list in chrome : https://www.chromium.org/hsts consultation of the firefox hsts preload list : nsstspreloadlist.inc examples all present and future subdomains will be https for a max-age of 1 year.
...note that 1 year is acceptable for a domain to be included in browsers' hsts preload lists.
...it also suffixed with preload which is necessary for inclusion in most major web browsers' hsts preload lists, e.g.
Concurrency model and the event loop - JavaScript
queue a javascript runtime uses a message queue, which is a list of messages to be processed.
... adding messages in web browsers, messages are added anytime an event occurs and there is an event listener attached to it.
... if there is no listener, the event is lost.
...this method adds a message to the other runtime if the latter listens to message events.
Expressions and operators - JavaScript
a complete and detailed list of operators and expressions is also available in the reference.
... there are also compound assignment operators that are shorthand for the operations listed in the following table: compound assignment operators name shorthand operator meaning assignment x = y x = y addition assignment x += y x = x + y subtraction assignment x -= y x = x - y multiplication assignment x *= y x = x * y division assignment x /= y x = x / y remainder assignment x ...
...for example: 1 / 2; // 0.5 1 / 2 == 1.0 / 2.0; // this is true in addition to the standard arithmetic operations (+, -, *, /), javascript provides the arithmetic operators listed in the following table: arithmetic operators operator description example remainder (%) binary operator.
... the shift operators are listed in the following table.
Meta programming - JavaScript
handler.ownkeys() object.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() the result of ownkeys is a list.
... the type of each result list element is either string or symbol.
... the result list must contain the keys of all non-configurable own properties of target.
... if the target object is not extensible, then the result list must contain all the keys of the own properties of target and no other values.
SyntaxError: Malformed formal parameter - JavaScript
the javascript exception "malformed formal parameter" occurs when the argument list of a function() constructor call is invalid somehow.
...all the rest make up your new function's argument list.
... the argument list is invalid somehow.
... perhaps you accidentally picked a keyword like if or var as an argument name, or perhaps there's some stray punctuation in your argument list.
TypeError: Reduce of empty array with no initial value - JavaScript
examples invalid cases this problem appears frequently when combined with a filter (array.prototype.filter(), typedarray.prototype.filter()) which will remove all elements of the list.
... similarly, the same issue can happen if there is a typo in a selector, or an unexpected number of elements in a list: var names = document.getelementsbyclassname("names"); var name_list = array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); valid cases these problems can be solved in two different ways.
... var names = document.getelementsbyclassname("names"); var name_list1 = ""; if (names1.length >= 1) name_list1 = array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); // name_list1 == "" when names is empty.
... var name_list2 = array.prototype.reduce.call(names, (acc, name) => { if (acc == "") // initial value return name; return acc + ", " + name; }, ""); // name_list2 == "" when names is empty.
JavaScript error reference - JavaScript
below, you'll find a list of errors which are thrown by javascript.
... list of errors in this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message).
...can't have an initializersyntaxerror: applying the "delete" operator to an unqualified name is deprecatedsyntaxerror: for-in loop head declarations may not have initializerssyntaxerror: function statement requires a namesyntaxerror: identifier starts immediately after numeric literalsyntaxerror: illegal charactersyntaxerror: invalid regular expression flag "x"syntaxerror: missing ) after argument listsyntaxerror: missing ) after conditionsyntaxerror: missing : after property idsyntaxerror: missing ; before statementsyntaxerror: missing = in const declarationsyntaxerror: missing ] after element listsyntaxerror: missing formal parametersyntaxerror: missing name after .
... operatorsyntaxerror: missing variable namesyntaxerror: missing } after function bodysyntaxerror: missing } after property listsyntaxerror: redeclaration of formal parameter "x"syntaxerror: return not in functionsyntaxerror: test for equality (==) mistyped as assignment (=)?syntaxerror: unterminated string literaltypeerror: "x" has no propertiestypeerror: "x" is (not) "y"typeerror: "x" is not a constructortypeerror: "x" is not a functiontypeerror: "x" is not a non-null objecttypeerror: "x" is read-onlytypeerror: 'x' is not iterabletypeerror: more arguments neededtypeerror: reduce of empty array with no initial valuetypeerror: x.prototype.y called on incompatible typetypeerror: can't access dead objecttypeerror: can't access property "x" of "y"typeerror: can't assign to property "x" on "y": not...
Array - JavaScript
the javascript array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
... description arrays are list-like objects whose prototype has methods to perform traversal and mutation operations.
...setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's object property collection.
... the array's object properties and list of array elements are separate, and the array's traversal and mutation operations cannot be applied to these named properties.
Function.prototype.apply() - JavaScript
description note: while the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.
...you use an arguments array instead of a list of arguments (parameters).
...for example, you could use a nodelist, or a custom object like { 'length': 2, '0': 'eat', '1': 'bananas' }.
... in the following example we will create a global function method called construct, which will enable you to use an array-like object with a constructor instead of an arguments list.
Intl.NumberFormat() constructor - JavaScript
possible values are the iso 4217 currency codes, such as "usd" for the us dollar, "eur" for the euro, or "cny" for the chinese rmb — see the current currency & funds code list.
...a subset of units from the full list was selected for use in ecmascript.
...possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information).
...possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0.
Intl - JavaScript
intl.listformat() constructor for objects that enable language-sensitive list formatting.
... locale identification and negotiation the internationalization constructors as well as several language sensitive methods of other constructors (listed under see also) use a common pattern for identifying locales and determining the one they will actually use: they all accept locales and options arguments, and negotiate the requested locale(s) against the locales they support using an algorithm specified in the options.localematcher property.
... locales argument the locales argument requests that a particular locale (or a locale from a list of them) be considered for use in a given operation.
... locale negotiation the list of locales specified by the locales argument, after unicode extensions have been removed from them, is interpreted as a prioritized request from the application.
WeakMap - JavaScript
such an implementation would have two main inconveniences: the first one is an o(n) set and search (n being the number of keys in the map) since both operations must iterate through the list of keys to find a matching value.
...there is no method to obtain a list of the keys.
... if they were, the list would depend on the state of garbage collection, introducing non-determinism.
... if you want to have a list of keys, you should use a map.
MathML documentation index - MathML
WebMathMLIndex
html becomes verbose when your document contains advanced structures like lists or tables but fortunately there are many generators from simple notations, wysiwyg editors and other content management systems to help writing web pages.
... 5 proving the pythagorean theorem beginner, example, guide, html5 math, math education, mathml, needsbeginnerupdate we will now prove the pythagorean theorem: 6 mathml attribute reference mathml, mathml reference this is an alphabetical list of mathml attributes.
... 8 mathml documentation index index, mathml found 40 pages: 9 mathml element reference mathml, mathml reference this is an alphabetical list of mathml presentation elements.
...it accepts all attributes of all mathml presentation elements with some exceptions and additional attributes listed below.
Autoplay guide for media and Web Audio APIs - Web media technologies
autoplay availability as a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true: the audio is muted or its volume is set to 0 the user has interacted with the site (by clicking, tapping, pressing keys, etc.) if the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features if the autoplay feature policy is used to grant autoplay support to an <iframe> and its document.
...the exact situations that result in blocking, and the specifics of how sites become whitelisted vary from browser to browser, but the above are good guidelines to go by.
...you can do this easily, by listening for the play event to be fired on the media element.
...here, any such preferences that may be of special significance or importance to you as a web developer are listed.
Media container formats (file types) - Web media technologies
common container formats while there are a vast number of media container formats, the ones listed below are the ones you are most likely to encounter.
...the mime types and extensions for each are listed.the most commonly used containers for media on the web are probably mpeg-4 (mp4), quicktime movie (mov), and the wavefile audio file format (wav).
... index of media container formats (file types) to learn more about a specific container format, find it in this list and click through to the details, which include information about what the container is typically useful for, what codecs it supports, and which browsers support it, among other specifics.
..., internet explorer 9, opera 10.50 quicktime (mov) apple quicktime movie only older versions of safari, plus other browsers that supported apple's quicktime plugin webm web media chrome 6, edge 173 (desktop only), firefox 4, opera 10.6, safari (webrtc only) [1] unless otherwise specified, both mobile and desktop browser compatibility is implied if a browser is listed here.
Introduction to progressive web apps - Progressive web apps (PWAs)
you can check the list at pwa.rocks for more examples.
... particularly worth mentioning is the hnpwa.com page—this lists an example implementation of the hacker news website (instead of the usual todomvc app), in which you can see the use of various front-end frameworks.
...this is for use in contexts such as app listings and device home screens.
... an example application in this series of articles we will examine the source code of a super simple website that lists information about games submitted to the a-frame category in the js13kgames 2017 competition.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
... to receive push messages, we can listen to the push event in the service worker file: self.addeventlistener('push', function(e) { /* ...
...req.body.ttl }; settimeout(function() { webpush.sendnotification(subscription, payload, options) .then(function() { res.sendstatus(201); }) .catch(function(error) { console.log(error); res.sendstatus(500); }); }, req.body.delay * 1000); }); }; service-worker.js the last file we will look at is the service worker: self.addeventlistener('push', function(event) { const payload = event.data ?
... event.data.text() : 'no payload'; event.waituntil( self.registration.shownotification('serviceworker cookbook', { body: payload, }) ); }); all it does is add a listener for the push event, create the payload variable consisting of the text taken from the data (or create a string to use if data is empty), and then wait until the notification is shown to the user.
SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
value: false|true; animatable: no requiredextensions list all the browser specific capabilities that must be supported by the borwser to be allowed to render the associated element.
... value: a list of space-separated uri; animatable: no requiredfeatures deprecated since svg 2 list all the features, as defined is the svg 1.1 specification, that must be supported by the borwser to be allowed to render the associated element..
... value: a list of space-separated uri; animatable: no systemlanguage indicates which language the user must have chosen to render the associated element.
... value: a list of comma-separated language id; animatable: no ...
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
the attribute value is a semicolon separated list of values.
... the interpretation of a list of start times is detailed in the smil specification in "evaluation of begin and end time lists".
... value <begin-value-list> default value 0s animatable no the <begin-value-list> is a semicolon-separated list of values.
... value <begin-value-list> default value 0s animatable no the definition of <begin-value-list> is the same as for the other animation elements.
dx - SVG: Scalable Vector Graphics
WebSVGAttributedx
value list of <length> default value none animatable yes fedropshadow for <fedropshadow>, dx defines the x offset of the droped shadow.
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="25%" y2="25%" /> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="0" x2="100%" y1="75%" y2="75%" /> <line x1="10%" x...
... value list of <length> default value none animatable yes tspan for <tspan>, if it contains a single value, dx defines a shift along the x-axis for all alternate glyph.
... value list of <length> default value none animatable yes specifications specification status comment filter effects module level 1the definition of 'dx' in that specification.
dy - SVG: Scalable Vector Graphics
WebSVGAttributedy
value list of <length> default value none animatable yes fedropshadow for <fedropshadow>, dy defines the y offset of the dropped shadow.
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal lines --> <line x1="0" x2="100%" y1="30" y2="30" /> <line x1="0" x2="100%" y1="40" y2="40" /> <line x1="0" x2="100%" y1="50" y2="50" /> <line x1="0" x2="100%" y1="60" y2="60" /> <!-- verti...
... value list of <length> default value none animatable yes tspan for <tspan>, if it contains a single value, dy defines a shift along the y-axis for all alternate glyph.
... value list of <length> default value none animatable yes specifications specification status comment filter effects module level 1the definition of 'dy' in that specification.
requiredFeatures - SVG: Scalable Vector Graphics
the requiredfeatures attribute takes a list of feature strings, with the individual strings separated by white space.
...ewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features> default value true if not defined, false if null or empty string as value animatable no <list-of-features> this is a list of feature strings, separated using white space.
...see feature strings below for a list of allowed values.
...the svg 1.0 feature strings are not listed here but can be found in the svg specification.
x - SVG: Scalable Vector Graphics
WebSVGAttributex
value list of <length> default value none animatable yes feblend for <feblend>, x defines the minimum x coordinate for the rendering area of the primitive.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x posit...
... value list of (<length> | <percentage>) default value 0 animatable yes tspan for <tspan>, if it contain a single value, x defines the x coordinate on where the content text position must be placed.
... value list of (<length> | <percentage>) default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x po...
y - SVG: Scalable Vector Graphics
WebSVGAttributey
value list of <length> default value none animatable yes feblend for <feblend>, y defines the minimum y coordinate for the rendering area of the primitive.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> ...
... value list of (<length> | <percentage>) default value 0 animatable yes tspan for <tspan>, if it contain a single value, y defines the y coordinate on where the content text position must be placed.
... value list of (<length> | <percentage>) default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> ...
Features restricted to secure contexts - Web security
this reference lists the web platform features available only in secure contexts — see secure contexts for a definition and more details.
... current features available only in secure contexts this section lists all the apis available only in secure contexts, along with browser versions the limitation was introduced in, as appropriate.
... note: only the browsers that actually support secure contexts are listed in this document.
...this section lists any such differences existing in browsers.
Modules - Archive of obsolete content
for instance, the option paths is used to specify a list of paths to be used by the loader to resolve relative urls: let loader = loader({ paths: ["./": "http://www.foo.com/"] }); commonjs also defines the notion of a main module.
...a whitelist of modules is generated statically when the add-on is linked.
... it is possible to pass a list of predefined modules as an option to the loader constructor.
indexed-db - Archive of obsolete content
here's a complete add-on that adds two buttons to the browser: the button labeled "add" adds the title of the current tab to a database, while the button labeled "list" lists all the titles in the database.
...ew array(); trans.oncomplete = function() { cb(items); } var keyrange = idbkeyrange.lowerbound(0); var cursorrequest = store.opencursor(keyrange); cursorrequest.onsuccess = function(e) { var result = e.target.result; if(!!result == false) return; items.push(result.value.name); result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = require("sdk/ui/button/action").actionbutton({ id: "add", label: "add", icon: "./add.png", onclick: function() { additem(require("sdk/tabs").activetab.title); } }); var list = require("sdk/ui/button/action").actionbutton({ id: "list", label: "list", icon: "./list.png", onclick: function() { getitems(list...
...items); } }); note that to run this add-on you'll need to provide icons named "add.png" and "list.png" in the add-on's "data" directory.
passwords - Archive of obsolete content
because the search function is expected to return a list of matching credentials, its oncomplete option is mandatory.
... globals functions search(options) this function is used to retrieve a credential, or a list of credentials, stored in the password manager.
...it is passed all the matching credentials as a list.
simple-storage - Archive of obsolete content
to listen for quota notifications, register a listener for the "overquota" event.
... function myonoverquotalistener() { console.log("uh oh."); } ss.on("overquota", myonoverquotalistener); listeners can also be removed: ss.removelistener("overquota", myonoverquotalistener); to find out how much of your quota you're using, check the module's quotausage property.
...for example: ss.storage.mylist = [ /* some long array */ ]; ss.on("overquota", function () { while (ss.quotausage > 1) ss.storage.mylist.pop(); }); private browsing if your storage is related to your users' web history, personal information, or other sensitive data, your add-on should respect private browsing.
Low-Level APIs - Archive of obsolete content
preferences/event-target listen to changes to the preferences system in firefox.
... util/collection a simple list-like class and utilities for using it.
... util/list building blocks for composing lists.
Creating annotations - Archive of obsolete content
off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
... the page-mod matches all pages, so each time the user loads a page the page-mod emits the attach event, which will call the listener function we've assigned to onattach.
... annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area focus listen for the return key and when it is pressed, send the contents of the text area to the add-on.
Implementing the widget - Archive of obsolete content
on a right-click, the widget should display a list of all the annotations the user has created.
... the widget's content script the widget's content script just listens for left- and right- mouse clicks and posts 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/...
... data.url('widget/pencil-on.png') : data.url('widget/pencil-off.png'); }); widget.port.on('right-click', function() { console.log('show annotation list'); }); } the annotator is inactive by default.
Overview - Archive of obsolete content
the widget is used to switch the annotator on and off, and to display a list of all the stored annotations.
... the annotation-list panel shows a list of all stored annotations.
... the matcher is responsible for finding annotated elements: it is initialized with the list of annotations and searches web pages for the elements they are associated with.
Chrome Authority - Archive of obsolete content
manifest generation the manifest is a list, included in the generated xpi, which specifies which modules have requested require() access to which other modules.
...this list is generated by scanning all included modules for require(xyz) statements and recording the particular "xyz" strings that they reference.
... when the manifest implementation is complete the runtime loader will actually prevent modules from require()ing modules that are not listed in the manifest.
Developing for Firefox Mobile - Archive of obsolete content
the tables at the end of this guide list the modules that are currently supported on firefox mobile.
...then type: adb devices you should see some output like: list of devices attached 51800f220f01564 device (the long hex string will be different.) if you do, then adb has found your device and you can get started.
...t/runner supported test/utils supported ui/button/action not supported ui/button/toggle not supported ui/frame not supported ui/id supported ui/sidebar not supported ui/toolbar not supported util/array supported util/collection supported util/deprecate supported util/list supported util/match-pattern supported util/object supported util/uuid supported window/utils supported ...
Modifying Web Pages Based on URL - Archive of obsolete content
to send a message from one side to the other, sender calls port.emit() and receiver listens using port.on().
... in the add-on script, you need to listen for the onattach event to get passed a worker object that contains port.
... the content script now needs to look like this: // "self" is a global object in content scripts // listen for a message, and replace the document's // contents with the message payload.
Modifying the Page Hosted by a Tab - Archive of obsolete content
to send a message from one side to the other, sender calls port.emit() and receiver listens using port.on().
... the content script now needs to look like this: // "self" is a global object in content scripts // listen for a "drawborder" self.port.on("drawborder", function(color) { document.body.style.border = "5px solid " + color; }); in the add-on script, we'll send the content script a "drawborder" message using the object returned from attach(): var self = require("sdk/self"); var tabs = require("sdk/tabs"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "sty...
... learning more to learn more about working with tabs in the sdk, see the open a web page tutorial, the list open tabs tutorial, and the tabs api reference.
Dialogs and Prompts - Archive of obsolete content
ekeeper/there.is.only.xul" id="..." buttons="accept,cancel,extra1" ondialogaccept="onaccept();" ondialogextra1="onapply();" buttonlabelextra1="apply" buttonaccesskeyextra1="a"> <!-- content --> </dialog> you can even get the element object for any of predefined buttons with gdialog.getbutton(dlgtype);, where gdialog is the <dialog> element and dlgtype is one of the six button types listed above.
...valid values for dlgtype are the six button types listed above.
...the possible values for the attribute are the names of buttons listed above, and the default is "accept", for compatibility with previous versions.
JavaScript Debugger Service - Archive of obsolete content
jsd.clearfilters(); // clear the list of filters // we exclude the scripts with the following filenames from being tracked jsd.appendfilter(createfilter("*/firefox/components/*")); jsd.appendfilter(createfilter("*/firefox/modules/*")); jsd.appendfilter(createfilter("xstringbundle")); jsd.appendfilter(createfilter("chrome://*")); jsd.appendfilter(createfilter("x-jsd:ppbuffer*")); jsd.appendfilter(createfilter("xpcsafejsobjectwrapper.
...cpp")); jsd.appendfilter(createfilter("file://*")); note that appendfilter adds the filter to the end of the list.
... you can use insertfilter (jsdifilter filter, jsdifilter after) to insert the filter after a particular filter; you can pass null for jsdifilter after to insert at the head of the list.
Installing Extensions and Themes From Web Pages - Archive of obsolete content
furthermore, calling updateenabled may lead to problems if your distribution site is not in the user's whitelist, because firefox only displays the "installation blocked" message when install or installchrome are called, or when a xpi file is loaded.
...and your site is not in the whitelist, when the user invokes that code, updateenabled will return false because your site isn't whitelisted, and since it was updateenabled that discovered this, not a call to install, there will be no notification to the user.
... thus you should only use updateenabled to display content in the page to alert the user that software installation is disabled, or your site is not in the whitelist—do not place it in the install code path.
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); then all we need is some persistent flag that ensures that the first run code is only run once.
... so, in order to detect the first stage, you'll need to add an event listener using the addaddonlistener method.
...so, you should listen to other events, like canceling the operation, to make sure that you know what is going on.
Local Storage - Archive of obsolete content
a full list of these flags can be found in the firefox source.
...don't log inside functions that are called too often, such as mouseover event handlers, or certain http activity listeners.
... handling templates can also be complicated, but it is worth the effort if you need to display long lists or trees with complex data.
Mozilla Documentation Roadmap - Archive of obsolete content
the list goes on.
...it also includes discussions on add-on monetization, job postings and a long list of add-on ideas waiting to be developed.
...better to scan a list of hundreds of bugs than getting no results at all, right?
Extensions support in SeaMonkey 2 - Archive of obsolete content
the basics to support seamonkey 2 as a target application, you need to add it to the list of target applications in the extension's install.rdf file.
...some urls are listed below: url in firefox url in seamonkey overlays chrome://browser/content/browser.xul chrome://navigator/content/navigator.xul main browser window chrome://browser/content/pageinfo/pageinfo.xul chrome://navigator/content/pageinfo/pageinfo.xul page info window chrome://browser/content/preferences/permissi...
...some important menu ids are listed below, menu ids are based on firefox 3 source code: menu id in firefox menu id in seamonkey 1.x and 2.0 seamonkey 2.1 overlays menu_filepopup menu_filepopup menu_filepopup file menu popup menu_editpopup menu_edit_popup menu_editpopup edit menu popup menu_viewpopup menu_view_popup ...
Setting up an extension development environment - Archive of obsolete content
(linux, mac os x, windows instructions.) you'll see the list of available user profiles one which is default (stable) and other (unstable) profile(s) created automatically when you run other versions of firefox earlier.
... recommended development preferences not all preferences are defined by default, and are therefore not listed by default.
... chrome list navigate and view files in chrome:// (firefox version, thunderbird version) chrome edit plus a user file editor (firefox and thunderbird) firebug a variety of development tools (firefox) pentadactyl, a general purpose extension with builtin tools for extension development, including a command line with chrome javascript evaluation (including property and function argument completion) and the a...
Promises - Archive of obsolete content
let config = json.parse( yield os.file.read(configpath, { encoding: "utf-8" })); let files = []; // get the directory contents from a list of directories.
... let download_2 = yield downloads.createdownload({ source: url_2, target: path_2, }); // add it to the downloads list used by the download manager ui.
... let list = yield downloads.getlist(downloads.all); list.add(download_2); // start the second download, and wait for both // downloads to complete.
Search Extension Tutorial (Draft) - Archive of obsolete content
other settings violations designed to restrict user choice will result in stronger action, such as blacklisting of the add-ons in question.
...ils.name)) { services.search.addenginewithdetails.apply(services.search, ["name", "iconurl", "alias", "description", "method", "url"].map( function (k) engine_details[k])) } let engine = services.search.getenginebyname(engine_details.name); // if the engine is not hidden and this is the first run, move // it to the first position in the engine list and select it if (selectsearch && !engine.hidden) { services.search.moveengine(engine, 0); services.search.currentengine = engine; } } function shutdown(data, reason) { // clean up the search engine on uninstall or disabled.
... removeobserver(); // if the engine is not hidden and this is the first run, move // it to the first position in the engine list and select it if (selectsearch && !engine.hidden) { services.search.moveengine(engine, 0); services.search.currentengine = engine; } } } // observer topic const engine_added = "browser-search-engine-modified"; function startup(data, reason) { firstrun = reason == addon_install; // re-select the search engine if this is the first run // or ...
Adding preferences to an extension - Archive of obsolete content
please note that if you are using code from this tutorial to add to an existing extension, you must uninstall and reinstall your extension to enable the preferences button for your extension in the add-ons list.
... installing the event listeners the only thing left to do is to install the event listeners needed to run the startup() and shutdown() routines automatically when the browser window is loaded and unloaded.
... window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); window.addeventlistener("unload", function(e) { stockwatcher.shutdown(); }, false); design the preference dialog now that we've written all the code, we need to build the xul file for the options dialog.
CSS3 - Archive of obsolete content
at each point of time, a snapshot of the css standard can be defined, listing css2.1 and the mature modules.
... an early list of what could be in the next iteration of the css basic user interface module is available.
... css box alignment module level 3 working draft selectors level 4 working draft css lists module level 3 working draft extends the list counter mechanism so that list markers can be styled and web developers can define new list counter schemes.
Block and Line Layout Cheat Sheet - Archive of obsolete content
these are stored as a doubly-linked list in the mlines member of nsblockframe.
...if the flag hasn't been set in the block reflow state, then shouldapplytopmargin() will crawl the line list to see if a block frame precedes the specified frame.
...in this case, the flag won't be set, so subsequent calls to shouldapplytopmargin() will continue crawl the line list.) this flag is also set in the nsblockreflowstate constructor if brs_istopmarginroot is set; that is, if the frame being reflowed is a margin root by default.
Documentation for BiDi Mozilla - Archive of obsolete content
ibmbidi), written by simon montagu and posted to the mozilla-layout mailing list.
...some support added for alignment in tables and lists, and fixes for problems with different combinations of dir and align.
... improvements to lists with hebrew and arabic list-style-type summary of new classes class name xpcom interface (if applicable) implementation comments nsibidi intl\unicharutil\public\nsibidi.h intl\unicharutil\src\nsbidiimp.cpp implementation of the unicode bidi algorithm nsiubidiutils intl\unicharutil\public\nsiubidiutils.h intl\unicharutil\src\nsbidiutilsimp.cpp utilities for bidi processing, including: character classification symmetric swapping reordering shaping numeric translation conversion to/from presentation forms nsbidipresutils layout/base/nsbidipresutils.cpp utilities for the layout engine including: resolve frames by bidi level split framesreorder frames format bidi text support for deletion and insertion of frames by editor nsbiditextframe layout/generic/nsbidi...
Syncing custom preferences - Archive of obsolete content
when preferences sync is enabled, firefox sync will synchronize preferences between the same application based on a whitelist.
...to sync preferences between firefoxes, fennecs, thunderbirds, etc., ensure the prefs are whitelisted.
... the whitelist is determined as follows: for each services.sync.prefs.sync.<pref> preference that is set to true, firefox sync will sync the <pref> preference.
Hidden prefs - Archive of obsolete content
see http://lxr.mozilla.org/mozilla/sourc...drdatabase.idl for the list of valid attributes "c" == contains.
...mail composition "other header" pref ("mail.compose.other.header") the format for this a comma delimited list of mail headers, like "approved,x-no-archive" an example for your prefs.js would be: user_pref("mail.compose.other.header", "approved"); this will cause "approved" to show up in the compose window address picker, under to:, cc:, bcc:, newsgroup:, etc.
...| mail & newsgroups | addressing" "other compose header" pref from mailnews.js: // you can specify a comma delimited list of optional headers // this will show up in the address picker in the compose window // examples: "x-face" or "approved" pref("mail.compose.other.header", "approved,x-no-archive"); ...
Introducing the Audio API extension - Archive of obsolete content
o-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable event as the audio is played, sample data is made available to the audio layer and the audio buffer (size defined in mozframebufferlength) gets filled with those samples.
...th; } function audioavailable(event) { var framebuffer = event.framebuffer; var t = event.time; var text = "samples at: " + t + "\n"; text += framebuffer[0] + " " + framebuffer[1]; raw.innerhtml = text; } var raw = document.getelementbyid('raw'); var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> creating an audio stream it is also possible to create and setup an <audio> element for raw writing from script (i.e., without a src attribute).
... a2.mozsetup(a1.mozchannels, a1.mozsamplerate); } function audioavailable(event) { // write the current framebuffer var framebuffer = event.framebuffer; writeaudio(framebuffer); } a1.addeventlistener('mozaudioavailable', audioavailable, false); a1.addeventlistener('loadedmetadata', loadedmetadata, false); function writeaudio(audio) { buffers.push(audio); // if there's buffered data, write that while(buffers.length > 0) { var buffer = buffers.shift(); var written = a2.mozwriteaudio(buffer); // // if all data wasn't written, keep it in the buffers: if(written < buffe...
JavaScript crypto - Archive of obsolete content
handling smart card events web sites can make themselves more smartcard friendly by listening for smartcard insertion and removal events.
...you can then register event handlers for these events with the document.addeventlistener() method.
...<script> function onsmartcardchange() { window.location.reload(); } function register() { window.crypto.enablesmartcardevents = true; document.addeventlistener("smartcard-insert", onsmartcardchange, false); document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, false); document.removeeventlistener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script> with t...
Plug-n-Hack Phase1 - Archive of obsolete content
the configuration document should then listen for a number of other events: configuresectoolstarted - this notifies the document that the browser is processing the configuration; if this event is not received within a reasonable amount of time after the configuresectool event has been fired, you might want to warn the user that pnh does not seem to be supported by this browser (perhaps prompting them to install the appropriate addon).
...e/branches/beta/src/org/zaproxy/zap/extension/plugnhack/resource/service.json firefox ui in firefox the tool commands will be made available via the developer toolbar (gcli) https://developer.mozilla.org/docs/tools/gcli a example of how the zap commands are currently displayed is: note that user specified parameters can be specified for commands, which can either be free text, a static pull down list of options or a dynamic list of options obtained from the tool on demand.
... so if you select the “zap scan” command then you will be prompted to select a site from the list of sites currently known to zap.
New Skin Notes - Archive of obsolete content
--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:policies_and_guidelines page) (dria: fix catlinks style) the arrows that appear if you select "enhanced recent changes" in your preferences have an ugly border around them.
...--callek is it possible to remove the blank space on category pages, like category:dom?by the way, it looks like this skin has the same problem as previous - the edit box, category list on category pages, and others are always below the end of the sidebar.
...--waldo 21:09, 25 aug 2005 (pdt) not going to change (yet or possibly ever) adding pipes between buttons in horizontal nav-bar (ie: my talk | preferences | my watchlist) (stricken part is done).
Table Layout Regression Tests - Archive of obsolete content
select from the regression-test menu the add new list...entry.
... change the source if necessary until the regression tests indicate that your patch does not fork the block and table layout submit your patch and lists the remaining differences in the bug be prepared to cycle.
... <font serif 240 240 0 /> <color data="-16777216"/> <background data="0 2 3 -1 0 0 "/> <spacing data="left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0" /> <list data="100 100 " /> <position data="left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto " /> <text data="0 0 0 normal normal 0[0x0]tw normal " /> <textreset data="0 10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null nu...
Running Tamarin performance tests - Archive of obsolete content
untests.py -h usage: runtests.py [options] [tests] -v --verbose enable additional output -e --avm avmplus command to use -a --asc compiler to use -g --globalabc deprecated but still works - use builtin.abc (used to be location of global.abc) -b --builtinabc location of builtin.abc -s --shellabc location of shell_toplevel.abc -x --exclude comma separated list of directories to skip -h --help display help and exit -t --notime do not generate timestamps (cleaner diffs) -f --forcerebuild force rebuild all test files -c --config sets the config string [default os-tvm] -q --quiet display minimum output during testrun -l --log also log all output to given logfile --summaryonly only display final summary --...
...metricinfo.py this file contains a list of metrics that the harness will look for and record.
...the command: $ adb devices lists the device id of each phone.
The life of an HTML HTTP request - Archive of obsolete content
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.
...the parser then parses the stream it gets via its streamlistener interface and converts it to nsiparsernodes which it places in the contentsink.
Mozilla Web Developer Community - Archive of obsolete content
newsgroups, mailing lists, and forums by topic: css - mozilla.dev.tech.css dom - mozilla.dev.tech.dom html - mozilla.dev.tech.html plugins - mozilla.dev.tech.plugins xml - mozilla.dev.tech.xml documentation - see mdc:community more at http://www.mozilla.org/community/dev...er-forums.html mozillazine forums mozilla news and development help mozilla (testing and development) mozdev.org mozillazine planet mozilla spread firefox standards communities get involved in grass-roots web standards evangelism efforts through these groups: the web standards project, a grassroots coalition fighting for standards maccaws, making a commercial ...
...case for web standards a list apart, for people who make websites mozilla technology evangelism, get involved with mozilla evangelism you may also find helpful information on the w3c mailing lists newsletter there is no newsletter planned at this time.
...the list of old devedge feeds is at http://devedge-temp.mozilla.org/comm.../feedlist.html feedback hendrix mdnproduct feedback bugzilla - report a bug in a mozilla product for questions related to this website (but not technical questions), please send your message to the mdc mailing list.
DOM Interfaces - Archive of obsolete content
idl definition interface nsidomdocumentxbl { nodelist getanonymousnodes(in element elt); element getanonymouselementbyattribute(in element elt, in domstring attrname, in domstring attrvalue); element getbindingparent(in node node); void loadbindingdocument(in domstring documenturl); }; methods getanonymousnodes the getanonymousnodes method retrieves the anonymous children of the specified element.
... return value nodelist - the return value of getanonymousnodes is a nodelist that represents the children of an element after insertion points from its own binding have been applied.
... this means that, depending on the details regarding the insertion points of the binding, it's possible that some non-anonymous nodes appear in the list.
Creating XPI Installer Modules - Archive of obsolete content
chrome/ us/ us.jar chatzilla/ chatzilla.jar chrome.rdf chromelist.txt classic/ classic.jar comm/ comm.jar content-packs/ content-packs.jar embed-sample/ embed-sample.jar en-us/ en-us.jar en-mac/ en-mac.jar en-unix/ en-unix.jar en-win/ en-win.jar help/ help.jar inspector/ inspector.jar installed-chrome.txt messenger/ messenger.jar ...
...in the following listing, the items in red are particular to the barley package and can be edited for your own distribution: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the packages being supplied --> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:barley"/> </rdf:seq> ...
...<!-- package information --> <rdf:description about="urn:mozilla:package:barley" chrome:displayname="barley grain" chrome:author="ian oeschger" chrome:name="barley"> </rdf:description> </rdf:rdf> create a contents.rdf file like the one in the listing above and put it in the content/ subdirectory with the other package resources.
Windows stub installer - Archive of obsolete content
for example, see the xpcom section that lists all the shared libraries as seen in dist.
... other macro strings listed in makejs.pl can be found by searching for "version", which is one of the macro strings, until you find the line $line =~ s/\$version\$/$inversion/i; other macro strings are grouped in this section.
... finally add <component> to the component list array @gcomponentlist at: <http://lxr.mozilla.org/seamonkey/sou...makeall.pl#125> you can test it by changing your current working directory to mozilla/xpinstall/wizard/windows/builder and running "perl build.pl" on the shell prompt.
treecol.type - Archive of obsolete content
*/ list-style-image: none; } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells.
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif"); } see also type ...
Accessing Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...for a full list of starting directories, see starting directories below.
...there are several other values which may be used as the first argument to nsiscriptableio.getfile(), listed in the following table.
Reading from Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...see file errors for a list of errors that might occur.
...for a list of supported character encodings, see supported character sets.
IO - Archive of obsolete content
ArchiveMozillaXULFileGuideIO
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...file errors see file errors for a list of errors that might occur while using files.
...specifically, to create a directory, see creating directories and to retrieve a list of files or subdirectories within a directory, see iterating over the files in a directory.
MenuButtons - Archive of obsolete content
<button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected.
... if you do want this indication, you should use a menulist instead.
...we might want to extend this example to insert a list of the unsaved documents to the save button menu so that each could be saved individually.
controllers - Archive of obsolete content
« xul reference controllers type: nsicontrollers a controllers list attached to the element.
...the document's command dispatcher will locate controllers to handle a command by using the focused element's list.
... example <window id="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </list...
Additional Template Attributes - Archive of obsolete content
<listbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" template="phototemplate"/> ...
...the listbox here does not have any children, although it may do.
...the generated content is always inserted into the root node, in this example the listbox, not inside the template.
Adding more elements - Archive of obsolete content
<hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down b...
...<spacer style="height: 10px"/> <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" fle...
...let us change the box into a groupbox: <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> .
Adding Style Sheets - Archive of obsolete content
<spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spa...
...cer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"/> ...
...the following list summarizes some of the selectors available: button matches all button tags.
Anonymous Content - Archive of obsolete content
for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.j...
...its value should be set to a single tag name, or to a list of tags separated by vertical bars (the | symbol).
...by adding a includes attribute and setting it to a vertical bar-separated list of tags, you can make only elements in that list be placed at that location.
Creating a Skin - Archive of obsolete content
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.
... #find-button { list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg"); font-weight: bold; } #cancel-button { list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); } button:hover { color: #000066; } we add some images to the buttons and make the find button have bold text to indicate that it is the default button.
Document Object Model - Archive of obsolete content
you might note that most of the properties listed in the reference correlate to common attributes on elements.
...some common properties are listed below: firstchild reference to the first child node of an element lastchild reference to the last child node of an element childnodes holds a list of the children of an element parentnode reference to the parent of an node nextsibling reference to the next sibling in sequence previoussibling reference to the previous sibling in sequence these properties allow you to naviga...
...or, you might accomplish the same thing by iterating through the items in the childnodes list.
Keyboard Shortcuts - Archive of obsolete content
it is a space-separated list of modifier keys, which are listed below.
...a table of the keys is listed below.
...in this case, you can add an event listener to the window tag.
Localization - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="findfile.js"/> <popupset> <menupopup id="editpopup"> <menuitem label="&cutcmd.label;" accesskey="&cutcmd.accesskey;"/> <menuitem label="&copycmd.label;" accesskey="&copycmd.accesskey;"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" disabled="true"/> </menupopup> <...
..."/> </toolbar> </toolbox> <tabbox> <tabs> <tab label="&searchtab;" selected="true"/> <tab label="&optionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> &finddescription; </description> <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="&findcriteria;"/> <menulist id="searchtype"> <menupopup> <menuitem label="&type.name;"/> <menuitem label="&type.size;"/> <menuitem label="&type.date;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="&mode.is;"/> <menuitem label="&mode.isnot;"/> </menupopup> </menulist> ...
... <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"> <template> <menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"/> <checkbox id="wordscheck" label="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="results" style="display: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.locat...
Scrolling Menus - Archive of obsolete content
it will apply to menus on menubars, in popups or menulists.
...you could use it to implement a list when you don't want it to be a drop-down.
... example - scrolling list of buttons the following example shows how to create a scrolling list of buttons (you will need to resize the window to see the arrow buttons): example 1 : source view <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> if you try this example, it will first open at full size.
XPCOM Interfaces - Archive of obsolete content
mozilla stores a list of all the components that are available in its own registry.
...the interfaces property of the components object contains a list of all the interfaces that are available.
...it allows you to add bookmarks to the user's current bookmark list.
XUL Structure - Archive of obsolete content
for example, the messenger component has descriptions of the mail messages list window, the composition window and the address book dialogs.
... in the listing above, two files have been shown.
...the locale structure is similar to the others, so it won't be listed here.
XUL Parser in Python/source - Archive of obsolete content
import sys, glob, xmllib import os, re el_list = {} w = open('res.html', 'w') # unfortunately, i had to put this hack in here to suppress the printing out of the resolved namespace: # "xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul window", etc.
... def strip(snip): t = re.sub('http://.*?\s', '', snip) return t class xulparser(xmllib.xmlparser): def unknown_starttag(self, t, a): name = strip(t) if name not in el_list: el_list[name] = {} for attr,val in a.items(): el_list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for item in elements: w.write...
...('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item]: w.write('<tr><td class="at">' + a + '</td>') w.write('</table></html>\n') w.close() ...
XULBrowserWindow - Archive of obsolete content
in order to do so it implements the following interfaces: nsisupports nsixulbrowserwindow nsiwebprogresslistener nsiwebprogresslistener2 nsisupportsweakreference note: this page is not complete at this time.
... method overview boolean hidechromeforlocation(in string alocation); attributes attribute type description incontentwhitelist string[] an array of url strings for which chrome is automatically hidden.
...by default, chrome is hidden for about:addons and any other pages in the in content whitelist.
arrowscrollbox - Archive of obsolete content
scrollboxobject type: nsiscrollboxobject the scroll box object implements the nsiscrollboxobject interface, which may be used to retrieve and adjust the scroll position of the list box.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
button - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxulbuttonelement ...
caption - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements groupbox, checkbox ...
checkbox - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxulcheckboxelement ...
description - Archive of obsolete content
for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributeno...
dropmarker - Archive of obsolete content
for instance the menulist and the popup type of datepicker use a dropmarker, that when pressed, will reveal a popup menu.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
grid - Archive of obsolete content
ArchiveMozillaXULgrid
the second column is twice as big as the first column --> <groupbox> <caption label="details"/> <grid> <columns> <column flex="1"/> <column flex="2"/> </columns> <rows> <row> <label value="user name"/> <textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containme...
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements columns, column, rows, row.
iframe - Archive of obsolete content
attributes showcaret, src, type, transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selecte...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related nsiaccessibleprovider ...
image - Archive of obsolete content
ArchiveMozillaXULimage
this applies whether the image is applied via the src attribute or the list-style-image style property.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), 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.
notificationbox - Archive of obsolete content
allnotifications type: nodelist nodelist of all notifications.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), iseq...
...ualnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
observes - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the observes element can be used to listen to a broadcaster and receive events and attributes from it.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
panel - Archive of obsolete content
ArchiveMozillaXULpanel
autocomplete-richlistbox specify this for a panel that provides a richlistbox for an autocomplete element.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(),...
... hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup immediately.
progressmeter - Archive of obsolete content
for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
scale - Archive of obsolete content
ArchiveMozillaXULscale
for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
...for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributeno...
<statusbarpanel> - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
stringbundle - Archive of obsolete content
a property file is a list of property key-value pairs each on a separate line.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related xul property files ...
tab - Archive of obsolete content
ArchiveMozillaXULtab
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
...for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributeno...
toolbarbutton - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider, nsidomxulbuttonelement ...
toolbaritem - Archive of obsolete content
examples <toolbaritem> <menulist label="bus"> <menupopup> <menuitem label="car"/> <menuitem label="taxi"/> <menuitem label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-butt...
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
tooltip - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(),...
... hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup immediately.
treerow - Archive of obsolete content
attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treeitem, treecell and treeseparator.
treeseparator - Archive of obsolete content
attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treeitem, treerow and treecell.
XUL - Archive of obsolete content
xul controls lists some of the common controls provided by xul.
... xul controls a quick list of all of the available xul controls.
... mailing list newsgroup rss feed #xul on irc.mozilla.org tools xul online live editor (copy & paste snippets from here and run them) xul explorer (a lightweight xul ide) xulexplorer (patched version of xul explorer) extension developer's extension (featuring a live xul editor) ...
Custom app bundles for Mac OS X - Archive of obsolete content
a xul application for mac os x should follow something similar to this basic directory structure: example.app/ contents/ info.plist (application bundle properties are specified in this xml file.) pkginfo (this is a 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) a...
... info.plist and pkginfo must exist in the contents directory.
... top-level directory info.plist pkginfo see also xulrunner - tips xulrunner - mac faq external links inside application bundles property list key reference xrtemplate ...
XULRunner tips - Archive of obsolete content
nsions.getmorethemesurl", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to register a component through the new component registration because the extension manager uses fuel, namely application.restart(), to restart your xulrunner-based application after any change (installation, removal, enabling, disabling) in the extensions' list: copy files fuelapplication.js and fuelapplication.manifest from browser/fuel/src for instance into your components/ directory tweak the line #include ../../../toolkit/components/exthelper/extapplication.js in your copy of fuelapplication.js as needed make sure to declare the fuel module and the two files in your components/makefile.in as in browser/fuel/src/makefile.in rebuild...
...r (where the install.rdf is) like this one: /home/username/.mozilla/firefox/numbersandletters/extensions/inspector@mozilla.org/ now create a javascript file with the following code and include it in the main window of your application: function startdomi() { // load the window datasource so that browser windows opened subsequent to dom // inspector show up in the dom inspector's window list.
... preferences needed for file download dialogs to use the unknown-content-type and file-downloads dialogs from a <browser> element, you need to add the following prefs: pref("browser.download.usedownloaddir", true); pref("browser.download.folderlist", 0); pref("browser.download.manager.showalertoncomplete", true); pref("browser.download.manager.showalertinterval", 2000); pref("browser.download.manager.retention", 2); pref("browser.download.manager.showwhenstarting", true); pref("browser.download.manager.usewindow", true); pref("browser.download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.downlo...
Gecko Compatibility Handbook - Archive of obsolete content
after restarting your browser, add the the user-agent strings that you want to test to the list (tools | user agent switcher | options | options...
... the html element cross reference provides a list of all html elements supported in netscape 4, gecko browsers, internet explorer 4 and up and can be used to determine which html elements are supported by all browsers.
... many older versions of cross-browser apis in common use around the web such as dynapi do not support gecko for one or more of the reasons listed above.
2006-11-22 - Archive of obsolete content
summary: mozilla.dev.accessibility - nov 17-nov 22, 2006 announcements mozilla osk project grant aaron leventhal (on behalf of michael curran) mentiond that there is now an nvda email list you can join if you wish to keep up to date with the latest changes, or if you wish to discuss new features or talk with other nvda users.
... to join, send a blank email with subscribe in the subject field to: nvda...@freelists.org (click here to view the original post and unmask the e-mail address) michael would like to thank stormdragon for setting this up.
... new mailing list for nvda steve lee was pleased to announce that the mozilla foundation has approved a grant spearheaded by himself and aaron leventhal for "improved switch access to firefox".
Why use RSS - Archive of obsolete content
people are using it to syndicate all sorts of things: news articles, blogs, bookmarks, internet radio shows, internet television shows, software updates, e-mails, mailing lists, music playlists, and more.
...there are too many desktop and web-based rss aggregators out there to list them all.
...(too many to list.) and if you syndicate using rss, then all those desktop and web-based rss aggregators will be able to make use of and read your rss feed.
Version - Archive of obsolete content
the list below is of all known rss versions.
... they are listed in chronological order of when they were released.
... note: in the list below, although rss 1.0 seems to be out of place, it is actually in the correct place chronologically.
Introduction to Public-Key Cryptography - Archive of obsolete content
the server maintains a list of names and passwords; if a particular name is on the list, and if the user types the correct password, the server grants access.
...it also simplifies network management, since administrators can control access by controlling lists of certificate authorities (cas) rather than much longer lists of users and passwords.
...another approach involves publishing a certificate revocation list (crl)-that is, a list of revoked certificates-to the directory at regular intervals and checking the list as part of the authentication process.
Theme changes in Firefox 3 - Archive of obsolete content
the table lists both the changed xul file and the theme's corresponding css file that you might need to update.
... filename css file details changes to the default theme the table below lists changes made in the default theme for firefox 3; you can use this information as a starting point for figuring out the changes you need to make.
... all file list all platforms file description of change browser/themes/*/browser/browser.css the width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml).
Scratchpad - Archive of obsolete content
to list autocomplete suggestions, press ctrl + space.
...for example, if you type document.addeventlistener, then press ctrl + shift + space, you'll see a popup that shows a summary of the function's syntax and a short description: the "[docs]" link takes you to the mdn documentation for the symbol.
... cmd + n ctrl + n close scratchpad ctrl + w cmd + w ctrl + w pretty print the code in scratchpad ctrl + p cmd + p ctrl + p show autocomplete suggestions ctrl + space ctrl + space ctrl + space show inline documentation ctrl + shift + space ctrl + shift + space ctrl + shift + space source editor shortcuts this table lists the default shortcuts for the source editor.
Browser Feature Detection - Archive of obsolete content
browser sniffing via api name detection the following tables list the api names defined for specific w3c dom apis and lists the percentage of names that your browser actually defines followed by a list of each of the api names tested along with an indication of whether the name was defined for your browser.
...rue font true true true fontfamily true true true fontsize true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true liststyle true true true liststyleimage true true true liststyleposition true true true liststyletype true true true margin true true true margintop true true true marginright true true true marginbottom true true true marginleft true true true ...
...}, {name: 'font', 'supported': false}, {name: 'fontfamily', 'supported': false}, {name: 'fontsize', 'supported': false}, {name: 'fontstyle', 'supported': false}, {name: 'fontvariant', 'supported': false}, {name: 'fontweight', 'supported': false}, {name: 'height', 'supported': false}, {name: 'letterspacing', 'supported': false}, {name: 'lineheight', 'supported': false}, {name: 'liststyle', 'supported': false}, {name: 'liststyleimage', 'supported': false}, {name: 'liststyleposition', 'supported': false}, {name: 'liststyletype', 'supported': false}, {name: 'margin', 'supported': false}, {name: 'margintop', 'supported': false}, {name: 'marginright', 'supported': false}, {name: 'marginbottom', 'supported': false}, {name: 'marginleft', 'supported': false}, {name...
Archived open Web documentation - Archive of obsolete content
the documentation listed below is archived, obsolete material about open web topics.
... talk:background-size should not the "browser compatibility" table also list google chrome and konqueror?
...konqueror is listed below the table, which seems inconsistent.
RDF in Mozilla FAQ - Archive of obsolete content
by loading chunks of it into a xul ui from a remote site), don't forget to let mozilla-rdf and the rdf interest group lists know.
... those lists would probably also be interested in tools for cleaning / re-processing / storing the dmoz data too.
... what gets loaded when i specify "datasources=" the datasources attribute on the "root" of a template specifies a whitespace-separated list of datasource uris to load.
Examples - Game development
this page lists a number of impressive web technology demos for you to get inspiration from, and generally have fun with.
...the first two sections list playable games, while the second is a catch-all area to list demos that aren't necessarily interactive/games.
... realistic water simulation flowing water, like the waves on the ocean.
Audio for Web games - Game development
let's add some javascript to make this work: var myaudio = document.getelementbyid('myaudio'); var buttons = document.getelementsbytagname('button'); var stoptime = 0; for (var i = 0; i < buttons.length; i++) { buttons[i].addeventlistener('click', function() { myaudio.currenttime = this.getattribute("data-start"); stoptime = this.getattribute("data-stop"); myaudio.play(); }, false); } myaudio.addeventlistener('timeupdate', function() { if (this.currenttime > stoptime) { this.pause(); } }, false); note: you can try out our audio sprite player live on jsfiddle.
...('a'); const loadtext = el.queryselector('p'); const playbutton = el.queryselector('button'); // load file loadfile(anchor.href).then((track) => { // set loading to false el.dataset.loading = 'false'; // hide loading text loadtext.style.display = 'none'; // show button playbutton.style.display = 'inline-block'; // allow play on click playbutton.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } playtrack(track); playbutton.dataset.playing = true; }) }) }) note: you can see this demo in action here and view the source code here.
...the web audio api not only enables us to position a number of audio sources in three-dimensional space but it can also allow us to apply filters that make that audio appear more realistic.
Implementing controls using the Gamepad API - Game development
next, we set up two event listeners to get the data: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); due to security policy, you have to interact with the controller first while the page is visible for the event to fire.
... detecting button presses the buttonpressed() method is also placed in the main game loop to listen for button presses.
... it takes two parameters — the button we want to listen to and the (optional) way to tell the game that holding the button is accepted.
Gecko FAQ - Gecko Redirect 1
see xulrunner hall of fame for a partial list of application that use gecko via xulrunner.
...here are some links to lists of reported bugs related to the standards mentioned above; be aware that these raw lists of open in-process bugs will inevitably include some duplicate, out of date, unreproducible, invalid, and incorrectly tagged reports: the links themselves are probably outdated too.
...they have been demanding that all vendors fully support the open standards listed above so that they can have a rich, powerful formatting system and object model at their disposal, and "write once, view anywhere." gecko's robust support for these standards makes gecko the platform of choice for web content and web application developers worldwide.
What is accessibility? - Learn web development
also, be realistic.
... accessibility guidelines and the law there are numerous checklists and sets of guidelines available for basing accessibility tests on, which might seem overwhelming at first glance.
...the w3c keeps a list of web accessibility laws & policies by country.
Combinators - Learn web development
for example, to select only <p> elements that are direct children of <article> elements: article > p in this next example, we have an unordered list, nested inside of which is an ordered list.
...for example if we want to select list items with a class of "a", which are direct children of a <ul>, i could use the following.
... ul > li[class="a"] { } take care however when creating big lists of selectors that select very specific parts of your document.
Styling tables - Learn web development
sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } there is nothing really specific to tables here; we are generally tweaking the font styling to make things easier to read: we have set a global sans-serif font stack; this is purely a stylistic choice.
...again, mostly a stylistic choice.
...this causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at punk-bands-complete.html): table styling quick tips before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above: make your table markup as simple as possible, and keep things flexible, e.g.
The box model - Learn web development
the second is a list, which is laid out using display: flex.
... this establishes flex layout for the items inside the container, however, the list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line.
... add display: inline-block to the rule with the .links-list a selector, and you will see how it fixes this issue by causing the padding to be respected by other elements.
Test your skills: values and units - Learn web development
task one in this task, the first list item has been given a background color using hex color codes.
... your task is to complete the css using the same color in different formats, plus a final list item where you should make the background semi-opaque.
... the second list item should use rgb color.
CSS FAQ - Learn web development
LearnCSSHowtoCSS FAQ
this is a list of the most commonly used doctype declarations that will trigger standards or almost standards mode: <!doctype html> /* this is the html5 doctype.
... html elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.
...you can use dom inspector's css style rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.
What text editors are available? - Learn web development
extensible atom mit/bsd free windows, mac, linux forum online manual yes bluefish gpl 3 free windows, mac, linux mailing list, wiki online manual yes brackets mit/bsd free windows, mac, linux forum, irc github wiki yes coda closed source $99 mac twitter, forum, e-mail ebook yes codelobster closed source free windows, mac, linux forum, e-mail no end user doc yes emacs gpl 3 free windows, mac, linux faq, mailing lis...
...t, news group online manual yes espresso closed source $75 mac faq, e-mail no end user doc, but plug-in doc yes gedit gpl free windows, mac, linux mailing list, irc online manual yes kate lgpl, gpl free windows, mac, linux mailing list, irc online manual yes komodo edit mpl free windows, mac, linux forum online manual yes notepad++ gpl free windows forum wiki yes pspad closed source free windows faq, forum online help yes sublime text closed source $70 windows, mac, linux forum official, unofficial yes textmate closed source $50 mac twitter, irc, mailing list, e-mail online ...
...manual, wiki yes textwrangler closed source free mac faq, forum pdf manual no vim specific open license free windows, mac, linux mailing list online manual yes visual studio code open source under mit licence/ specific licence for product free windows, mac, linux faq documentation yes active learning in this active learning section, we would like you to try using and/or installing a text editor of your choice.
Basic native form controls - Learn web development
for maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list.
... each individual pair of <label>/<input> elements should be contained in its own list item (or similar).
...you've met some of these already, but below is a list of those common attributes, for your reference: attribute name default value description autofocus false this boolean attribute lets you specify that the element should automatically have input focus when the page loads.
Your first form - Learn web development
forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a ui feature).
...it should look like so: <style> </style> inside the style tags, add the following css: form { /* center the form on the page */ margin: 0 auto; width: 400px; /* form outline */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } ul { list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; bo...
... on the server side, the script at the url "/my-handling-form-page" will receive the data as a list of 3 key/value items contained in the http request.
Creating hyperlinks - Learn web development
this can cause problems for screen reader users, if there's a list of links out of context that are labeled "click here", "click here", "click here".
...for a complete file list, see the navigation-menu-start directory: index.html projects.html pictures.html social.html you should: add an unordered list in the indicated place on one page that includes the names of the pages to link to.
... a navigation menu is usually just a list of links, so this is semantically ok.
Introduction to HTML - Learn web development
is it a bulleted list?
...this article looks at how to use html to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
...in this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
Introduction to the server side - Learn web development
some of the common uses and benefits of server-side programming are listed below.
... a deeper analysis of user habits can be used to anticipate their interests and further customize responses and notifications, for example providing a list of previously visited or popular locations you may want to look at on a map.
...note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.
React resources - Learn web development
previous overview: client-side javascript frameworks next our final article provides you with a list of react resources that you can use to go further in your learning.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue resources - Learn web development
previous overview: client-side javascript frameworks next now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routi...
...ng in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Introduction to cross browser testing - Learn web development
you should compile a list of the potential problem areas.
... next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on determining your target browsers).
...ios safari on iphone/ipad, chrome and firefox on iphone/ipad/android), also do tests in any other browsers you have included inside your target list.
Accessibility Features in Firefox
at my next opportunity, i intend to convert my family over to it too." darren paskell, from window-eyes beta testing list firefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5.
... both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search.
...can also be accessed as a mailing list.
Information for Assistive Technology Vendors
keyboard documentation this lists mozilla's keyboard docs in a single long document.
... newsgroup and mailing list we have two discussion lists, which can be read via a newsgroup reader, as a mailing list or via google groups.
... purpose newsgroup mailing list google group developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Links and Resources
wai interest group - discussion list for standards in web accessibility.
... web accessibility checklist from ibm.
... ibm's java accessibility checklist - guidelines to making java accessibility.
Accessibility and Mozilla
all accessibility apis to date define a list of possible object roles, or general types, such as button, menu item, text, etc.
... they also define a list of possible object states, such as focused, read-only, checked, etc.accessibility features in firefoxfirefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5.
...however, many of the concepts were also used during the development of firevox, an at using iaccessible2.accessible toolkit checklistplease contact the mozilla accessibility community with questions or feedback.csun firefox materialsfirefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
Index
675 creating an appealing add-on listing add-ons, beginner, guide, webextension, publishing 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.
... 679 promoting your extension or theme add-ons, extensions, promotion, themes, webextensions, distribution so you’ve written a great extension, but only a few people have found and installed it from addons.mozilla.org—despite your efforts to create an appealing listing.
Continuous Integration
for a full list of job types, see the help menu in treeherder's upper-right corner.
... below is a list of the most common.
...performance sheriffs review the list of alerts on a regular basis and file bugs if appropriate.
Configuring Build Options
the full list of options can be obtained by running ./configure --help.
...there is a default list of extensions for the suite, and each app-specific mozconfig specifies a different default set.
...it is recommended to use the default build options, and only change the properties from the list above as needed.
Tracking Protection
if tracking cookies were present, you would be able to view the list by clicking on "blocking tracking cookies" in the above image to view the following popup: you can click "manage content blocking" to change the blocking settings: how does firefox choose what to block?
... firefox ships with a list of sites which have been identified as engaging in cross-site tracking of users.
... when tracking protection is enabled, firefox blocks content from sites in the list.
Security best practices for Firefox front-end engineers
we use our built-in sanitizer with the following flags: sanitizerallowstyle sanitizerallowcomments sanitizerdropforms sanitizerlogremovals the sanitizer removes all scripts (script tags, event handlers) and form elements (form, input, keygen, option, optgroup, select, button, datalist).
... the canonical truth for the list of whitelisted elements is the source code.
... appendix list of disallowed dom apis innerhtml outerhtml insertadjacenthtml() createcontextualfragment() document.write() document.writeln() please take a look at the repository for an updated list ...
mozbrowseropenwindow
features a domstring containing features represented by a list of names and values separated by commas.
... for a complete list of possible features, see window.open().
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
Gecko
gecko is used in many applications, including a few browsers such as firefox and seamonkey (for a complete list, please refer to wikipedia's article on gecko).
... character sets supported by gecko a list of the character sets supported by gecko.
... view all… community view mozilla forums: mailing list newsgroup rss feed related topics web standards xul embedding mozilla developing mozilla ...
How to get a stacktrace for a bug report
in these cases you will need to use one of the alternative methods listed below.
...firefox should open a list of ids for your submitted crash reports.
...please check the listed times to avoid copying the id of an unrelated crash report.
How to Report a Hung Firefox
type "about:crashes" in the url bar and click on the top listing.
...type "about:crashes" in the url bar and click on the top listing.
...type "about:crashes" in the url bar and click on the top listing.
JavaScript code modules
mozilla labs js modules this page features a list of javascript modules, along with download links and documentation, that extension developers can use in their code.
... webrequest.jsm 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.
Index
19 localization: frequently asked questions faq, guide, internationalization, localization, mozilla this page lists tweaks and tips that may not require a complete page on its own.
...the following list contains links to pages that highlight steps that can be taken to make web content localizable.
...listed below are good practices and recommendations that should be followed in order to make your content easily localizable.
Mozilla Content Localized in Your Language
list products and their tones if different.
...if yes, list all forms of plural forms and examples if there is more than one.
... value selector lists capitalize the first letter of the first word and the first letter of any proper nouns.
Localizing with Pontoon
only the toolbar on top belongs to pontoon, containing the following items (from left to right): list of strings opens a sidebar with a list of all strings to localize.
... info menu gives important information, like the anticipated project timeline and a list of keyboard shortcuts.
...by clicking on the hamburger icon in the main toolbar, a list of all strings and available translations will open in the sidebar.
What every Mozilla translator should know
l10n stands for localization = l + another 10 letters + n mailing lists and other resources there are several mailing lists to keep the track of what's going on, which are available as newsgroups, as well, both on news.mozilla.org and google groups: the main l10n list also available as mozilla.dev.l10n, .l10n in short.
... planning list also available as mozilla.dev.planning, .planning in short.
... to keep the track of what's going on, it's also a good idea to read the planet mozilla l10n when you have a problem use the above mailing lists the person in charge of the mozilla l10n is axel hecht (l10n at mozilla.com), pike on irc another interesting way of getting help is the irc channel #l10n at irc.mozilla.org useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatranslator mercurial the hg is organized into several repositories, sometimes called branches.
A guide to searching crash reports
the columns show each group's rank, signature, size (both a count and a proportion of matching crash reports), and finally a list of bugs that have been marked as relating to this signature.
... this is a list of all the individual crash reports that match the search criteria.
...alternatively, you can browse the complete list.
L20n HTML Bindings
in addition to the pre-defined whitelists, any element found in the original source html is allowed in the translation as well.
...</p> the input element is not on the default whitelist but since it's present in the source html, it is also allowed in the translation.
... when all dom nodes are localized, the document element will fire a documentlocalized event, which you can listen to: document.addeventlistener('documentlocalized', function() { // the dom has been localized and the user sees it in their language yourapp.init(); }); exposing context data you can expose important bits of data to the localization context in form of context data.
Nonblocking IO In NSPR
the potentially-blocking io functions include <tt>pr_connect()</tt>, <tt>pr_accept()</tt>, <tt>pr_acceptread()</tt>, <tt>pr_read()</tt>, <tt>pr_write()</tt>, <tt>pr_writev()</tt>, <tt>pr_recv()</tt>, <tt>pr_send()</tt>, <tt>pr_recvfrom()</tt>, <tt>pr_sendto()</tt>, and <tt>pr_transmitfile(),</tt> and do not include <tt>pr_bind()</tt> and <tt>pr_listen()</tt>.
...there is a second constraint, due to the use of nt asynchronous i/o and the recycling of used sockets: the new socket returned by <tt>pr_accept()</tt> or <tt>pr_acceptread()</tt> inherits the blocking/nonblocking io mode of the listening socket and this cannot be changed.
... the socket returned by <tt>pr_accept()</tt> or <tt>pr_acceptread()</tt> on a blocking, listening socket may be a recycled socket previously used in a <tt>pr_transmitfile()</tt> call.
PRIOMethods
syntax #include <prio.h> struct priomethods { prdesctype file_type; prclosefn close; prreadfn read; prwritefn write; pravailablefn available; pravailable64fn available64; prfsyncfn fsync; prseekfn seek; prseek64fn seek64; prfileinfofn fileinfo; prfileinfo64fn fileinfo64; prwritevfn writev; prconnectfn connect; pracceptfn accept; prbindfn bind; prlistenfn listen; prshutdownfn shutdown; prrecvfn recv; prsendfn send; prrecvfromfn recvfrom; prsendtofn sendto; prpollfn poll; pracceptreadfn acceptread; prtransmitfilefn transmitfile; prgetsocknamefn getsockname; prgetpeernamefn getpeername; prgetsockoptfn getsockopt; prsetsockoptfn setsockopt; }; typedef struct priomethods priomethods; parameters file_type type of file...
... listen prepare to listen for network connections.
... description you don't need to know the type declaration for each function listed in the method table unless you are implementing a layer.
PR_INSERT_AFTER
inserts an element after another element in a circular list.
... syntax #include <prclist.h> pr_insert_after ( prclist *elemp1 prclist *elemp2); parameters elemp1 a pointer to the element to be inserted.
... description pr_insert_after inserts the element specified by elemp1 into the circular list, after the element specified by elemp2.
PR_INSERT_BEFORE
inserts an element before another element in a circular list.
... syntax #include <prclist.h> pr_insert_before ( prclist *elemp1 prclist *elemp2); parameters elemp1 a pointer to the element to be inserted.
... description pr_insert_before inserts the element specified by elemp1 into the circular list, before the element specified by elemp2.
PR_REMOVE_AND_INIT_LINK
removes an element from a circular list and initializes the linkage.
... syntax #include <prclist.h> pr_remove_and_init_link (prclist *elemp); parameter elemp a pointer to the element.
... description pr_remove_and_init_link removes the specified element from its circular list and initializes the links of the element to point to itself.
PR_REMOVE_LINK
removes an element from a circular list.
... syntax #include <prclist.h> pr_remove_link (prclist *elemp); parameter elemp a pointer to the element.
... description pr_remove_link removes the specified element from its circular list.
Getting Started With NSS
we have a large list of tasks waiting for attention, and we are happy to assist you in identifying areas that match your interest or skills.
...we maintain a list of nss bugs marked with a keyword "good-first-bug" that you can view.
... some items that will be evaluated during code review are listed in checklist form on github.
4.3.1 Release Notes
new in jss 4.3.1 a list of bug fixes and enhancement requests were implemented in this release can be obtained by running this bugzilla query jss 4.3.1 requires nss 3.12.5 or higher.
... known bugs and issues for a list of reported bugs that have not yet been fixed, click here.
... mailing list newsgroup rss feed ...
4.3 Release Notes
new in jss 4.3 a list of bug fixes and enhancement requests were implemented in this release can be obtained by running this bugzilla query jss 4.3 requires nss 3.12 or higher.
... known bugs and issues for a list of reported bugs that have not yet been fixed, click here.
... mailing list newsgroup rss feed ...
JSS
MozillaProjectsNSSJSS
legacy jss information can still be found at: source: https://hg.mozilla.org/projects/jss issues: https://bugzilla.mozilla.org/buglist.cgi?product=jss wiki: /docs/mozilla/projects/nss/jss network security services for java (jss) is a java interface to nss.
...if you use jss, you can easily get lists of modules and tokens that are configured in the nss db and freely access all of it.
... mailing list newsgroup rss feed related topics security ...
NSS_3.12.1_release_notes.html
bug 439123: assertion failure in libpkix at shutdown bug 440062: incorrect list element count in pkix_list_appenditem function bug 442618: eliminate dead function cert_certpackagetype bug 443755: extra semicolon in pkm_tlskeyandmacderive makes conditional code unconditional bug 443760: extra semicolon in seqdatabase makes static analysis tool suspicious bug 448323: certutil -k doesn't report the token and slot names for found keys bug 448324: ocsp checker returns i...
...ncorrect error code on request with invalid signing cert bug 449146: remove dead libsec function declarations bug 453227: installation of pem-encoded certificate without trailing newline fails documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
... furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.12.6 release notes
cert_distnamesfromcertlist: generate an array of distinguished names from a list of certs.
...ording ocsp stapled replies bug 544191: use system zlib on mac os x bug 544584: segmentation fault when enumerating the nss database bug 544586: various nss-sys-init patches from fedora bug 545273: remove unused function sec_init bug 546389: nsssysinit binary built inside source tree documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
... furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.14.2 release notes
bug 807890 - added support for microsoft trust list signing eku.
... bugs fixed in nss 3.14.2 https://bugzilla.mozilla.org/buglist.cgi?list_id=5502456;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.14.2;product=nss compatibility nss 3.14.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.15.5 release notes
added a new macro cert_list_tail, defined in certt.h, for getting the tail of a certcertlist.
... bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.18.1 release notes
this is a patch release to update the list of root ca certificates.
... cn=mcsholding test, o=mcsholding, c=eg sha1 fingerprint: e1:f3:59:1e:76:98:65:c4:e4:47:ac:c3:7e:af:c9:e2:bf:e4:c5:76 the version number of the updated root ca list has been set to 2.4 bugs fixed in nss 3.18.1 this bugzilla query returns all the bugs fixed in nss 3.18.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18.1 compatibility nss 3.18.1 shared libraries are backward compatible with all older nss 3.18 shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.19.3 release notes
this is a patch release to update the list of root ca certificates.
...f6:4d:46:d1:df:00:3d:27:30:13:72:43:a9:12:11:c6:75:fb cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha1 fingerprint: 8a:5c:8c:ee:a5:03:e6:05:56:ba:d8:1b:d4:f6:c9:b0:ed:e5:2f:e0 cn = certinomis - root ca sha1 fingerprint: 9d:70:bb:01:a5:a4:a0:18:11:2e:f7:1c:01:b9:32:c5:34:e7:88:a8 the version number of the updated root ca list has been set to 2.5 bugs fixed in nss 3.19.3 this bugzilla query returns all the bugs fixed in nss 3.19.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.3 compatibility nss 3.19.3 shared libraries are backward compatible with all older nss 3.19 shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.22 release notes
a complete list can be found in nss config options.
... bugs fixed in nss 3.22 this bugzilla query returns all the bugs fixed in nss 3.22: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.22 compatibility nss 3.22 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.23 release notes
notable changes in nss 3.23 the copy of sqlite shipped with nss has been updated to version 3.10.2 (bug 1234698) the list of tls extensions sent in the tls handshake has been reordered to increase compatibility of the extended master secret with servers (bug 1243641) the build time environment variable nss_enable_zlib has been renamed to nss_ssl_enable_zlib (bug 1243872).
... bugs fixed in nss 3.23 this bugzilla query returns all the bugs fixed in nss 3.23: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.23 acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 1245528.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.25 release notes
the trusted ca certificate list has been updated to version 2.8.
...rint: 27:99:58:29:fe:6a:75:15:c1:bf:e8:48:f9:c4:76:1d:b1:6c:22:59:29:25:7b:f4:0d:08:94:f2:9e:a8:ba:f2 cn = opentrust root ca g3 sha-256 fingerprint: b7:c3:62:31:70:6e:81:07:8c:36:7c:b8:96:19:8f:1e:32:08:dd:92:69:49:dd:8f:57:09:a4:10:f7:5b:62:92 bugs fixed in nss 3.25 this bugzilla query returns all the bugs fixed in nss 3.25: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.25 compatibility nss 3.25 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.27 release notes
although the maximum tls version enabled by default is still tls 1.2, there are applications that query the list of tls protocol versions supported by nss, and enable all supported versions.
...6:a4:a1:86:10:9d:d9:65:84:b5:ee:b5:8a:51:0c:42:75:b0:e5:f9:4f:40:bb:ae:86:5e:19:f6:73 cn = equifax secure global ebusiness ca-1 sha-256 fingerprint: 5f:0b:62:ea:b5:e3:53:ea:65:21:65:16:58:fb:b6:53:59:f4:43:28:0a:4a:fb:d1:04:d7:7d:10:f9:f0:4c:07 bugs fixed in nss 3.27 this bugzilla query returns all the bugs fixed in nss 3.27: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.27 compatibility nss 3.27 shared libraries are backwards compatible with all older nss 3.x shared libraries.
...applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.28.1 release notes
this is a patch release to update the list of root ca certificates, and address a minor tls compatibility issue, that some applications experienced with nss 3.28.
...ority - g4 sha-256 fingerprint: fe:86:3d:08:22:fe:7a:23:53:fa:48:4d:59:24:e8:75:65:6d:3d:c9:fb:58:77:1f:6f:61:6f:9d:57:1b:c5:92 cn = symantec class 2 public primary certification authority - g6 sha-256 fingerprint: cb:62:7d:18:b5:8a:d5:6d:de:33:1a:30:45:6b:c6:5c:60:1a:4e:9b:18:de:dc:ea:08:e7:da:aa:07:81:5f:f0 the version number of the updated root ca list has been set to 2.11 a misleading assertion/alert has been removed, when nss tries to flush data to the peer but the connection was already reset.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.30.2 release notes
this is a patch release to update the list of root ca certificates.
... trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-256 fingerprint: 46:ed:c3:68:90:46:d5:3a:45:3f:b3:10:4a:b8:0d:ca:ec:65:8b:26:60:ea:16:29:dd:7e:86:79:90:64:87:16 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.tr, bel.tr, edu.tr, org.tr the version number of the updated root ca list has been set to 2.14 (the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.30.2 bug 1350859 - march 2017 batch of root ca changes bug 1349705 - implemented domain name constraints for ca: tubitak kamu sm ssl kok sertifikasi - surum 1 compatibility nss 3.30.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.31 release notes
pk11_findcertsfromuri - find a list of certificates identified by the given uri.
... bugs fixed in nss 3.31 this bugzilla query returns all the bugs fixed in nss 3.31: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.31 compatibility nss 3.31 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.33 release notes
new in nss 3.33 new functionality when listing an nss database, using certutil -l, and the database hasn't yet been initialized with any non-empty or empty password, the text "database needs user init" will be included in the listing.
... bugs fixed in nss 3.33 this bugzilla query returns all the bugs fixed in nss 3.33: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.33 compatibility nss 3.33 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.34.1 release notes
the version of the ca list was set to 2.20.
... new in nss 3.34 new functionality none new functions bugs fixed in nss 3.34.1 this bugzilla query returns all the bugs fixed in nss 3.34.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.34.1 compatibility nss 3.34.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.37 release notes
the ca certificates list was updated to version 2.24.
...b:32:05:93:98:06:fa:5c:b8:11:e1:c8:13:f6:a1:08:c7:d3:36:b3:40:8e cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h5 sha-256 fingerprint: 49:35:1b:90:34:44:c1:85:cc:dc:5c:69:3d:24:d8:55:5c:b2:08:d6:a8:14:13:07:69:9f:4a:f0:63:19:9d:78 bugs fixed in nss 3.37 this bugzilla query returns all the bugs fixed in nss 3.37: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.37 compatibility nss 3.37 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.39 release notes
the ca certificates list was updated to version 2.26.
...2 cn = opentrust root ca g3 sha-256 fingerprint: b7c36231706e81078c367cb896198f1e3208dd926949dd8f5709a410f75b6292 bugs fixed in nss 3.39 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) this bugzilla query returns all the bugs fixed in nss 3.39: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.39 compatibility nss 3.39 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.52 release notes
bug 1624130 - require ck_function_list structs to be packed.
... bug 1630925 - guard all instances of nsscmssigneddata.signerinfo to avoid a cms crash bug 1571677 - name constraints validation: cn treated as dns name even when syntactically invalid as dns name this bugzilla query returns all the bugs fixed in nss 3.52: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.52 compatibility nss 3.52 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.54 release notes
see bug 1618402 for a complete list.
... this bugzilla query returns all the bugs fixed in nss 3.54: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.54 compatibility nss 3.54 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
sslcrt.html
[a-z] matches any character between a and z [^az] matches any character except a or z ~ followed by another shell expression removes any pattern matching the shell expression from the match list (foo|bar) matches either the substring foo or the substring bar.
... returns the function returns an enumerator of type seccerttimevalidity: typedef enum { seccerttimevalid, seccerttimeexpired, seccerttimenotvalidyet } seccerttimevalidity; nss_cmpcertchainwcanames determines whether any of the signers in the certificate chain for a specified certificate are on a specified list of ca names.
... canames a pointer to a structure that contains a list of distinguished names (dns) against which to check the dns for the signers in the certificate chain.
SSL functions
the public functions listed here are used to configure sockets for communication via the ssl and tls protocols.
... in addition to the functions listed here, applications that support ssl use some of the certificate functions, crypto functions, and utility functions described below on this page.
... if documentation is available for a function listed below, the function name is linked to either its mdc wiki page or its entry in the old ssl reference.
S/MIME functions
the public functions listed here perform s/mime operations using the s/mime toolkit.
...encode mxr 3.8 and later nss_cmsrecipientinfo_getcertandkey mxr 3.8 and later nss_cmsrecipientinfo_unwrapbulkkey mxr 3.7.2 and later nss_cmsrecipientinfo_wrapbulkkey mxr 3.7.2 and later nss_cmssigneddata_addcertchain mxr 3.2 and later nss_cmssigneddata_addcertlist mxr 3.2 and later nss_cmssigneddata_addcertificate mxr 3.2 and later nss_cmssigneddata_adddigest mxr 3.2 and later nss_cmssigneddata_addsignerinfo mxr 3.2 and later nss_cmssigneddata_create mxr 3.2 and later nss_cmssigneddata_createcertsonly mxr 3...
...fo_addsmimeenckeyprefs mxr 3.2 and later nss_cmssignerinfo_addsigningtime mxr 3.2 and later nss_cmssignerinfo_create mxr 3.2 and later nss_cmssignerinfo_createwithsubjkeyid mxr 3.6 and later nss_cmssignerinfo_destroy mxr 3.2 and later nss_cmssignerinfo_getcertlist mxr 3.2 and later nss_cmssignerinfo_getsignercommonname mxr 3.2 and later nss_cmssignerinfo_getsigneremailaddress mxr 3.2 and later nss_cmssignerinfo_getsigningcertificate mxr 3.2 and later nss_cmssignerinfo_getsigningtime mxr 3.2 and later nss_cmssignerinfo_...
NSS Tools cmsutil
syntax to run cmsutil, type the command cmsutil option [arguments] where option and arguments are combinations of the options and arguments listed in the following section.
... specify list of recipients (email addresses) for an encrypted or enveloped message.
... for certificates-only message, list of certificates to send.
Multithreading in Necko
it sits in a loop, polling a list of sockets.
... when a socket can be read, the socket's listener is notified either synchronously (on the same thread) or asynchronously via a nsistreamlistenerproxy impl.
...as with the socket transport thread, the nsistreamlistener passed to a file transport's asyncread method can operate partially on the file transport's thread before proxying data to the main thread.
Necko walkthrough
nsdocshell::internalload nsdocshell::douriload opens the nsichannel for the uri (ns_newchannel) if "http:", it will be an nsihttpchannel nsdocshell::dochannelload nsuriloader::openuri passes an nsistreamlistener pointer, 'loader' to nsuriloader::openchannel - it creates an nsdocumentopeninfo object, which implements nsistreamlistener, i.e.
... receive response get a callback to each of these: nsistreamlistener::onstartrequest (header info) nsistreamlistener::ondataavailable (data in single or multiple chunks) nsistreamlistener::onstoprequest (no more data from http) this all happens on the main thread, in a non-blocking fashion: make your request on the main thread, then carry on and get the async response later, also on the main thread.
... these functions call nsistreamlistener::onstartrequest, nsistreamlistener::ondataavailable and nsistreamlistener::onstoprequest respectively.
SpiderMonkey Internals: Thread Safety
as an optimization, each thread has its own size-classified freelists containing chunks of gc-managed memory ready to be allocated.
...a thread needs to lock on allocation only when the relevant per-thread freelist is empty.
... when this happens, the thread also refills that freelist from the jsruntime-wide gc allocator while it's in the lock.
JSAPI User Guide
initializing built-in and global js objects for a complete list of built-in objects provided by spidermonkey, see js_initstandardclasses.
...the rest of the items in this list talk about security issues that arise within javascript itself, even if the engine is working properly.
...they are listed below.
JS_AddArgumentFormatter
callback syntax jsbool (*jsargumentformatter)(jscontext *cx, const char *format, jsbool fromjs, jsval **vpp, va_list *app); name type description cx jscontext * the context in which the conversion is being performed.
... app va_list * in-out parameter.
...for a given format string, for example "aa", the formatter is called from js_convertargumentsva like so: formatter(cx, "aa...", js_true, &sp, &ap); sp points into the arguments array on the js stack, while ap points into the stdarg.h va_list on the c stack.
Parser API
interface xmlfilterexpression <: expression { type: "xmlfilterexpression"; left: expression; right: expression; } an e4x list filter expression, i.e., an expression of the form expr.(expr).
... interface xmllist <: xml, expression { type: "xmllist"; contents: [ xml ]; } an e4x literal representing a list of xml elements.
... xmllist(contents[, loc]) contents: [ customxml ] loc: sourcelocation returns: customxml/customexpression callback to produce a custom xml list node.
SpiderMonkey 1.8.5
here is a list of the most significant changes.
...additionally, js_newstring, js_getstringbytes, and js_getstringchars were removed, replaced by fallible interfaces like js_getstringcharszandlength and js_encodestringtobuffer (not an exhaustive list).
... release notes errata this is a list of changes which need to be made to the release notes asap.
SpiderMonkey 1.8.7
here is a list of the most significant changes.
...additionally, js_newstring, js_getstringbytes, and js_getstringchars were removed, replaced by fallible interfaces like js_getstringcharszandlength and js_encodestringtobuffer (not an exhaustive list).
... release notes errata this is a list of changes which need to be made to the release notes asap.
SpiderMonkey 31
xxx list removed features here spidermonkey 31 is not binary-compatible with previous releases, nor is it source-code compatible.
...here is a list of the most significant changes: many of the garbage collector changes require type signature changes to jsapi methods: specifically introducing js::rooted, js::handle, and js::mutablehandle types.
... release notes errata this is a list of changes which need to be made to the release notes asap.
SpiderMonkey 38
xxx list removed features here spidermonkey 38 is not binary-compatible with previous releases, nor is it source-code compatible.
...here is a list of the most significant changes: ....
... release notes errata this is a list of changes which need to be made to the release notes asap.
Running Automated JavaScript Tests
see the full list in the -h / --help output.
...the first time this is run, it runs the suite and writes a list of tests that failed to the given filename.
... the next time it is run, it will run only the tests in the given filename, and then will write the list of tests that failed when it is done.
Signing Mozilla apps for Mac OS X
--keychain /path/to/keychain lets you specify which keychain contains the signing certificate specified by your-signing-identity, rather than allowing the codesign to search the keychain list.
...at a minimum you'll need to provide: identifier: this must be the same as the value of the cfbundleidentifier specified in your application's info.plist file.
...the folder will fail to validate if any of these cases occur (there may be other cases not listed here): if any files that were included in the signature have been removed or modified if any files have been added to a folder that should have all files signed the coderesources file this file is located in your application's bundle at contents/_codesignature/coderesources.
AT APIs Support
here is a list of firefox keyboard shortcuts.
... test tools here you will find a list of tools to test accessibility gecko-based applications.
... firebug screen readers here's a list of screen readers we are oriented to in the first place.
The Places database
moz_bookmarks_roots: lists special folders that are the root folders of certain content types in the bookmarks system.
... moz_keywords: this table is a unique list of keywords.
... favicon table moz_favicons: this contains a list of unique favicon uris and data.
XPCOM changes in Gecko 2.0
xpt files the path of any xpt files must be listed explicitly in a manifest using an interfaces directive: interfaces components/mycomponent.xpt javascript components the registration information for javascript components is no longer located in the component itself; instead, it's located in the manifest.
...*/ if (xpcomutils.generatensgetfactory) var nsgetfactory = xpcomutils.generatensgetfactory([mycomponent]); else var nsgetmodule = xpcomutils.generatensgetmodule([mycomponent]); binary components binary components must be listed explicitly in a manifest using a binary-component directive: binary-component components/mycomponent.dll c++ in the component must be changed: a binary component no longer exports a nsgetmodule() function.
...category registration prior to gecko 2, extensions could listen for the xpcom-startup and app-startup notifications during startup, and perform actions during those.
Components.utils.cloneInto
example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.addeventlistener("click", function() { console.log(window.addonscriptobject.greeting); // "hello from add-on" }, false); of course, you don't have to assign the clone to the window itself: you can assign it to some other object in the target scope: contentwindow.foo.addonscriptobject = cloneinto(addonscriptobject, contentwindow); you can also pass it into a function defined in the page script.
...nents.utils.exportfunction: // add-on script var addonscriptobject = { greetme: function() { alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error.
...bject you clone is allowed to contain these objects: // add-on script var addonscriptobject = { body: contentwindow.document.body }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {wrapreflectors: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(window.addonscriptobject.body.innerhtml); }, false); access to these objects in the target scope is subject to the normal security checks.
Components.utils.exportFunction
the exported function will affect the original object that was passed in: // privileged scope: for example, a content script function changemyname(user) { user.name = "bill"; } exportfunction(changemyname, contentwindow, { defineas: "changemyname" }); // less-privileged scope: for example, a page script var user = {name: "jim"}; var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(user.name); // "jim" window.changemyname(user); console.log(user.name); // "bill" }, false); note that this is subject to the normal rules of xrays: for example, an expando property added to a dom node will not be visible in the original object.
...ample, a content script function loguser(user) { // console.log(user.getuser()); // error console.log(user.wrappedjsobject.getuser()); // "bill" } exportfunction(loguser, contentwindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script var user = {getuser: function() {return "bill";}} var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(user); }, false); passing functions as arguments if functions are given as arguments, these are also passed as xrays.
...on just works, making the allowcallbacks option redundant: // privileged scope: for example, a content script function loguser(getuser) { console.log(getuser()); // "bill" } exportfunction(loguser, unsafewindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script function getuser() { return "bill"; } var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(getuser); }, false); cross-origin checking when the exported function is called each argument, including this, is checked to make sure that the caller subsumes that argument.
imgILoader
ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgidecoderobserver aobserver, in nsisupports cx, out nsistreamlistener alistener); boolean supportimagewithmimetype(in string mimetype); constants constant value description load_cors_anonymous 1 << 16 load_cors_use_credentials 1 << 17 methods loadimage() start the load and decode of an image.
...imgirequest loadimagewithchannel( in nsichannel achannel, in imgidecoderobserver aobserver, in nsisupports cx, out nsistreamlistener alistener ); parameters achannel the channel to load the image from.
...alistener a listener that you must send the channel's notifications and data to.
nsIApplicationCacheService
getgroups() returns the list of application cache groups.
...groupids the list of application cache groups.
... see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcachechannel nsiapplicationcachenamespace nsidomofflineresourcelist ...
nsIChromeFrameMessageManager
removedelayedframescript() removes a script from the list of scripts supporting delayed load.
... void removedelayedframescript( in astring aurl ); parameters aurl the url of the script to remove from the list of scripts supporting delayed load.
... see also content process event handling nsicontentframemessagemanager nsiframeloader nsiframemessagelistener ...
nsICommandLine
return value the position of the flag in the command line, or -1 if the flag is not found.getargument() gets the value an argument from the array of command-line arguments, given the index into the argument list.
...you can determine if the flag was provided and remove it from the list of flags waiting to be processed in one operation.
...handleflagwithparam() finds a flag in the list of flags waiting to be processed and returns its value, after removing both the flag and its value from the list of flags waiting to be handled.
nsIDOMElement
inherits from: nsidomnode last changed in gecko 1.7 method overview domstring getattribute(in domstring name); nsidomattr getattributenode(in domstring name); nsidomattr getattributenodens(in domstring namespaceuri, in domstring localname); domstring getattributens(in domstring namespaceuri, in domstring localname); nsidomnodelist getelementsbytagname(in domstring name); nsidomnodelist getelementsbytagnamens(in domstring namespaceuri, in domstring localname); boolean hasattribute(in domstring name); boolean hasattributens(in domstring namespaceuri, in domstring localname); void removeattribute(in domstring name) nsidomattr removeattributenode(in nsidomattr oldattr) void removeattributens(in domstring namespaceu...
...nsidomnodelist getelementsbytagname( in domstring name ); parameters name tag name return value a nsidomnodelist containg all the descendants of this tag name.
...nsidomnodelist getelementsbytagnamens( in domstring namespaceuri, in domstring localname ); parameters namespaceuri namespace uri localname tag name return value a nsidomnodelist containg all the descendants of this tag name.
nsIDOMFontFace
it's returned in a list you can get using inidomutils.getusedfontfaces().
... srcindex long index in the rule's src list, -1 if no @font-face rule.
... see also nsidomfontfacelist ...
nsIDOMWindow
); nsiselection getselection(); void scrollby(in long xscrolldif, in long yscrolldif); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrollto(in long xscroll, in long yscroll); void sizetocontent(); attributes attribute type description applicationcache nsidomofflineresourcelist get the application cache object for this window.
... globalstorage nsidomstoragelist global storage, accessible by domain.
...this is useful for connecting event listeners to this window as well as every other window nested in that window root.
nsIDirIndexParser
netwerk/streamconv/public/nsidirindexlistener.idlscriptable a parser for 'application/http-index-format' directories.
... inherits from: nsistreamlistener last changed in gecko 1.7 called for each directory entry.
... listener nsidirindexlistener the interface to use as a callback for new entries.
getFile
see symbolic names below for a list of accepted values.
... symbolic names the list of symbolic names is subject to change, so be sure to take a look at the xpcom/io/nsdirectoryservicedefs.h file for the version of gecko you're working with for the latest list.
... ns_xpcom_component_dir "comsd" ns_xpcom_component_dir_list "comsdl" ns_xpcom_component_registry_file "comregf" ns_xpcom_xpti_registry_file "xptiregf" ns_xpcom_library_file "xpcomlib" ns_gre_dir "gred" note: on mac os x, up through firefox 34 this is the contents/macos directory within the application's bundle.
nsIFileView
toolkit/components/filepicker/public/nsifileview.idlscriptable this interface displays a list of files in a treebox.
... setfilter() set the filter to be applied to the file list, for example "*.jpg" would only return jpg files.
... void setfilter( in astring filterstring ); parameters filterstring the filter to be applied to the file list.
nsIHttpChannel
referrerpolicy read only unsigned long the referrer policy in use for this channel, indicated by one of the constants listed above methods getoriginalresponseheader() get the value of a particular original response header, that is, in the same form as it came from the network.
...the list of headers for which this flag is ignored is an implementation detail.
...the list of headers for which this flag is ignored is an implementation detail.
nsIHttpServer
(not supported) * @param function callback optional callback */ listen: function(port, opt, callback) { if (arguments.length == 2 && "function" == typeof opt) { callback = opt; } if (callback) { this.registerprefixhandler("/", callback); } let host = "localhost"; if (typeof port === "string" && port.indexof(':') != -1){ [host, port] = port.split(...
... }); }, close: function(){ server.stop(function(){}); }, get port() { return server.identity.primaryport } } } reference : mozilla-release/netwerk/test/httpserver/nsihttpserver.idl [scriptable, uuid(cea8812e-faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port.
... * * @param port * the port upon which listening should happen, or -1 if no specific port is * desired * @throws ns_error_already_initialized * if this server is already started * @throws ns_error_not_available * if the server is not started and cannot be started on the desired port * (perhaps because the port is already in use or because the process does * not have privileges to do so) * @note * behavior is undefined if this method is called after stop() has been * called on this but before the provided callback function has been * called.
nsIMacDockSupport
ocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //document.getelem...
...this can be done by adding a event listenr for load of the hidden window.
...var macmenuitem = services.appshell.hiddendomwindow.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) services.appshell.hiddendomwindow.document.getelementbyid('menu_mac_dockmenu').appendchild(macmenuitem) this adds the "show most recent window" menuitem from the previous example as a third item.
nsIMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message senders enable clients to send asynchronous messages to a single "other side".
...this invokes listeners who registered for messagename using a nsimessagelistenermanager.
... see nsimessagelistener::receivemessage() for the format of the data delivered to listeners.
nsIMsgIdentity
signaturedate long escapedvcard astring dofcc boolean fccfolder astring fccfolderpickermode astring fccreplyfollowsparent boolean draftsfolderpickermode astring tmplfolderpickermode astring bccself boolean note: don't call bccself, bccothers, and bcclist directly, they are only used for migration and backward compatability.
... use dobcc and dobcclist instead.
... bccothers boolean bcclist astring dobcc boolean dobcclist astring draftfolder astring stationeryfolder astring showsavemsgdlg boolean directoryserver astring overrideglobalpref boolean autocompletetomydomain boolean if this is false, don't append the user's domain to an autocomplete address with no matches.
nsINavHistoryQueryOptions
this would be used if you just wanted a list of bookmark folders and queries (such as the left pane of the places page).
...this is designed for cases where you want to give the user the option of filing something into a list of folders.
...this is used for the attributes that are not commonly accessed to save space in the common case (the lists can be very long).
nsIObserverService
hod overview void addobserver( in nsiobserver anobserver, in string atopic, in boolean ownsweak); nsisimpleenumerator enumerateobservers( in string atopic ); void notifyobservers( in nsisupports asubject, in string atopic, in wstring somedata ); void removeobserver( in nsiobserver anobserver, in string atopic ); methods addobserver() registers a given listener for a notifications regarding the specified topic.
... return value returns an enumeration of all registered listeners.
... components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice) .notifyobservers(null, "mytopicid", "someadditionalinformationpassedas'data'parameter"); see also nsobserverservice observer notifications provides an overview of observers and a list of built-in notifications fired by mozilla.
nsIPrefBranch2
void addobserver( in string adomain, in nsiobserver aobserver, in boolean aholdweak ); parameters adomain the preference on which to listen for changes.
... the nsprefbranch object listens for xpcom-shutdown and frees all of the objects currently in its observer list.
... the list of registered observers may be changed during the dispatch of nspref:changed notification.
nsIPrintingPrompt
xul dialog method overview void showpagesetup(in nsiprintsettings printsettings, in nsiobserver aobs); void showprintdialog(in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings); void showprogress(in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsiwebprogresslistener webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen); methods showpagesetup() shows the print progress dialog.
... void showprogress( in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsiwebprogresslistener webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen ); parameters webbrowserprint represents the document to be printed.
... webprogresslistener additional listener can be registered for progress notifications.
nsIProcessScriptLoader
removedelayedprocessscript() removes aurl from the list of scripts which support delayed load.
...the return value is a list of pairs [<url>, false].
... returns list of the delayed scripts.
nsIProfile
method overview void cloneprofile(in wstring profilename); void createnewprofile(in wstring profilename, in wstring nativeprofiledir, in wstring langcode, in boolean useexistingdir); void deleteprofile(in wstring name, in boolean candeletefiles); void getprofilelist(out unsigned long length, [retval, array, size_is(length)] out wstring profilenames); boolean profileexists(in wstring profilename); void renameprofile(in wstring oldname, in wstring newname); void shutdowncurrentprofile(in unsigned long shutdowntype); attributes attribute type description currentprofile wstring the name of the profil...
... getprofilelist() returns an array of strings indicating the names of all the available profiles.
... void getprofilelist( out unsigned long length, [retval, array, size_is(length)] out wstring profilenames ); parameters length on return, contains the number of profiles in the profilenames array.
nsIProgressEventSink
notifications will cease once the channel calls its listener's onstoprequest method or once the channel is canceled (via nsirequest.cancel()).
... acontext if arequest is a channel, then this parameter is the listener context passed to nsichannel.asyncopen().
... acontext if arequest is a channel, then this parameter is the listener context passed to nsichannel.asyncopen().
nsIProtocolHandler
uri_does_not_return_data 1<<11 channels using this protocol never call ondataavailable() on the listener passed to asyncopen(), and therefore do not return any usable data.
... methods allowport() lets a protocol override blacklisted ports.
... this method is called when there's an attempt to connect to a port that is blacklisted.
nsIProtocolProxyFilter
method overview nsiproxyinfo applyfilter(in nsiprotocolproxyservice aproxyservice, in nsiuri auri, in nsiproxyinfo aproxy); methods applyfilter() this method is called to apply proxy filter rules for the given uri and proxy object (or list of proxy objects).
... aproxy the proxy (or list of proxies) that would be used by default for the given uri.
... return value the proxy (or list of proxies) that should be used in place of aproxy.
nsIProtocolProxyService
when resolve/asyncresolve is called, it generates a list of proxies for the given uri, and then it applies the proxy filters.
... the filters have the opportunity to modify the list of proxies.
... after filters have been run, any disabled or disallowed proxies will be removed from the list.
nsIPushService
you can use the global nsiobserverservice to listen for these notifications.
... serviceworkerglobalscope.onpushsubscriptionchange please make sure you listen for push-subscription-change.
... if the subscription is lost, and your code isn't listening for this notification, you won't be able to receive messages until you create a new subscription.
nsIRequest
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) for example nsichannel typically passes itself as the nsirequest argument to the nsistreamlistener on each onstartrequest, ondataavaliable, and onstoprequest invocation.
...they are listed in descending order of precedence.
... requests that use nsistreamlistener must not call ondataavailable anymore after cancel has been called.
nsIResumableChannel
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void asyncopenat(in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid); obsolete since gecko 1.8 void resumeat(in unsigned long long startpos, in acstring entityid); attributes attribute type description entityid acstring the entity id for this uri.
...the request given to the nsistreamlistener will be qiable to nsiresumableinfo.
... void asyncopenat( in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid ); parameters listener as for asyncopen.
nsITreeView
getcellproperties() an atomized list of properties for a given cell.
... getrowproperties() an atomized list of properties for a given row.
...for very simple tree views, such as those without multi-level data, you might want to consider using something simpler than a tree view, such as a listbox.
nsIUpdatePrompt
showupdatehistory() shows a list of all updates that have been installed to date.
... void showupdatehistory( in nsidomwindow parent ); parameters parent an nsidomwindow indicating the parent window to which to anchor the update list window.
... see also nsiupdate nsiupdatechecklistener nsiupdatechecker nsiupdatepatch nsiapplicationupdateservice nsiupdatemanager nsiupdatetimermanager ...
nsIWorkerScope
1.0 66 introduced gecko 1.9.1 inherits from: nsiworkerglobalscope last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); void close(); attributes attribute type description onclose nsidomeventlistener a listener object to be called when the worker stops running.
... onmessage nsidomeventlistener a listener object to be called when a message is posted on the port.
...if a listener has been established by setting the value of the onclose attribute, it gets called.
nsIXmlRpcClient
bird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void init(in string serverurl); void setauthentication(in string username, in string password); void clearauthentication(in string username, in string password); void setencoding(in string encoding); void setencoding(in unsigned long type, out nsiidref uuid, out nsqiresult result); void asynccall (in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, in nsisupports arguments, in pruint32 count); attributes attribute type description serverurl readonly nsiurl the url of the xml-rpc server inprogress readonly boolean whether or not a call is in progress fault readonly nsixmlrpcfault the most recent xml-rpc fault from returned from this server.
...parameters listener a nsixmlrpcclientlistener that will get notified of xml-rpc events ctxt a context to be passed on to the listener methodname remote method to call arguments array of arguments to pass to the remote method count void asynccall ( in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, [array, size_is(count)] in nsisupports arguments, in ...
... void createtype ( in unsigned long type, out nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result ) ; parameters type one of the listed constants.
nsIAbCard/Thunderbird3
name, in boolean value); void deleteproperty(in autf8string name); autf8string translateto(in autf8string atype); void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type description properties nsisimpleenumerator readonly: a list of all the properties that this card has as an enumerator, whose members are all nsiproperty objects.
... ismaillist boolean if ismaillist is true then maillisturi will contain the uri of the associated mail list.
... maillisturi string if ismaillist is true then maillisturi will contain the uri of the associated mail list.
Weak reference
you can extrapolate from managing a single observer to managing a list of observers.
... private: nsweakptr mobserver; // ...or imagine a list of observers here }; // ...
... nsresult nsobservable::addobserver( nsiobserver* aobserver ) { mobserver = getter_addrefs( ns_getweakreference(aobserver) ); // ...or append this to the list of observers return ns_ok; } nsresult nsobservable::notifyobservers( nsimessage* amessage ) { nscomptr<nsiobserver> observer = do_queryreferent(mobserver); if ( observer ) observer->noticemessage(amessage); else mobserver = 0; // or remove this observer from the list, he's gone away return ns_ok; } // ...
Autoconfiguration in Thunderbird
in the apache configuration files, that means something like: listen 10.2.3.4:80 (of course, you use a public ip address that you own) <virtualhost 10.2.3.4:80> #must be the first and only virtual host with this ip!
...either, you can redirect them to a common hostname: server { listen 10.2.3.4:80; #use your server's public ip here!
... server_name autoconfig.*; return 301 http://autoconfig.hoster.com$request_uri; } or serve them directly from a common directory: server { listen 10.2.3.4:80; #again, use your server's public ip here!
Filelink Providers
the account setup dialog the account setup dialog allows the user to select what account type they would like to create from a menulist.
...that url is then loaded into an iframe directly beneath the provider menulist.
... the content to the right of the menulist is an iframe, pointed at a url read from the providers managementurl attribute, which should point to an xhtml page.
Mailnews and Mail code review requirements
rules for all patches affecting mailnews/ and mail/ wherever possible, significant patches in a certain area should be reviewed by one of the listed sub-module owner/reviewers.
... sub-module peers may only grant review in the listed sub-module.
... rubber-stamp approvals for intermittently failing ("orange") test fixes/debugging in order to make it easier to debug and fix tests that fail intermittently ("intermittent orange" tests), we have created the following two rubber-stamps based on this proposal on the tb-planning mailing list.
Building a Thunderbird extension 3: install manifest
a list of valid application ids can be found here.
...see valid application versions for a list of the supported version numbers and formats.
...see valid application versions for a list of the supported version numbers and formats.
customDBHeaders Preference
when using the latest releases, the line should look like: // space-delimited list in the latest code!
...: function(amsgfolder, atopic, adata) { dump("here here!"); addcustomcolumnhandler(); } } function doonceloaded(){ var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", false); window.document.getelementbyid('foldertree').addeventlistener("select",addcustomcolumnhandler,false); } window.addeventlistener("load",doonceloaded,false); dump(" ~ ~ ~ ~ end superfluous ~ ~ ~ ~ \n"); important be aware that only messages that are added to the .msf database after the customdbheaders pref is set will have the corresponding string property set on the msghdr.
... the attaching of the column handler through the observerservice object is some pretty new stuff, so i was using the addeventlistener("select"...) stuff as a backup.
Debugging service workers - Firefox Developer Tools
the firefox devtools’ storage tab has a cache storage section that lists all the different caches you have stored under each different origin.
...if you want to see a list of information concerning all the service workers registered on your browser, you can visit about:debugging#/runtime/this-firefox.
... below the list of installed extensions you'll find a list of all the service workers you have registered.
Break on DOM mutation - Firefox Developer Tools
examples for when this breakpoint is triggered are calling element.setattribute(), element.removeattribute(), and element.classlist.add(), or setting element.id.
...you can see the breakpoint listed in the right-most panel under dom mutation breakpoints.
...in the following example, the selected node (the unordered list) is modified by adding a new child node.
Performance Analysis - Firefox Developer Tools
(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.
... to get back to the network monitor's list of network requests click the "back" button on the left.
... network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network request details network traffic recording throttling ...
Network monitor toolbar - Firefox Developer Tools
(prior to firefox 77, this toolbar was arranged somewhat differently.) it provides: an icon to clear the network request list.
... a set of tool icons: pause (or resume) recording network log search the log request blocking an array of buttons to filter the network request list by type: by the content type of the response xhr requests websocket upgrades and messages (labeled ws) other requests a checkbox that allows you to disable caching.
... 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 ...
Examine and edit HTML - Firefox Developer Tools
now children are indicated in the tree with this icon: at the right side of some nodes there are markers shown indicating different pieces of information related to it: event the element has one or several event listeners attached to it.
... 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.
... note: there are some useful keyboard shortcuts that can be used in the html tree — see the html pane keyboard shortcuts list.
UI Tour - Firefox Developer Tools
rules view the rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific.
... to learn more about the css declarations listed in this view, see examine computed css.
...as new browser versions are released, the version numbers in this list will be updated.
Intensive JavaScript - Firefox Developer Tools
main thread code would look something like this: const iterations = 50; const multiplier = 1000000000; var worker = new worker("js/calculate.js"); function dopointlesscomputationsinworker() { function handleworkercompletion(message) { if (message.data.command == "done") { pointlesscomputationsbutton.disabled = false; console.log(message.data.primes); worker.removeeventlistener("message", handleworkercompletion); } } worker.addeventlistener("message", handleworkercompletion, false); worker.postmessage({ "multiplier": multiplier, "iterations": iterations }); } the main difference here, compared with the original, is that we need to: create a worker send it a message when we are ready to calculate listen for a message called "done", which i...
... then we need a new file "calculate.js", that looks like this: self.addeventlistener("message", go); function go(message) { var iterations = message.data.iterations; var multiplier = message.data.multiplier; primes = calculateprimes(iterations, multiplier); self.postmessage({ "command":"done", "primes": primes }); } function calculateprimes(iterations, multiplier) { var primes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } retur...
...n primes; } in the worker, we have to listen for a message telling us to start, and send a "done" message back when we are done.
IndexedDB - Firefox Developer Tools
when you select an origin inside the indexed db storage type in the storage tree of the storage inspector, a table lists the details of all the databases present for that origin.
... when an indexeddb database is selected in the storage tree, details about all the object stores are listed in the table.
... when an object store is selected in the storage tree, all the items in that object store are listed in the table.
Web Console Helpers - Firefox Developer Tools
this is like for document.queryselectorall(), but returns an array instead of a nodelist.
... keys() given an object, returns a list of the keys (or property names) on that object.
... values() given an object, returns a list of the values on that object; serves as a companion to keys().
AbortSignal - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AddressErrors - Web APIs
a description of the total amount being requested (including a label and the currency used), a list of the line items (in this case only one, "original donation amount"), and a list of shipping options available; in this case only one.
... let request; function process() { let options = {requestshipping: true}; try { request = new paymentrequest(supportedhandlers, defaultpaymentdetails, options); // add event listeners here.
... window.addeventlistener("load", function(ev) { document.getelementbyid("pay").addeventlistener("click", process, false); }, false); see addeventlistener() for information about event handlers and how they work.
AudioParam - Web APIs
each audioparam has a list of events, initially empty, that define when and how values change.
... when this list is not empty, changes using the audioparam.value attributes are ignored.
... this list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves.
AudioTrack.language - Web APIs
example this example locates all of a media element's primary language and translated audio tracks and returns a list of objects containing each of those tracks' id, kind, and language.
... this could then be used to build a user interface for selecting the language the user would like to listen to while watching a movie, for example.
... function getavailablelanguages(el) { var tracklist = []; const wantedkinds = [ "main", "translation" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, language: track.language }); } }); return tracklist; } specifications specification status comment html living standardthe definition of 'audiotrack.language' in that specification.
BasicCardRequest - Web APIs
"amex", "mastercard"); see card network identifiers for a complete list.
... card network identifiers the w3c maintains an official list of approved card network identifier strings, which may be used in the supportednetworks list.
... label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
BasicCardResponse - Web APIs
label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
... full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedregions preference (needs to be set to a comma-delineated list of one or more 2-character iso country codes indicating the countries in which to support payments (for example, us,ca.).
... full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedregions preference (needs to be set to a comma-delineated list of one or more 2-character iso country codes indicating the countries in which to support payments (for example, us,ca.).
Battery Status API - Web APIs
this is done by listening for the chargingchange, levelchange, chargingtimechange, dischargingtimechange events.
... navigator.getbattery().then(function(battery) { function updateallbatteryinfo(){ updatechargeinfo(); updatelevelinfo(); updatecharginginfo(); updatedischarginginfo(); } updateallbatteryinfo(); battery.addeventlistener('chargingchange', function(){ updatechargeinfo(); }); function updatechargeinfo(){ console.log("battery charging?
..."yes" : "no")); } battery.addeventlistener('levelchange', function(){ updatelevelinfo(); }); function updatelevelinfo(){ console.log("battery level: " + battery.level * 100 + "%"); } battery.addeventlistener('chargingtimechange', function(){ updatecharginginfo(); }); function updatecharginginfo(){ console.log("battery charging time: " + battery.chargingtime + " seconds"); } battery.addeventlistener('dischargingtimechange', function(){ updatedischarginginfo(); }); function updatedischarginginfo(){ console.log("battery discharging time: " + battery.dischargingtime + " seconds"); } }); see also the example in the specification.
Body.json() - Web APIs
WebAPIBodyjson
when the fetch is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.
... const mylist = document.queryselector('ul'); const myrequest = new request('products.json'); fetch(myrequest) .then(response => response.json()) .then(data => { for (const product of data.products) { let listitem = document.createelement('li'); listitem.appendchild( document.createelement('strong') ).textcontent = product.name; listitem.append( ` can be found in ${ product.location }.
... cost: ` ); listitem.appendchild( document.createelement('strong') ).textcontent = `£${product.price}`; mylist.appendchild(listitem); } }) .catch(console.error); specifications specification status comment fetchthe definition of 'body.json()' in that specification.
BroadcastChannel: message event - Web APIs
there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element.
...sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addev...
...entlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); result specifications specification status html living standard living standard ...
CSSRule - Web APIs
WebAPICSSRule
there are several types of rules, listed in the type constants section below.
... references to a cssrule may be obtained by looking at a cssstylesheet's cssrules list.
...entrule cssrule.font_feature_values_rule 14 cssfontfeaturevaluesrule cssrule.viewport_rule 15 cssviewportrule cssrule.region_style_rule 16 cssregionstylerule cssrule.unknown_rule 0 cssunknownrule cssrule.charset_rule 2 csscharsetrule (removed in most browsers.) an up-to-date informal list of constants can be found on the csswg wiki.
CSSStyleSheet.rules - Web APIs
functionally identical to the preferred cssrules property, it provides access to a live-updating list of the css rules comprising the stylesheet.
... syntax var rules = cssstylesheet.rules; value a live-updating cssrulelist containing each of the css rules making up the stylesheet.
... each entry in the rule list is a cssrule object describing one rule making up the stylesheet.
Managing screen orientation - Web APIs
nullam quis malesuada est.</p> css relies on the orientation media query to handle specific styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .5em; } ul { list-style: none; font : 1em monospace; margin : 0; padding: .5em; -moz-box-sizing: border-box; box-sizing: border-box; background: black; } li { display: inline-block; margin : 0; padding: 0.5em; background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on top */ @media screen and (...
... listening orientation change the orientationchange event is triggered each time the device change the orientation of the screen and the orientation itself can be read with the screen.orientation property.
... screen.addeventlistener("orientationchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); preventing orientation change any web application can lock the screen to suits its own needs.
CSS Object Model (CSSOM) - Web APIs
reference animationevent caretposition css csscharsetrule cssconditionrule csscounterstylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-relat...
...ericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the dhtml/ajax era).
... css object model (cssom) view module working draft defined the screen and mediaquerylist interfaces and the mediaquerylistevent event and mediaquerylistlistener event listener.
CacheStorage - Web APIs
use this method to iterate over a list of all the cache objects.
... self.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', ...
... '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); self.addeventlistener('fetch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value if (response !== undefined) { return response; } else { return fetch(event.request).then(function (response) { // response may be used only once // we need to save clone to put one copy in cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/ga...
Manipulating video using canvas - Web APIs
this method's job is to prepare the variables needed by the chroma-key processing code, and to set up an event listener so we can detect when the user starts playing the video.
... var processor; processor.doload = function doload() { this.video = document.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements.
... then addeventlistener() is called to begin watching the video element so that we obtain notification when the user presses the play button on the video.
Pixel manipulation with canvas - Web APIs
yle.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.textcontent = rgba; } canvas.addeventlistener('mousemove', pick); painting pixel data into a context you can use the putimagedata() method to paint pixel data into a context: ctx.putimagedata(myimagedata, dx, dy); the dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.
...putimagedata(imagedata, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putimagedata(imagedata, 0, 0); }; var invertbtn = document.getelementbyid('invertbtn'); invertbtn.addeventlistener('click', invert); var grayscalebtn = document.getelementbyid('grayscalebtn'); grayscalebtn.addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details.
... var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomctx.webkitimagesmoothingenabled = this.checked; zoomctx.msimagesmoothingenabled = this.checked; }; smoothbtn.addeventlistener('change', togglesmoothing); var zoom = function(event) { var x = event.layerx; var y = event.layery; zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); }; canvas.addeventli...
CharacterData - Web APIs
nondocumenttypechildnode.nextelementsibling read only returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.
... nondocumenttypechildnode.previouselementsibling read only returns the element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.
... childnode.remove() removes the object from its parent children list.
Clients.matchAll() - Web APIs
WebAPIClientsmatchAll
the matchall() method of the clients interface returns a promise for a list of service worker client objects.
... syntax self.clients.matchall(options).then(function(clients) { // do something with your clients list }); parameters options optional an options object allowing you to set options for the matching operation.
... examples clients.matchall(options).then(function(clientlist) { for (var i = 0 ; i < clientlist.length ; i++) { if (clientlist[i].url === 'index.html') { clients.openwindow(clientlist[i]); // or do something else involving the matching client } } }); specifications specification status comment service workersthe definition of 'clients: matchall' in that specification.
ContentIndex.add() - Web APIs
WebAPIContentIndexadd
used in user-visible lists of content.
...used in user-visible lists of content.
...used in user-visible lists of content.
ContentIndexEvent - Web APIs
properties in addition to the properties listed below, this interface inherits the properties of its parent interface, extendableevent.
... examples this example shows the sevice worker script listening for the contentdelete event and logs the removed content index id.
... self.addeventlistener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); specifications specification status comment unknownthe definition of 'contentindexevent' in that specification.
CustomEvent - Web APIs
event.composedpath() returns the event’s path (objects on which listeners will be invoked).
... event.stopimmediatepropagation() for this particular event, prevent all other listeners from being called.
... this includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).
DataTransfer.setData() - Web APIs
if data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type.
...that is, the order of the types list is not changed when replacing data of the same type.
... example data types are text/plain and text/uri-list.
DeprecationReportBody - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(l...
...istitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue.
... we loop over each report using a basic for loop, then iterate over each entry of in the report's body (a deprecationreportbody instance) using a for...in structure, displaying each key/value pair inside a list item.
Document: animationcancel event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the animationcancel event.
... document.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of addeventlistener(): document.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event.
Document: drag event - Web APIs
</div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref.
... on the dragged elem dragged = event.target; // make it half transparent event.target.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it ...
... if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Document.execCommand() - Web APIs
see commands for a list of possible commands.
... insertorderedlist creates a numbered ordered list for the selection or at the insertion point.
... insertunorderedlist creates a bulleted unordered list for the selection or at the insertion point.
Document.forms - Web APIs
WebAPIDocumentforms
the forms read-only property of the document interface returns an htmlcollection listing all the <form> elements contained in the document.
... note: similarly, you can access a list of a form's component user input elements using the htmlformelement.elements property.
... syntax collection = document.forms; value an htmlcollection object listing all of the document's forms.
Document.images - Web APIs
WebAPIDocumentimages
syntax var imagecollection = document.images; value an htmlcollection providing a live list of all of the images contained in the current document.
...the following are equivalent: firstimage = imagecollection.item(0); firstimage = imagecollection[0]; example this example looks through the list of images and finds one whose name is "banner.gif".
... var ilist = document.images; for(var i = 0; i < ilist.length; i++) { if(ilist[i].src == 'banner.gif') { // found the banner } } specifications specification status comment html living standardthe definition of 'document.images' in that specification.
Document: keyup event - Web APIs
to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples this example logs the keyboardevent.code value whenever you release a key.
... addeventlistener keyup example <p>focus the iframe first (e.g.
... by clicking in it), then try pressing some keys.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent document.onkeyup = logkey; specifications specification status ui events working draft ...
Document.scripts - Web APIs
WebAPIDocumentscripts
the scripts property of the document interface returns a list of the <script> elements in the document.
... syntax var scriptlist = document.scripts; value an htmlcollection.
... you can use this just like an array to get all the elements in the list.
DocumentFragment.querySelectorAll() - Web APIs
the documentfragment.queryselectorall() method returns a nodelist of elements within the documentfragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.
... syntax elementlist = documentfragment.queryselectorall(selectors); parameters selectors is a domstring containing one or more css selectors separated by commas.
... examples this example returns a list of all div elements within the documentfragment with a class of either "note" or "alert": var matches = documentfrag.queryselectorall("div.note, div.alert"); specifications specification status comment selectors api level 1the definition of 'documentfragment.queryselectorall' in that specification.
DocumentOrShadowRoot.msElementsFromRect() - Web APIs
the mselementsfromrect method returns the node list of elements that are under a rectangle defined by left, top, width, and height.
... syntax object.mselementsfromrect(left, top, width, height, retval) parameters left [in] type: floating-point top[in] type: floating-point width[in] type: floating-point height [in] type: floating-point retval [out, reval] type: nodelist example to find all of the elements under a given point, use mselementsfrompoint(x, y).
... var nodelist = document.mselementsfromrect(x,y,width,height) var nodelist = document.mselementsfrompoint(x,y) the returned nodelist is sorted by z-index so that you can tell the relative stacking order of the elements.
Locating DOM elements using selectors - Web APIs
queryselectorall() returns a nodelist containing all matching element nodes within the node's subtree, or an empty nodelist if no matches are found.
... note: the nodelist returned by queryselectorall() is not live, which means that changes in the dom are not reflected in the collection.
... this is different from other dom querying methods that return live node lists.
Element: click event - Web APIs
<div>) and which also don't have event listeners directly attached to the elements themselves (i.e.
... safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a form control) <textarea> this list is incomplete; you can help mdn by doing further testing/research and expanding it.
... html <button>click</button> javascript const button = document.queryselector('button'); button.addeventlistener('click', event => { button.innerhtml = `click count: ${event.detail}`; }); result try making rapid, repeated clicks on the button to increase the click count.
Element.computedStyleMap() - Web APIs
examples we start with some simple html: a paragraph with a link, and a definition list to which we will add all the css property / value pairs.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the css property values using computedstylemap().
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of allcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } in browsers that support computedstylemap(), you'll see a list of all the c...
Element.getClientRects() - Web APIs
for html <area> elements, svg elements that do not render anything themselves, display:none elements, and generally any elements that are not directly rendered, an empty list is returned.
...> <p> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>p's rect</strong> <p class="withclientrectsoverlay"> <span>paragraph that spans multiple lines</span> </p> </div> <div> <strong>span's rect</strong> <p> <span class="withclientrectsoverlay">paragraph that spans multiple lines</span> </p> </div> example 2: this html creates three ordered lists.
... <h3>a list</h3> <p>note that the border box doesn't include the number, so neither do the client rects.</p> <div> <strong>original</strong> <ol> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="withclientrectsoverlay">item 1</li> <li class="withclientrectsoverlay">item 2</li> </ol> </div> example 3: this html creates two tables with captions.
Element.getElementsByClassName() - Web APIs
return value an htmlcollection providing a live-updating list of every element which is a member of every class in names.
...eir classes a single specified class, we just provide that class name when calling getelementsbyclassname(): element.getelementsbyclassname('test'); this example finds all elements that have a class of test, which are also a descendant of the element that has the id of main: document.getelementbyid('main').getelementsbyclassname('test'); matching multiple classes to find elements whose class lists include both the red and test classes: element.getelementsbyclassname('red test'); examining the results you can use either the item() method on the returned htmlcollection or standard array syntax to examine individual elements in the collection.
... var matches = element.getelementsbyclassname('colorbox'); for (var i=0; i<matches.length; i++) { matches[i].classlist.remove('colorbox'); matches.item(i).classlist.add('hueframe'); } instead, use another method, such as: var matches = element.getelementsbyclassname('colorbox'); while (matches.length > 0) { matches.item(0).classlist.add('hueframe'); matches[0].classlist.remove('colorbox'); } this code finds descendant elements with the "colorbox" class, adds the class "hueframe", by calling item(0), then removes "colorbox" (using array notation).
Element.part - Web APIs
WebAPIElementpart
set using the part attribute), returned as a domtokenlist.
... syntax let elementpartlist = element.part examples the following excerpt is from our shadow-part example.
... let tabs = []; let children = this.shadowroot.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addeventlistener('click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.target.part = 'tab active'; }) console.log(tab.part); }) specifications specification status comment shadow partsthe definition of 'element.part' in that specification.
Comparison of Event Targets - Web APIs
there are five targets to consider: property defined in purpose event.target dom event interface the dom element on the lefthand side of the call that triggered this event, eg: element.dispatchevent(event) event.currenttarget dom event interface the eventtarget whose eventlisteners are currently being processed.
... min-height: 30px; } .standard { background-color: #99ff99; } .non-standard { background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other element (if any) involved in the event <small>event.relatedtarget</small></td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.explicitoriginaltarget</small> contains the target before retargetting (never contains anonymous targ...
...latedtarget; document.getelementbyid('explicitoriginaltarget').innerhtml = e.explicitoriginaltarget; document.getelementbyid('originaltarget').innerhtml = e.originaltarget; } function handlemouseover(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; } document.addeventlistener('click', handleclicks, false); document.addeventlistener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over.
Event.msConvertURL() - Web APIs
example var bloblist = []; document.getelementbyid("pastezone").addeventlistener('paste', handlepaste, false); function handlepaste(evt) { var filelist = window.clipboarddata.files; // note that window.datatransfer.files is not applicable.
... if (!filelist) { console.log("filelist is null."); return; } for (var i = 0; i < filelist.length; i++) { var file = filelist[i]; var url = url.createobjecturl(file); if (evt.converturl) { // use standard if available.
... evt.converturl(file, "specified", url); } else { evt.msconverturl(file, "specified", url); } console.log("local file: " + file.name + " (" + file.size + ")"); bloblist.push(file); } // for } // handlepaste see also microsoft api extensions ...
Event.preventDefault() - Web APIs
the event continues to propagate as usual, unless one of its event listeners calls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once.
...this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("click", function(event) { document.getelementbyid("output-box").innerhtml += "sorry!
...first, listen for keypress events: var mytextbox = document.getelementbyid('my-textbox'); mytextbox.addeventlistener('keypress', checkname, false); the checkname() function, which looks at the pressed key and decides whether to allow it: function checkname(evt) { var charcode = evt.charcode; if (charcode != 0) { if (charcode < 97 || charcode > 122) { evt.preventdefault(); displaywarni...
Event.stopImmediatePropagation() - Web APIs
the stopimmediatepropagation() method of the event interface prevents other listeners of the same event from being called.
... if several listeners are attached to the same element for the same event type, they are called in the order in which they were added.
... if stopimmediatepropagation() is invoked during one such call, no remaining listeners will be called.
FileReader - Web APIs
file objects may be obtained from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
... as filereader inherits from eventtarget, all those events can also be listened for by using the addeventlistener method.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
GlobalEventHandlers - Web APIs
each of these interfaces can, of course, add more event handlers in addition to the ones listed below.
... properties this interface doesn't include any properties except for the event handlers listed below.
... globaleventhandlers.onformdata is an eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed.
HTMLAnchorElement - Web APIs
htmlanchorelement.rellist read only returns a domtokenlist that reflects the rel html attribute, as a list of tokens.
... htmlanchorelement.coords is a domstring representing a comma-separated list of coordinates.
... the following properties have been added: hash, host, hostname, media, pathname, port, protocol, rellist, search, and text.
HTMLButtonElement.labels - Web APIs
the htmlbuttonelement.labels read-only property returns a nodelist of the <label> elements associated with the <button> element.
... syntax var labelelements = button.labels; return value a nodelist containing the <label> elements associated with the <button> element.
... example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLElement: animationend event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationend examples this example gets an element that's being animated and listens for the animationend event: const animated = document.queryselector('.animated'); animated.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example html <div class="...
...@keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textconte...
...nt = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationiteration examples this code uses animationiteration to keep track of the number of iterations an animation has completed: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; ...
...frames slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textconte...
...nt = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationstart event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationstart examples this listens for the animationstart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live exam...
...frames slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textconte...
...nt = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: change event - Web APIs
the html specification lists the <input> types that should fire the change event.
...ocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
... html <input placeholder="enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('change', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'change' in that specification.
HTMLFontElement.face - Web APIs
the obsolete htmlfontelement.face property is a domstring that reflects the face html attribute, containing a comma-separated list of one or more font names.
...if no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.
... the format of the string must follow one of the following html microsyntax: microsyntax description examples list of one or more valid font family names a list of font names, that have to be present on the local system courier,verdana syntax facestring = fontobj.face; fontobj.face = facestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.face = "arial"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.face .
HTMLImageElement.sizes - Web APIs
the htmlimageelement property sizes allows you to specify the layout width of the image for each of a list of media conditions.
... syntax let sizes = htmlimageelement.sizes; htmlimageelement.sizes = sizes; value a usvstring containing a comma-separated list of source size descriptors followed by an optional fallback size.
... let image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.
HTMLInputElement.labels - Web APIs
the htmlinputelement.labels read-only property returns a nodelist of the <label> elements associated with the <input> element.
... syntax var labelelements = input.labels; return value a nodelist containing the <label> elements associated with the <input> element.
... example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLLIElement - Web APIs
the htmllielement interface exposes specific properties and methods (beyond those defined by regular htmlelement interface it also has available to it by inheritance) for manipulating list elements.
...as the standard way of defining the list type is via the css list-style-type property, use the cssom methods to set it via a script.
... htmllielement.value is a long indicating the ordinal position of the list element inside a given <ol>.
HTMLMeterElement.labels - Web APIs
the htmlmeterelement.labels read-only property returns a nodelist of the <label> elements associated with the <meter> element.
... syntax var labelelements = meter.labels; return value a nodelist containing the <label> elements associated with the <meter> element.
... example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLOutputElement.labels - Web APIs
the htmloutputelement.labels read-only property returns a nodelist of the <label> elements associated with the <output> element.
... syntax var labelelements = output.labels; return value a nodelist containing the <label> elements associated with the <output> element.
... example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLProgressElement.labels - Web APIs
the htmlprogresselement.labels read-only property returns a nodelist of the <label> elements associated with the <progress> element.
... syntax var labelelements = progress.labels; return value a nodelist containing the <label> elements associated with the <progress> element.
... example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.labels - Web APIs
the htmlselectelement.labels read-only property returns a nodelist of the <label> elements associated with the <select> element.
... syntax var labelelements = select.labels; return value a nodelist containing the <label> elements associated with the <select> element.
... example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLTextAreaElement.labels - Web APIs
the htmltextareaelement.labels read-only property returns a nodelist of the <label> elements associated with the <textarea> element.
... syntax var labelelements = textarea.labels; return value a nodelist containing the <label> elements associated with the <textarea> element.
... example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
File drag and drop - Web APIs
one api is the datatransfer interface and the second api is the datatransferitem and datatransferitemlist interfaces.
...in the following drop handler, if the browser supports datatransferitemlist interface, the getasfile() method is used to access each file; otherwise the datatransfer interface's files property is used to access each file.
... function drophandler(ev) { console.log('file(s) dropped'); // prevent default behavior (prevent file from being opened) ev.preventdefault(); if (ev.datatransfer.items) { // use datatransferitemlist interface to access the file(s) for (var i = 0; i < ev.datatransfer.items.length; i++) { // if dropped items aren't files, reject them if (ev.datatransfer.items[i].kind === 'file') { var file = ev.datatransfer.items[i].getasfile(); console.log('...
IDBDatabase.objectStoreNames - Web APIs
the objectstorenames read-only property of the idbdatabase interface is a domstringlist containing a list of the names of the object stores currently in the connected database.
... syntax var list[] = idbdatabase.objectstorenames; value a domstringlist containing a list of the names of the object stores currently in the connected database.
... example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabaseSync - Web APIs
path, in optional boolean autoincrement) raises (idbdatabaseexception); idbobjectstoresync openobjectstore (in domstring name, in optional unsigned short mode) raises (idbdatabaseexception); void removeobjectstore (in domstring storename) raises (idbdatabaseexception); void setversion (in domstring version); idbtransactionsync transaction (in optional domstringlist storenames, in optional unsigned int timeout) raises (idbdatabaseexception); attributes attribute type description description readonly domstring the human-readable description of the connected database.
... objectstores readonly domstringlist the names of the object stores that exist in the connected database.
... idbtransactionsync transaction ( in optional domstringlist storenames, in optional unsigned int timeout ) raises (idbdatabaseexception); parameters storenames the names of object stores and indexes in the scope of the new transaction.
IDBObjectStore.autoIncrement - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification.
IDBObjectStore.createIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // two event handlers for opening the database.
... db = request.result; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // this handler fires when a new database is created and indicates // either that one has not been created before, or a new version // was submitted with window.indexeddb.open().
...dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique...
IDBObjectStore.keyPath - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBObjectStore.name - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBObjectStore.transaction - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
....result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification.
IDBOpenDBRequest: blocked event - Web APIs
bubbles no cancelable no interface idbversionchangeevent event handler property onblocked examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); obje...
...ctstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error crea...
...ting database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.onblocked = () => { console.log('request was block...
IDBOpenDBRequest.onblocked - Web APIs
}; example var db; // let us open our database var request = indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = request.result; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the // database needs to be created.
...re, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); ...
IDBTransaction.abort() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'abort()' in that specification.
IDBTransaction.db - Web APIs
WebAPIIDBTransactiondb
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the database (idbdatabase) connection with which this transaction is associated transaction.db; }; specification specification status comment indexed database api 2.0the definition of 'db' in that specification.
IDBTransaction.error - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transa...
...ction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'error' in that specification.
IDBTransaction.mode - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the mode this transaction has been opened in (should be "readwrite" in this case) transaction.mode; }; specification specification status comment indexed database api 2.0the definition of 'mode' in that specification.
IDBTransaction.objectStore() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; specification specification status comment indexed database api 2.0the definition of 'objectstore()' in that specification.
IDBTransaction.onabort - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transac...
...tion var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; transaction.onabort = function() { // report when the transaction was successfully aborted console.log("transaction aborted!"); }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'onabort' in that specification.
IDBTransaction.oncomplete - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transac...
...tion var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.oncomplete) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'oncomplete' in that specification.
IDBTransaction.onerror - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transa...
...ction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'onerror' in that specification.
KeyframeEffect.setKeyframes() - Web APIs
element.animate({ opacity: [ 0, 0.9, 1 ], offset: [ 0, 0.8 ], // shorthand for [ 0, 0.8, 1 ] easing: [ 'ease-in', 'ease-out' ], }, 2000); after generating a suitable set of keyframes from the property value lists, each supplied offset is applied to the corresponding keyframe.
... if there are insufficient values, or if the list contains null values, the keyframes without specified offsets will be evenly spaced as with the array format described above.
... if there are too few easing or composite values, the corresponding list will be repeated as needed.
LargestContentfulPaint - Web APIs
examples the following example shows how to create a performanceobserver that listens for largest-contentful-paint entries and logs the lcp value to the console.
...// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let lcp; const po = new performanceobserver((entrylist) => { const entries = entrylist.getentries(); const lastentry = entries[entries.length - 1]; // update `lcp` to the latest value, using `rendertime` if it's available, // otherwise using `loadtime`.
... addeventlistener('visibilitychange', function fn() { if (lcp && document.visibilitystate === 'hidden') { console.log('lcp:', lcp); removeeventlistener('visibilitychange', fn, true); } }, true); } catch (e) { // do nothing if the browser doesn't support this api.
MediaDeviceInfo - Web APIs
the list of devices obtained by calling navigator.mediadevices.enumeratedevices() is an array of mediadeviceinfo objects, one per media device.
... example here's an example that uses enumeratedevices() to get a list of devices.
... if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } // list cameras and microphones.
MediaDevices.enumerateDevices() - Web APIs
the mediadevices method enumeratedevices() requests a list of the available media input and output devices, such as microphones, cameras, headsets, and so forth.
...it simply outputs a list of the device ids, with their labels if available.
... if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } // list cameras and microphones.
MediaKeySystemConfiguration - Web APIs
properties mediakeysystemconfiguration.initdatatypes read only returns a list of supported initialization data type names.
... mediakeysystemconfiguration.audiocapabilities read only returns a list of supported audio type and capability pairs.
... mediakeysystemconfiguration.videocapabilities read only returns a list of supported video type and capability pairs.
MediaSource.activeSourceBuffers - Web APIs
the activesourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
... syntax var myactivesourcebuffers = mediasource.activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the active tracks.
... example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.activesourcebuffers); // will contain the source buffer that was added above, // as it is selected for playing in the video player video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaSource.addSourceBuffer() - Web APIs
the addsourcebuffer() method of the mediasource interface creates a new sourcebuffer of the given mime type and adds it to the mediasource's sourcebuffers list.
... notsupportederror the specified mimetype isn't supported by the user agent, or is not compatible with the mime types of other sourcebuffer objects that are already included in the media source's sourcebuffers list.
...ag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.sourceBuffers - Web APIs
the sourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing the list of sourcebuffer objects associated with this mediasource.
... syntax var mysourcebuffers = mediasource.sourcebuffers; value a sourcebufferlist.
... example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.sourcebuffers); // will contain the source buffer that was added above video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaStreamTrack - Web APIs
properties in addition to the properties listed below, mediastreamtrack has constrainable properties which can be set using applyconstraints() and accessed using getconstraints() and getsettings().
... mediastreamtrack.getcapabilities() returns the a list of constrainable properties available for the mediastreamtrack.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended sent when playback of the track ends (when the value readystate changes to ended).
MediaStream Recording API - Web APIs
you can listen for error events by setting up a onerror event handler.
...to do so, you'll need to call navigator.mediadevices.enumeratedevices() to get a list of the available media devices.
... you can then examine that list and identify the potential input sources, and even filter the list based on desired criteria.
Transcoding assets for Media Source Extensions - Web APIs
sample media if you're looking to follow the steps listed here, but don't have any media to experiment with, you can grab the trailer to big buck bunny [0] here.
... to check if the browser supports a particular container, you can pass a string of the mime type to the mediasource.istypesupported method: mediasource.istypesupported('audio/mp3'); // false mediasource.istypesupported('video/mp4'); // true mediasource.istypesupported('video/mp4; codecs="avc1.4d4028, mp4a.40.2"'); // true the string is the mime type of the container, optionally followed by a list of codecs.
... to check whether an mp4 file is a proper mp4 stream, you can again use the mp4info utility to list the atoms of an mp4.
MessageEvent - Web APIs
using an onmessage handler as listed above).
...if the onmessage event is attached using addeventlistener, the port is manually started using its start() method: myworker.port.start(); when the port is started, both scripts post messages to the worker and handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = fun...
... onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using addeventlistener.
MessagePort: message event - Web APIs
to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages on it using code like this: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = ev...
...ent.data; }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; }); specifications specification status html living standard living standard ...
MessagePort: messageerror event - Web APIs
to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages and message errors on it using code like this: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { receiv...
...ed.textcontent = event.data; }); myport.addeventlistener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; myport.onmessageerror = (event) => { console.error(event.data); }; }); specifications specification status html living standard living standard ...
MessagePort.onmessage - Web APIs
the onmessage event handler of the messageport interface is an eventlistener, called whenever an messageevent of type message is fired on the port — that is, when the port receives a message.
...the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
NavigatorPlugins.plugins - Web APIs
returns a pluginarray object, listing the plugin objects describing the plugins installed in the application.
... syntax var plugins = navigator.plugins; plugins is pluginarray object used to access plugin objects either by name or as a list of items.
...a list of plugins is also available by entering about:plugins in the browser's location bar.
Node.childNodes - Web APIs
WebAPINodechildNodes
the node.childnodes read-only property returns a live nodelist of child nodes of the given element where the first child node is assigned index 0.
... syntax let nodelist = elementnodereference.childnodes; examples simple usage // parg is an object reference to a <p> element // first check that the element has child nodes if (parg.haschildnodes()) { let children = parg.childnodes; for (let i = 0; i < children.length; i++) { // do something with each child as children[i] // note: list is live!
... adding or removing children will change the list's `length` } } remove all children from a node // this is one way to remove all children from a node // box is an object reference to an element while (box.firstchild) { //the list is live so it will re-index each call box.removechild(box.firstchild); } notes the items in the collection of nodes are objects, not strings.
OrientationSensor - Web APIs
interfaces based on orientationsensor below is a list of interfaces based on the orientationsensor interface.
... const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
PannerNode.positionZ - Web APIs
the positionz property of the pannernode interface specifies the z coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the depth axis (behind-in front of the listener).
...if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
... example the following example starts an oscillator and moves it in front of the listener after 1 second, behind the listener after 2 seconds, and back to the listener's position after 3 seconds.
PannerNode.refDistance - Web APIs
the refdistance property of the pannernode interface is a double value representing the reference distance for reducing volume as the audio source moves further from the listener – i.e.
... example this example demonstrates how different values of refdistance affect how the volume of a sound decays as it moves away from the listener.
... const context = new audiocontext(); // all our test tones will last this many seconds const note_length = 6; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given refdistance // and schedules it to move away from the listener along the z (depth-wise) axis // at the given start time, resulting in a decrease in volume (decay) const scheduletesttone = (refdistance, starttime) => { const osc = new oscillatornode(context); const panner = new pannernode(context); panner.refdistance = refdistance; // set the initial z position, then schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.pos...
PaymentRequest.onshippingaddresschange - Web APIs
syntax paymentrequest.addeventlistener('shippingaddresschange', shippingaddresschangeevent => { ...
...to make sure an updated address is included when sending payment information to the server, you should add event listeners for a paymentrequest object after instantiation, but before the call to show().
...var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of clarity.
PaymentRequest.onshippingoptionchange - Web APIs
syntax paymentrequest.addeventlistener('shippingoptionchange', shippingoptionchangeevent => { ...
...to make sure an updated option is included when sending payment information to the server, you should add event listeners for a paymentrequest object after instantiation, but before the call to show().
...var request = new paymentrequest(supportedinstruments, details, options); // when user selects a shipping address request.addeventlistener('shippingaddresschange', e => { e.updatewith(((details, addr) => { var shippingoption = { id: '', label: '', amount: { currency: 'usd', value: '0.00' }, selected: true }; // shipping to us is supported if (addr.country === 'us') { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '55.00'; // shipping to jp is supported } else if (addr.country === 'jp') { shippingoption.id = 'jp'; shippingoption.label = 'int...
PaymentResponse: payerdetailchange event - Web APIs
bubbles no cancelable no interface paymentrequestupdateevent event handler property onpayerdetailchange examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected.
...ername)); oldpayername = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { ...
...method: "post", body: response.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); addeventlistener equivalent you could also set up the event handler using the addeventlistener() method: response.addeventlistener("payerdetailchange", async ev => { ...
PaymentResponse.retry() - Web APIs
see the list of exceptions for show() for further details.
... requestorresponse.addeventlistener(event, async function listener(ev) { const promisetovalidate = validator(requestorresponse); ev.updatewith(promisetovalidate); const errors = await promisetovalidate; if (!errors) { // yay!
... event.removeeventlistener(event, listener); resolve(); } }); }); } dopaymentrequest(); specifications specification status comment payment request apithe definition of 'retry()' in that specification.
Using the Payment Request API - Web APIs
const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... the code looks something like this: checkoutbutton.addeventlistener('click', function() { var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); request.show().then(function(paymentresponse) { // here we would process the payment.
... }); the payment handler would include the following code: self.addeventlistener('canmakepayment', function(evt) { // pre-authorize here.
PerformanceObserver.takeRecords() - Web APIs
the takerecords() method of the performanceobserver interface returns the current list of performance entries stored in the performance observer, emptying it out.
... return value a list of performanceentry objects.
... example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status comment performance timeline level 2the definition of 'takerecords()' in that specification.
RTCConfiguration.certificates - Web APIs
syntax let rtcconfiguration = { certificates: certificatelist }; let rtcconfiguration.certificates = [ cert1...
...although a given dtls connection only uses a single certificate, providing multiple options in the certificates list may improve the odds of establishing a connection by increasing the chances a mutually-compatible encryption algorithm and key size may be found.
...some browsers may simply choose the first listed certificate and ignore the rest of the list; others may take a different approach.
RTCDTMFSender.toneBuffer - Web APIs
the rtcdtmfsender interface's tonebuffer property returns a string containing a list of the dtmf tones currently queued for sending to the remote peer over the rtcpeerconnection.
... tones are removed from the string as they're played, so only upcoming tones are listed.
... syntax var tonebuffer = rtcdtmfsender.tonebuffer; value a domstring listing the tones to be played.
RTCDataChannel: bufferedamountlow event - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 65536; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
... then a listener is created for bufferedamountlow to refill the incoming data buffer any time its contents fall below 65536 bytes.
... you can also set up a listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'bufferedamountlow' in that specification.
RTCIceCandidate.candidate - Web APIs
if the candidate is an empty string (""), the end of the candidate list has been reached; this candidate is known as the "end-of-candidates" marker.
...the complete list of attributes for this example candidate is: foundation = 4234997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.168.0.56" port = 44323 type = "host" example in this example, we see a function which receives as input an sdp string containing an ice candidate received from the remote peer during the signa...
... the new candidate is then passed into rtcpeerconnection.addicecandidate() to add the candidate to the list of candidates for webrtc to consider using for the connection being established.
RTCPeerConnection.getTransceivers() - Web APIs
the rtcpeerconnection interface's gettransceivers() method returns a list of the rtcrtptransceiver objects being used to send and receive data on the connection.
... syntax transceiverlist = rtcpeerconnection.gettransceivers(); parameters none.
...the list is in the order in which the transceivers were added to the connection.
RTCPeerConnection: iceconnectionstatechange event - Web APIs
bubbles no cancelable no interface event event handler property oniceconnectionstatechange one common task performed by the iceconnectionstatechange event listener: to trigger ice restart when the state changes to failed.
... examples an event handler for this event can be added using the rtcpeerconnection.oniceconnectionstatechange property or by using addeventlistener() on the rtcpeerconnection.
... pc.addeventlistener("iceconnectionstatechange", ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; }, false); this can also be written as: pc.oniceconnectionstatechange = ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; } specifications specification status comment webrtc 1.0: real-time communication between browsers...
RTCRtpSender.setParameters() - Web APIs
exceptions if an error occurs, the returned promise is rejected with the appropriate exception from the list below.
... invalidmodificationerror one of the following problems was detected: the number of encodings specified in the parameters object's encodings property does not match the number of encodings currently listed for the rtcrtpsender.
... the order of the specified encodings has changed from the current list's order.
RTCTrackEvent - Web APIs
you can add a track event listener to be notified when the new track is available so that you can, for example, attach its media to a <video> element, using either rtcpeerconnection.addeventlistener() or the ontrack event handler property.
... example this simple example creates an event listener for the track event which sets the srcobject of the <video> element with the id videobox to the first stream in the list passed in the event's streams array.
... peerconnection.addeventlistener("track", e => { let videoelement = document.getelementbyid("videobox"); videoelement.srcobject = e.streams[0]; }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent' in that specification.
Range.extractContents() - Web APIs
event listeners added using dom events are not retained during extraction.
... html <p id="list1">123456</p> <button id="swap">swap selected item(s)</button> <p id="list2">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.gete...
...lementbyid('swap'); button.addeventlistener('click', e => { selection = window.getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); if (range.commonancestorcontainer === list1 || range.commonancestorcontainer.parentnode === list1) { const documentfragment = range.extractcontents(); list2.appendchild(documentfragment); } else if (range.commonancestorcontainer === list2 || range.commonancestorcontainer.parentnode === list2) { const documentfragment = range.extractcontents(); list1.appendchild(documentfragment); } } }); result specifications specification status comment domthe definition of 'range.extractcontents()' in that specification.
ReadableStream.tee() - Web APIs
function teestream() { const teedoff = stream.tee(); fetchstream(teedoff[0], list2); fetchstream(teedoff[1], list3); } function fetchstream(stream, list) { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list.appendchild(listitem); // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'tee()' in that specification.
SVGAnimatedPoints - Web APIs
svg animated points interface the svganimatedpoints interface supports elements which have a points attribute which holds a list of coordinate values and which support the ability to animate that attribute.
... interface overview also implement none methods none properties readonly svgpointlist points readonly svgpointlist animatedpoints normative document svg 1.1 (2nd edition) properties name type description points svgpointlist provides access to the base (i.e., static) contents of the points attribute.
... animatedpoints svgpointlist provides access to the current animated contents of the points attribute.
SVGElement - Web APIs
ll="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
...authors are advised to use element.classlist instead.
... methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance events listen to these events using addeventlistener() or by assigning an event listener to the equivalent on...
SVGTests - Web APIs
WebAPISVGTests
properties svgtests.requiredfeatures read only an svgstringlist corresponding to the requiredfeatures attribute of the given element.
... svgtests.requiredextensions read only an svgstringlist corresponding to the requiredextensions attribute of the given element.
... svgtests.systemlanguage read only an svgstringlist corresponding to the systemlanguage attribute of the given element.
ServiceWorker - Web APIs
event handlers serviceworker.onstatechange read only an eventlistener property called whenever an event of type statechange is fired; it is basically fired anytime the serviceworker.state changes.
...the code listens for any change in the serviceworker.state and returns its value.
... { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { // logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function (e) { // logstate(e.target.state); }); } }).catch (function (error) { // something went wrong during registration.
ServiceWorkerGlobalScope.onpush - Web APIs
} self.addeventlistener('push', function(pushevent) { ...
...the data payload of the push message is available in the event object's data property (pushevent.data, which contains a pushmessagedata object.) self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.
...addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'onpush' in that specification.
ServiceWorkerRegistration.getNotifications() - Web APIs
the getnotifications() method of the serviceworkerregistration interface returns a list of the notifications in the order that they were created from the current origin via the current service worker registration.
... syntax s​erviceworkerregistration.getnotifications(options) .then(function(notificationslist) { ...
... return value a promise that resolves to a list of notification objects.
Service Worker API - Web APIs
you can listen for the installevent; a standard action is to prepare your service worker for usage when this fires, for example by creating a cache using the built in storage api, and placing assets inside it that you'll want for running your app offline.
... clients represents a container for a list of client objects; the main way to access the active service worker clients at the current origin.
... syncmanager provides an interface for registering and listing sync registrations.
SharedWorker - Web APIs
abstractworker.onerror is an eventlistener that is called whenever an errorevent of type error bubbles through the worker.
...if the onmessage event is attached using addeventlistener, the port is manually started using its start() method: myworker.port.start(); when the port is started, both scripts post messages to the worker and handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = fun...
... onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using addeventlistener.
SharedWorkerGlobalScope - Web APIs
some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference.
... see the complete list of functions available to workers.
... events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
SpeechRecognitionEvent.results - Web APIs
the results read-only property of the speechrecognitionevent interface returns a speechrecognitionresultlist object representing all the speech recognition results for the current session.
... syntax var myresults = event.results; value a speechrecognitionresultlist object.
... recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognitionEvent - Web APIs
speechrecognitionevent.resultindex read only returns the lowest index value result in the speechrecognitionresultlist "array" that has actually changed.
... speechrecognitionevent.results read only returns a speechrecognitionresultlist object representing all the speech recognition results for the current session.
... recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
StylePropertyMapReadOnly.get() - Web APIs
let's start by creating a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object.
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const stylemap = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--colour']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const c...
...ssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( stylemap.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } specifications specification status comment css typed om level 1the definition of 'get()' in that specification.
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely con...
...] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { // alice then generates a secret using her private key and bob's public key.
...rypto.getrandomvalues(new uint8array(16)); const derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { getderivedbits(); }); specifications ...
Touch.target - Web APIs
WebAPITouchtarget
if there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the target.
...when the touchstart event handler for this element is invoked, each touch point's touch.target property is accessed via the event's touchevent.targettouches list.
... // register a touchmove listener for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchstart', function(e) { // iterate through the touch points that were activiated // for this element.
TouchEvent() - Web APIs
toucheventinit optional is a toucheventinit dictionary, having the following fields: "touches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact currently touching the surface.
... "targettouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact that is touching the surface and started on the element that is the target of the current event.
... "changedtouches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact which contributed to the event.
TrackEvent - Web APIs
events based on trackevent are always sent to one of the media track list types: events involving video tracks are always sent to the videotracklist found in htmlmediaelement.videotracks events involving audio tracks are always sent to the audiotracklist specified in htmlmediaelement.audiotracks events affecting text tracks are sent to the texttracklist object indicated by htmlmediaelement.texttracks.
... var videoelem = document.queryselector("video"); videoelem.videotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.videotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("addtrack", handletrackevent, false); videoelem.audiotracks.addeventlistener("removetrack", handletrackevent, false); videoelem.texttracks.addeventlistener("addtrack", handletrackevent, false); videoelem.texttracks.addeventlistener("remov...
...etrack", handletrackevent, false); function handletrackevent(event) { var trackkind; if (event.target instanceof(videotracklist)) { trackkind = "video"; } else if (event.target instanceof(audiotracklist)) { trackkind = "audio"; } else if (event.target instanceof(texttracklist)) { trackkind = "text"; } else { trackkind = "unknown"; } switch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed...
VisualViewport - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the relevant oneventname property of this interface.
... var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling.
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
the webglrenderingcontext method enablevertexattribarray(), part of the webgl api, turns on the generic vertex attribute array at the specified index into the list of attribute arrays.
...attributes are referenced by an index number into the list of attributes maintained by the gpu.
... webglrenderingcontext.invalid_value the specified index is invalid; that is, it's greater than or equal to the maximum number of entries permitted in the context's vertex attribute list, as indicated by the value of webglrenderingcontext.max_vertex_attribs.
Clearing by clicking - Web APIs
not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... window.removeeventlistener(evt.type, setupwebgl, false); // adding the same click event handler to both canvas and // button.
... var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.addeventlistener("click", switchcolor, false); button.addeventlistener("click", switchcolor, false); // a variable to hold the webglrenderingcontext.
Hello vertex attributes - Web APIs
x" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = doc...
..." + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var clickxinwebglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false)...
...; } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.i...
Scissor animation - Web APIs
n</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
... var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top.
... position = [0, gl.drawingbufferheight]; var button = document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } stopanimation({type: "click"}); } // variables to hold...
Simple color animation - Web APIs
vas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
... var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second.
... drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("click", startanimation, false); verb.innerhtml="start"; // stop animation by clearing the timer.
Rendering and the WebXR frame animation callback - Web APIs
this pseudocode outlines that process: for each view in the pose's views list: get the webxr gl layer's viewport set the webgl viewport to match for each object in the scene bindprogram() bindvertices() bindmatrices() binduniforms() bindbuffers() bindtextures() drawmyobject() put simply, this form of renderer is using view-first order.
... the resulting pseudocode looks like this: for each object in the scene bindprogram() binduniforms() bindbuffers() bindtextures() for each view in the pose's views list get the xrwebgllayer's viewport set the webgl viewport to match bindvertices() bindmatrices() drawmyobject() by changing things up in this way, we only bind programs, uniforms, buffers, textures, and potentially other things once per frame instead of twice for each object found in the scene.
...if there's water in the scene, it needs ripples or waves to look realistic.
Keyframe Formats - Web APIs
element.animate({ opacity: [ 0, 0.9, 1 ], offset: [ 0, 0.8 ], // shorthand for [ 0, 0.8, 1 ] easing: [ 'ease-in', 'ease-out' ], }, 2000); after generating a suitable set of keyframes from the property value lists, each supplied offset is applied to the corresponding keyframe.
... if there are insufficient values, or if the list contains null values, the keyframes without specified offsets will be evenly spaced as with the array format described above.
... if there are too few easing or composite values, the corresponding list will be repeated as needed.
Basic concepts behind Web Audio API - Web APIs
spatialisations an audio spatialisation (handled by the pannernode and audiolistener nodes in the web audio api) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio.
... the listener's position is described using right-hand cartesian coordinates; its movement using a velocity vector and the direction the listener's head is pointing using two direction vectors: up and front.
... these respectively define the direction of the top of the listener's head, and the direction the listener's nose is pointing, and are at right angles to one another.
Web Authentication API - Web APIs
these include: verifying that the challenge is the same as the challenge that was sent ensuring that the origin was the origin expected validating that the signature over the clientdatahash and the attestation using the certificate chain for that specific model of the authenticator a complete list of validation steps can be found in the web authentication api specification.
... a full list of the steps for validating an assertion can be found in the web authentication api specification.
... var idlist = [{ id: cred.rawid, transports: ["usb", "nfc", "ble"], type: "public-key" }]; getcredentialdefaultargs.publickey.allowcredentials = idlist; return navigator.credentials.get(getcredentialdefaultargs); }) .then((assertion) => { console.log("assertion", assertion); }) .catch((err) => { console.log("error", e...
Window: animationcancel event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the animationcancel event.
... window.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of addeventlistener(): window.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event.
Window: blur event - Web APIs
WebAPIWindowblur event
it uses addeventlistener() to monitor focus and blur events.
... html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
... click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed.
Window: focus event - Web APIs
it uses addeventlistener() to monitor focus and blur events.
... html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
... click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); result specifications specification status comment ui events working draft added info that this event is composed.
Window.frames - Web APIs
WebAPIWindowframes
returns the window itself, which is an array-like object, listing the direct sub-frames of the current window.
... syntax framelist = window.frames; framelist is a list of frame objects.
... framelist === window evaluates to true.
Window.speechSynthesis - Web APIs
after defining some necessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want.
... var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect...
....appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesis' in that specification.
Window: storage event - Web APIs
bubbles no cancelable no interface storageevent event handler property onstorage examples log the samplelist item to the console when the storage event fires: window.addeventlistener('storage', () => { // when local storage changes, dump the list to // the console.
... console.log(json.parse(window.localstorage.getitem('samplelist'))); }); the same action can be achieved using the onstorage event handler property: window.onstorage = () => { // when local storage changes, dump the list to // the console.
... console.log(json.parse(window.localstorage.getitem('samplelist'))); }; specifications specification status html living standardthe definition of 'storage' in that specification.
WindowEventHandlers.onbeforeunload - Web APIs
syntax window.addeventlistener("beforeunload", function(event) { ...
...}; typically, it is better to use window.addeventlistener() and the beforeunload event, instead of onbeforeunload.
... window.addeventlistener('beforeunload', function (e) { // cancel the event e.preventdefault(); // if you prevent default behavior in mozilla firefox prompt will always be shown // chrome requires returnvalue to be set e.returnvalue = ''; }); guarantee the browser unload by removing the returnvalue property of the event window.addeventlistener('beforeunload', function (e) { // the absence of a returnvalue property on the event will guarantee the browser unload happens delete e['returnvalue']; }); notes when your page uses javascript to render content, the javascript may stop wh...
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
me + "\n"); } let secinfo = channel.securityinfo; // print general connection security state dump("security information:\n"); if (secinfo instanceof ci.nsitransportsecurityinfo) { secinfo.queryinterface(ci.nsitransportsecurityinfo); dump("\tsecurity state of connection: "); // check security state flags if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_secure) == ci.nsiwebprogresslistener.state_is_secure) { dump("secure connection\n"); } else if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_insecure) == ci.nsiwebprogresslistener.state_is_insecure) { dump("insecure connection\n"); } else if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_broken) ...
... == ci.nsiwebprogresslistener.state_is_broken) { dump("unknown\n"); dump("\tsecurity description: " + secinfo.shortsecuritydescription + "\n"); dump("\tsecurity error message: " + secinfo.errormessage + "\n"); } } else { dump("\tno security info available for this channel\n"); } // print ssl certificate details if (secinfo instanceof ci.nsisslstatusprovider) { var cert = secinfo.queryinterface(ci.nsisslstatusprovider) .sslstatus.queryinterface(ci.nsisslstatus).servercert; dump("\tcommon name (cn) = " + cert.commonname + "\n"); dump("\tissuer = " + cert.issuerorganization + "\n"); dump("\torganisation = " + cert.organization + "\n"); dump("\tsha1 fingerprint = ...
... + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced the following output in my console: connection status: succeeded security info: security state: secure co...
XRInputSource.profiles - Web APIs
the profile stings are listed in order of specificity, with the most specific profile listed first.
... note: the profiles list is always empty when the webxr session is in inline mode.
... syntax let profilelist = xrinputsource.profiles; value an array of domstring objects, each describing one configuration profile for the input device represented by the xrinputsource object.
XRInputSourceArray.entries() - Web APIs
return value an iterator which can be used to walk through the list of xrinputsource objects included in the input source array.
... examples this example snippet gets the list of inputs for a session and tries to handle each type of input device it supports using.
...sources = xrsession.inputsources; for (let input of sources.entries()) { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.targetraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } } for each input in the llist, gamepad inputs are dispatched to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we look for tracked-pointer devices in the player's main hand, dispatching those to a handlemainhandinput() method.
XRInputSourceArray.values() - Web APIs
the xrinputsourcearray method values() returns a javascript iterator that can walk over the list of xrinputsource objects contained in the array, from first to last.
... return value a javascript iterator that can be used to walk through the list of xrinputsource objects in the array, starting with the first entry (at index 0) and proceeding straight through the list.
...each pass through the loop, source is the next xrinputsource in the list.
XRPermissionDescriptor.optionalFeatures - Web APIs
the xrpermissiondescriptor dictionary's optionalfeatures property is used to specify a list of webxr features which your app or site would like to use but can operate without if permission isn't granted to use them.
... syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.optionalfeatures = optfeaturelist; optfeaturelist = xrpermissiondescriptor.optionalfeatures; value an array of strings taken from the xrreferencespacetype enumerated type, indicating set of features that your app would like to use, but can operate without if permission to use them isn't available.
... reference space descriptors the types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them.
XRPermissionStatus - Web APIs
properties in addition to the properties listed below, xrpermissionstatus includes the properties defined by its parent interface, permissionstatus.
... granted an array of strings listing the names of the features for which permission has been granted as of the time at which navigator.permissions.query() was called.
... any feature which was specified in either the optionalfeatures or requiredfeatures when calling navigator.permissions.query() are listed in granted if and only if permission to use them is granted.
XRSession.oninputsourceschange - Web APIs
the oninputsourcechange attribute of the xrsession object is the event handler for the inputsourcechange event, which is dispatched when session's list of active xr input sources has changed.
... the list itself is accessible via xrsession.inputsources.
...} example xrsession.oninputsourceschange = function(event) { console.log("the list of active xr input sources has changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.oninputsourceschange' in that specification.
XRSession: squeeze event - Web APIs
examples the following example uses addeventlistener() to set up a handler for the squeeze event.
...if you need to track a squeeze action that isn't instantaneous, listen for the squeezestart and squeezeend events to sense when the squeeze action begins and ends.
... xrsession.addeventlistener("squeeze", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }); you can of course also set up a handler for squeeze events by setting the xrsession object's onsqueeze event handler property to a function that handles the event: xrsession.onsqueeze = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }; ...
XRSession - Web APIs
WebAPIXRSession
properties in addition to the properties listed below, xrsession inherits properties from its parent interface, eventtarget.
... inputsources read only returns a list of this session's xrinputsources, each representing an input device used to control the camera and/or scene.
... inputsourceschange an event of type xrinputsourceschangeevent sent to the xrsession when the list of active xr input sources has changed.
XRSessionEvent() - Web APIs
see event types for a list of the permitted values.
... examples this example creates a listiener that watches for the visibility state of the session to change.
... xrsession.addeventlistener("visibilitystate", e => { switch(e.session.visibilitystate) { case "visible": case "visible-blurred": mysessionvisible(true); break; case "hidden": mysessionvisible(false); break; } }); specifications specification status comment webxr device apithe definition of 'xrsessionevent() constructor' in that specification.
XRView - Web APIs
WebAPIXRView
that object's views property is a list of all of the xrview objects representing the viewpoints which can be used to construct the scene for presentation to the user.
...so you should process the view list every time without making assumptions based on previous frames.
... examples preparing to render every view for a pose to draw eerything the user sees each frame requires iterating over the list of views returned by the xrviewerpose object's views list: for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); // draw the scene; the eye being drawn is identified // by view.eye.
Using the aria-labelledby attribute - Accessibility
list multiple element ids in a space delimited fashion.
... value a space-separated list of element ids possible effects on user agents and assistive technology when user agents compute the accessible name property of elements that have both an aria-labelledby attribute and an aria-label attribute, the user agents give precedence to aria-labelledby.
...is described in the natural flow of the narrative is associated with the term itself using the aria-labelledby attribute: <p>the doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo"> an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span> </p> example 6: definition lists in the example below, the definitions in a formal definition list are associated with the terms they define using the aria-labelledby attribute: <dl> <dt id="anathema">anathema</dt> <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority and accompanied by excommunication</dd> ...
Using the link role - Accessibility
assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce the text of the link or its label when it is focused, along with the fact that it is a link.
... aria links should be included in the screen reader's “list links” function just like ordinary links, and actions in this dialogue list, such as “activate link” or “move to link”, should perform the same as they do with ordinary links.
...e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
ARIA: tabpanel role - Accessibility
<div role="tablist"> <div role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id" tabindex="0">tab label</div> accessibility concerns optionally, warn of any potential accessibility concerns that exist with using this property, and how to work around them.
... remove this section if there are none to list.
... best practices optionally, here list any best practices that exist for this role.
HTML To MSAA - Accessibility
map html element role name value states relations actions events notes a role_system_ link n/a value of @href attribute state_system_ selectable if @name attribute is presented state_system_ linked if @href attribute is presented or click event listener is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0...
...iobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_system_ statictext from child nodes n/a n/a n/a n/a n/a legend role_system_ statictext n/a n/a n/a label_for (0x1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_objec...
...t_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader n/a n/a n/a n/a n/a n/a abbr, acronym, blockquote, form, frame, h1-h6, iframe bstr role n/a n/a n/a n/a n/a...
Operable - Accessibility
this can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.
... 2.4.5 multiple navigation mechanisms (aa) you should provide at least two general navigation mechanisms to find pages on your web site, for example navigation menu, breadcrumb trail, site search, site map, list of related links, etc.
...this can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.
-moz-image-region - CSS: Cascading Style Sheets
for certain xul elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image.
...note: -moz-image-region only works with <image> elements where the icon is specified using list-style-image.
... it will not work with xul <image src="url" />.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover { /* use the 4x4 area to the right of the first for the hovered button */ -moz-image-region: rect(0px, 8px, 4px, 4px); } specifications not part of any standard.
::before (:before) - CSS: Cascading Style Sheets
WebCSS::before
html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements.
... html <ul> <li>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.targ...
...et.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example running live.
::marker - CSS: Cascading Style Sheets
WebCSS::marker
the ::marker css pseudo-element selects the marker box of a list item, which typically contains a bullet or number.
... it works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.
... css lists module level 3the definition of '::marker' in that specification.
@import - CSS: Cascading Style Sheets
WebCSS@import
syntax @import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries; where: url is a <string> or a <url> representing the location of the resource to import.
... list-of-media-queries is a comma-separated list of media queries conditioning the application of the css rules defined in the linked url.
... formal syntax @import [ <string> | <url> ] [ <media-query-list> ]?;where <media-query-list> = <media-query>#where <media-query> = <media-condition> | [ not | only ]?
Coordinate systems - CSS: Cascading Style Sheets
whenever the mouse enters, moves around inside, or exits the inner box, the corresponding event is handled by updating a set of informational messages within the box, listing out the current mouse coordinates in each of the four available coordinate systems.
... function update(e) { setcoords(e, "offset"); setcoords(e, "client"); setcoords(e, "page"); setcoords(e, "screen"); } inner.addeventlistener("mouseenter", update, false); inner.addeventlistener("mousemove", update, false); inner.addeventlistener("mouseleave", update, false); the event handler is in the update() method.
... our main code sets up the event handlers on the inner box by calling addeventlistener() for each of the types mouseenter, mousemove, and mouseleave.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; } track listings with repeat() notation large grids with many tracks can use the repeat() notation, to repeat all or a section of the track listing.
... for example the grid definition: .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } can also be written as: .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } repeat notation can be used for a part of the track listing.
... .wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; } repeat notation takes the track listing, and uses it to create a repeating pattern of tracks.
Using CSS counters - CSS: Cascading Style Sheets
"section " counter(section) ": "; /* display the word 'section ', the value of section counter, and a colon before the content of each h3 */ } html <h3>introduction</h3> <h3>body</h3> <h3>conclusion</h3> result nesting counters a css counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements.
... example of a nested counter css ol { counter-reset: section; /* creates a new instance of the section counter with each ol element */ list-style-type: none; } li::before { counter-increment: section; /* increments only this instance of the section counter */ content: counters(section, ".") " "; /* combines the values of all instances of the section counter, separated by a period */ } html <ol> <li>item</li> <!-- 1 ...
... 2.3.2 --> <li>item</li> <!-- 2.3.3 --> </ol> </li> <li>item</li> <!-- 2.4 --> </ol> </li> <li>item</li> <!-- 3 --> <li>item</li> <!-- 4 --> </ol> <ol> <li>item</li> <!-- 1 --> <li>item</li> <!-- 2 --> </ol> result specifications specification status comment css lists module level 3the definition of 'css counters' in that specification.
Shorthand properties - CSS: Cascading Style Sheets
we can look at a list of links and explore how the universal values work.
... for example: the second list item has the class my-class-1 applied.
... shorthand properties: animation, background, border, border-bottom, border-color, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, offset, outline, overflow, padding, place-content, place-items, place-self, text-decoration, transition ...
Syntax - CSS: Cascading Style Sheets
WebCSSSyntax
note: the content of a css declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an html style attribute.
... css statements rulesets are the main building blocks of a style sheet, which often consists of only a big list of them.
... but there is other information that a web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more.
font-feature-settings - CSS: Cascading Style Sheets
<feature-tag-value> when rendering text, the list of opentype feature tag value is passed to the text layout engine to enable or disable font features.
...stylistic alternates), the value implies a particular glyph to be selected; for boolean values, it is a switch.
...ture-settings: "hist"; } /* disable common ligatures, usually on by default */ .noligs { font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancystyle { font-family: gabriola; /* available on windows 7, and on mac os */ font-feature-settings: "ss07"; } specifications specification status comment css fonts module level 3the definition of 'font-feature-settings' in that specification.
text-shadow - CSS: Cascading Style Sheets
it accepts a comma-separated list of shadows to be applied to the text and any of its decorations.
...blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* use defaults for color and blur-radius */ text-shadow: 5px 10px; /* global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; this property is specified as a comma-separated list of shadows.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valuea color plus three absolute lengthsanimation typea shadow list formal syntax none | <shadow-t>#where <shadow-t> = [ <length>{2,3} && <color>?
transition-delay - CSS: Cascading Style Sheets
each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list.
... if there are fewer delays specified than in the master list, the list of delay values will be repeated until there are enough.
... if there are more delays, the list of delay values will be truncated to match the number of properties.
transition-duration - CSS: Cascading Style Sheets
you may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master list.
... if there are fewer durations specified than in the master list, the user agent repeat the list of durations.
... if there are more durations, the list is simply truncated to the right size.
Audio and Video Delivery - Developer guides
ementbyid('my-audio'); var mycontrol = document.getelementbyid('my-control'); function switchstate() { if (myaudio.paused == true) { myaudio.play(); mycontrol.innerhtml = "pause"; } else { myaudio.pause(); mycontrol.innerhtml = "play"; } } function checkkey(e) { if (e.keycode == 32 ) { //spacebar switchstate(); } } mycontrol.addeventlistener('click', function() { switchstate(); }, false); window.addeventlistener( "keypress", checkkey, false ); } you can try this example out here.
...this returns a timeranges object listing the ranges of times that you can seek to.
...ls> <source src="dynamicsearch.mp4" type="video/mp4"></source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="dynamic app search in firefox os"> </a> <p>click image to play a video demo of dynamic app search</p> </video> var v = document.queryselector('video'), sources = v.queryselectorall('source'), lastsource = sources[sources.length-1]; lastsource.addeventlistener('error', function(ev) { var d = document.createelement('div'); d.innerhtml = v.innerhtml; v.parentnode.replacechild(d, v); }, false); audio/video javascript libraries a number of audio and video javascript libaries exist.
Media events - Developer guides
various events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section lists them and provides some helpful information about using them.
... you can easily watch for these events, using code such as the following: var v = document.getelementsbytagname("video")[0]; v.addeventlistener("seeked", function() { v.play(); }, true); v.currenttime = 10.0; this example fetches the first video element in the document and attaches an event listener to it, watching for the seeked event, which is sent whenever a seek operation completes.
... the listener simply calls the element's play() method, which starts playback.
Content categories - Developer guides
they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <s...
... elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
... <button> <fieldset> <input> <keygen> <label> <meter> <object> <output> <progress> <select> <textarea> this category contains several sub-categories: listed elements that are listed in the form.elements and fieldset.elements idl collections.
Localizations and character encodings - Developer guides
the value should be a comma-separated list of canonical encoding names.
... the list should include at least the fallback encoding, windows-1252 and utf-8.
...therefore, it makes sense for the list to be shift_jis, euc-jp, iso-2022-jp, windows-1252, utf-8.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
WebHTMLElementbdi
examples no <bdi> with only ltr this example lists the winners of a competition using <span> elements only.
...e names only contain ltr text the results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } no <bdi> with rtl text this example lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of rtl text.
...text, and the result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements.
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
supported image formats the html standard doesn't list what image formats to support, so each user agent supports different formats.
...below is a list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them.
...this must be omitted for the last item in the list.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
value a 7-character domstring specifying a <color> in lower-case hexadecimal notation events change and input supported common attributes autocomplete and list idl attributes list and value methods select() value the value of an <input> element of type color is always a domstring which contains a 7-character string specifying an rgb color in hexadecimal format.
... here's an example that watches changes over time to the color value: colorpicker.addeventlistener("input", updatefirst, false); colorpicker.addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } selecting the value if the <input> element's implementation of the color type on the user's browser doesn't support a color well, but is instead a text field ...
... var colorwell; var defaultcolor = "#0000ff"; window.addeventlistener("load", startup, false); initialization once the page is loaded, our load event handler, startup(), is called: function startup() { colorwell = document.queryselector("#colorwell"); colorwell.value = defaultcolor; colorwell.addeventlistener("input", updatefirst, false); colorwell.addeventlistener("change", updateall, false); colorwell.select(); } this gets a reference to the c...
<option>: The HTML Option element - HTML: Hypertext Markup Language
WebHTMLElementoption
the html <option> element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element.
... as such, <option> can represent menu items in popups and other lists of items in an html document.
... permitted parents a <select>, an <optgroup> or a <datalist> element.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
WebHTMLElementtbody
basic example in this relatively simple example, we create a table listing information about a group of students with a <thead> and a <tbody>, with a number of rows in the body.
... let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.
...that heading lists the name of the major contained within the <tbody>.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
also note that the full list of values the as attribute can take is governed by the fetch spec — see request destinations.
... live example): <head> <meta charset="utf-8"> <title>responsive preload example</title> <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>my site</h1> </header> <script> var mediaquerylist = window.matchmedia("(max-width: 600px)"); var header = document.queryselector('header'); if (mediaquerylist.matches) { header.style.backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has...
...we use window.matchmedia / mediaquerylist to do this (see testing media queries for more).
HTML: Hypertext Markup Language
WebHTML
html markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.
... html element reference browse a list of all html elements.
... related topics applying color to html elements using css this article covers most of the ways you use css to add color to html content, listing what parts of html documents can be colored and what css properties to use when doing so.
Common MIME types - HTTP
here is a list of mime types, associated by type of documents, ordered by their common extensions.
... iana is the official registry of mime media types and maintains a list of all the official mime types.
... this table lists some important mime types for the web: extension kind of document mime type .aac aac audio audio/aac .abw abiword document application/x-abiword .arc archive document (multiple files embedded) application/x-freearc .avi avi: audio video interleave video/x-msvideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp windows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comma...
Feature-Policy: display-capture - HTTP
syntax feature-policy: display-capture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy the default alowlist is 'self'.
Feature-Policy: encrypted-media - HTTP
syntax feature-policy: encrypted-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy the allow list is 'self'.
Feature-Policy: midi - HTTP
syntax feature-policy: midi <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy the allow list is 'self'.
Feature-Policy: payment - HTTP
syntax feature-policy: payment <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy the payment feature's default allowlist value is 'self'.
Feature-Policy: picture-in-picture - HTTP
syntax feature-policy: picture-in-picture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy as of june 2019, the spec draft and google chrome set default allow list to *.
Feature-Policy: screen-wake-lock - HTTP
syntax feature-policy: screen-wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy default allow list for screen-wake-lock is 'self'.
Feature-Policy: usb - HTTP
syntax feature-policy: usb <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... draft default allow list is 'self'.
Feature-Policy: wake-lock - HTTP
syntax feature-policy: wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy default allow list for wake-lock is 'self'.
Feature-Policy: xr-spatial-tracking - HTTP
syntax feature-policy: xr-spatial-tracking <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
... default policy the default allowlist is 'self'.
Want-Digest - HTTP
if want-digest does not include any digest algorithms that the server supports, the server may respond with: a digest calculated using a different digest algorithm, or a 400 bad request error, and include another want-digest header with that response, listing the algorithms that it does support.
... examples want-digest: sha-256 want-digest: sha-512;q=0.3, sha-256;q=1, md5;q=0 basic operation the sender provides a list of digests which it is prepared to accept, and the server uses one of them: request: get /item want-digest: sha-256;q=0.3, sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= unsupported digests the server does not support any of the requested digest algorithms, so uses a different algorithm: request: get /item want-digest: sha;q=1 r...
...esponse: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= the server does not support any of the requested digest algorithms, so responds with a 400 error and includes another want-digest header, listing the algorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
Redirections in HTTP - HTTP
special redirections 304 (not modified) redirects a page to the locally cached copy (that was stale), and 300 (multiple choice) is a manual redirection: the body, presented by the browser as a web page, lists the possible redirections and the user clicks on one to select it.
... code text typical use case 300 multiple choice not many: the choices are listed in an html page in the body.
... nginx in nginx, you create a specific server block for the content you want to redirect: server { listen 80; server_name example.com; return 301 $scheme://www.example.com$request_uri; } to apply a redirect to a directory or only certain pages, use the rewrite directive: rewrite ^/images/(.*)$ https://images.example.com/$1 redirect; rewrite ^/images/(.*)$ https://images.example.com/$1 permanent; iis in iis, you use the <httpredirect> element to configure redirections.
Closures - JavaScript
because the loop has already run its course by that time, the item variable object (shared by all three closures) has been left pointing to the last entry in the helptext list.
...[ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; for (var i = 0; i < helptext.length; i++) { (function() { var item = helptext[i]; document.getelementbyid(item.id).onfocus = function() { showhelp(item.help); } })(); // immediate event listener attachment with the current value of item (preserved until iteration).
... another alternative could be to use foreach() to iterate over the helptext array and attach a listener to each <p>, as shown: function showhelp(help) { document.getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; helptext.foreach(function(text) { document.getelementbyid(text.id).onf...
Keyed collections - JavaScript
one difference to map objects is that weakmap keys are not enumerable (i.e., there is no method giving you a list of the keys).
... if they were, the list would depend on the state of garbage collection, introducing non-determinism.
...that also means that there is no list of current objects stored in the collection.
Loops and iteration - JavaScript
example in the example below, the function contains a for statement that counts the number of selected options in a scrolling list (a <select> element that allows multiple selections).
...a</option> </select> </p> <p><input id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function() { alert('number of options selected: ' + howmany(document.selectform.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to false.
...it then iterates over all the object's properties and returns a string that lists the property names and their values.
Unicode property escapes - JavaScript
see unicode data proplist.txt for more info.
... unicodepropertyname the name of a non-binary property: unicodepropertyvalue one of the tokens listed in the values section, below.
...for a more exhaustive list of general categories, please refer to the unicode specification.
handler.apply() - JavaScript
syntax const p = new proxy(target, { apply: function(target, thisarg, argumentslist) { } }); parameters the following parameters are passed to the apply() method.
... argumentslist the list of arguments for the call.
... const p = new proxy(function() {}, { apply: function(target, thisarg, argumentslist) { console.log('called: ' + argumentslist.join(', ')); return argumentslist[0] + argumentslist[1] + argumentslist[2]; } }); console.log(p(1, 2, 3)); // "called: 1, 2, 3" // 6 specifications specification ecmascript (ecma-262)the definition of '[[call]]' in that specification.
Reflect.construct() - JavaScript
syntax reflect.construct(target, argumentslist[, newtarget]) parameters target the target function to call.
... argumentslist an array-like object specifying the arguments with which target should be called.
... return value a new instance of target (or newtarget, if present), initialized by target as a constructor with the given argumentslist.
Reflect - JavaScript
static methods reflect.apply(target, thisargument, argumentslist) calls a target function with arguments as specified by the argumentslist parameter.
... reflect.construct(target, argumentslist[, newtarget]) the new operator as a function.
... equivalent to calling new target(...argumentslist).
String.prototype.split() - JavaScript
the split() method divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array.
...namelist is the array returned as a result of split().
... const names = 'harry trump ;fred barney; helen rigby ; bill abel ;chris hand ' console.log(names) const re = /\s*(?:;|$)\s*/ const namelist = names.split(re) console.log(namelist) this logs two lines; the first line logs the original string, and the second line logs the resulting array.
Operator precedence - JavaScript
note on grouping and short-circuiting in the table below, grouping is listed as having the highest precedence.
...… computed member access left-to-right … [ … ] new (with argument list) n/a new … ( … ) function call left-to-right … ( … ) optional chaining left-to-right ?.
... 19 new (without argument list) right-to-left new … 18 postfix increment n/a … ++ postfix decrement … -- 17 logical not right-to-left !
Web audio codec guide - Web media technologies
common codecs the list below denotes the codecs most commonly used on the web and which containers (file types) support them.
...in addition, browsers may choose to support additional codecs not included on this list.
...the table below lists a number of key source audio file format factors and their impact on the encoded audio.
Image file type and format guide - Web media technologies
however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for web content.
... an ico file can contain multiple icons, and begins with a directory listing details about each.
...the color map lists all of the red values, then all of the green values, then all of the blue values (rather than rgb, rgb, rgb...).
Web video codec guide - Web media technologies
for each codec, the containers (file types) that can support them are also listed.
...to a point, the higher the frame rate, the smoother and more realistic the motion will appear.
...this bit rate is obviously not realistic for network transmission and would likely only be used locally.
Add to Home screen - Progressive web apps (PWAs)
hey, at least it isn't cats.", "display": "fullscreen", "icons": [ { "src": "icon/fox-icon.png", "sizes": "192x192", "type": "image/png" } ], "name": "awesome fox pictures", "short_name": "foxes", "start_url": "/pwa-examples/a2hs/index.html" } appropriate icon as shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app.
...we can then use a handler like the one below to handle the installation: window.addeventlistener('beforeinstallprompt', (e) => { // prevent chrome 67 and earlier from automatically showing the prompt e.preventdefault(); // stash the event so it can be triggered later.
... deferredprompt = e; // update ui to notify the user they can add to home screen addbtn.style.display = 'block'; addbtn.addeventlistener('click', (e) => { // hide our user interface that shows our a2hs button addbtn.style.display = 'none'; // show the prompt deferredprompt.prompt(); // wait for the user to respond to the prompt deferredprompt.userchoice.then((choiceresult) => { if (choiceresult.outcome === 'accepted') { console.log('user accepted the a2hs prompt'); } else { console.log('user dismissed the a2hs prompt'); } deferredprompt = null; }); }); }); so here we: call event.preventdefault() to stop chrome 67 and earlier from calling the install prompt automatically (this behavior changed in ch...
How to make PWAs installable - Progressive web apps (PWAs)
the manifest file the key element is a web manifest file, which lists all the information about the website in a json format.
... the content of the file looks like this: { "name": "js13kgames progressive web app", "short_name": "js13kpwa", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, // ...
...there are even more fields you can use than listed above — be sure to check the web app manifest reference for details.
Progressive web apps (PWAs)
documentation <-- the temporary automatic list below will be replaced soon --> add to home screenadd to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a web app, ie.
...we will start with analyzing the js13kpwa application, why it is built that way, and what benefits it brings.pwa developer guidein the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive web applications (pwas).structural overview of progressive web appsin this structural overview, we'll look at the features that make up a standard web application, as well as some design patterns you can follow when building your pwa.
... progressive web apps check list.
keyPoints - SVG: Scalable Vector Graphics
this value defines a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path the object shall move at the moment in time specified by corresponding keytimes value.
...each progress value in the list corresponds to a value in the keytimes attribute list.
... if a list of key points is specified, there must be exactly as many values in the keypoints list as in the keytimes list.
patternTransform - SVG: Scalable Vector Graphics
the patterntransform attribute defines a list of transform definitions that are applied to a pattern tile.
... <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
... value <transform-list> default value identity transform animatable yes transform functions to know more about the definition of transform functions, see the transform attribute definition.
points - SVG: Scalable Vector Graphics
WebSVGAttributepoints
the points attribute defines a list of points.
... --> </svg> polyline for <polyline>, points defines a list of points, each representing a vertex of the line to be drawn.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
systemLanguage - SVG: Scalable Vector Graphics
the systemlanguage attribute represents a list of supported language tags.
... this list is matched against the language defined in the user preferences.
... multiple languages may be listed for content that is intended for multiple audiences.
tableValues - SVG: Scalable Vector Graphics
the tablevalues attribute defines a list of numbers defining a lookup table of values for a for a color component transfer function.
.../> <fefuncb type="table" tablevalues="1 0"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer animatable yes <list-of-numbers> this value holds a comma- and/or space-separated list of <number>s, which define a lookup table for the color component transfer function.
... an empty list results in an identity transfer function.
widths - SVG: Scalable Vector Graphics
WebSVGAttributewidths
the widths attribute indicates a list of range values, each followed by one or more glyph widths.
... only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no <number> this value is a comma-separated list of ucs range values as defined in iso 10646, each followed by one or more glyph widths.
...if not enough glyph widths are given, the last in the list is replicated to cover that range.
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
value type: <string> ; default value: none; animatable: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background).
... value type: <list-of-urls> ; default value: none; animatable: no referrerpolicy which referrer to send when fetching the url.
... value type: <list-of-link-types> ; default value: none; animatable: yes target where to display the linked url.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
those changes are listed below including their support status within mozilla applications.
... general change notes length attribute and indexed property for list interfaces implementation status unknown <script> element in content model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 1240357) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status...
...ument with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation status unknown svgelementinstance and svgelementinstancelist and corresponding attributes on svguseelement removed implementation status unknown <use> event flow following shadow dom spec.
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
one can override default browser behaviors with the evt.preventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").
... using eventlisteners with objects the methods addeventlistener() and removeeventlistener() are very useful when writing interactive svg.
... function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) break; } } } inter-document scripting: referencing embedded svg when using svg within html, adobe's svg viewer 3.0 automatically includes a window property called svgdocument that points to the svg document.
Texts - SVG: Scalable Vector Graphics
WebSVGTutorialTexts
the attribute may also contain a list of numbers, that are one by one applied to the single characters of the tspan element.
...here, too, you may provide a list of values that are applied to consecutive characters, hence piling up the offset over time.
...a list of numbers makes each character rotate to its respective value, with remaining characters rotating according to the last value.
Same-origin policy - Web security
(examples are listed below.) cross-origin reads are typically disallowed, but read access is often leaked by embedding.
... to prevent cross-origin embeds, ensure that your resource cannot be interpreted as one of the embeddable formats listed above.
...firefox and chrome use the public suffix list to determine if a domain is a public suffix.
Web security
the web security-oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.
... features restricted to secure contexts this reference lists the web platform features available only in secure contexts.
... security-related glossary terms block cipher mode of operation certificate authority challenge-response authentication cipher cipher suite ciphertext cors cors-safelisted request header cors-safelisted response header cross-site scripting cryptanalysis cryptographic hash function cryptography csp csrf decryption digital certificate dtls encryption forbidden header name forbidden response header name hash hmac hpkp hsts https key mitm owas...
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet.
...the list is whitespace separated.
... extension-element-prefixes specifies a space-separated list of any namespace prefixes for extension elements in this document.
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
http://www.amazon.com/xslt-programme.../dp/0764543814 xslt author: doug tidwell length: 473 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 0596000537 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
... http://www.amazon.com/gp/product/0596004206 digital websites world wide web consortium the w3c homepage: http://www.w3.org/ the main xsl page: http://www.w3.org/style/xsl/ the version 1.0 recommendation for xslt: http://www.w3.org/tr/xslt archive of public style (css and xslt) discussions: http://lists.w3.org/archives/public/www-style/ the version 1.0 recommendation for xpath: http://www.w3.org/tr/xpath the world wide web consortium is the body that publishes recommendations for a number of web-based technologies, many of which become the de-facto standard.
....zvon.org/o_html/group_xsl.html jeni's xslt pages index: http://www.jenitennison.com/xslt/ xmlpitstop.com stylesheet center: http://www.xmlpitstop.com/default.asp?datatype=ssc xsl tutorial index: http://www.nwalsh.com/docs/tutorials/xsl/ other cover pages extensible stylesheet language (xsl): http://www.oasis-open.org/cover/xsl.html xsl-list subscribe: http://www.mulberrytech.com/xsl/xsl-list/ archives: http://www.biglist.com/lists/xsl-list/archives/ the xsl-list is a very active general mailing list, hosted by mulberry technologies mozilla.dev.tech.xslt google groups: http://groups.google.com/group/mozilla.dev.tech.xslt this is a newsgroup that discusses netscape-specific xslt issues.
Web technology for developers
documentation for web developers web developer reference a list of all references for web technologies, including those for html, css, and so on.
... tutorials for web developers a list of tutorials to take you step-by-step through learning apis, technologies, or broad topic areas.
... code snippets this is a quick list of useful code snippets (small code samples) available for developers of extensions for the various mozilla applications.
hotkeys - Archive of obsolete content
globals constructors hotkey(options) creates a hotkey whose onpress listener method is invoked when key combination defined by hotkey is pressed.
... if more than one hotkey is created for the same key combination, the listener is executed only on the last one created.
private-browsing - Archive of obsolete content
opting into private browsing add-ons built using the sdk must opt into private browsing by setting the following key in their package.json file: "permissions": {"private-browsing": true} if an add-on has not opted in, then the high-level sdk modules will not expose private windows, or objects (such as tabs) that are associated with private windows: the windows module will not list any private browser windows, generate any events for private browser windows, or let the add-on open any private browser windows the tabs module will not list any tabs that belong to private browser windows, and the add-on won't receive any events for such tabs any ui components will not be displayed in private browser windows any menus or menu items created using the context-me...
... to do this with the sdk, you can listen to the system event named "last-pb-context-exited": var events = require("sdk/system/events"); function listener(event) { console.log("last private window closed"); } events.on("last-pb-context-exited", listener); globals functions isprivate(object) function to check whether the given object is private.
request - Archive of obsolete content
registered event listeners are passed a response object.
... arguments response : listener functions are passed the response to the request as a response object.
system - Archive of obsolete content
for the full list of "special" directories and their ids, see "getting_files in special directories".
...this will be one of the values listed as os_target, converted to lower case.
High-Level APIs - Archive of obsolete content
modules listed on this page implement high-level apis for building add-ons: creating user interfaces, interacting with the web, and interacting with the browser.
... windows enumerate and examine open browser windows, open new windows, and listen for window events.
/loader - Archive of obsolete content
any attempt to load a module not listed in the manifest is unauthorized and is rejected with an exception: let { loader } = require('toolkit/loader'); let manifest = { './main': { 'requirements': { 'panel': 'sdk/panel' } }, 'sdk/panel': { 'requirements': { 'chrome': 'chrome' } } 'chrome': { 'requirements': {} } }; let loader = loader({ resolve: function(id, requirer) { let requiremen...
... unload(loader, 'disable'); calls to this function will dispatch the unload observer notification that modules can listen to as described above.
io/file - Archive of obsolete content
list(path) returns an array of file names in the given directory.
... const fileio = require("sdk/io/file"); let path = "/users/work/"; let list = fileio.list(path); for (i = 0; i < list.length; i++) { let item = fileio.join(path, list[i]); if (fileio.isfile(item)) { console.log(item + " is a file"); } else { console.log(item + " is a directory"); } } parameters path : string the path of the object.
lang/functional - Archive of obsolete content
this also enables you to use these functions as event listeners.
... compose(fn...) returns the composition of a list of functions, where each function consumes the return value of the function that follows.
places/bookmarks - Archive of obsolete content
examples creating a new bookmark let { bookmark, save } = require("sdk/places/bookmarks"); // create a new bookmark instance, unsaved let bookmark = bookmark({ title: "mozilla", url: "http://mozilla.org" }); // attempt to save the bookmark instance to the bookmarks database // and store the emitter let emitter = save(bookmark); // listen for events emitter.on("data", function (saved, inputitem) { // on a "data" event, an item has been updated, passing in the // latest snapshot from the server as `saved` (with properties // such as `updated` and `id`), as well as the initial input // item as `inputitem` console.log(saved.title === inputitem.title); // true console.log(saved !== inputitem); // true console.log(input...
... arguments array : the array is an ordered list of the input bookmark items, replaced with their updated, latest snapshot instances (the first argument in the data handler), or in the case of an error, the initial instance of the item that was used for the save request (the second argument in the data or error handler).
stylesheet/utils - Archive of obsolete content
globals functions loadsheet(window, uri, type) synchronously loads a style sheet from uri and adds it to the list of additional style sheets of the document.
... removesheet(window, uri, type) remove the document style sheet at sheeturi from the list of additional style sheets of the document.
window/utils - Archive of obsolete content
private windows will not be included in this list if your add-on has not opted into private browsing.
... in order to see private windows in this list, your add-on must have opted into private browsing and you must include the includeprivate key in the list of options: var allwindows = window_utils.windows(null, {includeprivate:true}); parameters type : string string identifying the type of window to return.
jpmignore - Archive of obsolete content
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.
... for example: .* * !/data/** !/lib/** !/locale/** !/node_modules/** !/package.json !/icon.png !/icon64.png !/copying !/bootstrap.js !/install.rdf this would include all editor backup files and similar in the whitelisted subdirectories, to avoid that you can append another blacklist after the whitelist.
package.json - Archive of obsolete content
cross-domain-content: a list of domains for which content scripts are given cross-domain privileges to access content in iframes or to make xmlhttprequests.
... translators an array of strings listing the people who contributed to the localization of this add-on.
Displaying annotations - Archive of obsolete content
matcher page-mod matcher content script the content script for the matcher page-mod is initialized with a list of all the annotations that the user has created.
... like the selector, the matcher also listens for the window's unload event and on unload sends a detach message to the main module, so the add-on can clean it up.
Using XPCOM without chrome - Archive of obsolete content
// this removes the need to import ci and the xpcomutils const { class } = require("sdk/core/heritage"); const { unknown } = require('sdk/platform/xpcom'); const { placesutils } = require("resource://gre/modules/placesutils.jsm"); let bmlistener = class({ extends: unknown, interfaces: [ "nsinavbookmarkobserver" ], //this event most often handles all events onitemchanged: function(bid, prop, an, nv, lm, type, parentid, aguid, aparentguid) { console.log("onitemchanged", "bid: "+bid, "property: "+prop, "isanno: "+an, "new value: "+nv, "lastmod: "+lm, "type: "+type, "parentid:"+parentid, "aguid:"+aguid);0 // code to handle the e...
...notice the small l var bmlistener = bmlistener(); placesutils.bookmarks.addobserver(bmlistener, false); ...
Canvas code snippets - Archive of obsolete content
options)); reader.readasarraybuffer(blob); yield new promise(accept => { reader.onloadend = accept }); return yield os.file.writeatomic(path, new uint8array(reader.result), { tmppath: path + '.tmp' }); }); } loading a remote page onto a canvas element the following class first creates a hidden iframe element and attaches a listener to the frame's load event.
...add a listener to the // frame's onload event iframe.addeventlistener('load', this.remotepageloaded, true); //append to the end of the page window.document.body.appendchild(iframe); return; }; remotecanvas.prototype.remotepageloaded = function() { // look back up the iframe by id var ldrframe = document.getelementbyid('test-iframe'); // get a reference to the window object y...
Customizing the download progress bar - Archive of obsolete content
the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextension/skin/progress_fd_win.png) !important;...
...em = window.createdownloaditem; window.createdownloaditem = function(aattrs) { var dl = mydownloadmanager.defaultcreatedownloaditem(aattrs); if (dl) { if (...whatever condition you use to decide whether to change this download...) { dl.setattribute("myspecialdownload", "true"); } } return dl; } } }; window.addeventlistener("load", function(e) { mydownloadmanager.init(); }, false); in your css file, change richdownloaditem (both occurrences) to richdownloaditem[myspecialdownload="true"].
File I/O - Archive of obsolete content
read path from prefs var file = prefs.getcomplexvalue("filename", components.interfaces.nsilocalfile); relative path (nsirelativefilepref) to store paths relative to one of the predefined folders listed above, for example file relative to profile folder, use the following code: // 1.
... createinstance(components.interfaces.nsirelativefilepref); relfile.relativetokey = "profd"; // or any other string listed above relfile.file = file; // |file| is nsilocalfile prefs.setcomplexvalue("filename", components.interfaces.nsirelativefilepref, relfile); // 2.
JS XPCOM - Archive of obsolete content
an interface is simply a list of constants and methods that can be called on the object, an example is nsifile.
... determining which interfaces an xpcom component supports to display a list of all interfaces that an xpcom component supports, do the following: // |c| is the xpcom component instance for each (i in components.interfaces) { if (c instanceof i) { alert(i); } } in this context, instanceof is the same as queryinterface except that it returns false instead of throwing an exception when |c| doesn't support interface |i|.
Code snippets - Archive of obsolete content
this is a quick list of useful code snippets (small code samples) available for developers of extensions for the various mozilla applications.
... browser-oriented code tabbed browser code (firefox/seamonkey) basic operations, such as page loading, with the tabbed browser, which is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages, reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to websites and vice-versa.
Communication between HTML and your extension - Archive of obsolete content
i wasn't sure about the difference between the capture or bubbling flag that you pass to addeventlistener but every time i would catch the event in the extension, the element from the ajax request wasn't fully updated into the html page.
... if (doc && doc.addeventlistener) doc.addeventlistener("my-custom-event", myextension.customreceived, false); since the event is dispatched after the element in the html is updated by the statuschanged function, the element that extension is looking for is there to find.
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
eflatstring: nsstring firststring = somestring; nsstring secondstring = someotherstring; - nsstring combostring = firststring + secondstring; + nsstring combostring = firststring;+ combostring += secondstring; // or: combostring.append(secondstring); - nsresult rv = somefunc(promiseflatstring(combostring)); + nsresult rv = somefunc(combostring); removing the nsreadableutils.h from the headers list also means that we would not have access to appendutf16toutf8 kind of functions.
...the list of enhancements fall in to three categories.
Adding menus and submenus - Archive of obsolete content
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.
...here's a list of the known issues we've run into when handling menus on mac: the about, preferences and quit menu items are located under the "firefox" menu, not the usual places you would find them.
Appendix A: Add-on Performance - Archive of obsolete content
this can be tricky for some add-ons, like ad or script blockers that need to check a whitelist or blacklist.
...event listeners, observers and other handlers normally have both an add and a remove function.
User Notifications and Alerts - Archive of obsolete content
this section lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying.
...they are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons.
Using Dependent Libraries In Extension Components - Archive of obsolete content
e "prlink.h" #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" static char const *const kdependentlibraries[] = { // dependent1.dll on windows, libdependent1.so on linux moz_dll_prefix "dependent1" moz_dll_suffix, moz_dll_prefix "dependent2" moz_dll_suffix, nsnull // note: if the dependent libs themselves depend on other libs, the subdependencies // should be listed first.
...#include <mach-o/loader.h> #include <mach-o/dyld.h> static char const *const kdependentlibraries[] = { // dependent1.dll on windows, libdependent1.so on linux, libdependent1.dylib on mac moz_dll_prefix "dependent1" moz_dll_suffix, moz_dll_prefix "dependent2" moz_dll_suffix, nsnull // note: if the dependent libs themselves depend on other libs, the subdependencies // should be listed first.
XML data - Archive of obsolete content
more details other values of display display the element like a list item, or like a component of a table.
... for the full list of display types, see the display property in the css specification.
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
extending traditional hypertext navigation the hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page.
...good candidates for inner-browsing include a spell check application, in which the text entered in a web page is checked as it is typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the information across the web page.
Source code directories overview - Archive of obsolete content
for example, if this code determines that the content is a mail message, it looks up the appropriate listener (probably netscape messenger) and passes the mail message to it for display.
... widget contains c interfaces and code for platform independent controls (widgets), such as scroll bars, radio buttons and list boxes.
Specifying the appearance - Archive of obsolete content
for this we have to first create four icons, one for each tinderbox state (none, success, test failed, and busted), then create a set of css rules that displays the icon corresponding to the current tinderbox state: statusbarpanel#tinderbox-status { list-style-image: url("chrome://navigator/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-bus...
...ew set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.
Getting Started - Archive of obsolete content
the packages section lists which components of the browser you're modifying.
...but this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this.
Creating a Microsummary - Archive of obsolete content
generators can also be independently downloaded and installed by users if they include a list of pages to which they apply.
... by default, generators don't apply to any page, so you have to explicitly list the pages they apply to, and you don't have to exclude any pages unless you've previously included them.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
the packages section lists which components of the browser you're modifying.
...but this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this.
Embedding FAQ - Archive of obsolete content
here is the code : import org.eclipse.swt.swt; import org.eclipse.swt.browser.mozillabrowser; import org.eclipse.swt.browser.progressevent; import org.eclipse.swt.browser.progresslistener; import org.eclipse.swt.widgets.display; import org.eclipse.swt.widgets.shell; import org.mozilla.xpcom.nsidomdocument; public class test { public static void main(string args[]) { display display = new display(); shell shell = new shell(display); final mozillabrowser browser = new mozillabrowser(shell,wt.border); brows...
...er.seturl("http://www.google.com"); browser.addprogresslistener(new progresslistener() { public void changed(progressevent event) { } public void completed(progressevent event) { nsidomdocument doc = browser.getdocument(); system.out.println(doc); } }); while (!shell.isdisposed()) { if (!display.readanddispatch()) { display.sleep(); } } } how to map a javascript function to a c++ function define an xpcom class defining the function you'll be doing in javascript.
Repackaging Firefox - Archive of obsolete content
rtner.properties locale/nb-no/partner.properties locale/nl/partner.properties locale/pl/partner.properties locale/pt-br/partner.properties locale/pt-pt/partner.properties locale/ru/partner.properties locale/sk/partner.properties locale/sv-se/partner.properties locale/tr/partner.properties locale/zh-cn/partner.properties locale/zh-tw/partner.properties partner-bookmarks.xml one by one, the files listed above are: chrome.manifest contains a specialized listing of the contents of the xpi.
...this is not meant to be a comprehensive list of preferences, however.
Code snippets - Archive of obsolete content
components.utils.import("resource://services-sync/main.js"); weave.service._freshstart(); // if you want to do it without wiping the server (which will cause corruption!): weave.service.generatenewsymmetrickeys(); print out a list of large bookmark records // change '1000' as appropriate.
...urce://services-sync/engines/bookmarks.js"); let bme = weave.service.enginemanager.get("bookmarks"); let ids = object.keys(bme._store.getallids()); for each (let id in ids) { let record = bme._store.createrecord(id, "bookmarks"); let len = record.tostring().length; if (len > 1000) { console.log("id: " + id + ", len = " + len + ", " + record.title); } } print an alphabetically sorted list of members of a collection components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); let ids = json.parse(new resource(weave.service.storageurl + "bookmarks").get()); for each (let id in ids.sort()) { console.log(" " + id); } get a count of the number of members of a collection on the server let collection = "passwords"; com...
Java in Firefox Extensions - Archive of obsolete content
these 2 objects let you make use of the standard jdk classes, e.g., var ajavalist = new java.util.linkedlist(); if you want to load your own jars, then you can create your own java class loader.
...d indicate the number of items in following array paramtypes[0] = java.io.file; var envconfigclass = loader.loadclass('com.sleepycat.db.environmentconfig'); paramtypes[1] = envconfigclass; // get the constructor var constructor = envclass.getconstructor(paramtypes); // now that we have the constructor with the right parameter types, we can build the specific arguments we wish to pass to it var arglist = reflect.array.newinstance(java.lang.object, 2); // 2nd argument should indicate the number of items in the following array var mydir = new java.io.file(dirurl); // a file url arglist[0] = mydir; var envconfig = envconfigclass.newinstance(); arglist[1] = envconfig; // call our constructor with our arguments var env = constructor.newinstance(arglist); be aware that liveconnect, while now activel...
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
the object may define any of the properties listed below.
... leave a comment on that bug or send a message to the mailing list.
PyDOM - Archive of obsolete content
globals and namespaces this is taken from a mail to the pyxpcom list - it should be expanded, but a copy-paste will do for now normal module semantics don't exist here.
...but addeventlistener within a <script type="application/x-python"> block does.
RDF Datasource How-To - Archive of obsolete content
this is a space-separated list that may include internal xpcom datasource "identifiers" (as described above) and uris for local or remote rdf/xml documents.
... each datasource that is listed will be loaded, and the assertions contained in the datasource will be made available to the tree control for display.
Remote XUL - Archive of obsolete content
however, there is a whitelist that lets you specify sites that can still use remote xul.
... the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); see using remote xul.
Running Tamarin acceptance tests - Archive of obsolete content
c:/python26/python.exe ./runtests.py --threads=3 other flags of interest (for a list of all flags, run runtests.py with -h/--help) --nohtml : will suppress the creation of an html output file --rebuildtests : will only rebuild test .abc's, will not attempt to run them.
...the command: $ adb devices lists the device id of each phone.
Tamarin build documentation - Archive of obsolete content
running the shell without any arguments will list the available options.
... importing the project into eclipse file >> import >> general >> existing projects into workspace click next the root directory should be the full path to your top-level tamarin-redux directory ensure the 'avmshell-project' project is checked in the 'projects' list uncheck 'copy projects into workspace' click finish building in eclipse 8 build configurations are included for macos with the gcc 4.0 toolchain: mac-32-release mac-64-release mac-32-debug mac-64-debug mac-32-release-debugger mac-64-release-debugger mac-32-debug-debugger mac-64-debug-debugger the build location will be project_root/build_name/avm note: as discussed above, the c+...
The Download Manager schema - Archive of obsolete content
see the constants list in the nsidownloadmanager documentation.
... see also nsidownloadmanager nsidownloadmanagerui nsidownloadprogresslistener ...
TraceVis - Archive of obsolete content
the first part lists the time tracemonkey spent in each major tracing activity.
... the second part lists the reasons tracemonkey transitioned to the interpreter, and the amount of interpreter time charged to each reason.
Using cross commit - Archive of obsolete content
you can list the files/directories you want it to commit on the command line or leave them out and let it recursively troll the current directory.
... --branch=branch-tag adds a branch to the list of branches to land the patch on.
XBL - Archive of obsolete content
some differences between sxbl and xbl2 are listed in an article by anne van ke ( seesteren (november, 2005).
... mailing list newsgroup rss feed ...
refreshPlugins - Archive of obsolete content
refreshplugins refreshes the list of plug-ins registered for the browser.
... method of install object syntax int refreshplugins( [ areloadpages ] ); parameters the refreshplugins method has the following parameter: areloadpages areloadpages is an optional boolean value indicating whether you want to reload the open web pages after you have refreshed the plug-in list.
Mozilla E4X - Archive of obsolete content
e4x marries xml and javascript syntax, and extends javascript to include namespaces, qualified names, and xml elements and lists.
... e4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants.
XTech 2005 Presentations - Archive of obsolete content
e4x marries xml and javascript syntax, and extends javascript to include namespaces, qualified names, and xml elements and lists.
... e4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants.
accesskey - Archive of obsolete content
« xul reference home attribute of: button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox accesskey type: character this should be set to a character that is used as a shortcut key.
... *(these are the keys corresponding to event.ctrlkey and event.metakey respectively when listening to key events) although the value is case insensitive, a letter with the case matching the accesskey attribute will be used if both cases exist in the label.
allowevents - Archive of obsolete content
on listitem and titlebar elements, mouse events normally do not get sent to their children; instead they are retargeted to the listitem and titlebar element itself.
... this means that elements placed inside a listitem do not respond to events, and instead clicking the mouse simply selects that item within the list.
autocompletesearch - Archive of obsolete content
« xul reference home autocompletesearch new in thunderbird 2requires seamonkey 1.1 type: space-separated list of values a space-separated list of search component names, each of which implements the nsiautocompletesearch interface.
... the components are created using the name @mozilla.org/autocomplete/search;1?name= where name is listed in this attribute.
buttons - Archive of obsolete content
« xul reference home buttons type: comma-separated list of the values below a comma-separated list of buttons to appear in the dialog box.
...the following values can be used in the list: accept: the ok button, which will accept the changes when pressed.
current - Archive of obsolete content
« xul reference home current type: boolean this attribute will be set to true if the listitem is the current item.
...to change the currently selected item in a listbox, use the listbox property selecteditem.
defaultset - Archive of obsolete content
« xul reference home defaultset not in seamonkey 1.x type: comma-separated list of item ids the default set of displayed items on the toolbar.
... this should be set to a comma-separated list of item ids from the toolbarpalette.
disableautoselect - Archive of obsolete content
if the text does not match any of the items in the list, the menu selection is cleared.
...this attribute applies only to editable menulists.
eventnode - Archive of obsolete content
« xul reference home eventnode type: one of the values below indicates where keyboard navigation events are listened to.
... if this attribute is not specified, events are listened to from the tabbox.
events - Archive of obsolete content
« xul reference home events type: comma-separated list a comma-separated list of event names that the command updater will update upon.
...valid events are listed below, or you can use your own events.
onchange - Archive of obsolete content
« xul reference home overview an onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
reserved - Archive of obsolete content
this means that, to execute these commands, key events won't be passed to content, and event listeners registered for them in content will not be executed.
... example here, the command to open a new browser window is reserved: <command id="cmd_newnavigator" oncommand="openbrowserwindow()" reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key == "t")) { // log a message console.log("intercepted accel-t"); // prevent the default browser action event.preventdefault(); event.stoppropagation(); } } currently, this event handler as coded above runs and logs the message, b...
seltype - Archive of obsolete content
(default in listbox and richlistbox.) multiple multiple rows may be selected at once.
... for richlistbox, this is new in firefox 3.5.
Dynamically modifying XUL-based user interface - Archive of obsolete content
you may also have used other calls, such as element.setattribute(), or, if you wrote an extension, the addeventlistener() method.
...for example: // gets the first anonymous child of the given node document.getanonymousnodes(node)[0]; // returns a nodelist of anonymous elements with anonid attribute equals el1 document.getanonymouselementbyattribute(node, "anonid", "el1"); see getanonymousnodes and getanonymouselementbyattribute in the xbl reference for more information.
Working With Directories - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...iterating over the files in a directory the directory object's directoryentries (nsifile.attributes) attribute is used to get a list of the items in a directory.
Moving, Copying and Deleting Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...for a list of possible file related errors, see file errors.
findbar - Archive of obsolete content
possible values are: find_normal (0): normal find find_typeahead (1): typeahead find find_links (2): link find methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata close() return type: no return value closes the notification or findbar and removes it from its enclosing notificationbox or findbar.
How to implement a custom XUL query processor component - Archive of obsolete content
es/xpcomutils.jsm"); // basic wrapper for nsixultemplateresult function templateresult(adata) { this._data = adata; // just make a random number for the id this._id = math.random(100000).tostring(); } templateresult.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsixultemplateresult]), // private storage _data: null, // right now our results are flat lists, so no containing/recursion take place iscontainer: false, isempty: true, mayprocesschildren: false, resource: null, type: "simple-item", get id() { return this._id; }, // return the value of that bound variable such as ?name getbindingfor: function(avar) { // strip off the ?
...t.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsisimpleenumerator]), hasmoreelements: function() { return this._index < this._array.length; }, getnext: function() { return new templateresult(this._array[this._index++]); } }; // the query processor class - implements nsixultemplatequeryprocessor function templatequeryprocessor() { // our basic list of data this._data = [ {name: "mark", age: 36, hair: "brown", eye: "brown"}, {name: "bill", age: 25, hair: "red", eye: "black"}, {name: "joe", age: 15, hair: "blond", eye: "blue"}, {name: "jimmy", age: 65, hair: "gray", eye: "dull"} ]; } templatequeryprocessor.prototype = { queryinterface: xpcomutils.generateqi([c...
appendItem - Archive of obsolete content
« xul reference home appenditem( label, value ) return type: element creates a new item and adds it to the end of the existing list of items.
... example <script language="javascript"> function additemstolist(){ var list = document.getelementbyid('mymenulist'); // add item with just the label list.appenditem('one'); // add item with label and value list.appenditem('two', 999); // select the first item list.selectedindex = 0; } </script> <button label="add items" oncommand="additemstolist()"/> <menulist id="mymenulist"> <menupopup/> </menulist> see also insertitemat() removeitemat() ...
getElementsByAttribute - Archive of obsolete content
« xul reference home getelementsbyattribute( attrib, value ) return type: dom nodelist returns a nodelist of all the child elements of the element that have the attribute given by the first argument set to the value given by the second argument.
...note that like most nodelists (but unlike the nodelist returned by queryselectorall), the nodelist returned by this method is live.
insertItemAt - Archive of obsolete content
note: you cannot insert an item to an index that does not exist, eg: trying to insert an item at the end with element.getrowcount() + 1 example <!-- this example inserts at the selected item or appends, then selects the newly created item --> <script language="javascript"> function insertitemtolist(){ var mylistbox = document.getelementbyid('mylistbox'); // create a date to get some labels and values var somedate = new date(); if(mylistbox.selectedindex == -1){ // no item was selected in list so append to the end mylistbox.appenditem( somedate.tolocaletimestring(), somedate.gettime() ); var newindex = mylistbox.getrowcount() -1 }else{ ...
...// item was selected so insert at the selected item var newindex = mylistbox.selectedindex; mylistbox.insertitemat(newindex, somedate.tolocaletimestring(), somedate.gettime()); } // select the newly created item mylistbox.selectedindex = newindex; } </script> <button label="insert item at selected" oncommand="insertitemtolist()"/> <listbox id="mylistbox"> <listitem label="foo"/> </listbox> see also appenditem() removeitemat() ...
removeItemAt - Archive of obsolete content
<script language="javascript"> function removeselecteditem(){ var mylistbox = document.getelementbyid('mylistbox'); if(mylistbox.selectedindex == -1){ return; // no item selected so return }else{ mylistbox.removeitemat(mylistbox.selectedindex); } } function removeallitems(){ var mylistbox = document.getelementbyid('mylistbox'); var count = mylistbox.itemcount; while(count-- > 0){ mylistbox.removeitemat(0); } } </script> <button label="remove selected item" oncommand="removeselecteditem()"/> <button label="remove all items" oncommand="rem...
...oveallitems()"/> <listbox id="mylistbox"> <listitem label="alpha"/> <listitem label="beta"/> <listitem label="oscar"/> <listitem label="foxtrot"/> </listbox> see also removeallitems() insertitemat() ...
Special per-platform menu considerations - Archive of obsolete content
here is a list of the menu item ids which are automatically handled.
... the last five items aren't normally used but are listed for completeness.
buttons - Archive of obsolete content
« xul reference buttons type: comma-separated list of the values below a comma-separated list of buttons to appear on the dialog box.
...the following values can be used in the list: accept: the ok button, which will accept the changes when pressed.
Introduction - Archive of obsolete content
for example: <listbox datasources="http://www.xulplanet.com/ds/sample.xml" querytype="xml"> <template> <listitem label="?name"/> </template> </listbox> this template uses an xml datasource to generate a listbox.
... although we'll look at the details of this later, the simple result here is that a listitem will be generated for each child node in the xml data, setting the label to the name attribute for each xml node.
Multiple Rule Example - Archive of obsolete content
<vbox id="photoslist" align="start" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo"...
...looking back at the results listed above, the palace photo appears twice so the second one will be removed, leaving only three matches.
Multiple Rules - Archive of obsolete content
a multiple rule template looks like the following: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="...
...the query generates a list of the photos and assigns the title of each photo to the variable '?title'.
Namespaces - Archive of obsolete content
for example using the following xml document containing a list of people: <people xmlns="www.example.com/people"> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <action> <listitem uri="?" label="?ns:name"/> </action> </template> </listbox> once added to the template element the namespaces can then be referenced inside temple ...
...<listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <rule ns:gender="male"> <label uri="?" label="?ns:name"/> </action> </template> </listbox> ...
RDF Modifications - Archive of obsolete content
this involves a third type of observer involved in a template builder, an nsirdfobserver, used to listen for modifications to the rdf datasource.
...assuming that the 'obelisk' photo doesn't have a description already, adding the triple listed above should cause a new result to be available for this photo.
Result Generation - Archive of obsolete content
it is so called because it is most common to gather the list of the members, or children, of a container.
...while the information network created by the template builder contains a number of different pieces of necessary information, for the purposes of this discussion, we will only be interested in the list of possible results.
Simple Example - Archive of obsolete content
« previousnext » let's look a more useful example, this time for a template that will show a list of photos.
... in this situation, an rdf container will be used to hold the list of images.
Template Builder Interface - Archive of obsolete content
this isn't a very common technique, however, here is an example of how this can be used: <html:div id="photoslist" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:html="http://www.w3.org/1999/xhtml"> <html:h1>my photos</html:h1> <template> <html:p uri="rdf:*"><textnode value="rdf:http://purl.org/dc/elements/1.1/title"/></html:p> </template> </html:div> this example generates three paragraphs.
...these may be listed in the datasources attribute separated by spaces.
Template Logging - Archive of obsolete content
the following lists the errors that can occur and an explanation of what the problem is.
...an example is given below this list of errors.
Using Recursive Templates - Archive of obsolete content
for example, using this xml datasource: <people> <group name="male"> <person name="napoleon bonaparte"/> <person name="julius caesar"/> <person name="ferdinand magellan"/> </group> <group name="female"> <person name="cleopatra"/> <person name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another level for each person.
... <groupbox type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <action> <vbox uri="?" class="indent"> <label value="?name"/> </vbox> </action> </template> </groupbox> in this simplified example, the xpath expression just gets the list of child elements of the reference node.
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
paste it into the new file: #custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons - modern */ #nav-bar .custombutton {-moz-image-region: rect( 0px 41px 39px 0px);} #nav-bar .custombutton:hover {-moz-image-region: rect( 0px 83px 39px 42px);} #nav-bar .custombutton:active {-moz-image-region: rect( 0px 125px 39px 84px);} .custombutton {-moz-image-region: rect(39px...
...save the file as contents.rdf and navigate to seamonkey\chrome again, following steps 2 and 3 as listed above.
Toolbar customization events - Archive of obsolete content
you can use window.addeventlistener() to listen for these events in order to keep abreast of changes to toolbars.
...window.addeventlistener("beforecustomization", customizestart, false); window.addeventlistener("aftercustomization", customizeend, false); window.addeventlistener("customizationchange", customizechange, false); function customizestart(e) { let thetoolbox = e.target; /* now we know the user has started customizing */ } function customizeend(e) { let thetoolbox = e.target; /* the user has finished customizin...
Toolbars - Archive of obsolete content
mailing list newsgroup rss feed #extdev irc channel mozillazine forum about:addons newsletter mozilla's web-tech blog mozdev project owners planet mozilla other community links...
... tools dom inspector edit the live dom (firefox and thunderbird) mozilla labs add-on builder extension developer's extension a suite of development tools chrome list view files in chrome:// (firefox, thunderbird) extension wizard a web-based extension skeleton generator (firefox and thunderbird) ...
Tree Widget Changes - Archive of obsolete content
the columns are grouped into a list which implements the nsitreecolumns interface.
...(do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...
Adding Buttons - Archive of obsolete content
you can also specify the image in a stylesheet using the list-style-image property.
... note: buttons support more attributes than those listed above.
Adding Labels and Images - Archive of obsolete content
you can use the list-style-image css property to set the url for the image.
... here are some examples: xul: <image id="image1"/> <image id="search"/> style sheet: #image1 { list-style-image: url("chrome://findfile/skin/banner.jpg"); } #search { list-style-image: url("http://example.com/images/search.png"); } these images come from within the chrome directory, in the skin for the findfile package.
Creating an Installer - Archive of obsolete content
in this case, they will be presented in a list.
...this function takes two arguments, the first is a list of packages to install, and the second is a callback function which will be called when the installation is complete.
Cross Package Overlays - Archive of obsolete content
mozilla allows you to add a list of overlays to the contents.rdf file that you use to list chrome packages, skins and locales.
... <rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://findfile/content/foverlay.xul</rdf:li> </rdf:seq> mozilla reads this information and builds a list of overlays that are applied to other windows.
Custom Tree Views - Archive of obsolete content
three methods that you should implement are listed below.
... the nsitreeview interface lists all of the properties and methods that you can implement for the tree view.
Install Scripts - Archive of obsolete content
what you do need to know for an installation is that the registry stores a set of information about your application, such as the file list and versions.
...the directory identifiers are listed on this page.
More Tree Features - Archive of obsolete content
hierarchical trees the tree element is also used to create hierarchical lists, like that found in a file manager or a browser's bookmarks list.
...by clicking the row, the user can open and close the list.
Open and Save Dialogs - Archive of obsolete content
the second is a filter that indicates the list of file types that are displayed in the dialog.
...the first argument is the title of the file type and the second is a semicolon-seperated list of file masks.
Simple Menu Bars - Archive of obsolete content
we've already seen part of how to make menus using the menulist.
...this box contains the list of menu commands.
Skinning XUL Files by Hand - Archive of obsolete content
instead, a css file is usually simply a list of style definitions that are applied to their respective elements and classes by the rendering engine.
...xul represents, as one evangelist put it, the "democratization" of interface design and ofapplications development, about which we will have more to say in a later article.
Tabboxes - Archive of obsolete content
shown below is the general syntax of a tabbox: <tabbox id="tablist"> <tabs> <!-- tab elements go here --> </tabs> <tabpanels> <!-- tabpanel elements go here --> </tabpanels> </tabbox> the tab elements are placed inside a tabs element, which is much like a regular box.
... </description> <spacer style="height: 10px"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <sp...
The Chrome URL - Archive of obsolete content
when you open a chrome url, mozilla looks through its list of installed packages and tries to locate the jar file or directory that matches the package name and part.
...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.
Trees and Templates - Archive of obsolete content
the tree should display a list of the files in the root directory.
...sorting columns if you try the previous example, you might note that the list of files is not sorted.
XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event ha...
...ndlers more event handlers keyboard shortcuts focus and selection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates trees and templates rdf datasources advanced rules persistent data skins and locales adding style sheets styling a tree modifying the default skin creating a skin skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers ...
XUL Coding Style Guidelines - Archive of obsolete content
the author has collected a set of guidelines from various sources listed in the references section.
... author: tao cheng newsgroup discussion mailing list original document information author(s): tao cheng last updated date: december 10, 2004 copyright information: copyright (c) tao cheng ...
action - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
assign - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
bbox - Archive of obsolete content
ArchiveMozillaXULbbox
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
binding - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related tbd ...
bindings - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related tbd ...
box - Archive of obsolete content
ArchiveMozillaXULbox
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements vbox, hbox ...
broadcaster - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
broadcasterset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
column - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, rows, row ...
columns - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, column, rows, row.
conditions - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
content - Archive of obsolete content
métodos inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata relacionados tbd ...
datepicker - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement ...
deck - Archive of obsolete content
ArchiveMozillaXULdeck
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related stack ...
dialogheader - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements dialog, window ...
editor - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
grippy - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
groupbox - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
hbox - Archive of obsolete content
ArchiveMozillaXULhbox
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, vbox ...
keyset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
label - Archive of obsolete content
ArchiveMozillaXULlabel
for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributeno...
member - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
menubar - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements menu, menuitem, menulist, menupopup, menuseparator interfaces nsiaccessibleprovider ...
page - Archive of obsolete content
ArchiveMozillaXULpage
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
param - Archive of obsolete content
ArchiveMozillaXULparam
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
popupset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements popup, menupopup ...
preferences - Archive of obsolete content
void observe(in nsisupports asubject, in string atopic, in wstring adata); nsiobserver method used internally to react to changes to preferences listed as children of this element.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setat...
query - Archive of obsolete content
ArchiveMozillaXULquery
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
queryset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
resizer - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
row - Archive of obsolete content
ArchiveMozillaXULrow
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, column, rows.
rows - Archive of obsolete content
ArchiveMozillaXULrows
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, column, row.
rule - Archive of obsolete content
ArchiveMozillaXULrule
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
script - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollbar - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollbox - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollcorner - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
separator - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
spacer - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements separator, splitter ...
spinbuttons - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
splitter - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
stack - Archive of obsolete content
ArchiveMozillaXULstack
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related deck ...
statusbar - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements statusbarpanel interfaces nsiaccessibleprovider ...
stringbundleset - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
tabpanel - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tabbox, tabs, tab, tabpanels.
tabpanels - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tabbox, tabs, tab, tabpanel.
template - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
textnode - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
timepicker - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement ...
titlebar - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
toolbargrippy - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarseparator - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarset - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarspacer, toolbox ...
toolbarspacer - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
treechildren - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata example <tree flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label=...
treecols - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecol, treechildren, treeitem, treerow, treecell and treeseparator.
treeitem - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treerow, treecell and treeseparator.
triple - Archive of obsolete content
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
vbox - Archive of obsolete content
ArchiveMozillaXULvbox
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, hbox ...
where - Archive of obsolete content
ArchiveMozillaXULwhere
llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasat...
...tributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
wizard - Archive of obsolete content
wizardpages type: dom nodelist of wizardpage elements this property holds the list of wizardpage elements in the wizard.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattri...
calIFileType - Archive of obsolete content
extensionfilter the extension filter to use in the filepicker's filter list.
...description the description to show to the user in the filter list.
nsIContentPolicy - Archive of obsolete content
query any dom properties that depend on the current state of the dom outside the "context" node (e.g., lengths of node lists).
...this will be one one of the content types listed above.
Format - Archive of obsolete content
dropping bugs from blocking1.8.1+ david baron suggested a list of bugs that could be dropped from the blocking list.
... view bugzilla list.
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
... authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-09-29 - Archive of obsolete content
firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project?
... authors sara minchella (sara) dave manley (senemanley) back to summary list ...
Extentsions FAQ - Archive of obsolete content
//setting the state document.getelementbyid("toolbar-button").setattribute("toolbar-button", "on"); //or document.getelementbyid("toolbar-button").setattribute("toolbar-button","off"); //css #myexten-toolbar-button[myexten-toolbar-button="on"] { list-style-image: url("chrome://myexten/skin/toolbar-button.png"); -moz-image-region: rect(0px 24px 24px 0px);} #myexten-toolbar-button[myexten-toolbar-button="off"] { list-style-image: url("chrome://myexten/skin/toolbar-button-off.png"); -moz-image-region: rect(0px 24px 24px 0px);} to implement a third i would simply change add an attribute and the corresponding css see http://www.w3.or...
...the list of "known" properties is: junkscore junkscoreorigin label priority keywords.
2006-07-17 - Archive of obsolete content
dropping bugs from blocking1.8.1+ david baron suggested a list of bugs that could be dropped from the blocking list.
... view bugzilla list.
2006-10-20 - Archive of obsolete content
feature brainstorming + firefox 3 dria posted a link to the firefox feature brainstorming list (open to everyone).
... discussion of what is the best format for the list and how to use it best.
2006-10-13 - Archive of obsolete content
lightning 0.3 - event list/search?
... discussion about the ability to list and search all the events in a calendar.
2006-10-20 - Archive of obsolete content
discussions lightning 0.3 - event list/search ?
... discussion about the missing ability to list and search all the events in a calendar in lightning 0.3.
Monitoring plugins - Archive of obsolete content
clean up to unregister your class with the observer service - when you no longer want to be listening to runtime notifications - your class must include an unregister method that contains the following code: var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "experimental-notify-plugin-call"); skeleton observer class below is a skeleton class t...
...hat you may use to listen to runtime notifications: function pluginobserver() { this.registered = false; this.register(); //takes care of registering this class with observer services as an observer for plugin runtime notifications } pluginwatcherobserver.prototype = { observe: function(subject, topic, data) { if (topic == "experimental-notify-plugin-call") //in case your class is registered to listen to other topics //this gets executed each time a runtime notification arrives // --your code goes here-- } }, //takes care of registering the observer services for the "experimental-notify-plugin-call" topic register: function() { if (this.registered == false) { //this check prevents double registration -- something you want to avoid!!
NPByteRange - Archive of obsolete content
next points to the next npbyterange request in the list of requests, or null if this is the last request.
... description the plug-in seeks within a stream by building a linked list of one or more npbyterange objects, which represents a set of discontiguous byte ranges.
NPP_HandleEvent - Archive of obsolete content
values: ms windows: pointer to npevent structure mac os: pointer to a standard mac os eventrecord unix/x11: pointer to a standard xlib xevent for a list of possible events, see npevent.
...for a list of event types the application is responsible for delivering to the plug-in, see the npevent structure.
NP_GetMIMEDescription - Archive of obsolete content
np_getmimedescription returns a supported mime type list for your plugin.
... each mime type description contains the mime type, an extensions list and a short description.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
the plugin must have a name to identify the plugin to the user in the list of add-ons.
...there can be multiple targetapplication blocks listed.
Plugins - Archive of obsolete content
if there are plugin features which are not available in the web platform, we encourage developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize web platform work to make those use cases possible.
... categories interwiki language links join the plugin development community choose your preferred method for joining the discussion: mailing list newsgroup rss feed ...
What is RSS - Archive of obsolete content
news web sites use rss to provide everyone with a list of their newest articles.
...ttp://news.example.com/artcle/553</link> </item> <item> <title>fire is hot</title> <guid ispermalink="false">c1795324-d5ea-44fa-95b1-b5ce2090d4f1</guid> <pubdate>sun, 15 may 2005 13:02:08 -0700</pubdate> <link>http://news.example.com/artcle/552</link> </item> </channel> </rss> bloggers use rss to provide everyone with a list of their newest blog posts.
Module - Archive of obsolete content
rss module list rss modules are microformats injected into an rss document through the use of xml namespaces.
...below is a list of the popular rss modules.
Proposal - Archive of obsolete content
rss proposal list below is a list of proposals people or companies have made for rss.
... note: those in the list below that are marked "in development" should not be implemented.
0.90 - Archive of obsolete content
ArchiveRSSVersion0.90
(see the rss versions list for a list of non-deprecated rss formats.) consumers of rssshould still be able to accept rss 0.90 feeds though.
.../www.mozilla.org/party/1999/</link> </item> <item> <title>unix platform parity</title> <link>http://www.mozilla.org/build/unix.html</link> </item> <item> <title>npl 1.0m published</title> <link>http://www.mozilla.org/npl/npl-1.0m.html</link> </item> </rdf:rdf> note that here, rss is being used to list sections of the web site.
Vulnerabilities - Archive of obsolete content
examples of settings are an operating system offering access to control lists that set the privileges that users have for files, and an application offering a setting to enable or disable the encryption of sensitive data stored by the application.
... the organization publishes a list of top web security vulnerabilities based on the data from various security organizations.
References - Archive of obsolete content
<- previous section: summary of changes you can learn more on using web standards from these sites (listed in no particular order): what are web standards and why should i use them?
...author faq from henri sivonen making your web page compatible with mozilla from nicolás lichtmaier complete css guide from westciv.com css lessons and tutorials from alsacreations html and css lessons and tutorials from htmldog.com preparing for standard-compliant browsers, part 1 from makiko itoh preparing for standard-compliant browsers, part 2 from makiko itoh javascript best practices lists 15 of the most frequent coding practices which create problems for javascript and dhtml-driven webpages.
-moz-border-bottom-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-bottom-colors css property sets a list of colors for the bottom border.
... syntax values accepts a white-space separated list of color values.
-moz-border-left-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-left-colors css property sets a list of colors for the left border.
... syntax values accepts a white-space separated list of color values.
-moz-border-right-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-right-colors css property sets a list of colors for the right border.
... syntax values accepts a white-space separated list of color values.
-moz-border-top-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-top-colors css property sets a list of colors for the top border.
... syntax values accepts a white-space separated list of color values.
-ms-ime-align - Archive of obsolete content
ime candidate lists are positioned on the screen with sufficient size to allow basic text input.
... in the case of -ms-ime-align: after, an ime might adjust the candidate window and keyboard input behavior to provide a better user experience, such as using a horizontal candidate list and allowing some keys to be sent to the app for suggestion list navigation.
Displaying notifications (deprecated) - Archive of obsolete content
this lets you configure the event listeners before the notification is shown, if you need to be notified when the notification is dismissed.
... setting up event listeners on the notification there are two events you can listen to on created notifications: onclick this event is fired when the user clicks (or taps) on the notification.
The global XML object - Archive of obsolete content
extending xml.prototype xml.prototype and xmllist.prototype (xmllist.prototype is actually just xml.prototype) cannot be extended in the same conventional way as other constructors such as object.
...this means that if ignorecomments is true, the list returned by .comments() will be empty.
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
below is a list of features in es2016+ and what version of firefox they were implemented in.
... ecmascript 2017 object.values() (firefox 47) object.entries() (firefox 47) string.prototype.padstart() (firefox 48) string.prototype.padend() (firefox 48) object.getownpropertydescriptors() (firefox 50) async functions async function (firefox 52) async function expression (firefox 52) asyncfunction (firefox 52) await (firefox 52) trailing commas in function parameter lists (firefox 52) ecmascript 2018 spread in object literals and rest parameters (firefox 55) for await...of (firefox 57) global_objects/sharedarraybuffer (firefox 57, with flags) global_objects/promise/finally (firefox 58) global_objects/regexp/dotall (not yet implemented; in other browsers) regexp lookbehind assertions (not yet implemented; in other browsers) regexp unicode property escap...
Object.observe() - Archive of obsolete content
syntax object.observe(obj, callback[, acceptlist]) parameters obj the object to be observed.
... acceptlist the list of types of changes to be observed on the given object for the given callback.
JavaObject - Archive of obsolete content
in addition, you can explicitly construct a javaobject using the object's java constructor with the packages keyword: new packages.javaclass(parameterlist) javaclassis the fully-specified name of the object's java class.
... parameters parameterlist an optional list of parameters, specified by the constructor of the java class.
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
the idea was to have the fish listed in a side-by-side arrangement, sort of like a two-column table, only without the table.
...- related links the amazing netscape fish cam page original document information author(s): eric meyer, standards evangelist, netscape communications last updated date: published 25 apr 2003 copyright information: copyright © 2001-2003 netscape.
Community - Archive of obsolete content
if you know of useful mailing lists, newsgroups, forums, or other communities related to xforms, please link to them here.
... mailing list newsgroup rss feed irc channel w3c forms mailinglist xforms development blog ...
Troubleshooting XForms Forms - Archive of obsolete content
if all else fails ask the community ask on one of the mailing lists or on irc.
...you can also see the current list of open xforms bugs, or the list of fixed bugs that have not made it to the release versions yet.
Implementation Status - Archive of obsolete content
we have listed the most relevant bugs here, but check out the bugzilla xforms buglist for the complete list.
... 5.2.1 additional xforms datatypes to allow empty content unsupported 5.2.2 xforms:listitem supported 5.2.3 xforms:listitems supported 5.2.4 xforms:daytimeduration supported 5.2.5 xforms:yearmonthduration supported 5.2.6 xforms:email unsupported 5.2.7 xforms:card-num...
Mozilla XForms Specials - Archive of obsolete content
information about how to whitelist domain can be found in the release notes the cross domain check also includes forms loaded from file://.
...so there is not automatic "whitelisting" of local files.
The Business Benefits of Web Standards - Archive of obsolete content
the content creator - who may be a journalist, a music producer, or may come from any one of a number of disciplines; need not become involved in the actual process of publishing that content at all.
...it supplies a far better development framework, for content providers, for web developers, and for css stylists alike.
XUL Parser in Python - Archive of obsolete content
v.00001 to celebrate activestate's recent announcement about support for perl and python in mozilla, i have put together this little python script that parses your local xul and builds a list of all the xul elements and their attributes in an html page.
... or, since the dictionary is already storing the values of all the attributes it finds, you can write the values of a particular attribute (e.g., id) to the results file by checking the attribute in sys.argv[1]: for attr in a.keys(): if strip(attr) == sys.argv[1]: el_list[name][strip(attr)] = strip(a[attr]) and writing thevalues to the html results file instead of thekeys: for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item].values(): w.write('<tr><td class="at">' + a + '</td>') with these modifications, the script creates an output more like a periodic table of xul elements.
Community - Extensions
if you know of useful mailing lists, newsgroups, forums, or other communities related to extension development, please link to them here.
... mozillazine extensions & themes forum #extdev channel on moznet irc network — extension development questions #addons channel on moznet irc network — questions about http://addons.mozilla.org mozdev project owners mailing list mozillazine knowledge base allyourideas — ideas for extensions ((really needs a unique captcha)) babelzilla — a community for developers and translators of extension for mozilla applications ...
Index - Game development
3 examples demos, example, games, web this page lists a number of impressive web technology demos for you to get inspiration from, and generally have fun with.
... 11 techniques for game development games, guide this page lists essential core techniques for anyone wanting to develop games using open web technologies.
2D collision detection - Game development
broad phase broad phase should give you a list of entities that *could* be colliding.
... narrow phase when you have a small list of entities to check you will want to use a narrow phase algorithm (like the ones listed above) to provide a certain answer as to whether there is a collision or not.
Building up a basic demo with the PlayCanvas engine - Game development
that's quite an impressive list of features — let's see some in action.
... conclusion here's the final code listing, along with a viewable live example: you can also see it on github and fork the repository if you want to play with it yourself locally.
Building up a basic demo with PlayCanvas - Game development
note: check out the list of featured demos to find more examples.
...that's quite an impressive list of features — let's see some in action, check out the building up a basic demo with playcanvas engine for details.
Mouse controls - Game development
listening for mouse movement listening for mouse movement is even easier than listening for key presses: all we need is the listener for the mousemove event.
... add the following line in the same place as the other event listeners, just below the keyup event: document.addeventlistener("mousemove", mousemovehandler, false); anchoring the paddle movement to the mouse movement we can update the paddle position based on the pointer coordinates — the following handler function will do exactly that.
Certificate authority - MDN Web Docs Glossary: Definitions of Web-related terms
web browsers come preloaded with a list of certificate authorities trusted to issue digital certificates.
... learn more certificate authority on wikipedia mozilla included ca certificate list ...
MIME type - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge internet media type on wikipedia technical reference list of mime types properly configuring server mime types details information about the usage of mime types in a web context.
... incomplete list of mime types how mozilla determines mime types mediarecorder.mimetype ...
Quality values - MDN Web Docs Glossary: Definitions of Web-related terms
quality values, or q-values and q-factors, are used to describe the order of priority of values in a comma-separated list.
... examples the following syntax text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 indicates the order of priority: value priority text/html and application/xhtml+xml 1.0 application/xml 0.9 */* 0.8 if there is no priority defined for the first two values, the order in the list is irrelevant.
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
in addition, cors defines a subset of request headers as simple headers, request headers that are always considered authorized and are not explicitly listed in responses to preflight requests.
..."c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, but an entity header: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
semantics in css in css, consider styling a list with li elements representing different types of fruits.
...ful code is significantly easier than searching though endless divs with or without semantic or namespaced classes suggests to the developer the type of data that will be populated semantic naming mirrors proper custom element/component naming when approaching which markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.
Site map - MDN Web Docs Glossary: Definitions of Web-related terms
a site map or sitemap is a list of pages of a web site.
... structured listings of a site's page help with search engine optimization, providing a link for web crawlers such as search engines to follow.
MDN Web Docs Glossary: Definitions of Web-related terms
web technologies contain long lists of jargon and abbreviations that are used in documentation and coding.
... cipher cipher suite ciphertext class client hints closure cms code splitting codec compile compile time computer programming conditional constant constructor continuous media control flow cookie copyleft cors cors-safelisted request header cors-safelisted response header crawler crlf cross axis cross-site scripting crud cryptanalysis cryptographic hash function cryptography csp csrf css css object model (cssom) css pixel css preprocessor d data structure ...
Mobile accessibility - Learn web development
for a more complete list of talkback gestures, see use talkback gestures.
...we have listed a couple here, but we will add more when we think of them.
Backgrounds and borders - Learn web development
the backgrounds will layer with the last listed background image at the bottom of the stack, and each previous image stacking on top of the one that follows it in the code.
...to demonstrate the stacking order, try switching which background image comes first in the list.
CSS selectors - Learn web development
selector lists if you have more than one thing which uses the same css then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors.
... h1 { color: blue; } .special { color: blue; } i could also combine these into a selector list, by adding a comma between them.
Test your skills: Flexbox - Learn web development
flex layout one these list items are the navigation for a site.
... flex layout two these list items are all different sizes, but we want them to be displayed as three equal sized columns, no matter what content is in each item.
Introduction to CSS layout - Learn web development
quick html example: <p>i love my cat.</p> <ul> <li>buy cat food</li> <li>exercise</li> <li>cheer up friend</li> </ul> <p>the end!</p> by default, the browser will display this code as follows: note here how the html is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.
...for example, the <li> element is display: block by default, meaning that list items display one below the other in our english document.
Supporting older browsers - Learn web development
at the bottom of this page is a table, which lists major browsers along with the version they began supporting this property.
...this site lists the majority of web platform features with information about their browser support status.
Styling text - Learn web development
we round off the module by looking at applying custom fonts to your page, and styling lists and links.
... styling lists lists behave like any other text for the most part, but there are some css properties specific to lists that you need to know about, and some best practices to consider.
How do you make sure your website works properly? - Learn web development
more things to check we have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them.
... a simple checklist check for 404s make sure all webpages are behaving as you expect check your website in several browsers to make sure it renders consistently next steps congratulations, your website is up and running for anyone to visit.
How do I use GitHub Pages? - Learn web development
every operating system comes with a command line tool: windows: command prompt can be accessed by pressing the windows key, typing command prompt, and choosing it from the list that appears.
...you should see two lines of code listed in this section.
What software do I need to build a website? - Learn web development
here is a short list of editors: operating system built-in editor third-party editor windows notepad notepad++ visual studio code web storm brackets shiftedit sublime text mac os textedit textwrangler visual studio code brackets shiftedit sublime text ...
...for now, here's a short list of free basic (s)ftp clients: operating system ftp software windows winscp moba xterm filezilla (all os) linux nautilus/files (gnome) dolphin (kde) mac os cyberduck chrome os shiftedit (all os) browsing websit...
The HTML5 input types - Learn web development
to actually display the current value, and update it as it changed, you must use javascript, but this is relatively easy to do: const price = document.queryselector('#price'); const output = document.queryselector('.price-output'); output.textcontent = price.value; price.addeventlistener('input', function() { output.textcontent = price.value; }); here we store references to the range input and the output in two variables.
...finally, an event listener is set to ensure that whenever the range slider is moved, the output's textcontent is updated to the new value.
Sending form data - Learn web development
on the server side: retrieving the data whichever http method you choose, the server receives a string that will be parsed in order to get the data as a list of key/value pairs.
... the way you access this list depends on the development platform you use and on any specific frameworks you may be using with it.
Styling web forms - Learn web development
these include: <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>.
... the real problem with all these controls is that they have a very complex structure, and beyond some basic styling (such as changing the width or margin of the control) you generally don't have the ability to style the controls' internal components (such as the date picker calendar, or the button on the <select> that causes the options list to display) making up those widgets.
Web forms — Working with user data - Learn web development
in the articles listed below, we'll cover all the essential aspects of web forms including marking up their html structure, styling form controls, validating form data, and submitting data to the server.
...therefore, before you look at the other sections listed below we'd recommend that you go away and learn some css and javascript first.
Getting started with the Web - Learn web development
by working through the articles listed below in order, you will go from nothing to getting your first webpage online.
...for example, is my content a set of paragraphs or a list of bullet points?
Use JavaScript within a webpage - Learn web development
<script> window.addeventlistener('load', function () { console.log('this function is executed once the page is fully loaded'); }); </script> that's convenient when you just need a small bit of javascript, but if you keep javascript in separate files you'll find it easier to focus on your work write self-sufficient html write structured javascript applications use scripting accessibly accessibility is a major issue...
...likewise, your drop-down menus should be structured as unordered lists of links.
Document and website structure - Learn web development
we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.
... now, brainstorm all the other (not common to every page) content you want to have on your website — write a big list down.
Adding vector graphics to the Web - Learn web development
h: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = ...
...'show solution'; } updatecode(); }); const htmlsolution = ''; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; t...
From object to iframe — other embedding technologies - Learn web development
h: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = ...
...ame src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.s...
Video and audio content - Learn web development
restarting media playback at any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using <source> elements—by calling the element's load() method: const mediaelem = document.getelementbyid("my-media-element"); mediaelem.load(); detecting track addition and removal you can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media.
... for example, you can watch for the addtrack event being fired on the associated audiotracklist object (retrieved via htmlmediaelement.audiotracks) to be informed when audio tracks are added to the media: const mediaelem = document.queryselector("video"); mediaelem.audiotracks.onaddtrack = function(event) { audiotrackadded(event.track); } you'll find more information about this in our trackevent documentation.
Test your skills: Events - Learn web development
events 3 in our final events-related task, you need to set an event listener on the <button>s' parent element (<div class="button-bar"> ...
... we want you to solve this without looping through all the buttons and giving each one their own event listener.
Silly story generator - Learn web development
event listener and partial function definition" and paste it into the bottom of your main.js file.
... this: adds a click event listener to the randomize variable so that when the button it represents is clicked, the result() function is run.
Object prototypes - Learn web development
ast }; this.age = age; this.gender = gender; //...see link in summary above for full definition } we have then created an object instance like this: let person1 = new person('bob', 'smith', 32, 'male', ['music', 'skiing']); if you type "person1." into your javascript console, you should see the browser try to auto-complete this with the member names available on this object: in this list, you will see the members defined on person1's constructor — person() — name, age, gender, interests, bio, and greeting.
...if you look at the object reference page, you'll see listed in the left hand side a large number of properties and methods — many more than the number of inherited members we saw available on the person1 object.
Package management basics - Learn web development
although the list grows by the month, there are three main offerings for tools that generate bundles from our source code: webpack, rollup, and parcel.
... the list will grow over time, but at time of writing, the following main package managers are available: npm at npmjs.org pnpm at pnpm.js.org yarn at yarnpkg.com npm and pnpm are similar from a command line point of view — in fact pnpm aims to have full parity over the argument options that npm offers.
Learn web development
random glossary entry semantics in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of javascript have?", or "what purpose or role does that html element have" (rather than "what does it look like?".) topics covered the following is a list of all the topics we cover in the mdn learning area.
...in the articles listed below, we'll cover all the essential aspects of structuring, styling, and interacting with web forms.
Accessibility Information for Core Gecko Developers
newsgroup and mailing list we have two discussion lists, which can be read via a newsgroup reader, as a mailing list or via google groups.
... purpose newsgroup mailing list google group developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Accessibility information for UI designers and developers
newsgroup and mailing list we have two discussion lists, which can be read via a newsgroup reader, as a mailing list or via google groups.
... purpose newsgroup mailing list google group developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
CSUN Firefox Materials
" -- darren paskell, from window-eyes beta testing list firefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes 5.5.
... both history and bookmarks can be searched with a "quick search" field that quickly narrows the list down via a substring search.
Add-ons
publishing add-ons addons.mozilla.org, commonly known as "amo," is mozilla's official site for developers to list add-ons, and for users to discover them.
... you are not required to list your add-on on amo, but your add-on must be signed by mozilla else users will not be able to install it.
Application cache implementation overview
during the load, manifest is parsed according the “parsing the cache manifest” html5 spec, and lists of entries and namespaces are collected.
...if so, the update switches to downloading state and fetches in parallel items listed in the manifest by call to nsofflinecacheupdate::processnexturi().
Testopia
bugzilla 4.x mysql 5.0 or postgresql 8.3 mozilla compatible browser ;-) additional perl modules: text::csv xml::schema validator xml::schema::parser (for importer) and json 2.10 todo user preferences notification emails more reports see the roadmap and bug list for more details.
... links faq wiki docs bugs (please read the bug reporting guide) official testopia blog irc: #testopia or #bugzilla user help support-webtools@lists.mozilla.org developers dev-apps-webtools@lists.mozilla.org downloads download 2.5 (bugzilla 4.2) download 2.4 (bugzilla 3.6 and 4.0) archived versions developers greg hendricks vance baarda (former developer) ed fuentetaja (former developer) ...
Installing headers using EXPORTS
for normal headers that are to be exported, you should set exports to the list of headers to be exported.
...for xpidl-generated headers, you should set xpidlsrcs to the list of idl files to export.
Eclipse CDT Manual Setup
the status bar at the bottom right of the window should now show that eclipse is "refreshing the workspace" (gathering a list of all the files in the source tree).
...you should be able to use the list of unresolved includes to help figure out what the problem is (see also the parser errors section for more troubleshooting tips).
Developer guide
developer forums a topic-specific list of discussion forums and mailing lists where you can talk about mozilla development issues.
... mozilla platform development cheat sheet (archive.org) brian bondy's list of frequently referenced information for platform developers.
Limitations of frame scripts
this article lists the most important of these apis.
... this is one of a pair of articles: the other one lists limitations of chrome scripts.
Limitations of frame scripts
this article lists the most important of these apis.
...by default, about: pages (except for a small whitelist) are loaded in the chrome process when browsed to from the awesomebar.
mozbrowsericonchange
sizes a domstring listing the sizes the new icon is available in, e.g.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
Chrome-only API reference
MozillaGeckoChromeAPI
this page lists apis that only run in gecko chrome code (and sometimes in other privileged circumstances).
... note: most of the apis exposed to the web in general are also usable in chrome code: see web apis for a list of these.
Chrome-only CSS reference
MozillaGeckoChromeCSS
this page lists css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
... ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentation for a list of these.
MozBeforePaint
<body> <div id="d" style="width:100px; height:100px; background:lime; position:relative;"></div> <script> var d = document.getelementbyid("d"); var start = window.mozanimationstarttime; function step(event) { var progress = event.timestamp - start; d.style.left = math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozrequestanimationframe(); } else { window.removeeventlistener("mozbeforepaint", step, false); } } window.addeventlistener("mozbeforepaint", step, false); window.mozrequestanimationframe(); </script> </body> </html> as you can see, each time the mozbeforepaint event fires, our step() method is called.
...when the animation sequence completes, removes the event listener.
Gecko Chrome
chrome-only api referencethis page lists apis that only run in gecko chrome code (and sometimes in other privileged circumstances.)chrome-only css referencethis page lists css properties that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
... ua stylesheets.) chrome-only events referencethis page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
Getting from Content to Layout
restyling the restyletracker maintains a list of restyles to process.
... a list of restyle roots (places in the content tree where all descendants need to be restyled but nothing on the parent chain does) are also stored.
IPDL Tutorial
see ipc/ipdl/ipdl/builtin.py for the most up-to-date list of automatically imported types.
...the returns keyword marks the beginning of the list of values that are returned in the reply to the message.
JavaScript-DOM Prototypes in Mozilla
one of these interfaces is nsidomhtmlimageelement, others are nsidomnshtmlimageelement (netscape extensions to the standard interface), nsidomeventtarget, nsidomeventlistener, nsidom3node, and so on.
...a few examples of class constructor names would be htmlimageelement, htmldocument, element, nodelist, and two examples of class prototype names would be node and characterdata.
Code Samples
add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you get a profile-before-change message to do cleanup for your add-on on uninstall.
... var beinguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = true; } }, onoperationcancelled: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = (addon.pendingoperations & addonmanager.pending_uninstall) != 0; } } } try { components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.addaddonlistener(listener); } catch (ex) {} ...
Add-on Repository
the api also offers two ways to search for and retrieve an array of addon instances: retrieverecommendedaddons(), which returns a list of recommended add-ons, and searchaddons(), which performs a search of the repository.
...the list of recommended add-ons frequently changes.
Download
this object is transient, though it can be included in a downloadlist so that it can be managed by the user interface and persisted across sessions.
... warning: this property cannot be used if the download is part of a downloadlist.
FxAccountsOAuthClient.jsm
example: "https://accounts.firefox.com" [optional] scope - a colon-separated list of scopes that the user has authorized.
...registers a webchannel listener and sets up a callback if needed.
Services.jsm
le, to obtain a reference to the preferences service: var prefsservice = services.prefs; provided service getters service accessor service interface service name androidbridge nsiandroidbridge 1 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 ...
...er.jsm dirsvc nsidirectoryservice nsiproperties directory service domstoragemanager nsidomstoragemanager dom storage manager domrequest nsidomrequestservice domrequest service downloads nsidownloadmanager download manager droppedlinkhandler nsidroppedlinkhandler dropped link handler service els nsieventlistenerservice event listener service etld nsieffectivetldservice effectivetld service focus nsifocusmanager focus manager io nsiioservice nsiioservice2 i/o service locale nsilocaleservice locale service logins nsiloginmanager password manager service metro nsiwinmetroutils 2 mm nsimessagebroa...
Webapps.jsm
vitiesforapps: function(aappstoregister, arunupdate) _registeractivities: function(amanifest, aapp, arunupdate) _createactivitiestounregister: function(amanifest, aapp, aentrypoint) _unregisteractivitiesforapps: function(aappstounregister) _unregisteractivities: function(amanifest, aapp) _processmanifestforids: function(aids, arunupdate) observe: function(asubject, atopic, adata) addmessagelistener: function(amsgnames, aapp, amm) removemessagelistener: function(amsgnames, amm) formatmessage: function(adata) receivemessage: function(amessage) getappinfo: function getappinfo(aappid) broadcastmessage: function broadcastmessage(amsgname, acontent) registerupdatehandler: function(ahandler) unregisterupdatehandler: function(ahandler) notifyupdatehandlers: function(aapp, amanifest, azi...
...ppath) _getappdir: function(aid) _writefile: function(apath, adata) dogetlist: function() doexport: function(amsg, amm) doimport: function(amsg, amm) doextractmanifest: function(amsg, amm) dolaunch: function (adata, amm) launch: function launch(amanifesturl, astartpoint, atimestamp, aonsuccess, aonfailure) close: function close(aapp) canceldownload: function canceldownload(amanifesturl, aerror) startofflinecachedownload: function(amanifest, aapp, aprofiledir, aisupdate) computemanifesthash: function(amanifest) updateapphandlers: function(aoldmanifest, anewmanifest, aapp) checkforupdate: function(adata, amm) doinstall: function doinstall(adata, amm) doinstallpackage: function doinstallpackage(adata, amm) pushcontentaction: function(windowid) popcontentaction: function(windowid...
Application Translation with Mercurial
for a windows user, it looks like c:\users\myname , depending on your windows version: cd /c/users/myname now list all the files here: ls -a if there is no file called .hgrc , create it with > .hgrc this file stores your general mercurial settings (mercurial is the tool which manages the source code and its history of changes).
...the interesting part follows below as list of missing texts.
Localization content best practices
as a native english speaker, you might find it natural to use delete-cookie = delete cookie delete-cookies = delete cookies in firefox this should be # localization note (delete-cookies): semi-colon list of plural forms.
...there is also a dev-l10n mailing list and a l10n-community chat room on matrix; they might be a good place to ask questions.
Localizing extension metadata on addons.mozilla.org
in step 2, you'll be asked to provide the attributes listed above in the add-on's default locale (selected in step 1).
...here is a list of the codes: arabic (ar), catalan (ca), czech (cs), danish (da), german (de), greek (el), basque (eu), spanish (es-es), farsi (fa), finnish (fi), french (fr), gaeilge (ga-ie), hebrew (he), hungarian (hu), indonesian (id), italian (it), japanese (ja), korean (ko), mongolian (mn), dutch (nl), polish (pl), brazilian portuguese (pt-br), european portuguese (pt-pt), romanian (ro), russian (ru), slov...
Patching a Localization
prerequisites if you are to the point that you are patching existing localizations, we assume that you have the basic set of tools listed on the l10n prerequisites wiki page.
... hg diff this command creates a patch and lists your modifications through displaying the differences in a unified patch's files.
Release phase
here's how that's done: run this command to see recent commits in your local clone: $ hg log -l 3 you should a list of the most recent commits, similar to this one: changeset: 0:7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings now run the hg outgoing command to compare the local repository on your machine with the remote repository on hg.mozilla.org.
... the hg outgoing command compares the two repositories and lists all changesets that are present locally, but not in the remote repository.
Localization technical reviews
localizers can specify the team responsible for the work by listing the name just after the moz_langpack_creator.
... search plugins similar to the region.properties files, the list.txt file should be reverted to en-us and amended accordingly as the search plugin productization bugs are completed.
Mozilla Framework Based on Templates (MFBT)
(an unnamed temporary lives for a shorter period of time than the scope where it's found, so it usually isn't what was desired.) data structures linkedlist.h implements a type-safe doubly-linked list class.
... most new code should use this rather than prclist.
Fonts for Mozilla's MathML engine
typically, use a fontconfig configuration /etc/fonts/conf.avail/09-texlive-fonts.conf that points to the opentype directory of texlive, such as: <?xml version="1.0"?> <!doctype fontconfig system "fonts.dtd"> <fontconfig> <dir>/your/path/to/texmf-dist/fonts/opentype</dir> </fontconfig> finally, add this configuration file to the system font location list and regenerate the fontconfig cache: ln -sf /etc/fonts/conf.avail/09-texlive-fonts.conf /etc/fonts/conf.d/ fc-cache -sf android you must use the mathml-fonts add-on.
...a list of such math fonts is provided below.
MathML In Action
addeventlistener("click", zoomtoggle, false); } window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if x < 0 u + if x > 0 or other complex markups like these ell ^ y ( z ; z , τ ) := ∫ y ( ∏ l ( y l 2 π i ) θ ( y l 2 π i - z ) θ...
...your feedback can be manifested by putting mathml content on the web, reporting bugs in bugzilla, and, if you can help with code, inspecting/improving the current code, and/or picking up an item in the todo list.
Using the viewport meta tag to control layout on mobile browsers
for example, safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.
... <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86"> common viewport sizes for mobile and tablet devices if you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here.
Mozilla Port Blocking
modifying mozilla's port blocking at run time users can modify the default port blocking through the addition of preferences containing comma delimited lists of port numbers to the user.js file (for single users with the user_pref(…) command) in the user's profile directory.
... more information nsioservice.cpp gbadportlist bug 83401 vulnerability note vu#476267 dougt@netscape.com original document information author(s): doug turner last updated date: august 15, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Mozilla Quirks Mode Behavior
the following is a rough list of the differences that exist between mozilla's standards mode and quirks mode behavior.
... obsolete since gecko 50 list bullets do not inherit the font size of the list (bug 97351).
Activity Monitor, Battery Status Menu and top
the weightings of each factor can be found in one of the the files in /usr/share/pmenergy/mac-<id>.plist, where <id> can be determined with the following command.
...if a laptop is closed for several hours and then reopened, those hours are not included in the calculation.) battery status menu when you click on the battery icon in the os x menu bar you get a drop-down menu that includes a list of “apps using significant energy”.
Gecko Profiler FAQ
this documents lists a number of questions asked by people in preparation for a tutorial session about the gecko profiler.
...the profile contains markers for dom events, and those include user-generated events like mouse clicks, but these markers are only exposed as a huge unsearchable list in the markers tab.
Profiling with Xperf
start recording data: xperf -on latency -stackwalk profile "latency" is a special provider name that turns on a few predefined kernel providers; run "xperf -providers k" to view a full list of providers and groups.
...all lead to the same summary graphs), 3 types of allocations are listed -- aifi, aifo, aofi.
Patches and pushes
each plugin is stored as an xml file, with list.txt containing the names of each plugin.
... in list.txt, add the search plugin's xml filename (without extensions) on a new line and save.
Optimizing Applications For NSPR
however, having lots of them (100s or even 1000s) is unrealistic.
...also, the new socket created by an <tt>pr_accept()</tt> call on a listening socket inherits the mode of the listening socket, and cannot be changed.
Dynamic Library Linking
dynamic library search path exporting symbols from the main executable program dynamic library search path the dynamic library search path is the list of directories in which to look for a dynamic library.
... each platform has its own standard directories in which to look for dynamic libraries, plus a customizable list of directories specified by an environment variable.
PRProtoEnt
p_aliases pointer to a pointer to a list of aliases.
... the list is terminated with a null entry.
NSS CERTVerify Log
*/ unsigned int depth; /* how far up the chain are we */ void *arg; /* error specific argument */ struct certverifylognodestr *next; /* next in the list */ struct certverifylognodestr *prev; /* next in the list */ }; the list is a doubly linked null terminated list sorted from low to high based on depth into the cert chain.
... when you are through, you will need to walk the list and free all the cert entries, then free the arena.
Introduction to Network Security Services
for a complete list of public functions exported by these shared libraries in nss 3.2, see nss functions.
... figure 1, below, shows a simplified view of the relationships among the three shared libraries listed above and nspr, which provides low-level cross platform support for operations such as threading and i/o.
JSS 4.4.0 Release Notes
bugs fixed in jss 4.4.0 this bugzilla query returns all the bugs fixed in nss 4.4.0: https://bugzilla.mozilla.org/buglist.cgi?product=jss&target_milestone=4.4&target_milestone=4.4&bug_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme platform information you can check out the source from mercurial via hg clone -r 055aa3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.7 or higher we suggest...
...furthermore, applications that restrict their use of jss apis to the functions listed in jss public functions will remain compatible with future versions of the jss shared libraries.
NSS_3.11.10_release_notes.html
1: add diginotar root ca root to nss bug 431772: add network solutions and diginotar root certs to nss bug 442912: fix nssckbi version number on 3.11 branch bug 443045: fix pk11_generatekeypair for ecc keys on the 3.11 branch bug 444850: nss misbehaves badly in the presence of a disabled pkcs#11 slot bug 462948: lint warnings for source files that include keythi.h documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
... furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS_3.12.2_release_notes.html
bug 459359: forwardbuilderstate object is leaked when aia path incorrect bug 459481: nss build problem with gcc 3.4.6 on os/2 documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
... furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.12.5 release_notes
bug 525056: timing attack against ssl3ext.c:ssl3_serverhandlesessionticketxtn() bug 526689: ssl3 & tls renegotiation vulnerability documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
... furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.12.9 release notes
code for bad crl distribution point urls bug 619268: memory leaks in cert_changecerttrust and cert_savesmimeprofile bug 585518: addtrust qualified ca root serial wrong in certdata.txt trust entry bug 337433: need cert_findcertbynicknameoremailaddrbyusage bug 592939: expired cas in certdata.txt documentation <for a="" class="new " documentation="" href="/en/index.html#documentation" list="" nss="" of="" pages="" primary="" rel="internal" see="" the="" title="en/index.html#documentation">nss documentation.
... furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.14.1 release notes
bugs fixed in nss 3.14.1 the following bugzilla query returns all of the bugs fixed in nss 3.14.1: https://bugzilla.mozilla.org/buglist.cgi?list_id=5216669;resolution=fixed;query_format=advanced;bug_status=resolved;bug_status=verified;target_milestone=3.14.1;product=nss compatability nss 3.14.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.14.3 release notes
bugs fixed in nss 3.14.3 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.14.3;product=nss compatibility nss 3.14.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.14.4 release notes
bugs fixed in nss 3.14.4 https://bugzilla.mozilla.org/buglist.cgi?bug_id=894370%2c832942%2c863947&bug_id_type=anyexact&list_id=8338081&resolution=fixed&classification=components&query_format=advanced&product=nss compatibility nss 3.14.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.14.5 release notes
bugs fixed in nss 3.14.5 https://bugzilla.mozilla.org/buglist.cgi?bug_id=934016&bug_id_type=anyexact&resolution=fixed&classification=components&query_format=advanced&product=nss compatibility nss 3.14.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.15.1 release notes
bugs fixed in nss 3.15.1 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.15.1;product=nss compatibility nss 3.15.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.15.2 release notes
a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.2&product=nss&list_id=7982238 compatibility nss 3.15.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.15.3.1 release notes
bugs fixed in nss 3.15.3.1 bug 946351 - misissued google certificates from dcssi a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3.1&product=nss compatibility nss 3.15.3.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.15.3 release notes
bugs fixed in nss 3.15.3 bug 850478 - list rc4_128 cipher suites after aes_128 cipher suites bug 919677 - don't advertise tls 1.2-only ciphersuites in a tls 1.1 clienthello a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3&product=nss compatibility nss 3.15.3 shared libraries are backwar...
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.15.4 release notes
bugs fixed in nss 3.15.4 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.4&product=nss compatibility nss 3.15.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.15 release notes
the list of root ca certificates in the nssckbi module has been updated.
... bugs fixed in nss 3.15 this bugzilla query returns all the bugs fixed in nss 3.15: https://bugzilla.mozilla.org/buglist.cgi?list_id=6278317&resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.15 ...
NSS 3.16.3 release notes
nss 3.16.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_3_rtm/src/ new in nss 3.16.3 this release consists primarily of ca certificate changes as listed below, and fixes an issue with a recently added utility function.
...tes and code signing trust bits (1024-bit root) cn = netlock expressz (class c) tanusitvanykiado sha1 fingerprint: e3:92:51:2f:0a:cf:f5:05:df:f6:de:06:7f:75:37:e1:65:ea:57:4b turned off websites and code signing trust bits (1024-bit root) bugs fixed in nss 3.16.3 this bugzilla query returns all the bugs fixed in nss 3.16.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.3 ...
NSS 3.16.4 release notes
nss 3.16.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_4_rtm/src/ new in nss 3.16.4 this release consists primarily of ca certificate changes as listed below, and includes a small number of bug fixes.
... bugs fixed in nss 3.16.4 this bugzilla query returns all the bugs fixed in nss 3.16.4: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.4 ...
NSS 3.17.1 release notes
bugs fixed in nss 3.17.1 this bugzilla query returns all the bugs fixed in nss 3.17.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.1 acknowledgements the nss development team would like to thank antoine delignat-lavaud, security researcher at inria paris in team prosecco, and the advanced threat research team at intel security, who both independently discovered and reported this issue, for responsibly disclosing the issue...
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.17.2 release notes
bugs fixed in nss 3.17.2 this bugzilla query returns all the bugs fixed in nss 3.17.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.2 compatibility nss 3.17.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.17.3 release notes
ha1 fingerprint: d1:cb:ca:5d:b2:d5:2a:7f:69:3b:67:4d:e5:f0:5a:1d:0c:95:7d:f0 cn = globalsign ecc root ca - r4 sha1 fingerprint: 69:69:56:2e:40:80:f4:24:a1:e7:19:9f:14:ba:f3:ee:58:ab:6a:bb cn = globalsign ecc root ca - r5 sha1 fingerprint: 1f:24:c6:30:cd:a4:18:ef:20:69:ff:ad:4f:dd:5f:46:3a:1b:69:aa the version number of the updated root ca list has been set to 2.2 bugs fixed in nss 3.17.3 this bugzilla query returns all the bugs fixed in nss 3.17.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.3 compatibility nss 3.17.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.17.4 release notes
bugs fixed in nss 3.17.4 this bugzilla query returns all the bugs fixed in nss 3.17.4: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.4 compatibility nss 3.17.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.18 release notes
ha1 fingerprint: 8c:f4:27:fd:79:0c:3a:d1:66:06:8d:e8:1e:57:ef:bb:93:22:72:d4 cn = entrust root certification authority - ec1 sha1 fingerprint: 20:d8:06:40:df:9b:25:f5:12:25:3a:11:ea:f7:59:8a:eb:14:b5:47 cn = cfca ev root sha1 fingerprint: e2:b8:29:4b:55:84:ab:6b:58:c2:90:46:6c:ac:3f:b8:39:8f:84:83 the version number of the updated root ca list has been set to 2.3 bugs fixed in nss 3.18 this bugzilla query returns all the bugs fixed in nss 3.18: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18 compatibility nss 3.18 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.19.1 release notes
the minimum size of keys that nss will generate, import, or use has been raised: the minimum modulus size for rsa keys is now 512 bits the minimum modulus size for dsa keys is now 1023 bits the minimum modulus size for diffie-hellman keys is now 1023 bits bugs fixed in nss 3.19.1 this bugzilla query returns all the bugs fixed in nss 3.19.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.1 acknowledgements the nss development team would like to thank matthew green and karthikeyan bhargavan for responsibly disclosing the issue in bug 1138554.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.19.2 release notes
bugs fixed in nss 3.19.2 this bugzilla query returns all the bugs fixed in nss 3.19.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.2 compatibility nss 3.19.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.19 release notes
bugs fixed in nss 3.19 this bugzilla query returns all the bugs fixed in nss 3.19: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1086145.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.20 release notes
bugs fixed in nss 3.20 this bugzilla query returns all the bugs fixed in nss 3.20: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.20 compatibility nss 3.20 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.21 release notes
sha1 fingerprint: fb:ed:dc:90:65:b7:27:20:37:bc:55:0c:9c:56:de:bb:f2:78:94:e1 cn = ca wosign ecc root sha1 fingerprint: d2:7a:d2:be:ed:94:c0:a1:3c:c7:25:21:ea:5d:71:be:81:19:f3:2b cn = oiste wisekey global root gb ca sha1 fingerprint: 0f:f9:40:76:18:d3:d7:6a:4b:98:f0:a8:35:9e:0c:fd:27:ac:cc:ed the version number of the updated root ca list has been set to 2.6 bugs fixed in nss 3.21 this bugzilla query returns all the bugs fixed in nss 3.21: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.21 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1158489.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.26 release notes
:9a:cf:28:c5:a7:cf:e8:a3:c0:aa:e1:1a:8f:fc:ee:05:c0:bd:df:08:c6 npn is disabled, and alpn is enabled by default the nss test suite now completes with the experimental tls 1.3 code enabled several test improvements and additions, including a nist known answer test bugs fixed in nss 3.26 this bugzilla query returns all the bugs fixed in nss 3.26: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.26 compatibility nss 3.26 shared libraries are backwards compatible with all older nss 3.x shared libraries.
...applications that restrict their use of nss apis, to the functions listed in nss public functions, will remain compatible with future versions of the nss shared libraries.
NSS 3.27.1 release notes
however, some applications query the list of protocol versions that are supported by the nss library, enabling all supported tls protocol versions.
...applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.27.2 Release Notes
this can be a lengthy list.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.28 release notes
bugs fixed in nss 3.28 this bugzilla query returns all the bugs fixed in nss 3.28: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.28 compatibility nss 3.28 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.29 release notes
bugs fixed in nss 3.29 this bugzilla query returns all the bugs fixed in nss 3.29: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.29 compatibility nss 3.29 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.30 release notes
bugs fixed in nss 3.30 this bugzilla query returns all the bugs fixed in nss 3.30: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.30 compatibility nss 3.30 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.32 release notes
(cve-2018-5149, bug 1361197) this bugzilla query returns all the bugs fixed in nss 3.32: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.32 compatibility nss 3.32 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.36.1 release notes
this bugzilla query returns all the bugs fixed in nss 3.36.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36.1 compatibility nss 3.36.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.36.2 release notes
this bugzilla query returns all the bugs fixed in nss 3.36.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36.2 compatibility nss 3.36.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.36 release notes
bugs fixed in nss 3.36 this bugzilla query returns all the bugs fixed in nss 3.36: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36 compatibility nss 3.36 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.37.1 release notes
this bugzilla query returns all the bugs fixed in nss 3.37.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.37.1 compatibility nss 3.37.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.38 release notes
bugs fixed in nss 3.38 this bugzilla query returns all the bugs fixed in nss 3.38: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.38 compatibility nss 3.38 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.40 release notes
the following ca certificates were removed: cn = visa ecommerce root sha-256 fingerprint: 69fac9bd55fb0ac78d53bbee5cf1d597989fd0aaab20a25151bdf1733ee7d122 bugs fixed in nss 3.40 bug 1478698 - ffdhe key exchange sometimes fails with decryption failure this bugzilla query returns all the bugs fixed in nss 3.40: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.40 compatibility nss 3.40 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.41.1 release notes
(cve-2018-18508) this bugzilla query returns all bugs fixed in 3.41.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.41.1 compatibility nss 3.41.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.41 release notes
bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) bug 1481271 - resend the same ticket in clienthello after helloretryrequest bug 1493769 - set session_id for external resumption tokens bug 1507179 - reject ccs after handshake is complete in tls 1.3 this bugzilla query returns all the bugs fixed in nss 3.41: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.41 compatibility nss 3.41 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.42.1 release notes
(cve-2018-18508) this bugzilla query returns all the bugs fixed in nss 3.42.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.42.1 compatibility nss 3.42.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.42 release notes
bug 1513913 - a fix for solaris where firefox 60 core dumps during start when using profile from version 52 this bugzilla query returns all the bugs fixed in nss 3.42: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.42 compatibility nss 3.42 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.43 release notes
this bugzilla query returns all the bugs fixed in nss 3.43: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.43 compatibility nss 3.43 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.44.2 release notes
bugs fixed in nss 3.44.2 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.44.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44.2 compatibility nss 3.44.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.44.3 release notes
bugs fixed in nss 3.44.3 bug 1579060 - don't set the constructed bit for issueruniqueid and subjectuniqueid in mozilla::pkix cve-2019-11745 - encryptupdate should use maxout, not block size this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.44 release notes
sec usage is too restrictive for existing deployments 1549608 - signature fails with dbm disabled 1549848 - allow building nss for ios using gyp 1549847 - nss's sqlite compilation warnings make the build fail on ios 1550041 - freebl not building on ios simulator 1542950 - macos cipher test timeouts this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.45 release notes
bug 1556591 - eliminate races in uses of pk11_setwrapkey bug 1558681 - stop using a global for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 - add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.45 compatibility nss 3.45 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.46.1 release notes
bugs fixed in nss 3.46.1 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.46.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46.1 compatibility nss 3.46.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.46 release notes
n bug 1564284 - support profile mobility across windows and linux bug 1573942 - gtest for pkcs11.txt with different breaking line formats bug 1575968 - add strsclnt option to enforce the use of either ipv4 or ipv6 bug 1549847 - fix nss builds on ios bug 1485533 - enable nss_ssl_tests on taskcluster this bugzilla query returns all the bugs fixed in nss 3.46: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46 compatibility nss 3.46 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.47.1 release notes
bugs fixed in nss 3.47.1 cve-2019-11745 - encryptupdate should use maxout, not block size bug 1590495 - fix a crash that could be caused by client certificates during startup bug 1589810 - fix compile-time warnings from uninitialized variables in a perl script this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.47 release notes
bug 1577038 - add pk11_getcertsfromprivatekey to return all certificates with public keys matching a particular private key this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.48.1 release notes
this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.48 release notes
13esni.c bug 1588244 - nss changes for delegated credential key strength checks bug 1459141 - add more cbc padding tests that missed nss 3.47 bug 1590339 - fix a memory leak in btoa.c bug 1589810 - fix uninitialized variable warnings from certdata.perl bug 1573118 - enable tls 1.3 by default in nss this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.49.1 release notes
this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.49.2 release notes
bug 1608327 - fix compilation problems with neon-specific code in freebl bug 1608895 - fix a taskcluster issue with python 2 / python 3 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.49 release notes
that esni is regenerated after helloretryrequest bug 1593167 - intermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1535787 - fix automation/release/nss-release-helper.py on macos bug 1594933 - disable building dbm by default bug 1562548 - improve gcm perfomance on aarch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.50 release notes
this bugzilla query returns all the bugs fixed in nss 3.50: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.50 compatibility nss 3.50 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.51 release notes
s enabled bug 1431940 - fix a null pointer dereference in blake2b_update bug 1617387 - fix compiler warning in secsign.c bug 1618400 - fix a openbsd/arm64 compilation error: unused variable 'getauxval' bug 1610687 - fix a crash on unaligned cmaccontext.aes.keyschedule when using aes-ni intrinsics this bugzilla query returns all the bugs fixed in nss 3.51: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.51 compatibility nss 3.51 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.53 release notes
ug 1438431 - remove mkdepend and "depend" make target bug 290526 - support parallel building of nss when using the makefiles bug 1636206 - hacl* update after changes in libintvector.h bug 1636058 - fix building nss on debian s390x, mips64el, and riscv64 bug 1622033 - add option to build without seed this bugzilla query returns all the bugs fixed in nss 3.53: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.53 compatibility nss 3.53 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.55 release notes
this bugzilla query returns all the bugs fixed in nss 3.55: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.55 compatibility nss 3.55 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.56 release notes
this bugzilla query returns all the bugs fixed in nss 3.56: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.56 compatibility nss 3.56 shared libraries are backward compatible with all older nss 3.x shared libraries.
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
nss tech note2
to enable this mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the output format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getinfo 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getslotlist 1024[805ef10]: rv = 0x0 2.
...osthreadid[nsprthreadid]: argn = 0xaaaaaaaa osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: pinitargs = 0x4010c938 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getinfo 1024[805ef10]: pinfo = 0xbffff340 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getslotlist 1024[805ef10]: tokenpresent = 0x0 1024[805ef10]: pslotlist = 0x0 1024[805ef10]: pulcount = 0xbffff33c 1024[805ef10]: *pulcount = 0x2 1024[805ef10]: rv = 0x0 note that when a pkcs #11 function takes a pointer argument for which it will set a value (c_getslotlist above), this mode will display the value upon return.
nss tech note4
there is a long list of pre-defined oids, and new ones can be added dynamically by an application.
...t secitem *b); interpreting a secitem value as an integer if secitem *item->len <=4, then int value = der_getinteger(item); interpreting a secitem value as a string use string copy functions to copy item->len bytes from item->data and null terminate explicitly some higher level extension functions get a specific extension from the list of extensions, given the extension tag secstatus cert_findcertextension (certcertificate *cert, int tag, secitem *value); get a specific extension from the issuer's cert secstatus cert_findissuercertextension (certcertificate *cert, int tag, secitem *value); get the value of an extension with the given oid secstatus cert_findcertextensionb...
NSS Tools sslstrength
synopsis 1) sslstrength ciphers 2) sslstrength hostname[:port] [ciphers=xyz] [debug] [verbose] [policy=export|domestic] description the first form simple lists out the possible ciphers.
...you can obtain this list of character->cipher mappings by doing 'sslstrength ciphers'.
NSS release notes template
bugs fixed in nss 3.xx this bugzilla query returns all the bugs fixed in nss 3.xx: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.xx (make a link) acknowledgements the nss development team would like to thank ...
...furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
Notes on TLS - SSL 3.0 Intolerant Servers
there might be servers other than those listed above which exhibit this problem.
...for up-to-date information, you can read this bug 59321 which keeps a list of tls/ssl 3.0 intolerant servers.
NSS PKCS11 Functions
a full list is below: configdir the location of the databases for this token.
...flags a comma separated list of flag values, parsed case-insensitive.
PKCS 7 functions
the public functions listed here perform pkcs #7 operations required by mail and news applications and by some of the nss tools.
... 3.3 and later sec_pkcs7encodeitem mxr 3.9.3 and later sec_pkcs7encoderabort mxr 3.9 and later sec_pkcs7encoderfinish mxr 3.2 and later sec_pkcs7encoderstart mxr 3.2 and later sec_pkcs7encoderupdate mxr 3.2 and later sec_pkcs7getcertificatelist mxr 3.2 and later sec_pkcs7getcontent mxr 3.2 and later sec_pkcs7getencryptionalgorithm mxr 3.2 and later sec_pkcs7getsignercommonname mxr 3.4 and later sec_pkcs7getsigneremailaddress mxr 3.4 and later sec_pkcs7getsigningtime mxr 3.4 and later ...
FC_Finalize
examples #include <assert.h> ck_function_list_ptr pfunctionlist; ck_rv crv; crv = fc_getfunctionlist(&pfunctionlist); assert(crv == ckr_ok); ...
... /* invoke fc_finalize as pfunctionlist->c_finalize */ crv = pfunctionlist->c_finalize(null); see also fc_initialize, nsc_initialize, nsc_finalize ...
FC_GetInfo
#include <assert.h> #include <stdio.h> ck_function_list_ptr pfunctionlist; ck_rv crv; ck_info info; crv = fc_getfunctionlist(&pfunctionlist); assert(crv == ckr_ok); ...
... /* invoke fc_getinfo as pfunctionlist->c_getinfo */ crv = pfunctionlist->c_getinfo(&info); assert(crv == ckr_ok); printf("general information about the pkcs #11 library:\n"); printf(" pkcs #11 version: %d.%d\n", (int)info.cryptokiversion.major, (int)info.cryptokiversion.minor); printf(" manufacturer id: %.32s\n", info.manufacturerid); printf(" flags: 0x%08lx\n", info.flags); printf(" library description: %.32s\n", info.librarydescription); printf(" library version: %d.%d\n", (int)info.libraryversion.major, (int)info.libraryversion.minor); printf("\n"); see also nsc_getinfo ...
FC_Initialize
examples #include <assert.h> ck_function_list_ptr pfunctionlist; ck_rv crv; ck_c_initialize_args initargs; crv = fc_getfunctionlist(&pfunctionlist); assert(crv == ckr_ok); initargs.createmutex = null; initargs.destroymutex = null; initargs.lockmutex = null; initargs.unlockmutex = null; initargs.flags = ckf_os_locking_ok; initargs.libraryparameters = "..."; initargs.preserved = null; /* invoke fc_initialize as pfunctionlist->c_initialize *...
.../ crv = pfunctionlist->c_initialize(&initargs); see also fc_finalize ...
NSS cryptographic module
the standard pkcs #11 function c_getfunctionlist or the equivalent nsc_getfunctionlist function returns pointers to the functions that implement the default mode of operation.
... to enable the fips mode of operation, use the function fc_getfunctionlist instead to get pointers to the functions that implement the fips mode of operation.
NSS tools : vfychain
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
...mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
gtstd.html
the security module database tool allows you to add and delete pkcs #11 modules, change passwords, set defaults, list module contents, enable or disable slots, enable or disable fips-140-1 compliance, and assign default providers for cryptographic operations.
... if you create your own makefiles, be sure to include the libraries in the same order that they are listed in the sample makefiles.
NSS Tools sslstrength
synopsis 1) sslstrength ciphers 2) sslstrength hostname[:port] [ciphers=xyz] [debug] [verbose] [policy=export|domestic] description the first form simple lists out the possible ciphers.
...you can obtain this list of character->cipher mappings by doing 'sslstrength ciphers'.
NSS tools : signver
MozillaProjectsNSStoolssignver
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are designed to be shared, these are the shared database type.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
NSS tools : vfychain
modutil can add and delete pkcs #11 modules, change passwords on security databases, set defaults, list module contents, enable or disable slots, enable or disable fips 140-2 compliance, and assign default providers for cryptographic operations.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
Necko Interfaces Overview
http) maps uri string to nsiuri instance via newuri method creates nsichannel instance from nsiuri instance via newchannel method nsistreamlistener : nsirequestobserver implemented by the consumer of a nsichannel instance passed to nsichannel::asyncopen method nsirequestobserver::onstartrequest - notifies start of async download nsistreamlistener::ondataavailable - notifies presence of downloaded data nsirequestobserver::onstoprequest - notifies completion of async download, possibly w/ error nsiloadgroup : nsirequest attribute...
...an be canceled at once via the load group's nsirequest::cancel method nsitransport represents a physical connection, such as a file descriptor or a socket used directly by protocol handler implementations (as well as by mailnews and chatzilla) synchronous i/o methods: openinputstream, openoutputstream asynchronous i/o methods: asyncread, asyncwrite nsitransport::asyncread takes a nsistreamlistener parameter original document information author(s): darin fisher last updated date: december 10, 2001 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Rhino license
* * redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * * - redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer.
... * * - redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution.
Bytecode Descriptions
bytecode listing this document is automatically generated from opcodes.h by make_opcode_doc.py.
...msgnumber must be one of the error codes listed in js/src/js.msg; it determines the .message and [[prototype]] of the new error object.
Bytecodes
bytecode listing all opcodes are annotated with a [-popcount, +pushcount] to represent the overall stack-effects their execution.
... bytecode listing was moved to spidermonkey internals: bytecode descriptions page.
Tracing JIT
a running tally is kept of assignments between registers and lir operands, and any time a new lir operand is required in a register a new one is assigned from the list of free registers.
...the monitor also keeps track of how many times it has attempted to record a trace starting at each pc value, so if a particular pc causes too many aborted recordings, the monitor blacklists the pc and will not attempt recording it any longer.
Self-hosted builtins in SpiderMonkey
of note, it provides implementations of list and record, types defined in the ecmascript specifications that are similar to array and object, but can't be modified by application code.
...if it doesn't fit into any of those, create a new .js file in that directory and add it to the selfhosted.inputs list in moz.build.
Introduction to the JavaScript shell
for a list of other javascript shells, see javascript shells.
... note: this list is incomplete and overlaps with shell global objects.
JS_ContextIterator
if *iterp is null, js_contextiterator modifies it to point to the first jscontext in the list.
... otherwise *iterp must point to an existing context in rt, and js_contextiterator modifies it to point to the next context in the list, if any, and null otherwise.
SpiderMonkey: The Mozilla JavaScript runtime
bytecode descriptions listing of spidermonkey's bytecodes.
... spidermonkey internals: gc separate internals article on the gc spidermonkey internals: hacking tips collection of helpful tips & tools for hacking on the engine related topics javascript foss projects using or based on spidermonkey releases spidermonkey release notes current and past versions: 52, 45, 38, 31, 24, 17 community mailing list spidermonkey questions on stack overflow report a bug ...
Retrieving part of the bookmarks tree
as long as the container is open, it will listen for notifications from the bookmarks system to keep itself up-to-date.
...complete code listing var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var options = historyservice.getnewqueryoptions(); var query = historyservice.getnewquery(); var bookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .gets...
Using the Places annotation service
andling was changed to this: type_int32 = 1 type_double = 2 type_string = 3 type_binary = 4 type_int64 = 5 try { var value = annotationservice.getpageannotation(uri, "my_extension/some_annotation"); } catch(e) { // annotation does not exist } other functions getpageswithannotation(aname, resultcount, results); getitemswithannotation(aname, resultcount, results); retrieves a list of all pages/items with the given annotation.
... getpageannotationnames(auri, count, result); getitemannotationnames(aitem, count, result); retrieves a list of all the annotations on a given uri or id.
extIApplication
contains a list of all installed extensions.
... getextensions(acallback) calls acallback with the list of installed extensions.
extIPreferenceBranch
all readonly attribute nsivariant array of extipreference listing all preferences in this branch.
... see bug 481044 void reset() parameters return value examples var myext = application.extensions.get('myapplicationid'); function myfunc (event) { application.console.log('change!'); }; myext.prefs.get("myprefname").events.addlistener("change", myfunc); see also fuel (firefox), steel (thunderbird) and smile (seamonkey) known issues bug 488587 - function registered as fuel preference listener not always called ...
XML Extras
other test cases for each of the implemented components listed above exist in extensions/xmlextras/tests/.
... domparser creation not available new domparser() xmlserializer creation not available new xmlserializer() minimal documentation for the components listed above can be found using mozilla documentation generated by doxygen.
Avoiding leaks in JavaScript XPCOM components
for example, if an object's constructor adds the object to a list that is reachable from a global variable and nothing ever removes it from the list, the object will never be destroyed since it is always reachable from the list.
... it's also worth noting that failing to unregister an observer that's attached to something temporary (such as a controller or event listener) can cause the garbage collector to take an extra cycle to clean up everything that was associated with a document if the temporary object itself is destroyed as a result of garbage collection.
Creating XPCOM components
es subclassing nsisupports the web locking interface implementing weblock declaration macros representing return values in xpcom xpidl code generation getting the weblock service from a client implementing the iweblock interface the directory 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 other resources weblock.css image resources packaging weblock component installation overview archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading and setting the sdk building a microsoft visual cpp project creating a new project adding the gecko sdk to the project settings building a windows project a makefile for unix appendix b - resources weblock resources gecko resources xpcom resour...
XPCOM hashtable guide
in these situations, an array, a linked-list, or various tree data structures are more efficient.
... there are a number of builtin hash keys available in nshashkeys.h, the more useful of which are listed below.
Interfacing with the XPCOM cycle collector
//if your class is a wrapper cache: //ns_impl_cycle_collection_unlink_preserved_wrapper tmp->msomeobj = nullptr; ns_impl_cycle_collection_unlink_end in the destructor, you should call mozilla::dropjsobjects(this); in your traverse method you need to list members involved in the cycle collector, i-e no js objects: ns_impl_cycle_collection_traverse_begin(nsfoo) ...
...unfortunately this macro defines the trace method and so you can't list your js object; hence, you need to also manually implmenet trace and unlink as above.
Components.utils
please keep this list in sync with the components object page methods method description cloneinto() create a structured clone of an object in a different javascript context.
... importglobalproperties() specify a list of constructors to import into the scope.
Community
if you know of useful mailing lists, newsgroups, forums, or other communities related to pyxpcom, please link to them here.
... activestate python xpcom bindings mailing list discussion of the bindings between the python language and the xpcom (cross-platform com) technology from the mozilla project.
IAccessibleEditableText
the old attributes are replaced by the new list of attributes.
...attributes set of attributes that replaces the old list of attributes of the specified text portion.
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.
nsIAccessible
used for tree items, list items, tab panel labels, radio buttons, etc.
... indexinparent the 0-based index of this accessible in its parent's list of children, or -1 if this accessible does not have a parent.
nsIAccessibleEditableText
the old attributes are replaced by the new list of attributes.
... attributes the set of attributes that replaces the old list of attributes of the specified text portion.
nsIAccessibleEvent
accessible/public/nsiaccessibleevent.idlscriptable an interface for accessibility events listened to by in-process accessibility clients, which can be used to find out how to get accessibility and dom interfaces for the event and its target.
... example to listen to in-process accessibility invents, make your object an nsiobserver, and listen for accessible-event by using code something like this: nscomptr<nsiobserverservice> observerservice = do_getservice("@mozilla.org/observer-service;1", &rv); if (ns_succeeded(rv)) { rv = observerservice->addobserver(this, "accessible-event", pr_true); } ...
nsIAccessibleStates
for example, a list box can have both state_invisible and state_offscreen set.
... in this case, the client application can communicate all items in the list to users.
nsIBrowserSearchService
confirm a boolean value indicating whether the user should be asked for confirmation before this engine is added to the list.
... if this value is false, the engine will be added to the list upon successful load, but it will not be selected as the current engine.
nsIClassInfo
see nsiprogramminglanguage.constants for a list of possible values.
... getinterfaces() this method returns an ordered list of interfaces iids that instances of the class promise to implement.
nsIClipboardDragDropHooks
trans the transferable holding the list of flavors and the data for each flavor.
...trans the transferable holding the list of flavors and the data for each flavor.
nsIDOMFileException
last changed in gecko 1.9 (firefox 3) attributes attribute type description code unsigned short the error code describing the error condition that took place; see the constants list for details.
... see also nsidomfile nsidomfilelist nsidomfilereader ...
nsIDOMWindow2
attributes attribute type description applicationcache nsidomofflineresourcelist the application cache object for this window.
...this is useful for connecting event listeners to this window as well as every other window nested in that window root.
nsIDirectoryServiceProvider2
nsisimpleenumerator getfiles( in string prop ); parameters prop the symbolic name of the file list.
... return value an enumerator for a list of file locations.
nsIDownloader
netwerk/base/public/nsidownloader.idlscriptable a special implementation of a nsistreamlistener that will make the contents of the stream available as a file.
... inherits from: nsistreamlistener last changed in gecko 1.7 method overview void init(in nsidownloadobserver observer, in nsifile downloadlocation); methods init() initialize this downloader.
nsIEditor
i.outputtostring('text/html', 8); // xml: all in xml with _moz_dirty="" in new tags, html tags are in upper case // application/xhtml+xml format do the same editorapi.outputtostring('text/xml', 2); // the body is not recognized, everything is printed void outputtostream(in nsioutputstream astream, in astring formattype, in acstring charsetoverride, in unsigned long flags); listener methods void addeditorobserver(in nsieditorobserver observer);obsolete since gecko 18 void seteditorobserver(in editactionlistener observer); void removeeditorobserver(in nsieditorobserver observer obsolete since gecko 18); void addeditactionlistener(in nsieditactionlistener listener); void removeeditactionlistener(in nsieditactionlistener listener...
...); void adddocumentstatelistener(in nsidocumentstatelistener listener); void removedocumentstatelistener(in nsidocumentstatelistener listener); debug methods void dumpcontenttree(); void debugdumpcontent() ; void debugunittests(out long outnumtests, out long outnumtestsfailed); [notxpcom] boolean ismodifiablenode(in nsidomnode anode); constants load flags constant value description enone 0 enext 1 eprevious 2 enextword 3 epreviousword 4 etobeginningofline 5 etoendofline 6 attributes attribute type description contentsmimetype string the mime typ...
nsIEditorIMESupport
obsolete since gecko 2.0 void setcompositionstring(in domstring acompositionstring, in nsiprivatetextrangelistptr atextrange, in nstexteventreplyptr areply); native code only!
...void setcompositionstring( in domstring acompositionstring, in nsiprivatetextrangelistptr atextrange, in nstexteventreplyptr areply ); parameters acompositionstring atextrange areply ...
nsIEffectiveTLDService
to use this service, use: var etldservice = components.classes["@mozilla.org/network/effective-tld-service;1"] .getservice(components.interfaces.nsieffectivetldservice); the name "effective tld service" is a historical one; today, the items this interface manipulates are called public suffixes, and the list of them is the public suffix list, or psl.
...therefore, if you call getpublicsuffix("a.b.c.nonexistent"), you will get back "nonexistent" - this "tld" is not in the public suffix list, but the implicit "*" rule means that it is returned.
nsIErrorService
should be one of the modules listed in xpcom/base/nserror.h, such as ns_error_module_storage.
...should be one of the modules listed in xpcom/base/nserror.h, such as ns_error_module_storage.
nsIFileStreams
ioflags file open flags listed in prio.h (see pr_open documentation) or -1 to open the file in default mode (pr_rdonly).
... perm file mode bits listed in prio.h or -1 to use the default value (0).
nsIIDNService
converttodisplayidn() normalizes a hostname into utf-8 format if the hostname is in the idn whitelist.
... if the hostname isn't in the whitelist, it's converted into ace format.
nsIINIParser
getsections() returns an nsiutf8stringenumerator providing a list of the sections available within the ini file.
...components.manager.getclassobjectbycontractid( "@mozilla.org/xpcom/ini-parser-factory;1", components.interfaces.nsiiniparserfactory ); var iniparser = inifact.createiniparser(inifile); try { return iniparser.getstring(section,prop); } catch(e) { return undefined; } } // usage: var lang = getinivalue(file,"setting","language"); enumerating sections this example gets a list of all the sections in the ini file.
nsILivemarkService
index the index to insert at, or -1 to append to the end of the list.
... index the index to insert at, or -1 to append to the end of the list.
nsILoginManagerStorage
getalldisabledhosts() implement this method to return a list of all hosts for which password saving is disabled.
... getalllogins() implement this method to return a list of all logins in the login store.
nsIMessageWakeupService
a comma-separated list of messages for which your component should be instantiated.
...currently, services must expose a wrappedjsobject in order to support this; however, once bug 593407 is fixed, the service to be woken up must implement nsiframemessagelistener.
nsIMsgDBView
void openwithhdrs(in nsisimpleenumerator aheaders, in nsmsgviewsorttypevalue asorttype, in nsmsgviewsortordervalue asortorder, in nsmsgviewflagstypevalue aviewflags, out long acount); parameters aheaders a list of headers to open, arranged in an nsisimpleenumerator.
... close() close the current list of messages.
nsIMsgSearchCustomTerm
*/ readonly attribute acstring id; name /// name to display in term list.
... * * @return true if available */ boolean getavailable(in nsmsgsearchscopevalue scope, in nsmsgsearchopvalue op); getavailableoperators /** * list the valid operators for this term.
nsIPermissionManager
remarks this service broadcasts the following notification when the permission list is changed: topic : "perm-changed" (perm_change_notification) broadcast whenever the permission list changes in some way.
... data : "cleared" the entire permission list was cleared.
nsIPrinterEnumerator
this name should also be present in printernamelist.
... printernamelist nsistringenumerator the list of printer names.
nsIRadioInterfaceLayer
.getservice(components.interfaces.nsiinterfacerequestor) .createinstance(components.interfaces.nsiradiointerfacelayer); method overview void answercall(in unsigned long callindex); void deactivatedatacall(in domstring cid, in domstring reason); void dial(in domstring number); void enumeratecalls(in nsiriltelephonycallback callback); void getdatacalllist(); unsigned short getnumberofmessagesfortext(in domstring text); void hangup(in unsigned long callindex); void registercallback(in nsiriltelephonycallback callback); void registerdatacallcallback(in nsirildatacallback callback); void rejectcall(in unsigned long callindex); void sendsms(in domstring number, in domstring message, in long requestid, in unsigned long long processid); vo...
...void enumeratecalls( in nsiriltelephonycallback callback ); parameters callback missing description exceptions thrown missing exception missing description getdatacalllist() void getdatacalllist(); parameters none.
nsIScriptError2
there are quite a few category strings and they don't seem to be listed in a single place.
... see categories for a partial list.
nsIScriptableInputStream
examples list contents of xpi and read file contents this example here uses the read function.
...full example using the zip interfaces is seen here: list contents of xpi and read file contents.
nsISound
event_select_dialog_open 4 a select dialog (one that contains a list box) is opened.
... _moz_selectdialog the system sound when a select dialog (one that contains a list box) is opened.
nsIStackFrame
language pruint32 see nsiprogramminglanguage for a list of language constants.
... languagename string see nsiprogramminglanguage for a list of language constants.
nsIStringBundle
length the length of the parameter list.
... length the length of the parameter list.
nsIToolkitProfile
example: var profile = profilelist.getnext().queryinterface(ci.nsitoolkitprofile); var locker = profile.lock({}); remove() removes the profile from the registry of profiles.
... void remove( in boolean removefiles ); parameters removefiles indicates whether or not the profile directory should be removed when the profile is removed from the profile list.
nsITransferable
flavorstransferablecanexport() returns a list of flavors (mime types as nsisupportscstring) that the transferable can export, either through intrinsic knowledge or output data converters.
... return value missing description flavorstransferablecanimport() computes a list of flavors (mime types as nsisupportscstring) that the transferable can accept into it, either through intrinsic knowledge or input data converters.
nsIWebContentHandlerRegistrar
typically they will prompt the user to confirm adding an entry to the local list.
... examples register a webmail service as mailto handler the following code aims to add "outlook.com live mail" to list of webservice handlers.
XPCOM reference
ify static xpcom modules.standard xpcom componentsthere are a number of components provided in the standard implementation of xpcom; these are as follows.xpcom glue classesthese "glue" classes are provided to make it easier to use xpcom from c++ code.xpcom interface referencethis is a reference to the xpcom interfaces provided by the mozilla platform.xpcom interface reference by groupingthis page lists the current (as of dec.
... 01, 2010) list of mozilla interfaces as listed on the xpcom interface reference page where that page lists items by alphabetical sorting, this page attempts to group them by function.
Storage
the full list of binding functions can be found with the mozistoragestatement documentation.
...n.createstatement("insert into table_name (value) values(:value)"); let params = stmt.newbindingparamsarray(); for (let i = 0; i < 10; i++) { let bp = params.newbindingparams(); bp.bindbyname("value", i); params.addparams(bp); } stmt.bindparameters(params); you can attach multiple sets of bindings to a statement by adding multiple mozistoragebindingparams objects to the array of parameter lists, adding each one through calls to the mozistoragebindingparamsarray.addparams().
Troubleshooting XPCOM components registration
you will see any modules that failed to load in the module list.
...(the -r switch from gnu ldd lists function relocations; adjust as suitable for your version) trace shared library loading by setting the environment variable ld_debug=all while launching firefox (see `man ld.so` for details).
Events
r is being loaded onmakeactive a folderdisplaywidget becomes active onmessagecountschanged the counts of the messages changed onmessagesloaded the messages in the folder have been loaded onmessagesremovalfailed removing some messages from the current folder failed onmessagesremoved some messages of the current message list have been removed onsearching a folder view derived from a search is being loaded, e.g.
... saved searches, virtual folders, a quicksearch onsortchanged the sort method in the messages list has been changed ...
MailNews fakeserver
for performtest istestfinished none if the test is finished helper for performtest playtransaction none the transaction the transaction is an object with two properties: us, and them; us is an array of responses we sent, them an array of commands received resettest none nothing prepares the server for the next test without closing the connection start port number nothing starts the server listening stop none nothing stops the server and closes the connection using fakeserver in qa testing debug output from fakeservers it is possible to get the fakeservers to dump to the console the commands they have sent and received.
...the following comprises the api of the news fakeserver itself: nntpdaemon api name arguments returns notes [constructor] daemon flags n/a flags are defined below addgroup group name (string), is postable nothing adds the group (resetting if it exists) addarticle newsarticle object nothing adds the message to all groups in the article's group list addarticletogroup newsarticle object, group (string), integral key for group nothing adds the message to the specified group with the specified key getgroup group name group object group is a map key->article, with the additional properties: flags, keys (array of keys), nextkey (next key to use for new articles) getgroupstats group name array of [size, min, max] the size is an estimate if n...
Main Windows
as such, i've always thought it would be nice to have a list of what xul, js, or other files are that are here, what they do, and where they overlay at different points within the client.
...menus, toolbar buttons, and headers are all taken from exactly the same overlays listed above though.
Adding items to the Folder Pane
listening for folder pane rebuilds every time the folder pane rebuilds, it fires a "maprebuild" event, which is the ideal opportunity for extensions to step in and modify the display data.
... the following code snippet listens for that event: let gnumbersext = { load: function gne_load() { window.removeeventlistener("load", gnumbersext.load, false); let tree = document.getelementbyid("foldertree"); tree.addeventlistener("maprebuild", gnumbersext._insert, false); }, _insert: function gne__insert() { // this function is called when a rebuild occurs } }; window.addeventlistener("load", gnumbersext.load, true); the structure of folder-tree-items the folder pane stores its current display data in a property called _rowmap.
Building a Thunderbird extension 1: introduction
the tutorial has the following pages: introduction (this page) the extension filesystem (setting up your local system) install manifest (the install.rdf file that contains meta-information about the extension) chrome manifest (list of packages and overlays) xul (the xml user interface language that is used to modify the thunderbird user interface) adding javascript (explains how to add some simple javascript to your thunderbird extension) installing locally (enabling the extension on your local thunderbird instance) packaging (making a distribution package that contains the extension) distributing (from your own site o...
... documentation thunderbird extensions (documentation overview) firefox addons developer guide (many topics are applicable to thunderbird) mozilla cross-reference source code browser ("comm-central" contains the thunderbird code repository) community the thunderbird development community has a mailing list with an extensive searchable archive with an extensive searchable archive.
Creating a Custom Column
the following is a list of functions that must be implemented to ensure that your extension works well with thunderbird.
... window.addeventlistener("load", doonceloaded, false); function doonceloaded() { var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", false); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { addcusto...
Activity Manager examples
ndo : public nsiactivityundohandler { public: ns_decl_isupports ns_decl_nsiactivityundohandler mycopyeventundo() {} private: ~mycopyeventundo() {} }; ns_impl_isupports1(mycopyeventundo, nsiactivityundohandler) ns_imethodimp mycopyeventundo::undo(nsiactivityevent *event, nsresult *result) { nsresult rv; // get the subjects of this copy event pruint32 length; nsivariant **subjectlist; rv = event->getsubjects(&length, &subjectlist); if(ns_failed(rv)) return rv; // first subject in the list is the source folder in this particular case nscomptr<nsimsgfolder> folder = do_queryinterface(subjectlist[0]); // get the initiator nsivariant *initiator; event->getinitiator(&initiator); if (initiator) { nsisupports* ptr; rv = object->getasisupports(&ptr); ...
...// same for the source folder, it is required for undo operation, but // since it is the subject of this activity (event), it goes into the // subject list.
Filter Incoming Mail
by example, to modify the mail subject : var newmaillistener = { msgadded: function(amsghdr) { if( !amsghdr.isread ) { // here we are, a new mail has popped // let get a javascript string object from the subject property // querying mime conversion interface var mimeconvert = components.classes["@mozilla.org/messenger/mimeconverter;1"] .getservice(components.interfaces.nsimimeconverter); var subject = mimeconvert.decodemimeheader(amsghdr.subject, null, false, true); // here with have a string to modify with javascript.
...g the string // and assign it to the message headers and we're done amsghdr.subject = mimeconvert.encodemimepartiistr_utf8(subject, false, "utf-8", 0, 72); } } }; function init() { var notificationservice = components.classes["@mozilla.org/messenger/msgnotificationservice;1"] .getservice(components.interfaces.nsimsgfoldernotificationservice); notificationservice.addlistener(newmaillistener, notificationservice.msgadded); } addeventlistener("load", init, true); have a look to nsimsgdbhdr to get the full list of properties to be modified.
Theme Packaging
do not add to this list without contacting benjamin smedberg.
... note that this page is included from the pages listed below.
Tips and Tricks from the newsgroups
we will add a categorization system as the link list grows.
... are unknown) determine whether a message has been flagged as junk imap: getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body get information about attachment without selecting message repeat image display using css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to prevent pop messages from getting garbled during message retrieval ...
Thunderbird extensions
an overview of thunderbird components developer reference docs: folder classes db views (message list) message summary database mailnews protocols mailnews filters error reporting tools steel library (obsolete as of thunderbird 52, use https://github.com/protz/thunderbird-stdlib) developing new account types useful newsgroup discussions (anything that's very old should be regarded suspiciously, because there has been significant ap...
...rbird api docs (mostly a collection of out-of-date pages, relevance is rather dubious) general links finding the code for a feature mozillazine articles on thunderbird community / communications thunderbird specific : add-ons section on developer.thunderbird.net thunderbird communication channels add-on developers forum/mailing list #maildev irc channel more general : mozillazine extension development forum general developer channels related topics xul, javascript, xpcom, themes, developing mozilla categori ...
Using the Mozilla symbol server
if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for w...
... its contents are a list of paths to files, all relative to the directory the blah-symbols.txt file is found in.
Zombie compartments
viewing live compartments if you want to see a list of live compartments, type "about:memory" into the address bar and click on the measure button.
... in the results, you'll find a js-main-runtime-compartments tree (whcih you may need to expand further) that lists all system (firefox and add-ons) and user (website) compartments, these compartments are also listed in more detail in the explicit allocations section.
Drawing and Event Handling - Plugins
events are sent to the plug-in with a call to npp_handleevent; for a complete list of event types, see the reference entry for npevent.
...for a list of event types the application is responsible for delivering to the plug-in, see the npevent structure.
Browser Console - Firefox Developer Tools
example here makes it so that when you mouse over the "clear" button it will clear the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.getbrowserconsole(); var clearbtn = hud.chromewindow.document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically.
...try running this code in the browser console's command line (remember that to send multiple lines to the browser console, use shift+enter): var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.selectedtab); newtabbrowser.addeventlistener("load", function() { newtabbrowser.contentdocument.body.innerhtml = "<h1>this page has been eaten</h1>"; }, true); newtabbrowser.contentdocument.location.href = "https://mozilla.org/"; it adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.
Browser Toolbox - Firefox Developer Tools
the same button appears in the browser toolbox where it lists all the top-level chrome and content windows as well as any iframes they contain.
... for example, here's what the frame selection popup lists when there are two browser windows open, one with one content tab, and one with two: debugging popups it's hard to debug popups, because the browser hides them as soon as you click outside them.
Debug worker threads - Firefox Developer Tools
listed in the sources list.
... inspecting worker code for example, see the selected item worker.js below — it is listed in a separate thread in the sources list, but appears in the source pane in the same way as main thread code when selected.
Access debugging in add-ons - Firefox Developer Tools
the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Debug eval sources - Firefox Developer Tools
in the video below, we load a page containing a source like this: var script = `function foo() { console.log('called foo'); } //# sourceurl=my-foo.js`; eval(script); var button = document.getelementbyid("foo"); button.addeventlistener("click", foo, false); the evaluated string is given the name "my-foo.js" using the //# sourceurl directive.
... this source is then listed in the source list pane, and can be opened and debugged like any other source.
Set an XHR breakpoint - Firefox Developer Tools
when your code breaks on an xhr request, the righthand pane will have two additional sections: call stack the list of functions that were executed in order ot get to the currently executing code.
... scopes a list of the values that are in scope in the function, method, or event handler where the break occurred.
Deprecated tools - Firefox Developer Tools
we have created this list of deprecated or removed panels.
...more details on the mailing-list thread.
Aggregate view - Firefox Developer Tools
type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape".
... you'll then see a list of all the functions that allocated objects, ordered by the size of the allocations they made: the structure of this view is very much like the structure of the call tree, only it shows allocations rather than processor samples.
Throttling - Firefox Developer Tools
the characteristics emulated are: download speed upload speed minimum latency the table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions.
...2g 450 kbps 150 kbps 150 regular 3g 750 kbps 250 kbps 100 good 3g 1.5 mbps 750 kbps 40 regular 4g/lte 4 mbps 3 mbps 20 dsl 2 mbps 1 mbps 5 wi-fi 30 mbps 15 mbps 2 network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network request details network traffic recording performance analysis ...
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
flex item properties the flex items within the flex container are displayed as a numbered list in the flex items section.
...re is not enough space minimum size (only appears when an item is clamped to its minimum size) - the minimum content size of a flex item when there is no more free space in the flex container final size - the size of the flex item after all sizing constraints imposed on it have been applied (based on the values of flex-grow, flex-shrink and flex-basis) at the top of the section is a drop-down list of all the items in the selected flexbox container: you can use this drop-down to select any of the other flex items in the flex container.
Shader Editor - Firefox Developer Tools
you'll now see a window divided into three panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand pane lists all programs currently in use by a webgl context.
... if you hover over an entry in the list, the geometry drawn by that program is highlighted in red: if you click the eyeball icon just left of the program's entry, that program is disabled.
Rich output - Firefox Developer Tools
the output will look something like this: console.log(todolist) array(4) [ {…}, {…}, {…}, {…} ] debugger eval code:1:9 undefined if you expand objects, such as arrays, you get slightly different content.
... for example, by expanding the array in the above list, i get the following: console.log(todolist) (4) […] ​ 0: object { status: "done", description: "morning pages", datecreated: 1552404478137 } ​ 1: object { status: "in progress", description: "refactor styles", datecreated: 1552404493169 } ​ 2: object { status: "to do", description: "create feedback form", datecreated: 1552404512630 } ​ 3: object { status: "to do", description: "normalize table", datecreated: 1552404533790 } ​ length: 4 ​ <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console output...
Working with iframes - Firefox Developer Tools
you'll see a button in the toolbar: click it, and you'll see a popup listing all the iframes in the document, as well as the main document itself.
... if you select an entry in the list, all the tools in the toolbox - the inspector, the console, the debugger and so on - will now target only that iframe, and will essentially behave as if the rest of the page does not exist.
AbortController.AbortController() - Web APIs
this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbortController.abort() - Web APIs
this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbortController.signal - Web APIs
this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbortController - Web APIs
this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbsoluteOrientationSensor - Web APIs
const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requesting permissions for multiple device sensors.
Ambient Light Events - Web APIs
this event can be captured at the window object level by using the addeventlistener method (using the devicelight event name) or by attaching an event handler to the window.ondevicelight property.
... example if ('ondevicelight' in window) { window.addeventlistener('devicelight', function(event) { var body = document.queryselector('body'); if (event.value < 50) { body.classlist.add('darklight'); body.classlist.remove('brightlight'); } else { body.classlist.add('brightlight'); body.classlist.remove('darklight'); } }); } else { console.log('devicelight event not supported'); } specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
Animation.onremove - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the even...
...this could result in a huge animations list, which could create a memory leak.
Animation.persist() - Web APIs
WebAPIAnimationpersist
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the even...
...this could result in a huge animations list, which could create a memory leak.
Animation.play() - Web APIs
WebAPIAnimationplay
two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately.
...cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.playbackRate - Web APIs
bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or click, alice will grow.
... cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); in another example, the red queen's race game, alice and the red queen are constantly slowing down: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; } document.addeventlistener("click", gofaster); document.addeventlistener("touchstart", gofaster); specifications specification status comment web animationsthe definition of 'animation.playbackrate' in that specification...
Animation.replaceState - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the even...
...this could result in a huge animations list, which could create a memory leak.
Animation - Web APIs
WebAPIAnimation
if they are indefinite (i.e., forwards-filling), this can result in a huge animations list, which could create a memory leak.
... designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment web animationsthe definition of 'animation' in that specification.
Attr - Web APIs
WebAPIAttr
see deprecated properties and methods for a complete list.
... childnodes obsolete since gecko 14 this property now always returns an empty nodelist.
AudioTrack.id - Web APIs
WebAPIAudioTrackid
this id can be used with the audiotracklist.gettrackbyid() method to locate a specific track within the media associated with a media element.
... syntax var trackid = audiotrack.id; value a domstring which identifies the track, suitable for use when calling gettrackbyid() on an audiotracklist such as the one specified by a media element's audiotracks property.
AudioTrack.label - Web APIs
WebAPIAudioTracklabel
the list is filtered to only allow certain track kinds through.
... function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
BatteryManager - Web APIs
methods inherited from eventtarget: eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget.
... eventtarget.removeeventlistener() removes an event listener from the eventtarget.
BeforeUnloadEvent - Web APIs
x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box.
... window.addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e || window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari, chrome, and other * webkit-derived browsers */ }); specifications specification status comment html living standardthe definition of 'beforeunloadevent' in that specification.
BiquadFilterNode.getFrequencyResponse() - Web APIs
b a reference to it in our javascript: <p>biquad filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our biquad filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; ...
... function calcfrequencyresponse() { biquadfilter.getfrequencyresponse(myfrequencyarray,magresponseoutput,phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification.
Blob - Web APIs
WebAPIBlob
the apis accepting blob objects are also listed in the file documentation.
...the following code reads the content of a blob as a typed array: const reader = new filereader(); reader.addeventlistener('loadend', () => { // reader.result contains the contents of blob as a typed array }); reader.readasarraybuffer(blob); another way to read content from a blob is to use a response.
BluetoothRemoteGATTServer.getPrimaryServices() - Web APIs
the bluetoothremotegattserver.getprimaryservices() method returns a promise to a list of primary bluetoothgattservice objects offered by the bluetooth device for a specified bluetoothserviceuuid.
...}) returns a promise that resolves to a list of bluetoothgattservice objects.
BroadcastChannel() - Web APIs
example // create a new channel listening to the "internal_notification" channel.
... var bc = new broadcastchannel('internal_notification'); bc.postmessage('new listening connected!'); specifications specification status comment html living standardthe definition of 'broadcastchannel()' in that specification.
BroadcastChannel - Web APIs
messages are broadcasted via a message event fired at all broadcastchannel objects listening to the channel.
... broadcastchannel.postmessage() sends the message, of any type of object, to each broadcastchannel object listening to the same channel.
CSSGroupingRule - Web APIs
interface cssgroupingrule : cssrule { readonly attribute cssrulelist cssrules; unsigned long insertrule (domstring rule, unsigned long index); void deleterule (unsigned long index); } properties common to all cssgroupingrule instances the cssgroupingrule derives from cssrule and inherits all properties of this class.
... it has one specific property: cssgroupingrule.cssrules read only returns a cssrulelist of the css rules in the media rule.
CSSMediaRule - Web APIs
interface cssmediarule : cssconditionrule { readonly attribute medialist media; } properties as a cssconditionrule, and therefore both a cssgroupingrule and a cssrule, cssmediarule also implements the properties of these interfaces.
... it has the following specific property: cssmediarule.media read only specifies a medialist representing the intended destination medium for style information.
CSSPseudoElement - Web APIs
methods csspseudoelement extends eventtarget, so it inherits the following methods: eventtarget.addeventlistener() registers an event handler of a specific event type on the pseudo-element.
... eventtarget.removeeventlistener() removes an event listener from the pseudo-element.
CSSStyleSheet.addRule() - Web APIs
index optional an optional index into the stylesheet's cssrulelist at which to insert the new rule.
... if index is not specified, the next index after the last item currently in the list is used (that is, the value of cssstylesheet.cssrules.length).
Cache - Web APIs
WebAPICache
var cache_version = 1; var current_caches = { font: 'font-cache-v' + cache_version }; self.addeventlistener('activate', function(event) { // delete all caches that aren't named in current_caches.
... console.log('deleting out of date cache:', cachename); return caches.delete(cachename); } }) ); }) ); }); self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.open(current_caches.font).then(function(cache) { return cache.match(event.request).then(function(response) { if (response) { // if there is an entry in the cache for event.request, then response will be defined // and we can just return it...
CanvasRenderingContext2D.addHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi); ctx.arc(130, 80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi); ctx.stro...
...alse); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) { alert("ouch, my eye :("); } }); textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications canvas hit regions have been r...
CanvasRenderingContext2D.setLineDash() - Web APIs
note: to return to using solid lines, set the line dash list to an empty array.
...if the array is empty, the line dash list is cleared and line strokes return to being solid.
CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.beginpath() starts a new path by emptying the list of sub-paths.
...the methods listed below remain for historical and compatibility reasons as svgmatrix objects are used in most parts of the api nowadays and will be used in the future instead.
Basic animations - Web APIs
by setting eventlisteners, we catch any user interaction and execute our animation functions.
... h / 2, 400, 4, 4), anima() } function anima() { c.fillstyle = "rgba(0,0,0,0.11)", c.fillrect(0, 0, cc.width, cc.height), fa.foreach(t => t.put()), s.draw(), document.getelementbyid("time").innertext = tmz(), settimeout(() => { requestanimationframe(anima) }, fw) } function emit(t) { key.keydown(t) } function touch(t) { t.classlist.toggle("off"), document.getelementsbyclassname("keypress")[0].classlist.toggle("hide") } var t = new date + "", d = void 0, cc = document.getelementsbytagname("canvas")[0], c = cc.getcontext("2d"); key = {}, key.keydown = function (t) { var e = document.createevent("keyboardevent"); object.defineproperty(e, "keycode", { get: function...
Basic usage of canvas - Web APIs
our code snippet from above becomes something like this: var canvas = document.getelementbyid('tutorial'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); // drawing code here } else { // canvas-unsupported code here } a skeleton template here is a minimalistic template, which we'll be using as a starting point for later examples.
...context) { var ctx = canvas.getcontext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document.
Channel Messaging API - Web APIs
the other browsing context can listen for the message using messageport.onmessage, and grab the contents of the message using the event's data attribute.
... messageport controls the ports on the message channel, allowing sending of messages from one port and listening out for them arriving at the other.
Client.postMessage() - Web APIs
examples sending a message from a service worker to a client: addeventlistener('fetch', event => { event.waituntil(async function() { // exit early if we don't have access to the client.
... client.postmessage({ msg: "hey i just got a fetch from you!", url: event.request.url }); }()); }); receiving that message: navigator.serviceworker.addeventlistener('message', event => { console.log(event.data.msg, event.data.url); }); specifications specification status comment service workersthe definition of 'postmessage()' in that specification.
Clients.claim() - Web APIs
WebAPIClientsclaim
example the following example uses claim() inside service worker's "activate" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.
... self.addeventlistener('activate', event => { event.waituntil(clients.claim()); }); specifications specification status comment service workersthe definition of 'claim()' in that specification.
console.assert() - Web APIs
WebAPIConsoleassert
objn a list of javascript objects to output.
... the string representations of each of these objects are appended together in the order listed and output.
console.debug() - Web APIs
WebAPIConsoledebug
objn a list of javascript objects to output.
... the string representations of each of these objects are appended together in the order listed and output to the console.
Console.dir() - Web APIs
WebAPIConsoledir
the console method dir() displays an interactive list of the properties of the specified javascript object.
... the output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.
Console.error() - Web APIs
WebAPIConsoleerror
objn a list of javascript objects to output.
... the string representations of each of these objects are appended together in the order listed and output.
Console.info() - Web APIs
WebAPIConsoleinfo
objn a list of javascript objects to output.
... the string representations of each of these objects are appended together in the order listed and output.
console.log() - Web APIs
WebAPIConsolelog
objn a list of javascript objects to output.
... the string representations of each of these objects are appended together in the order listed and output.
Console.warn() - Web APIs
WebAPIConsolewarn
objn a list of javascript objects to output.
... the string representations of each of these objects are appended together in the order listed and output.
ConstrainDOMString - Web APIs
if the property can't be set to one of the listed values, matching will fail.
...if possible, one of the listed values will be used, but if it's not possible, the user agent will use the closest possible match.
Constraint validation API - Web APIs
extensions to other interfaces the constraint validation api extends the interfaces for the form-associated elements listed below with a number of new properties and methods (elements that can have a form attribute that indicates their form owner): htmlbuttonelement htmlfieldsetelement htmlinputelement htmlobjectelement htmloutputelement htmlselectelement htmltextareaelement properties validity a read-only property that returns a validitystate object, whose properties represent validation errors for t...
... if you wanted to instead display custom error messages, you could use javascript like the following: const nameinput = document.queryselector('input'); const form = document.queryselector('form'); nameinput.addeventlistener('input', () => { nameinput.setcustomvalidity(''); nameinput.checkvalidity(); }); nameinput.addeventlistener('invalid', () => { if(nameinput.value === '') { nameinput.setcustomvalidity('enter your username!'); } else { nameinput.setcustomvalidity('usernames can only contain upper and lowercase letters.
ContentIndexEvent.id - Web APIs
examples this example listens for the contentdelete event and logs the removed content index id.
... self.addeventlistener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); specifications specification status comment unknownthe definition of 'id' in that specification.
DOMException - Web APIs
error names common error names are listed here.
... some apis define their own sets of names, so this is not necessarily a complete list.
DataTransferItem - Web APIs
during a drag operation, each drag event has a datatransfer property which contains a list of drag data items.
... each item in the list is a datatransferitem object.
DedicatedWorkerGlobalScope.postMessage() - Web APIs
syntax postmessage(amessage, transferlist); parameters amessage the object to deliver to the main thread; this will be in the data field in the event delivered to the worker.onmessage handler.
... transferlist optional an optional array of transferable objects to transfer ownership of.
Using light sensors - Web APIs
10 ~ 50 lux : dim environment 100 ~ 1000 lux : normal > 10000 lux : bright it uses the addeventlistener method of the window object.
... window.addeventlistener("devicelight", function (event) { // read out the lux value var luminosity = event.value; alert(luminosity); }); example: window.addeventlistener('devicelight', function(event) { var bodybg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value < 100) { alert('hey, you!
Document.anchors - Web APIs
WebAPIDocumentanchors
the anchors read-only property of the document interface returns a list of all of the anchors in the document.
... syntax nodelist = document.anchors; value an htmlcollection.
Document: animationend event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this example listens for the animationend event: document.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: document.onanimationend = () => { console.log('animation ended'); }; see a live example of this event.
Document: animationiteration event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this code uses animationiteration to keep track of the number of iterations an animation has completed: let iterationcount = 0; document.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: let iterationcount = 0; document.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; see a live example of this event.
Document: animationstart event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this listens for the animationstart event and logs a message when it is fired: document.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: document.onanimationstart = () => { console.log('animation started'); }; see a live example of this event.
Document.applets - Web APIs
WebAPIDocumentapplets
the applets property of the document interface returns a list of the applets within a document.
... syntax var nodelist = document.applets; value an htmlcollection.
Document: copy event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples document.addeventlistener('copy', (event) => { console.log('copy action initiated') }); specifications specification status clipboard api and events working draft ...
Document: cut event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples document.addeventlistener('cut', (event) => { console.log('cut action initiated') }); specifications specification status clipboard api and events working draft ...
Document.embeds - Web APIs
WebAPIDocumentembeds
the embeds read-only property of the document interface returns a list of the embedded <object> elements within the current document.
... syntax nodelist = document.embeds value an htmlcollection.
Document: gotpointercapture event - Web APIs
bubbles no cancelable no interface pointerevent event handler property ongotpointercapture examples this example gets a <p> element and listens for the gotpointercapture event.
... const para = document.queryselector('p'); document.addeventlistener('gotpointercapture', () => { console.log('i\'ve been captured!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, using the ongotpointercapture event handler property: const para = document.queryselector('p'); document.ongotpointercapture = () => { console.log('i\'ve been captured!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
Document: keydown event - Web APIs
to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key.
...by clicking in it), then try pressing some keys.</p> <p id="log"></p> document.addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent document.onkeydown = logkey; specifications specification status ui events working draft ...
Document: keypress event - Web APIs
interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key.
... <p>press inside this iframe first to focus it, then try pressing keys on the keyboard.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent document.onkeypress = logkey; specifications specification status ui events working draft ...
Document: lostpointercapture event - Web APIs
bubbles no cancelable no interface pointerevent event handler property onlostpointercapture examples this example listens for the lostpointercapture event, and captures the pointer for an element on pointerdown.
... const para = document.queryselector('p'); document.addeventlistener('lostpointercapture', () => { console.log('i\'ve been released!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, but using the onlostpointercapture event handler property: const para = document.queryselector('p'); document.onlostpointercapture = () => { console.log('i\'ve been released!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
Document: paste event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples document.addeventlistener('paste', (event) => { console.log('paste action initiated') }); specifications specification status clipboard api and events working draft ...
Document: transitioncancel event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the transitioncancel event: document.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): document.ontransitioncancel = () => { console.log('transition canceled'); }; see a live example of this event.
Document: transitionend event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the transitionend event: document.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend property instead of addeventlistener(): document.ontransitionend = () => { console.log('transition ended'); }; see a live example of this event.
Document: transitionrun event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the transitionrun event: document.addeventlistener('transitionrun', () => { console.log('transition is running but hasn't necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): document.ontransitionrun = () => { console.log('transition started running'); }; see a live example of this event.
Document: transitionstart event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the transitionstart event: document.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): document.ontransitionrun = () => { console.log('started transitioning'); }; see a live example of this event.
DocumentFragment - Web APIs
documentfragment.queryselectorall() returns a nodelist of all the element nodes within the documentfragment that match the specified selectors.
... example html <ul id="list"></ul> javascript var list = document.queryselector('#list') var fruits = ['apple', 'orange', 'banana', 'melon'] var fragment = new documentfragment() fruits.foreach(function (fruit) { var li = document.createelement('li') li.innerhtml = fruit fragment.appendchild(li) }) list.appendchild(fragment) result specifications specification status comment dom...
DocumentOrShadowRoot.styleSheets - Web APIs
the stylesheets read-only property of the documentorshadowroot interface returns a stylesheetlist of cssstylesheet objects, for stylesheets explicitly linked into or embedded in a document.
... examples function getstylesheet(unique_title) { for (var i=0; i<document.stylesheets.length; i++) { var sheet = document.stylesheets[i]; if (sheet.title == unique_title) { return sheet; } } } notes the returned list is ordered as follows: stylesheets retrieved from <link> headers are placed first, sorted in header order.
DocumentTouch - Web APIs
the documenttouch interface used to provide convenience methods for creating touch and touchlist objects, but documenttouch been removed from the standards.
... documenttouch.createtouchlist() creates a new touchlist object.
EffectTiming.fill - Web APIs
WebAPIEffectTimingfill
document.getelementbyid("animatebutton").addeventlistener("click", event => { document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an event listener to the "animate" button so that when it's clicked by the user, the box is animated by calling element.animate() on it, providing the boxrotationkeyframes and boxrotationtiming objects to describe the ani...
... elem.addeventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result.
Element.animate() - Web APIs
WebAPIElementanimate
you can get a list of the animations that affect an element by calling element.getanimations().
... you can also include a composite operation or iteration composite operation in your options list: composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation.
Element.attributes - Web APIs
<!doctype html> <html> <head> <title>attributes example</title> <script type="text/javascript"> function listattributes() { var paragraph = document.getelementbyid("paragraph"); var result = document.getelementbyid("result"); // first, let's verify that the paragraph has some attributes if (paragraph.hasattributes()) { var attrs = paragraph.attributes; var output = ""; for(var i = attrs.length - 1; i >= 0; i--) { output += attrs[i].name + "->" + attrs[i]...
....value; } result.value = output; } else { result.value = "no attributes to show"; } } </script> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <form action=""> <p> <input type="button" value="show first attribute name and value" onclick="listattributes();"> <input id="result" type="text" value=""> </p> </form> </body> </html> specifications specification status comment domthe definition of 'element.attributes' in that specification.
Element: blur event - Web APIs
lable no interface focusevent event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element.closest() - Web APIs
WebAPIElementclosest
syntax var closestelement = targetelement.closest(selectors); parameters selectors is a domstring containing a selector list.
... exceptions syntaxerror is thrown if the selectors is not a valid selector list string.
Element: compositionend event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea rea...
...-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specificatio...
Element: compositionstart event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea r...
...-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specificatio...
Element: compositionupdate event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea ...
...-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specificatio...
Element: focus event - Web APIs
able no interface focusevent event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element: fullscreenchange event - Web APIs
html <h1>fullscreenchange event example</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">toggle fullscreen mode</button> </div> javascript document.getelementbyid('fullscreen-div').addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one.
... if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id} entered fullscreen mode.`); } else { console.log('leaving full-screen mode.'); } }); document.getelementbyid('toggle-fullscreen').addeventlistener('click', (event) => { if (document.fullscreenelement) { // exitfullscreen is only available on the document object.
Element.getElementsByTagName() - Web APIs
the returned list is live, which means it updates itself with the dom tree automatically.
... living standard changed the return value from nodelist to htmlcollection document object model (dom) level 3 core specificationthe definition of 'element.getelementsbytagname()' in that specification.
Element.insertAdjacentElement() - Web APIs
example beforebtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('beforebegin',tempdiv); } setlistener(tempdiv); }); afterbtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) {...
... activeelem.insertadjacentelement('afterend',tempdiv); } setlistener(tempdiv); }); have a look at our insertadjacentelement.html demo on github (see the source code too.) here we have a sequence of <div> elements inside a container.
Element: keydown event - Web APIs
to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
... <input placeholder="click here, then press down a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent input.onkeydown = logkey; specifications specification status ui events working draft ...
Element: keypress event - Web APIs
interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
... <div> <label for="sample">focus the input and type something:</label> <input type="text" name="text" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specifications specification status ui events working draft ...
Element: keyup event - Web APIs
to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <input> element.
... <input placeholder="click here, then press and release a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working draft ...
Element.requestFullscreen() - Web APIs
to learn when other code has toggled full-screen mode on and off, you should establish listeners for the fullscreenchange event on the document.
... it's also important to listen for fullscreenchange to be aware when, for example, the user manually toggles full-screen mode, or when the user switches applications, causing your application to temporarily exit full-screen mode.
Element.setCapture() - Web APIs
<html> <head> <title>mouse capture example</title> <style type="text/css"> #mybutton { border: solid black 1px; color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, false); } else { document.getelementbyid("output").innerhtml = "sorry, there appears to be no setcapture support on this browser"; } } function mousedown(e) { e.target.setcapture(); e.target.addeventlistener("mousemove", mousemoved, false); } function mo...
...useup(e) { e.target.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
ElementCSSInlineStyle.style - Web APIs
when getting, it returns a cssstyledeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.
... see the css properties reference for a list of the css properties accessible via style.
ElementCSSInlineStyle - Web APIs
each of these interfaces can, of course, add more features in addition to the ones listed below.
...when getting, it returns a cssstyledeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.methodsthis interface has no methods.
Event.composed - Web APIs
WebAPIEventcomposed
let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
...ement's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
Event.initEvent() - Web APIs
WebAPIEventinitEvent
var event = document.createevent('event'); // create a click event that bubbles up and // cannot be canceled event.initevent('click', true, false); // listen for the event.
... elem.addeventlistener('click', function (e) { // e.target matches elem }, false); elem.dispatchevent(event); specifications specification status comment domthe definition of 'event.initevent()' in that specification.
Event.target - Web APIs
WebAPIEventtarget
// make a list const ul = document.createelement('ul'); document.body.appendchild(ul); const li1 = document.createelement('li'); const li2 = document.createelement('li'); ul.appendchild(li1); ul.appendchild(li2); function hide(evt) { // e.target refers to the clicked <li> element // this is different than e.currenttarget, which would refer to the parent <ul> in this context evt.target.style.visibility =...
... 'hidden'; } // attach the listener to the list // it will fire when each <li> is clicked ul.addeventlistener('click', hide, false); specifications specification status comment domthe definition of 'event.target' in that specification.
Event.type - Web APIs
WebAPIEventtype
for a list of available event types, see the event reference.
... html <p>press any key or click the mouse to get the event type.</p> <p id="log"></p> javascript function geteventtype(event) { const log = document.getelementbyid('log'); log.innertext = event.type + '\n' + log.innertext; } // keyboard events document.addeventlistener('keydown', geteventtype, false); // first document.addeventlistener('keypress', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events document.addeventlistener('mousedown', geteventtype, false); // first document.addeventlistener('mouseup', geteventtype, false); // second document.addeventlistener('click', geteventtype, false)...
EventTarget.dispatchEvent() - Web APIs
dispatches an event at the specified eventtarget, (synchronously) invoking the affected eventlisteners in the appropriate order.
... target is used to initialize the event.target and determine which event listeners to invoke.
ExtendableEvent - Web APIs
if waituntil() is called outside of the extendableevent handler, the browser should throw an invalidstateerror; note also that multiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises.
... var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event.
FetchEvent.preloadResponse - Web APIs
the serviceworkerglobalscope.onfetch event handler listens for the fetch event.
... addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
FetchEvent.request - Web APIs
the serviceworkerglobalscope.onfetch event handler listens for the fetch event.
... self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache.
FetchEvent.respondWith() - Web APIs
exceptions exception notes networkerror a network error is triggered on certain combinations of fetchevent.request.mode and response.type values, as hinted at in the "global rules" listed above.
... addeventlistener('fetch', event => { // prevent the default, and handle the request ourselves.
File.webkitRelativePath - Web APIs
when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.
... html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
FileReader: abort event - Web APIs
nput[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; con...
...st selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } reader.abort(); } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: load event - Web APIs
nput[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; con...
...st selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadend event - Web APIs
nput[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; con...
...st selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadstart event - Web APIs
nput[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; con...
...st selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: progress event - Web APIs
nput[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; con...
...st selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#prev...
...iew'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet explorer for versions before 10.
FontFaceSet.check() - Web APIs
WebAPIFontFaceSetcheck
the check() method of the fontfaceset returns whether all fonts in the given font list have been loaded and are available.
... syntax bool = afontfaceset.check(font); bool = afontfaceset.check(font, text); returns a boolean that is true if the font list is available parameters font: a font specification using the css value syntax, e.g.
FormDataEvent - Web APIs
the formdataevent interface represents a formdata event — such an event is fired on an htmlformelement object after the entry list representing the form's data is constructed.
... examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.va...
Frame Timing API - Web APIs
accessing frame data when a frame observer is invoked, frame performance entries can be retrieved by calling performanceobserverentrylist.getentriesbytype() with an argument of "frame".
... this method returns a list of "frame" performanceentry objects.
Guide to the Fullscreen API - Web APIs
view live examples watching for the enter key when the page is loaded, this code is run to set up an event listener to watch for the enter key.
... document.addeventlistener("keydown", function(e) { if (e.keycode == 13) { togglefullscreen(); } }, false); toggling fullscreen mode this code is called when the user hits the enter key, as seen above.
GamepadEvent - Web APIs
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
... window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); specifications specification status comment gamepadthe definition of 'gamepadevent' in that specification.
GeolocationCoordinates.longitude - Web APIs
javascript the javascript code below creates an event listener so that when the user clicks on a button, the location information is retrieved and displayed.
... let button = document.getelementbyid("get-location"); let lattext = document.getelementbyid("latitude"); let longtext = document.getelementbyid("longitude"); button.addeventlistener("click", function() { navigator.geolocation.getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); }); }); after setting up variables to more conveniently reference the button element and the two elements into which the latitude and logitude will be drawn, the event listener is established by calling addeventlistener() on the <button> element.
GlobalEventHandlers.oncontextmenu - Web APIs
you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible.
...e(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown = play; result specifications specification status comment html living standardthe ...
GlobalEventHandlers.ondragexit - Web APIs
the ondragexit event is a gecko specific event listener.
... if you are building a drag-and-drop feature for a website please see the ondragleave event listener instead.
GlobalEventHandlers.onformdata - Web APIs
the onformdata property of the globaleventhandlers mixin is the eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed.
... examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { co...
GlobalEventHandlers.onpointerdown - Web APIs
you can also use addeventlistener() to add a listener for pointerdown events.
...you could also use addeventlistener(), of course.
HTMLAreaElement - Web APIs
htmlareaelement.rellist read only returns a domtokenlist that reflects the rel html attribute, indicating relationships of the current document to the linked resource, as a list of tokens.
... the following properties have been added: rel, rellist, media, hreflang, type, host, hostname, pathname, port, protocol, search, and hash.
HTMLAudioElement - Web APIs
this snippet copies the audio file's duration to a variable: var audioelement = new audio('car_horn.wav'); audioelement.addeventlistener('loadeddata', () => { let duration = audioelement.duration; // the duration variable now holds the duration (in seconds) of the audio clip }) events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement.
... listen to events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HTMLBaseFontElement - Web APIs
htmlbasefontelement.face is a domstring representing a list of one or more font names.
...if no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.
HTMLButtonElement - Web APIs
htmlbuttonelement.labels read only is a nodelist that represents a list of <label> elements that are labels for this button.
...it is false if any conditions bar it from constraint validation, including: its type property is reset or button; it has a <datalist> ancestor; or the disabled property is set to true.
HTMLCollection - Web APIs
the htmlcollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list.
... methods htmlcollection.item() returns the specific node at the given zero-based index into the list.
HTMLContentElement.getDistributedNodes() - Web APIs
the htmlcontentelement.getdistributednodes() method returns a static nodelist of the distributed nodes associated with this <content> element.
... syntax var nodelist = object.getdistributednodes() example // get the distributed nodes var nodes = mycontentobject.getdistributednodes(); specifications this feature is no longer defined by any specifications.
HTMLContentElement - Web APIs
the value is a comma-separated list of css selectors that select the content to insert in place of the <content> element.
... htmlcontentelement.getdistributednodes() returns a static nodelist of the distributed nodes associated with this <content> element.
HTMLDialogElement: cancel event - Web APIs
er oncancel examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebut...
...ton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'cancel' in that specification.
HTMLDialogElement: close event - Web APIs
erty onclose examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutt...
...on = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'close' in that specification.
HTMLElement: gotpointercapture event - Web APIs
bubbles yes cancelable no interface pointerevent event handler property ongotpointercapture examples this example gets a <p> element and listens for the gotpointercapture event.
... const para = document.queryselector('p'); para.addeventlistener('gotpointercapture', () => { console.log('i\'ve been captured!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, using the ongotpointercapture event handler property: const para = document.queryselector('p'); para.ongotpointercapture = () => { console.log('i\'ve been captured!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
HTMLElement: input event - Web APIs
this is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.
... html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('input', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status html living standardthe definition of 'input event' in that specification.
HTMLElement: lostpointercapture event - Web APIs
bubbles yes cancelable no interface pointerevent event handler property onlostpointercapture examples this example listens for the lostpointercapture event for an element, and captures the pointer for the element on pointerdown.
... const para = document.queryselector('p'); para.addeventlistener('lostpointercapture', () => { console.log('i\'ve been released!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, but using the onlostpointercapture event handler property: const para = document.queryselector('p'); para.onlostpointercapture = () => { console.log('i\'ve been released!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
HTMLElement: transitioncancel event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel examples this code gets an element that has a transition defined and adds a listener to the transitioncancel event: const transition = document.queryselector('.transition'); transition.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition c...
... const message = document.queryselector('.message'); const el = document.queryselector('.transition'); el.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; })...
HTMLElement: transitionend event - Web APIs
examples this code gets an element that has a transition defined and adds a listener to the transitionend event: const transition = document.queryselector('.transition'); transition.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend: const transition = document.queryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following exampl...
... const message = document.queryselector('.message'); const el = document.queryselector('.transition'); el.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; })...
HTMLElement: transitionrun event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property ontransitionrun examples this code adds a listener to the transitionrun event: el.addeventlistener('transitionrun', () => { console.log('transition is running but hasn\'t necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition...
... const el = document.queryselector('.transition'); const message = document.queryselector('.message'); el.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the difference is that: transitionrun fires when the transition is created (i.e.
HTMLElement: transitionstart event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property ontransitionstart examples this code adds a listener to the transitionstart event: element.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .t...
... const transition = document.queryselector('.transition'); const message = document.queryselector('.message'); transition.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); transition.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); transition.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the difference is that: transitionrun fires when the transition is created (i.e.
HTMLFormControlsCollection.namedItem() - Web APIs
the htmlformcontrolscollection.nameditem() method returns the radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches.
... syntax var item = collection.nameditem(str); var item = collection[str]; parameters str is a domstring return value item is a radionodelist , element, or null.
HTMLFormControlsCollection - Web APIs
it represents the lists returned by the htmlformelement interface's elements property and the htmlfieldsetelement interface's elements property.
... htmlformcontrolscollection.nameditem() returns the radionodelist or the element in the collection whose name or id matches the specified name, or null if no nodes match.
HTMLFormElement.acceptCharset - Web APIs
the htmlformelement.acceptcharset property represents a list of the supported character encodings for the given <form> element.
... this list can be comma-separated or space-separated.
HTMLFormElement: formdata event - Web APIs
the formdata event fires after the entry list representing the form's data is constructed.
... general info bubbles no cancelable no interface formdataevent event handler property globaleventhandlers.onformdata examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.va...
HTMLFormElement.length - Web APIs
you can access the list of the form's controls using the elements property.
... the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLFormElement: reset event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs.
...time stamp: ${event.timestamp}`; } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.addeventlistener('reset', logreset); result specifications specification status comment html living standardthe definition of 'reset' in that specification.
HTMLFormElement: submit event - Web APIs
examples this example uses eventtarget.addeventlistener() to listen for form submit, and logs the current event.timestamp whenever that occurs, then prevents the default action of submitting the form.
...time stamp: ${event.timestamp}`; event.preventdefault(); } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.addeventlistener('submit', logsubmit); result specifications specification status comment html living standardthe definition of 'submit' in that specification.
HTMLFrameSetElement - Web APIs
htmlframesetelement.cols is a domstring structured as a comma-seperated list specifing the width of each column inside a frameset.
... htmlframesetelement.rows is a domstring structured as a comma-seperated list specifing the height of each column inside a frameset.
HTMLIFrameElement - Web APIs
htmliframeelement.allow is a list of origins the the frame is allowed to display content from.
... htmliframeelement.sandbox is a domsettabletokenlist that reflects the sandbox html attribute, indicating extra restrictions on the behavior of the nested content.
HTMLImageElement.loading - Web APIs
example the addimagetolist() function shown below adds a photo thumbnail to a list of items, using lazy-loading to avoid loading the image from the network until it's actually needed.
... function addimagetolist(url) { const list = document.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src = url; newitem.appendchild(newimg); list.appendchild(newitem); } specifications specification status comment html living standardthe definition of 'htmlimageelement.loading' in that specification.
HTMLImageElement.x - Web APIs
let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top).
... then it looks at that <tr> (table row) element's cells property to get a list of the cells in that row.
HTMLImageElement.y - Web APIs
let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top).
... then it looks at that <tr> (table row) element's cells property to get a list of the cells in that row.
HTMLImageElement - Web APIs
this string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used.
...this specifies a list of candidate images, separated by commas (',', u+002c comma).
HTMLInputElement.stepDown() - Web APIs
if the form control is non time, date, or numeric in nature, and therefore does not support the step attribute (see the list of supported input types in the the table above), or if the step value is set to any, an invalidstateerror exception is thrown.
..."thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p> <input type="button" value="decrement" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton'); button.addeventlistener('click', function() { stepondown();} ); function stepondown() { let input = document.getelementbyid('thenumber'); let val = document.getelementbyid('decrementer').value; if (val) { /* increment with a parameter */ input.stepdown(val); } else { /* or without a parameter.
HTMLInputElement.stepUp() - Web APIs
if the form control is non time, date, or numeric in nature, and therefore does not support the step attribute (see the list of supported input types in the the table above), or if the step value is set to any, an invalidstateerror exception is thrown.
...d="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="25"> </label> </p> <input type="button" value="increment" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton') button.addeventlistener('click', function() { steponup() }) function steponup() { let input = document.getelementbyid('thenumber') let val = document.getelementbyid('incrementer').value if (val) { /* increment with a parameter */ input.stepup(val) } else { /* or without a parameter.
HTMLMediaElement: canplay event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplay specification html5 media examples these examples add an event listener for the htmlmediaelement's canplay event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplay', (event) => { console.log('video can start, but not sure it will play through.'); }); using the oncanplay event handler property: const video = document.queryselector('video'); video.oncanplay = (event) => { console.log('video can start, but not sure it will play through.'); }; specifications specification status html living standardthe definition of 'canplay media event' in that specification.
HTMLMediaElement: canplaythrough event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplaythrough specification html5 media examples these examples add an event listener for the htmlmediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplaythrough', (event) => { console.log('i think i can play through the entire ' + ' video without ever having to stop to buffer.'); }); using the oncanplaythrough event handler property: const video = document.queryselector('video'); video.oncanplaythrough = (event) => { console.log('i think i can play thru the entire ' + ' video without ever having to stop to buffer.'); }; specifications specification status html living standardthe definition of 'canplaythrough media event' in that specification.
HTMLMediaElement: durationchange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ondurationchange specification html5 media examples these examples add an event listener for the htmlmediaelement's durationchange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('durationchange', (event) => { console.log('not sure why, but the duration of the video has changed.'); }); using the ondurationchange event handler property: const video = document.queryselector('video'); video.ondurationchange = (event) => { console.log('not sure why, but the duration of the video has changed.'); }; specifications specification status html living standardthe definition of 'durationchange media event' in that specification.
HTMLMediaElement: emptied event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onemptied specification html5 media examples these examples add an event listener for the htmlmediaelement's emptied event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('emptied', (event) => { console.log('uh oh.
HTMLMediaElement: ended event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onended specification html5 media this event is also defined in media capture and streams and web audio api examples these examples add an event listener for the htmlmediaelement's ended event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('ended', (event) => { console.log('video stopped either because 1) it was over, ' + 'or 2) no further data is available.'); }); using the onended event handler property: const video = document.queryselector('video'); video.onended = (event) => { console.log('video stopped either because 1) it was over, ' + 'or 2) no further data is available.'); }; specifications specification status html living standardthe definition of 'ended media event' in that specification.
HTMLMediaElement: loadeddata event - Web APIs
examples these examples add an event listener for the htmlmediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('loadeddata', (event) => { console.log('yay!
HTMLMediaElement: loadedmetadata event - Web APIs
examples these examples add an event listener for the htmlmediaelement's loadedmetadata event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('loadedmetadata', (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known.
HTMLMediaElement.networkState - Web APIs
examples this example will listen for the audio element to begin playing and then check if it is still loading data.
... <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (obj.networkstate === 2) { // still loading...
HTMLMediaElement: pause event - Web APIs
general info bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onpause specification html5 media examples these examples add an event listener for the htmlmediaelement's pause event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('pause', (event) => { console.log('the boolean paused property is now true.
HTMLMediaElement: play event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplay specification html5 media examples these examples add an event listener for the htmlmediaelement's play event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('play', (event) => { console.log('the boolean paused property is now false.
HTMLMediaElement: playing event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplaying specification html5 media examples these examples add an event listener for the htmlmediaelement's playing event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('playing', (event) => { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onplaying = (event) => { console.log('video is no longer paused.'); }; specifications specification status html living standardthe definition of 'playing media event' in that specification.
HTMLMediaElement: ratechange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onratechange specification html5 media examples these examples add an event listener for the htmlmediaelement's ratechange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('ratechange', (event) => { console.log('the playback rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log('the playback rate changed.'); }; specifications specification status html living standardthe definition of 'ratechange media event' in that specification.
HTMLMediaElement.readyState - Web APIs
examples this example will listen for audio data to be loaded for the element `example`.
... <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.
HTMLMediaElement: seeked event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onseeked specification html5 media examples these examples add an event listener for the htmlmediaelement's seeked event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeked', (event) => { console.log('video found the playback position it was looking for.'); }); using the onseeked event handler property: const video = document.queryselector('video'); video.onseeked = (event) => { console.log('video found the playback position it was looking for.'); }; specifications specification status html living standardthe definition of 'seeked media event' in that specification.
HTMLMediaElement: seeking event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onseeking specification html5 media examples these examples add an event listener for the htmlmediaelement's seeking event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeking', (event) => { console.log('video is seeking a new position.'); }); using the onseeking event handler property: const video = document.queryselector('video'); video.onseeking = (event) => { console.log('video is seeking a new position.'); }; specifications specification status html living standardthe definition of 'seeking media event' in that specification.
HTMLMediaElement: stalled event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onstalled specification html5 media examples these examples add an event listener for the htmlmediaelement's stalled event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('stalled', (event) => { console.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video'); video.onstalled = (event) => { console.log('failed to fetch data, but trying.'); }; specifications specification status html living standardthe definition of 'stalled media event' in that specification.
HTMLMediaElement: suspend event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onsuspend specification html5 media examples these examples add an event listener for the htmlmediaelement's suspend event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('suspend', (event) => { console.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('data loading has been suspended.'); }; specifications specification status html living standardthe definition of 'suspend media event' in that specification.
HTMLMediaElement: timeupdate event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ontimeupdate specification html5 media examples these examples add an event listener for the htmlmediaelement's timeupdate event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('timeupdate', (event) => { console.log('the currenttime attribute has been updated.
HTMLMediaElement: volumechange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onvolumechange specification html5 media examples these examples add an event listener for the htmlmediaelement's volumechange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('volumechange', (event) => { console.log('the volume changed.'); }); using the onvolumechange event handler property: const video = document.queryselector('video'); video.onvolumechange = (event) => { console.log('the volume changed.'); }; specifications specification status html living standardthe definition of 'volumechange media event' in that specification.
HTMLMediaElement: waiting event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onwaiting specification html5 media examples these examples add an event listener for the htmlmediaelement's waiting event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('waiting', (event) => { console.log('video is waiting for more data.'); }); using the onwaiting event handler property: const video = document.queryselector('video'); video.onwaiting = (event) => { console.log('video is waiting for more data.'); }; specifications specification status html living standardthe definition of 'waiting media event' in that specification.
HTMLOptionElement - Web APIs
htmloptionelement.index read only is a long representing the position of the option within the list of options it belongs to, in tree-order.
... if the option is not part of a list of options, like when it is part of the <datalist> element, the value is 0.
HTMLOutputElement - Web APIs
htmloutputelement.htmlforread only a domtokenlist reflecting the for html attribute, containing a list of ids of other elements in the same document that contribute to (or otherwise affect) the calculated value.
... htmloutputelement.labelsread only a nodelist of <label> elements associated with the element.
HTMLSelectElement.add() - Web APIs
append to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option...
... inserting to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, sel.options[1]); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> <option value="2">option: value 2</option> </select> ...
HTMLSelectElement - Web APIs
htmlselectelement.labelsread only a nodelist of <label> elements associated with the element.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
HTMLShadowElement.getDistributedNodes() - Web APIs
the htmlshadowelement.getdistributednodes() method returns a static nodelist of the distributed nodes associated with this <shadow> element.
... syntax var nodelist = object.getdistributednodes() example // get the distributed nodes var nodes = myshadowobject.getdistributednodes(); specifications this feature is no longer defined by any specifications.
HTMLTableCellElement - Web APIs
htmltablecellelement.headers read only is a domsettabletokenlist describing a list of id of <th> elements that represents headers associated with the cell.
... the headers property is now read-only and contains a domsettabletokenlist rather than a mere domstring.
HTMLTextAreaElement - Web APIs
htmltextareaelement.labelsread only nodelist: returns a list of label elements associated with this element.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
HTMLTrackElement: cuechange event - Web APIs
bubbles no cancelable no interface event event handler oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying texttrack, indicated by the track property, receiv...
... let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living standardthe definition of 'cuechange' in th...
HTMLVideoElement - Web APIs
the list of supported media formats varies from one browser to the other.
...listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HashChangeEvent - Web APIs
examples syntax options for a hash change you can listen for the hashchange event using any of the following options: window.onhashchange = funcref; or <body onhashchange="funcref();"> or window.addeventlistener("hashchange", funcref, false); basic example function locationhashchanged() { if (location.hash === '#somecoolfeature') { somecoolfeature(); } } window.addeventlistener('hashchange', locationhashchanged); polyfill the...
...re are several fallback scripts listed on the modernizr github page.
Headers - Web APIs
WebAPIHeaders
these actions include retrieving, setting, adding to, and removing headers from the list of the request's headers.
... a headers object has an associated header list, which is initially empty and consists of zero or more name and value pairs.
History.back() - Web APIs
WebAPIHistoryback
add a listener for the popstate event in order to determine when the navigation has completed.
... html <button id="go-back">go back!</button> javascript document.getelementbyid('go-back').addeventlistener('click', () => { history.back(); }); specifications specification status comment html living standardthe definition of 'history.back()' in that specification.
History.forward() - Web APIs
WebAPIHistoryforward
add a listener for the popstate event in order to determine when the navigation has completed.
... html <button id='go-forward'>go forward!</button> javascript document.getelementbyid('go-forward').addeventlistener('click', e => { window.history.forward(); }) specifications specification status comment html living standardthe definition of 'history' in that specification.
Ajax navigation example - Web APIs
jsxgmlwzpeaach5bakkaaaalaaaaaaqabaaaamyclrc/jdksatlqtsckdcecajdii7hcq4emtcpyrcuubjcyrghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa=="; ocover.appendchild(oloadingimg); oloadingbox.appendchild(ocover); onpopstate = function (oevent) { bupdateurl = false; opageinfo.title = oevent.state.title; opageinfo.url = oevent.state.url; getpage(); }; window.addeventlistener ?
... addeventlistener("load", init, false) : window.attachevent ?
IDBCursor.advance() - Web APIs
WebAPIIDBCursoradvance
for a complete working example, see our idbcursor example (view example live.) function advanceresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.v...
...alue.year; list.appendchild(listitem); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'advance()' in that specification.
IDBCursor.continuePrimaryKey() - Web APIs
example here’s how you can resume an iteration of all articles tagged with "javascript" since your last visit: let request = articlestore.index("tag").opencursor(); let count = 0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // preload 5 articles ...
...into the unread list; unreadlist.push(cursor.value); if (++count < 5) { cursor.continue(); } }; specifications specification status comment indexed database api draftthe definition of 'continueprimarykey()' in that specification.
IDBCursor.delete() - Web APIs
WebAPIIDBCursordelete
for a complete working example, see our idbcursor example (view example live.) function deleteresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readwrite'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess = function()...
...even power windows is better.'); }; } else { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); } cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'delete()' in that specification.
IDBCursor.direction - Web APIs
for a complete working example, see our idbcursor example (view example live.) function backwards() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor(null,'prev').onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</stro...
...ng>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'direction' in that specification.
IDBCursor.request - Web APIs
WebAPIIDBCursorrequest
for example: function displaydata() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.album...
...title + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api draftthe definition of 'request' in that specification.
IDBCursor.source - Web APIs
WebAPIIDBCursorsource
within each iteration we log the source of the cursor, which will log our idbobjectstore object to the console, something like this: idbobjectstore {autoincrement: false, transaction: idbtransaction, indexnames: domstringlist, keypath: "albumtitle", name: "rushalbumlist"…} the cursor does not require us to select the data based on a key; we can just grab all of it.
...for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications ...
IDBCursor.update() - Web APIs
WebAPIIDBCursorupdate
for a complete working example, see our idbcursor example (view example live.) function updateresult() { list.innerhtml = ''; const transaction = db.transaction(['rushalbumlist'], 'readwrite'); const objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedata.year = 20...
...50; const request = cursor.update(updatedata); request.onsuccess = function() { console.log('a better album year?'); }; }; const listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'update()' in that specification.
IDBDatabase: close event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('...
...hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist...
IDBDatabase.createObjectStore() - Web APIs
example // let us open our database var request = window.indexeddb.open("todolist", 4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling // window.indexeddb.open().
...request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); ...
IDBDatabase.name - Web APIs
WebAPIIDBDatabasename
// let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // this line will log the name of the database, which should be "todolist" console.log(db.name); }; specifications specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBDatabase: versionchange event - Web APIs
bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore...
....createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'taskti...
databases - Web APIs
the databases method of the idbfactory interface returns a list represening all the available databases, including their names and versions.
... return value a promise that resolves either to an error or a list of dictionaries, each with two elements, name and version.
IDBFactory.open() - Web APIs
WebAPIIDBFactoryopen
example example of calling open with the current specification's version parameter: var request = window.indexeddb.open("todolist", 4); in the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
... to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't // need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
IDBFactory - Web APIs
idbfactory.databases a method that returns a list of all available databases, including their names and versions.
...nces to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the result of opening the database in the db variable.
IDBIndex.objectStore - Web APIs
the current object store is logged to the console: it should be returned something like this: idbobjectstore { name: "contactslist", keypath: "id", indexnames: domstringlist[7], transaction: idbtransaction, autoincrement: false } finally, we iterate through each record, and insert the data into an html table.
... for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.openKeyCursor() - Web APIs
this makes obtaining a list of keys much more efficient.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.openkeycursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.key + '</td>' + '<td>' + cursor.primarykey...
IDBObjectStore.clear() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // clear all the data form the object store cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to clear all the data out of the object store var objectstorer...
IDBObjectStore.delete() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to delete the specified record out of the...
IDBObjectStore.deleteIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = this.result; // run the displaydata() function to populate the task list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain ...
IDBObjectStore.get() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the getdata() function to get the data from the database getdata(); }; function getdata() { // open a read/write db transaction, ready for retrieving the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to get a record by key from the object store ...
IDBOpenDBRequest: upgradeneeded event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false })...
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.
IDBRequest.error - Web APIs
WebAPIIDBRequesterror
the list describes problems that could occur when the request is being executed, but you might also encounter other problems when the request is being made.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the do-do list with the specified title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request tha...
IDBRequest: success event - Web APIs
bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and listens for the success event using addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('min...
...utes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore ...
IDBRequest - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database.
IDBTransaction.objectStoreNames - Web APIs
the objectstorenames read-only property of the idbtransaction interface returns a domstringlist of names of idbobjectstore objects.
... syntax var mydatabase = transactionobj.objectstorenames; returns a domstringlist of names of idbobjectstore objects.
IIRFilterNode.getFrequencyResponse() - Web APIs
ts, and grab a reference to it in our javascript: <p>iir filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var feedforwardcoefficients = [0.1, 0.2, 0.3, 0.4, 0.5]; var feedbackcoefficients = [0.5, 0.4, 0.3, 0.2, 0.1]; var iirfilter = audioctx.createiirfilter(feedforwardcoefficients, feedbackcoefficients); ...
... function calcfrequencyresponse() { iirfilter.getfrequencyresponse(myfrequencyarray, magresponseoutput, phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification.
ImageCapture - Web APIs
methods the imagecapture interface is based on eventtarget, so it includes the methods defined by that interface as well as the ones listed below.
...h.min(canvas.width / img.width, canvas.height / img.height); let x = (canvas.width - img.width * ratio) / 2; let y = (canvas.height - img.height * ratio) / 2; canvas.getcontext('2d').clearrect(0, 0, canvas.width, canvas.height); canvas.getcontext('2d').drawimage(img, 0, 0, img.width, img.height, x, y, img.width * ratio, img.height * ratio); } document.queryselector('video').addeventlistener('play', function() { document.queryselector('#grabframebutton').disabled = false; document.queryselector('#takephotobutton').disabled = false; }); specifications specification status comment mediastream image capturethe definition of 'imagecapture' in that specification.
Basic concepts - Web APIs
indexeddb is useful for applications that store a large amount of data (for example, a catalog of dvds in a lending library) and applications that don't need persistent internet connectivity to work (for example, mail clients, to-do lists, and notepads).
...they have onsuccess and onerror properties, and you can call addeventlistener() and removeeventlistener() on them.
InputDeviceCapabilities API - Web APIs
mybutton.addeventlistener('mousedown', function(e) { // touch event case handled above, don't change the style again on tap.
... if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); interfaces inputdevicecapabilities provides logical information about an input device.
InputEvent.data - Web APIs
WebAPIInputEventdata
examples in the following simple example we've set up an event listener on the input event so that when any change is made to the contents of the <input> element (either by typing or pasting), the text that was added is retrieved via the inputevent.data property and reported in the paragraph below the input.
... <p>some text to copy and paste.</p> <input type="text"> <p class="result"></p> var editable = document.queryselector('input') var result = document.queryselector('.result'); editable.addeventlistener('input', (e) => { result.textcontent = "inputted text: " + e.data; }); specifications specification status comment input events level 2the definition of 'data' in that specification.
InputEvent.dataTransfer - Web APIs
examples in the following simple example we've set up an event listener on the input event so that when any content is pasted into the contenteditable <p> element, its html source is retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input.
... style="font-style: italic; color: red">exciting: italic red text!</span></p> <p>boring normal text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('.result') var datatransferobj; editable.addeventlistener('input', (e) => { result.textcontent = e.datatransfer.getdata('text/html'); }); specifications specification status comment input events level 2the definition of 'datatransfer' in that specification.
InputEvent.inputType - Web APIs
for a complete list of the available input types, see the attributes section of the input events level 1 spec.
...try inserting line breaks, or deleting text in different ways, or pasting different content in.</p> <hr> <ul> <li>a sample</li> <li>bulleted</li> <li>list.</li> </ul> <p>another paragraph.</p> </div> javascript const log = document.getelementbyid('log'); const editable = document.queryselector('div[contenteditable]'); editable.addeventlistener('input', loginputtype); function loginputtype(event) { log.textcontent = `input type: ${event.inputtype}`; } result try editing the text inside the <div> and see what happens.
install - Web APIs
method of installtrigger object syntax int install(array xpilist [, function callbackfunc ] ) parameters the install method has the following parameters: xpilist an array of files to be installed (see example below).
... firefox 3 note in firefox 3 the callback is no longer invoked unless the website performing the installation is whitelisted.
IntersectionObserver.IntersectionObserver() - Web APIs
the rootmargin, if specified, is checked to ensure it's syntactically correct, the thresholds are checked to ensure that they're all in the range 0.0 and 1.0 inclusive, and the threshold list is sorted in ascending numeric order.
... if the threshold list is empty, it's set to the array [0.0].
KeyboardEvent.charCode - Web APIs
example html <p>type anything into the input box below to log a <code>charcode</code>.</p> <input type="text" /> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.queryselector('#log'); input.addeventlistener('keypress', function(e) { log.innertext = `key pressed: ${string.fromcharcode(e.charcode)}\ncharcode: ${e.charcode}`; }); result notes in a keypress event, the unicode value of the key pressed is stored in either the keycode or charcode property, but never both.
... for a list of the charcode values associated with particular keys, run example 7: displaying event object properties and view the resulting html table.
KeyboardEvent.initKeyEvent() - Web APIs
see keyboardevent.keycode for the list of key codes.
...vent is the current gecko equivalent of the dom level 3 events (initially drafted and also deprecated in favor of keyboardevent() keyboard.initkeyboardevent() method with the following arguments : typearg of type domstring canbubblearg of type boolean cancelablearg of type boolean viewarg of type views::abstractview keyidentifierarg of type domstring keylocationarg of type unsigned long modifierslist of type domstring); ...
KeyboardEvent.initKeyboardEvent() - Web APIs
syntax kbdevent.initkeyboardevent(typearg, canbubblearg, cancelablearg, viewarg, chararg, keyarg, locationarg, modifierslistarg, repeat) parameters typearg the type of keyboard event; this will be one of keydown, keypress, or keyup.
... modifierslistarg a whitespace-delineated list of modifier keys that should be considered to be active on the event's key.
Keyboard API - Web APIs
a list of valid code values is found in the writing system keys section of the ui events keyboardevent code values spec.
... to capture the "w", "a", "s", and "d" keys, call lock() with a list that contains the key code attribute value for each of these keys: navigator.keyboard.lock(["keyw", "keya", "keys", "keyd"]); this captures these keys regardless of which modifiers are used with the key press.
LayoutShift - Web APIs
// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let cumulativelayoutshiftscore = 0; const observer = new performanceobserver((list) => { for (const entry of list.getentries()) { // only count layout shifts without recent user input.
... if (!entry.hadrecentinput) { cumulativelayoutshiftscore += entry.value; } } }); observer.observe({type: 'layout-shift', buffered: true}); document.addeventlistener('visibilitychange', () => { if (document.visibilitystate === 'hidden') { // force any pending records to be dispatched.
Location: ancestorOrigins - Web APIs
the ancestororigins read-only property of the location interface is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.
...you can also use it to vary the behavior of the document based on what site or list of sites is framing it.
Location - Web APIs
WebAPILocation
ine-height:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigins ...
...is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.
Long Tasks API - Web APIs
attributions a list of containers that the task occurred within.
... usage var observer = new performanceobserver(function(list) { var perfentries = list.getentries(); for (var i = 0; i < perfentries.length; i++) { // process long task notifications: // report back for analytics and monitoring // ...
MIDIAccess - Web APIs
the midiaccess interface of the web midi api provides methods for listing midi input and output devices, and obtaining access to those devices.
... examples navigator.requestmidiaccess() .then(function(access) { // get lists of available midi controllers const inputs = access.inputs.values(); const outputs = access.outputs.values(); access.onstatechange = function(e) { // print information about the (dis)connected midi controller console.log(e.port.name, e.port.manufacturer, e.port.state); }; }); specifications specification status comment web midi api ...
msExtendedCode - Web APIs
example var video1 = object.getelementbyid("video1"); video1.addeventlistener('error', function () { var error = video1.error.msextendedcode; //...
... }, false); video.addeventlistener('canplay', function () { video1.play(); }, false); ...
MediaRecorder: dataavailable event - Web APIs
examples using addeventlistener to listen for dataavailable events: ...
... var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ...
MediaRecorder - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...unction(e) { console.log("data available after mediarecorder.stop() called."); var clipname = prompt('enter a name for your sound clip'); var clipcontainer = document.createelement('article'); var cliplabel = document.createelement('p'); var audio = document.createelement('audio'); var deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; c...
MediaStream.onaddtrack - Web APIs
example this example adds a listener which, when a new track is added to the stream, appends a new item to a list of tracks; the new item shows the track's kind ("audio" or "video") and label.
... stream.onaddtrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onaddtrack' in that specification.
MediaStream.onremovetrack - Web APIs
example this example adds a listener which, when a track is removed from the stream, logs the track that was removed.
... stream.onremovetrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = "removed: " + event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onremovetrack' in that specification.
MediaStreamConstraints.audio - Web APIs
0px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once t...
...0px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellati...
MediaStreamConstraints.video - Web APIs
0px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once t...
...0px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of video constraints that indicate ...
MediaStreamTrack.muted - Web APIs
instead, add event listeners for the mute and unmute events.
... let mutedcount = 0; tracklist.foreach((track) => { if (track.muted) { mutedcount += 1; } }); specifications specification status comment media capture and streamsthe definition of 'muted' in that specification.
MediaStreamTrack.stop() - Web APIs
then the stream's track list is obtained by calling its gettracks() method.
... from there, all that remains to do is to iterate over the track list using foreach() and calling each track's stop() method.
Recording a media element - Web APIs
getting an input stream and setting up the recorder now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button: startbutton.addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true, audio: true }).then(stream => { preview.srcobject = stream; downloadbutton.href = stream; preview.capturestream = preview.capturestream || preview.mozcapturestream; return new promise(resolve => preview.onplaying = resolve); }).then(() => startrecording(preview.capturestream(), recordingtime...
... handling the stop button the last bit of code adds a handler for the click event on the stop button using addeventlistener(): stopbutton.addeventlistener("click", function() { stop(preview.srcobject); }, false); this simply calls the stop() function we covered earlier.
Using the MediaStream Recording API - Web APIs
const mediarecorder = new mediarecorder(stream); there are a series of methods available in the mediarecorder interface that allow you to control recording of the media stream; in web dictaphone we just make use of two, and listen to some events.
... chunks we have received: mediarecorder.onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelement('p'); const audio = document.createelement('audio'); const deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); const blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; const audiourl = window.ur...
Media Source API - Web APIs
sourcebufferlist a simple container list for multiple sourcebuffer objects.
... trackdefaultlist a simple container list for multiple trackdefault objects.
MessageChannel() - Web APIs
messagechannel.port1 is listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessageChannel.port1 - Web APIs
the handlemessage method is associated to the port1 to listen when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } specifications specification status comment html living standardthe definition of 'port1' in that specification.
MessageChannel.port2 - Web APIs
messagechannel.port1 is listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort.close() - Web APIs
WebAPIMessagePortclose
example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using eventtarget.addeventlistener.
... channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); you could stop messages being sent at any time using channel.port1.close(); specifications specification status comment html living standardthe definition of 'close()' in that specification.
MessagePort.start() - Web APIs
WebAPIMessagePortstart
this method is only needed when using eventtarget.addeventlistener; it is implied when using messagechannel.onmessage.
... example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using onmessage: channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } another option would be to do this using eventtarget.addeventlistener, however, when this method is used, you need to explicitly call start() to begin the flow of messages to this document: channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); specifications specification status comment html living standardthe definition...
MouseEvent.relatedTarget - Web APIs
="log"></p> </body> css #outer { width: 250px; height: 125px; display: flex; } #red { flex-grow: 1; background: red; } #blue { flex-grow: 1; background: blue; } #log { max-height: 120px; overflow-y: scroll; } javascript const mouseoutlog = document.getelementbyid('log'), red = document.getelementbyid('red'), blue = document.getelementbyid('blue'); red.addeventlistener('mouseover', overlistener); red.addeventlistener('mouseout', outlistener); blue.addeventlistener('mouseover', overlistener); blue.addeventlistener('mouseout', outlistener); function outlistener(event) { let related = event.relatedtarget ?
... event.relatedtarget.id : "unknown"; mouseoutlog.innertext = `\nfrom ${event.target.id} into ${related} ${mouseoutlog.innertext}`; } function overlistener(event) { let related = event.relatedtarget ?
MouseEvent - Web APIs
mouseevent.mozinputsource read only the type of device that generated the event (one of the moz_source_* constants listed below).
...click", { bubbles: true, cancelable: true, view: window }); var cb = document.getelementbyid("checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault alert("canceled"); } else { // none of the handlers called preventdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
MutationObserver.observe() - Web APIs
(for example, if mutationobserverinit.childlist, mutationobserverinit.attributes, and mutationobserverinit.characterdata are all false.) the value of options.attributes is false (indicating that attribute changes are not to be monitored), but attributeoldvalue is true and/or attributefilter is present.
...id"); // create a new instance of `mutationobserver` named `observer`, // passing it a callback function const observer = new mutationobserver(function() { console.log('callback that runs when observer is triggered'); }); // call `observe()` on that mutationobserver instance, // passing it the element to observe, and the options object observer.observe(elementtoobserve, {subtree: true, childlist: true}); specifications specification status comment domthe definition of 'mutationobserver.observe()' in that specification.
MutationObserver.takeRecords() - Web APIs
the mutationobserver method takerecords() returns a list of all matching dom changes that have been detected but not yet processed by the observer's callback function, leaving the mutation queue empty.
... const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); /* ...later, when it's time to stop observing...
MutationObserver - Web APIs
mutation observer & customize resize event listener & demo https://codepen.io/webgeeker/full/yjrzgg/ example the following example was adapted from this blog post.
... // select the node that will be observed for mutations const targetnode = document.getelementbyid('some-id'); // options for the observer (which mutations to observe) const config = { attributes: true, childlist: true, subtree: true }; // callback function to execute when mutations are observed const callback = function(mutationslist, observer) { // use traditional 'for loops' for ie 11 for(let mutation of mutationslist) { if (mutation.type === 'childlist') { console.log('a child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('the ' + mutation.attributename + ' attribute was modified.'); } } }; // create an observer instance linked to the callback function const observer = new ...
MutationObserverInit.attributeOldValue - Web APIs
function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.target[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.queryselector("#target"); var observer = new mutationobser...
...ver(callback); observer.observe(targetnode, { attributes: true, attributeoldvalue: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects.
MutationObserverInit.attributes - Web APIs
function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.target[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.queryselector("#target"); var observer = new mutationobser...
...ver(callback); observer.observe(targetnode, { attributes: true, attributeoldvalue: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects.
MutationObserverInit - Web APIs
properties at a minimum, one of childlist, attributes, and/or characterdata must be true when you call observe().
... childlist optional set to true to monitor the target node (and, if subtree is true, its descendants) for the addition of new child nodes or removal of existing child nodes.
NDEFMessage.records - Web APIs
the records property of ndefmessage interface represents a list of ndefrecords defining the ndef message.
... syntax var recordlist = ndefmessage.records; value a list of ndefrecord object that represent data recorded in the message.
NavigationPreloadManager - Web APIs
examples feature detecting and enabling navigation preloading addeventlistener('activate', event => { event.waituntil(async function() { if (self.registration.navigationpreload) { // enable navigation preloads!
... addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
Navigator.sendBeacon() - Web APIs
window.addeventlistener("unload", function logdata() { var xhr = new xmlhttprequest(); xhr.open("post", "/log", false); // third parameter of `false` means synchronous xhr.send(analyticsdata); }); this is what sendbeacon() replaces.
... window.addeventlistener("unload", function logdata() { navigator.sendbeacon("/log", analyticsdata); }); the beacon sends an http request via the post method, with all relevant cookies available when called.
Navigator - Web APIs
WebAPINavigator
navigatorplugins.mimetypes read only returns an mimetypearray listing the mime types supported by the browser.
... navigatorplugins.plugins read only returns a pluginarray listing the plugins installed in the browser.
Navigator.onLine - Web APIs
you can see changes in the network state by listening for the events on window.ononline and window.onoffline.
... to see changes in the network state, use addeventlistener to listen for the events on window.online and window.offline, as in the following example: window.addeventlistener('offline', function(e) { console.log('offline'); }); window.addeventlistener('online', function(e) { console.log('online'); }); specifications specification status comment html living standardthe definition of 'navigator.online' in that specificat...
NavigatorPlugins - Web APIs
properties navigatorplugins.mimetypes read only returns an mimetypearray listing the mime types supported by the browser.
... navigatorplugins.plugins read only returns a pluginarray listing the plugins installed in the browser.
Node.appendChild() - Web APIs
WebAPINodeappendChild
the node.appendchild() method adds a node to the end of the list of children of a specified parent node.
... if the given child is a documentfragment, the entire contents of the documentfragment are moved into the child list of the specified parent node.
Node.cloneNode() - Web APIs
WebAPINodecloneNode
example let p = document.getelementbyid("para1") let p_prime = p.clonenode(true) notes cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners.
... it does not copy event listeners added using addeventlistener() or those assigned to element properties (e.g., node.onclick = somefunction).
Node.insertBefore() - Web APIs
WebAPINodeinsertBefore
if the given child is a documentfragment, the entire contents of the documentfragment are moved into the child list of the specified parent node.
... in the previous example, sp1 could be inserted after sp2 using: parentdiv.insertbefore(sp1, sp2.nextsibling) if sp2 does not have a next sibling, then it must be the last child — sp2.nextsibling returns null, and sp1 is inserted at the end of the child node list (immediately after sp2).
Node.previousSibling - Web APIs
the node.previoussibling read-only property returns the node immediately preceding the specified one in its parent's childnodes list, or null if the specified node is the first in that list.
... to navigate the opposite way through the child nodes list use node.nextsibling.
NonDocumentTypeChildNode.previousElementSibling - Web APIs
the nondocumenttypechildnode.previouselementsibling read-only property returns the element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.
... syntax prevnode = elementnodereference.previouselementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el = document.getelementbyid('div-03').previouselementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.previouselementsibling; } document.write('</ol>'); </script> this example outputs the following into the page when it loads: siblings of div-03 1.
NonDocumentTypeChildNode - Web APIs
nondocumenttypechildnode.previouselementsibling read only returns the element immediately prior to this node in its parent's children list, or null if there is no element in the list prior to this node.
... nondocumenttypechildnode.nextelementsibling read only returns the element immediately following this node in its parent's children list, or null if there is no element in the list following this node.
Notification.actions - Web APIs
the actions read-only property of the notification interface returns the list of notificationaction objects set using the actions option when creating the notification using the notification() constructor.
... this is a list of the application-defined actions the user can choose to take immediately within the context of a notification.
Notification.close() - Web APIs
at the end of the function, it also calls close() inside a addeventlistener() function to remove the notification when the relevant content has been read on the webpage.
... function spawnnotification(thebody, theicon, thetitle) { var options = { body: thebody, icon: theicon }; var n = new notification(thetitle,options); document.addeventlistener('visibilitychange', function() { if (document.visibilitystate === 'visible') { // the tab has become visible so clear the now-stale notification.
Notification.icon - Web APIs
WebAPINotificationicon
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.
NotificationEvent.notification - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click'); // data can be attached to the notification so that you // can process it in the notificationclick handler.
... console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notification' in that specification.
PannerNode.positionY - Web APIs
if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
... example the following example starts an oscillator and pans it above the listener after 1 second, below the listener after 2 seconds, and back to the center after 3 seconds.
PannerNode.rolloffFactor - Web APIs
the rollofffactor property of the pannernode interface is a double value describing how quickly the volume is reduced as the source moves away from the listener.
... example this example demonstrates how different rollofffactor values affect how the volume of the test tone decreases with increasing distance from the listener: const context = new audiocontext(); // all our test tones will last this many seconds const note_length = 4; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given rollofffactor // and schedules it to move away from the listener along the z (depth-wise) axis // at the given start time, resulting in a decrease in volume...
ParentNode.querySelector() - Web APIs
if you need all the elements matching the selector list, use queryselectorall() instead.
...this string must be a valid compound selector list supported by the browser; if it's not, a syntaxerror exception is thrown.
PaymentAddress.toJSON() - Web APIs
requires the comma-delineated list in dom.payments.request.supportedregions to contain one or more of the supported 2-character iso locales, currently us and ca.disabled from version 62: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
...requires the comma-delineated list in dom.payments.request.supportedregions to contain one or more of the supported 2-character iso locales, currently us and ca.disabled from version 62: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentRequest.onpaymentmethodchange - Web APIs
syntax paymentrequest.addeventlistener('paymentmethodchange', paymentmethodchangeevent => { ...
...to make sure you receive the event, you should add event listeners to paymentrequest object after instantiation, but before you call show().
PaymentRequest: paymentmethodchange event - Web APIs
this code creates a new paymentrequest, adds a handler for the paymentmethodchange event by calling the request's addeventlistener(), then calls show() to present the payment interface to the user.
... const options = { requestshipping: true }; const paymentrequest = new paymentrequest(paymentmethods, detailsforshipping("ground"), options); paymentrequest.addeventlistener("paymentmethodchange", handlepaymentchange, false); paymentrequest.show() .then(response => response.complete("success")) .catch(err => console.log("error handling payment request: " + err)); the event handler function itself, handlepaymentchange(), looks like this: handlepaymentchange = event => { const detailsupdate = {}; if (event.methodname === "https://apple.com/apple-pay") { ...
PaymentRequest: shippingoptionchange event - Web APIs
for payment requests that request shipping information, and for which shipping options are offered, the shippingoptionchange event is sent to the paymentrequest whenever the user chooses a shipping option from the list of available options.
... paymentrequest.addeventlistener("shippingoptionchange", event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }, false); after caling a custom function, calculatenewtotal(), to compute the updated total based on the newly-selected shipping option as specified by the shippingoption.
PaymentResponse.onpayerdetailchange - Web APIs
examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected.
...ername)); oldpayername = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { ...
performance.getEntries() - Web APIs
the getentries() method returns a list of all performanceentry objects for the page.
... the list's members (entries) can be created by making performance marks or measures (for example by calling the mark() method) at explicit points in time.
PerformanceNavigationTiming.type - Web APIs
the value must be one of the following: navigate navigation started by clicking a link, entering the url in the browser's address bar, form submission, or initializing through a script operation other than reload and back_forward as listed below.
... syntax perfentry.type; return value a string which is one of the values listed above.
PerformanceObserver() - Web APIs
when the callback is invoked, its first parameter is a list of performance observer entries and the second parameter is the observer object.
... example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver()' in that specification.
PerformanceObserver.observe() - Web APIs
see performanceentry.entrytype for a list of valid performance entry type names.
... var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specific...
PerformanceObserver - Web APIs
performanceobserver.takerecords() returns the current list of performance entries stored in the performance observer, emptying it out.
... example function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver' in that specification.
PerformanceResourceTiming - Web APIs
the interface also supports the following properties which are listed in the order in which they are recorded for the fetching of a single resource.
... an alphabetical listing is shown in the navigation, at left.
Permissions.query() - Web APIs
WebAPIPermissionsquery
}) parameters permissiondescriptor an object that sets options for the query operation consisting of a comma-separated list of name-value pairs.
...an up-to-date list of permission names can be found in the spec under the permissionname enum, but bear in mind that the actual permissions supported by browsers is currently much smaller than this.
PointerEvent.pointerType - Web APIs
if the browser supports pointer device types other than those listed above, the value should be vendor-prefixed to avoid conflicting names for different types of devices.
... targetelement.addeventlistener('pointerdown', function(event) { // call the appropriate pointer type handler switch (event.pointertype) { case 'mouse': process_pointer_mouse(event); break; case 'pen': process_pointer_pen(event); break; case 'touch': process_pointer_touch(event); break; default: console.log(`pointertype ${event.pointertype} is not suported`); } }, false); specifications specification status comment pointer eventsthe definition of 'pointertype' in that specification.
Proximity Events - Web APIs
this event can be captured at the window object level by using the addeventlistener method (using the deviceproximity or userproximity event name) or by attaching an event handler to the window.ondeviceproximity or window.onuserproximity properties.
... example window.addeventlistener('userproximity', function(event) { if (event.near) { // let's power off the screen navigator.mozpower.screenenabled = false; } else { // otherwise, let's power on the screen navigator.mozpower.screenenabled = true; } }); specifications specification status comment proximity sensorthe definition of 'proximity events' in that specification.
PublicKeyCredentialCreationOptions.extensions - Web APIs
here is the current (as of march 2019) list of potential extensions which may be used during the registration operation.
...restricts the list of authenticator models which may be used.
PushEvent.data - Web APIs
WebAPIPushEventdata
self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, ...
... tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'data' in that specification.
PushEvent - Web APIs
WebAPIPushEvent
self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new ...
...self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'pushevent' in that specification.
RTCDTMFSender - Web APIs
ight="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string).
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
RTCError - Web APIs
WebAPIRTCError
datachannel.addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmyalertmessage("data channel error", alertmessage); } else { terminatemyconnection(); } }); if t...
... the above example uses addeventlistener() to add the handler for error events.
RTCErrorEvent.error - Web APIs
datachannel.addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmyalertmessage("data channel error", alertmessage); } else { terminatemyconnection(); } }); if t...
... the above example uses addeventlistener() to add the handler for error events.
RTCIceCandidateInit.candidate - Web APIs
if the candidate is an empty string (""), the end of the candidate list has been reached; this candidate is known as the "end-of-candidates" marker.
...the complete list of attributes for this example candidate is: foundation = 4234997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.168.0.56" port = 44323 type = "host" example when a new ice candidate is received by your signaling code from the remote peer, you need to construct the rtcicecandidate object that encapsulate...
RTCIceServers.urls - Web APIs
WebAPIRTCIceServerurls
keep in mind that ice will try all the urls you list here, so the more you include, the longer connections will take to establish.
...any number of servers could be listed of any combination of types.
RTCIceServer - Web APIs
every server in the list will be contacted and tried out before one is selected to be used for negotiation.
... older versions of the webrtc specification included an url property instead of urls; this was changed in order to let you specify multiple addresses for each server in the list, as shown in the example below.
RTCIceTransport.getLocalCandidates() - Web APIs
the local candidates are placed in this list by the ice agent prior to being delivered to the local client's code in an icecandidate event so that the client can forward the candidates to the remote peer.
... example this simple example gets the local candidate list from the rtcicetransport for the first rtcrtpsender on the rtcpeerconnection, then outputs to the console all of the candidates in the list.
RTCIceTransport.getRemoteCandidates() - Web APIs
each time your signaling code calls rtcpeerconnection.addicecandidate() to add a received candidate to the ice session, the ice agent places it in the list returned by this function.
... example this simple example gets the remote candidate list from the rtcicetransport for the first rtcrtpsender on the rtcpeerconnection, then outputs to the console all of the candidates in the list.
RTCIceTransport - Web APIs
see the rtcicetransportstate enumerated type for a complete list of states.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
RTCPeerConnection.addTrack() - Web APIs
the sender's set of associated streams is set to the list of streams passed into this method, stream....
...this is done by adding each track in the stream by iterating over the list returned by mediastream.gettracks() and passing them to addtrack() along with the stream which they're a component of.
RTCPeerConnection.addTransceiver() - Web APIs
sendencodings optional a list of encodings to allow when sending rtp media from the rtcrtpsender.
... streams optional a list of mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's track event occurs, these are the streams that will be specified by that event.
RTCPeerConnection: addstream event - Web APIs
if it does, a track event listener is set up; otherwise, an addstream event listener is set up.
... you can also use the addeventlistener() method to set an event listener: pc.addeventlistener("addstream", ev => doaddstream(ev.stream), false); ...
RTCPeerConnection.createDataChannel() - Web APIs
negotiated optional by default (false), data channels are negotiated in-band, where one side calls createdatachannel, and the other side listens to the rtcdatachannelevent event using the ondatachannel eventhandler .
... return value a new rtcdatachannel object with the specified label, configured using the options specified by options if that parameter is included; otherwise, the defaults listed above are established.
RTCPeerConnection.getSenders() - Web APIs
the function gets the list of the peer connection's senders and iterates over every sender, setting the corresponding media track's enabled to the inverse of the specified muting.
... function setmuting(pc, muting) { let senderlist = pc.getsenders(); senderlist.foreach(sender) { sender.track.enabled = !muting; } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.getsenders()' in that specification.
RTCPeerConnection: icecandidate event - Web APIs
if you need to perform any special actions when there are no further candidates expected, you're much better off watching the ice gathering state by watching for icegatheringstatechange events: pc.addeventlistener("icegatheringstatechange", ev => { switch(pc.icegatheringstate) { case "new": /* gathering is either just starting or has been reset */ break; case "gathering": /* gathering has begun or is ongoing */ break; case "complete": /* gathering has ended */ break; } }); as you can see in this example, the icegatheringstatechange event lets you kn...
... first, an example using addeventlistener(): pc.addeventlistener("icecandidate", ev => { if (ev.candidate) { sendmessage({ type: "new-ice-candidate", candidate: event.candidate }); } }, false); you can also set the onicecandidate event handler property directly: pc.onicecandidate = ev => { if (ev.candidate) { sendmessage({ type: "new-ice-candidate", candidate: event.candidate }); } ...
RTCPeerConnection: icecandidateerror event - Web APIs
the 701 error is fired only once per server url from the list of available stun or turn servers provided when creating the rtcpeerconnection.
... pc.addeventlistener("icecandidateerror", (event) => { if (event.errorcode === 701) { reportconnectfail(event.url, event.errortext); } }); note that if multiple stun and/or turn servers are provided when creating the connection, this error may happen more than once, if more than one of those servers fails.
RTCPeerConnection: negotiationneeded event - Web APIs
examples in this example, we use addeventlistener() to create an event handler for negotiationneeded.
... pc.addeventlistener("negotiationneeded", ev => { pc.createoffer() .then(offer => return pc.setlocaldescription(offer)) .then(() => sendsignalingmessage({ type: "video-offer", sdp: pc.localdescription })) .catch(err => { /* handle error */ ); }, false); after creating the offer, the local end is configured by calling rtcpeerconnection.setlocaldescription(); then a signaling message is created and sent to the remote peer through the signaling server, to share that offer with the other peer.
RTCPeerConnection: track event - Web APIs
pc = new rtcpeerconnection({ iceservers: [ { urls: "turn:fake.turnserver.url", username: "someusername", credential: "somepassword" } ] }); pc.addeventlistener("track", e => { videoelement.srcobject = e.streams[0]; hangupbutton.disabled = false; }, false); the event handler assigns the new track's first stream to an existing <video> element, identified using the variable videoelement.
... you can also assign the event handler function to the ontrack property, rather than use addeventlistener().
RTCRtpTransceiverInit - Web APIs
sendencodings optional a list of encodings to allow when sending rtp media from the rtcrtpsender.
... streams optional a list of mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's track event occurs, these are the streams that will be specified by that event.
RTCStatsIceCandidatePairState - Web APIs
this represents the state of this candidate pair within the ice check list for the rtcpeerconnection.
... see ice check lists in rtcicecandidatepairstats.state for further information about how ice check lsits work.
Range.getClientRects() - Web APIs
the range.getclientrects() method returns a list of domrect objects representing the area of the screen occupied by the range.
... syntax rectlist = range.getclientrects() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); rectlist = range.getclientrects(); specification specification status comment css object model (cssom) view modulethe definition of 'range.getclientrects()' in that specification.
ReadableStream.getReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = value; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'getreader()' in that specification.
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'readablestreamdefaultreader()' in that specification.
ReadableStreamDefaultReader.cancel() - Web APIs
if (done) { console.log("stream complete"); reader.cancel(); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'cancel()' in that specification.
ReadableStreamDefaultReader.read() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } example 2 - handling text line by line this example shows how you might fetch a text file and handle it as a stream of text lines.
RelativeOrientationSensor - Web APIs
const options = { frequency: 60, referenceframe: 'device' }; const sensor = new relativeorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
ReportingObserver - Web APIs
reportingobserver.takerecords() returns the current list of reports contained in the observer's report queue, and empties the queue.
...because of this, when the button is pressed only the second report is listed.
ResizeObserver - Web APIs
the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const divelem = document.queryselector('body > div'); const slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]'); divelem.style.width = '600px'; slider.addeventlistener('input', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize / 600) + 'rem'; } else { h1elem.st...
...yle.fontsize = math.max(1.5, entry.contentrect.width / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width / 600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if (checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment resize observerthe definition of 'resizeobserver' in that specification.
SVGAElement - Web APIs
svgaelement.ping is a domstring that reflects the ping attribute, containing a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background).
... svgaelement.rellist see htmlanchorelement.rellist.
format - Web APIs
if the font is in one of the formats listed in css2([css2], section15.3.5), then its value is the corresponding <string> parameter of the font.
... syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.3.5).
SVGAnimationElement: beginEvent event - Web APIs
cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.det...
...ail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you can also create an event listener for the begin event using the onbegin event handler property: animateelem.onbegin = () => { console.log('beginevent fired'); } specifications specification status comment scalable vector graphics (svg) 2the definition of 'beginevent' in that specification.
SVGAnimationElement: endEvent event - Web APIs
stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); let btn = document.queryselector('button'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('endevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'endevent fired'; list...
....appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) btn.addeventlistener('click', () => { btn.disabled = true; animateelem.setattribute('repeatcount', '1'); }) event handler property equivalent note that you can also create an event listener for the end event using the onend event handler property: animateelem.onend = () => { console.log('endevent fired'); } specifications specification status comment scalable vector graphics (svg) 2the definition of 'endevent' in that specification.
SVGAnimationElement: repeatEvent event - Web APIs
cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.deta...
...il; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you can also create an event listener for the repeat event using the onrepeat event handler property: animateelem.onrepeat = () => { console.log('repeatevent fired'); } specifications specification status comment scalable vector graphics (svg) 2the definition of 'repeatevent' in that specification.
SVGSVGElement - Web APIs
svgsvgelement.getintersectionlist() returns a nodelist of graphics elements whose rendered content intersects the supplied rectangle.
... svgsvgelement.getenclosurelist() returns a nodelist of graphics elements whose rendered content is entirely contained within the supplied rectangle.
SVGViewElement - Web APIs
svgviewelement.viewtarget an svgstringlist corresponding to the viewtarget attribute of the given <view> element.
... a list of domstring values which contain the names listed in the viewtarget attribute.
Screen - Web APIs
WebAPIScreen
methods screen.lockorientation lock the screen orientation (only works in fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in fullscreen or for installed apps) methods inherited from eventtarget: eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget.
... eventtarget.removeeventlistener() removes an event listener from the eventtarget.
Selection.containsNode() - Web APIs
it uses addeventlistener() to check for selectionchange events.
... html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
ServiceWorker.state - Web APIs
the code listens for any change in the serviceworker.state and returns its value.
...nt.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } specifications specification status comment service workersthe definition of 'state' in that specification.
ServiceWorkerContainer: message event - Web APIs
able no interface messageevent event handler property onmessage examples in this example the service worker get the client's id from a fetch event and then sends it a message using client.postmessage: // in the service worker async function messageclient(clientid) { const client = await clients.get(clientid); client.postmessage('hi client!'); } addeventlistener('fetch', (event) => { messageclient(event.clientid); event.respondwith(() => { // ...
... }); }); the client can receive the message by listening to the message event: // in the page being controlled navigator.serviceworker.addeventlistener('message', (message) => { console.log(message); }); specifications specification status service workersthe definition of 'message' in that specification.
ServiceWorkerContainer.startMessages() - Web APIs
it's possible to start dispatching these messages earlier by calling serviceworkercontainer.startmessages(), for example if you've invoked a message handler using eventtarget.addeventlistener() before the page has finished loading, but want to start processing the messages right away.
... navigator.serviceworker.addeventlistener('message', (e) => { // ...
ServiceWorkerGlobalScope: notificationclick event - Web APIs
bubbles no cancelable no interface notificationevent event handler onnotificationclick examples you can use the notificationclick event in an addeventlistener method: self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.
...rn clients.openwindow('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotificationclick' in that specification.
ServiceWorkerGlobalScope.onfetch - Web APIs
}; example this code snippet is from the service worker prefetch sample (see prefetch example live.) the serviceworkerglobalscope.onfetch event handler listens for the fetch event.
... self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache.
ServiceWorkerGlobalScope.onpushsubscriptionchange - Web APIs
} self.addeventlistener('pushsubscriptionchange', function() { ...
... }) example self.addeventlistener('pushsubscriptionchange', function() { // do something, usually resubscribe to push and // send the new subscription details back to the // server via xhr or fetch }); specifications specification status comment push apithe definition of 'onpushsubscriptionchange' in that specification.
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
examples this example, run in the context of a service worker, listens for a pushsubscriptionchange event and re-subscribes to the lapsed subscription.
... self.addeventlistener("pushsubscriptionchange", event => { event.waituntil(swregistration.pushmanager.subscribe(event.oldsubscription.options) .then(subscription => { return fetch("register", { method: "post", headers: { "content-type": "application/json" }, body: json.stringify({ endpoint: subscription.endpoint }) }); }) ); }, false); when a pushsubscriptionchange event arrives, indicating that the subscription has expired, we resubscribe by calling the push manager's subscribe() method.
ServiceWorkerGlobalScope - Web APIs
examples this code snippet is from the service worker prefetch sample (see prefetch example live.) the serviceworkerglobalscope.onfetch event handler listens for the fetch event.
... self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache.
SourceBuffer.abort() - Web APIs
for example, consider this code: sourcebuffer.addeventlistener('updateend', function (_) { ...
... you can see something similar in action in nick desaulnier's bufferwhenneeded demo — in line 48, an event listener is added to the playing video so a function called seek() is run when the seeking event fires.
SourceBuffer.audioTracks - Web APIs
the audiotracks read-only property of the sourcebuffer interface returns a list of the audio tracks currently contained inside the sourcebuffer.
... syntax var myaudiotracks = sourcebuffer.audiotracks; value an audiotracklist object.
SourceBuffer.changeType() - Web APIs
invalidstateerror the sourcebuffer is not a member of the parent media source's sourcebuffers list, or the buffer's updating property indicates that a previously queued appendbuffer() or remove() is still being processed.
... notsupportederror the specified mime type is not supported, or is not supported with the types of sourcebuffer objects present in the mediasource.sourcebuffers list.
SourceBuffer.textTracks - Web APIs
the texttracks read-only property of the sourcebuffer interface returns a list of the text tracks currently contained inside the sourcebuffer.
... syntax var mytexttracks = sourcebuffer.texttracks; value an texttracklist object.
SourceBuffer.videoTracks - Web APIs
the videotracks read-only property of the sourcebuffer interface returns a list of the video tracks currently contained inside the sourcebuffer.
... syntax var myvideotracks = sourcebuffer.videotracks; value an videotracklist object.
SpeechRecognition.abort() - Web APIs
the abort() method of the web speech api stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a speechrecognitionresult.
...oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.lo...
SpeechRecognition.grammars - Web APIs
syntax var mygrammars = myspeechrecognition.grammars; myspeechrecognition.grammars = myspeechgrammarlist; value a speechgrammarlist containing the speechgrammar objects that represent your grammar for your app.
...oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.start() - Web APIs
the start() method of the web speech api starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current speechrecognition.
...oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.lo...
SpeechRecognition: start event - Web APIs
the start event of the web speech api speechrecognition object is fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition.
... bubbles no cancelable no interface event event handler property onstart examples you can use the start event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('start', function() { console.log('speech recognition service has started'); }); or use the onstart event handler property: recognition.onstart = function() { console.log('speech recognition service has started'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition.stop() - Web APIs
the stop() method of the web speech api stops the speech recognition service from listening to incoming audio, and attempts to return a speechrecognitionresult using the audio captured so far.
...oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.lo...
SpeechRecognitionEvent.resultIndex - Web APIs
the resultindex read-only property of the speechrecognitionevent interface returns the lowest index value result in the speechrecognitionresultlist "array" that has actually changed.
... the speechrecognitionresultlist object is not an array, but it has a getter that allows it to be accessed by array syntax.
SpeechSynthesis: voiceschanged event - Web APIs
the voiceschanged event of the web speech api is fired when the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.getvoices() method has changed (when the voiceschanged event fires.) bubbles no cancelable no interface event event handler property onvoiceschanged examples this could be used to repopulate a list of voices that the user can choose between when the event fires.
... you can use the voiceschanged event in an addeventlistener method: var synth = window.speechsynthesis; synth.addeventlistener('voiceschanged', function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } }); or use the onvoiceschanged event handler property: synth.onvoiceschanged = function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option...
SpeechSynthesisUtterance - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...after defining some necessary variables, we retrieve a list of the voices available using speechsynthesis.getvoices() and populate a select menu with them so the user can choose what voice they want.
SpeechSynthesisVoice - Web APIs
function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect...
....appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", whic...
StylePropertyMapReadOnly - Web APIs
</p> <dl id="output"></dl> we add a touch of css with a custom property to better demonstrate the output: p { --somevariable: 1.6em; --someothervariable: translatex(33vw); --anothervariable: 42; line-height: var(--somevariable); } we add javascript to grab our paragraph and return back a definition list of all the default css property values using computedstylemap().
... // get the element const myelement = document.queryselector('p'); // get the <dl> we'll be populating const styleslist = document.queryselector('#output'); // retrieve all computed styles with computedstylemap() const stylepropertymap = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of stylepropertymap) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } specifications specification status comment css typed om ...
SubmitEvent - Web APIs
properties in addition to the properties listed below, this interface inherits the properties of its parent interface, event.
... let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
SubtleCrypto.deriveKey() - Web APIs
let encryptbutton = document.queryselector(".ecdh .encrypt-button"); encryptbutton.addeventlistener("click", () => { encrypt(alicessecretkey); }); // bob can use his copy to decrypt the message.
... let decryptbutton = document.queryselector(".ecdh .decrypt-button"); decryptbutton.addeventlistener("click", () => { decrypt(bobssecretkey); }); } pbkdf2 in this example we ask the user for a password, then use it to derive an aes key using pbkdf2, then use the aes key to encrypt a message.
SyncManager - Web APIs
the syncmanager interface of the the serviceworker api provides an interface for registering and listing sync registrations.
... syncmanager.gettags return a list of developer-defined identifiers for syncmanager registration.
TextTrack: cuechange event - Web APIs
bubbles no cancelable no interface event event handler property globaleventhandlers.oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying texttrack, indicated b...
... let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living standardthe definition of 'cuechange' i...
Touch.clientX - Web APIs
WebAPITouchclientX
// register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // compute the change in x and y coordinates.
... // the first touch point in the changedtouches // list is the touch point that was just removed from the surface.
Touch.clientY - Web APIs
WebAPITouchclientY
// register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // compute the change in x and y coordinates.
... // the first touch point in the changedtouches // list is the touch point that was just removed from the surface.
Touch.force - Web APIs
WebAPITouchforce
in following code snippet, the touchstart event handler iterrates through the targettouches list and logs the force value of each touch point but the code could invoke different processing depending on the value.
... someelement.addeventlistener('touchstart', function(e) { // iterate through the list of touch points and log each touch // point's force.
Touch.pageX - Web APIs
WebAPITouchpageX
when the touchmove event handler is invoked, each touch point's touch.pagex and touch.pagey coordinates are accessed via the event's touchevent.changedtouches list.
... // register a touchmove listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchmove', function(e) { // iterate through the touch points that have moved and log each // of the pagex/y coordinates.
Touch.pageY - Web APIs
WebAPITouchpageY
when the touchmove event handler is invoked, each touch point's touch.pagex and touch.pagey coordinates are accessed via the event's touchevent.changedtouches list.
... // register a touchmove listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchmove', function(e) { // iterate through the touch points that have moved and log each // of the pagex/y coordinates.
TrackEvent() - Web APIs
the trackevent() constructor creates and returns a new trackevent object describing an event which occurred on a list of tracks (audiotracklist, videotracklist, or texttracklist).
... composed optional a boolean indicating whether or not the event will trigger listeners outside of a shadow root; see event.composed for more details.
URL API - Web APIs
WebAPIURL API
other functions within urlsearchparams let you change the value of keys, add and delete keys and their values, and even sort the list of parameters.
... note the call to urlsearchparams.sort() to sort the parameter list before generating the table.
USB.requestDevice() - Web APIs
WebAPIUSBrequestDevice
for example, if only a usb device with product id 0xa800 is found, then only one device will be listed by the user agent.
... on the other hand if the user agent finds two of the first listed device and one of the second, then all three devices will be listed.
VideoTrack.id - Web APIs
WebAPIVideoTrackid
this id can be used with the videotracklist.gettrackbyid() method to locate a specific track within the media associated with a media element.
... syntax var trackid = videotrack.id; value a domstring which identifies the track, suitable for use when calling gettrackbyid() on an videotracklist such as the one specified by a media element's videotracks property.
VideoTrack.label - Web APIs
WebAPIVideoTracklabel
the list is filtered to only allow certain track kinds through.
... function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "commentary" ]; el.videotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of video tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
VideoTrack - Web APIs
this id can be used to locate a specific track within a video track list by calling videotracklist.gettrackbyid().
... usage notes to get a videotrack for a given media element, use the element's videotracks property, which returns a videotracklist object from which you can get the individual tracks contained in the media: var el = document.queryselector("video"); var tracks = el.videotracks; you can then access the media's individual tracks using either array syntax or functions such as foreach().
WakeLockSentinel.release() - Web APIs
you should always listen for the onrelease event to check if a wake lock has been released.
... wakelockoffbutton.addeventlistener('click', () => { wakelocksentinel.release(); }) specifications specification status comment screen wake lock apithe definition of 'release()' in that specification.
WakeLockSentinel - Web APIs
once acquired we listen for the onrelease event which can be used to give appropriate ui feedback.
... // create a reference for the wake lock let wakelock = null; // create an async function to request a wake lock const requestwakelock = async () => { try { wakelock = await navigator.wakelock.request('screen'); // listen for our release event wakelock.addeventlistener('release', () => { // if wake lock is released alter the ui accordingly }); } catch (err) { // if wake lock request fails - usually system related, such as battery } } wakelockonbutton.addeventlistener('click', () => { requestwakelock(); }) wakelockoffbutton.addeventlistener('click', () => { if (wakelock !== null) { wakelock.release() .then(() => { wakelock = null; }) } }) specifications ...
WebGLRenderingContext.getActiveUniform() - Web APIs
_3d gl.sampler_cube gl.sampler_2d_shadow gl.sampler_2d_array gl.sampler_2d_array_shadow gl.sampler_cube_shadow gl.int_sampler_2d gl.int_sampler_3d gl.int_sampler_cube gl.int_sampler_2d_array gl.unsigned_int_sampler_2d gl.unsigned_int_sampler_3d gl.unsigned_int_sampler_cube gl.unsigned_int_sampler_2d_array when gl.linkprogram is called, webgl creates a list of active uniforms.
...webgl generates one or more entries in the list depending on the declared type of the uniform in the shader: single basic type: one entry with the name of the uniform.
WebGLRenderingContext.makeXRCompatible() - Web APIs
javascript the code that handles starting up graphics, switching to vr mode, and so forth looks like this: const outputcanvas = document.queryselector(".output-canvas"); const gl = outputcanvas.getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton; window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected, reload the r...
...*/ outputcanvas.addeventlistener("webglcontextrestored", (event) => { loadsceneresources(currentscene); }); async function onstartedxrsession(xrsession) { try { await gl.makexrcompatible(); } catch(err) { switch(err) { case aborterror: showsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbuttonclick(event) { if (event.target.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr...
WebGLRenderingContext - Web APIs
webglrenderingcontext.getattachedshaders() returns a list of webglshader objects attached to a webglprogram.
... <p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimenta...
Clearing with colors - Web APIs
window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... window.removeeventlistener(evt.type, setupwebgl, false); // references to the document elements.
Color masking - Web APIs
: 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device may not suppo...
...rt webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlistener("click", setcolormask, false); bluetoggle.addeventlistener("click", setcolormask, false); function setcolormask(evt) { var index = evt.target === greentoggle && 1 || evt.target === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.target.innerhtml="on"; else evt.target.innerh...
Detect WebGL - Web APIs
window.addeventlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding click event handler to button.
... button.addeventlistener("click", detectwebglcontext, false); function detectwebglcontext () { // create canvas element.
Raining rectangles - Web APIs
rong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .addeven...
...tlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect.velocity; if (rainingrect.position[1] < 0) { misses += 1; missesdisplay.innerhtml = misses; rainingrect = new rectangle(); } // we are using settimeout for animation.
WebGL constants - Web APIs
a list is provided below.
... max_vertex_attribs 0x8869 the maximum number of entries possible in the vertex attribute list.
Adding 2D content to a WebGL context - Web APIs
const positions = [ -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, ]; // now pass the list of positions into webgl to build the // shape.
... gl.bufferdata(gl.array_buffer, new float32array(positions), gl.static_draw); return { position: positionbuffer, }; } this routine is pretty simplistic given the basic nature of the scene in this example.
Using WebGL extensions - Web APIs
a complete list of extensions is available in the khronos webgl extension registry.
... extension list the current extensions are: angle_instanced_arrays ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic khr_parallel_shader_compile oes_element_index_uint oes_fbo_render_mipmap oes_stan...
Using WebRTC data channels - Web APIs
let datachannel = pc.createdatachannel("myapp channel"); datachannel.addeventlistener("open", (event) => { begintransmission(datachannel); }); manual negotiation to manually negotiate the data channel connection, you need to first create a new rtcdatachannel object using the createdatachannel() method on the rtcpeerconnection, specifying in the options a negotiated property set to true.
... let datachannel = pc.createdatachannel("myapp channel", { negotiated: true }); datachannel.addeventlistener("open", (event) => { begintransmission(datachannel); }); requestremotechannel(datachannel.id); in this code snippet, the channel is created with negotiated set to true, then a function called requestremotechannel() is used to trigger negotiation, to create a remote channel with the same id as the local channel.
WebRTC API - Web APIs
please see the sidebar for an alphabetical list.
... media capture from dom elements working draft the initial definition on how to obtain stream of content from dom elements in additions to these specifications defining the api needed to use webrtc, there are several protocols, listed under resources.
Web Video Text Tracks Format (WebVTT) - Web APIs
they are listed in the table below.
... vttregion the methods used for region are listed below along with description of their functionality: scrollsetting: for adjusting the scrolling setting of all nodes present in given region.
Using bounded reference spaces - Web APIs
by listing the points in clockwise order, the boundary is placed inside the defined shape.
... if the points are listed counterclockwise it would suggest that the safe area lies outside the boundary, probably with undesirable results.
Lighting a WebXR setting - Web APIs
try to place light sources in realistic locations for the setting and the mood you're trying to create.
...when performing real-time rendering—as is the case with any virtual or augmented reality application—spherical harmonic lighting is used to simplify and accelerate the process of generating highly realistic shadows and shading.
WebXR performance guide - Web APIs
for (object in scene) { let vertexlist = ...
... a simple change can optimize this significantly: const vertexlist = ...
Starting up and shutting down a WebXR session - Web APIs
in basic form, code to do this final setup might look something like this: async function runsession(session) { let worlddata; session.addeventlistener("end", onsessionend); let canvas = document.queryselector("canvas"); gl = canvas.getcontext("webgl", { xrcompatible: true }); // set up webgl data and such worlddata = loadglprograms(session, "worlddata.xml"); if (!worlddata) { return null; } // finish configuring webgl worlddata.session.updaterenderstate({ baselayer: new xrwebgllayer(worlddata.session, gl) }); ...
... detecting when the available set of webxr input controls changes webxr maintains a list of input controls which is specific to the webxr system.
Web Audio API best practices - Web APIs
here is a simple example of creating the context from inside a click event: const button = document.queryselector('button'); button.addeventlistener('click', function() { const audioctx = new audiocontext(); }, false); if however, you create the context outside of a user gesture, its state will be set to suspended and it will need to be started after user interaction.
... const audioctx = new audiocontext(); const button = document.queryselector('button'); button.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } }, false); you might instead be working with an offlineaudiocontext, in which case you can resume the suspended audio context with the startrendering() method.
Controlling multiple parameters with ConstantSourceNode - Web APIs
function setup() { context = new (window.audiocontext || window.webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.addeventlistener("click", toggleplay, false); volumecontrol.addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode1.gain.value; gainnode3.gain.value = gainnode1.gain.value; volumecontrol.value = gainnode1.gain.value; constantnode = cont...
...ext.createconstantsource(); constantnode.connect(gainnode2.gain); constantnode.connect(gainnode3.gain); constantnode.start(); gainnode1.connect(context.destination); gainnode2.connect(context.destination); gainnode3.connect(context.destination); } window.addeventlistener("load", setup, false); first, we get access to the window's audiocontext, stashing the reference in context.
Using IIR filters - Web APIs
the play button html looks like this: <button class="button-play" role="switch" data-playing="false" aria-pressed="false">play</button> and the click event listener starts like so: playbutton.addeventlistener('click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ...
...first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.addeventlistener('click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ...
Web Audio API - Web APIs
using a system based on a source-listener model, it allows control of the panning model and deals with distance-induced attenuation induced by a moving source (or moving listener).
... audiolistener the audiolistener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.
Web Speech API - Web APIs
speechgrammarlist represents a list of speechgrammar objects.
... speechrecognitionresultlist represents a list of speechrecognitionresult objects, or a single one if results are being captured in continuous mode.
Functions and classes available to Web Workers - Web APIs
this article provides a list of those.
... 48 (48) (yes) (yes) (yes) domrequest and domcursor respectively, these objects represents an ongoing operation (with listeners for reacting to the operation completely successfully, or failing, for example), and an ongoing operation over a list of results.
Window: DOMContentLoaded event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples basic usage window.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); specifications specification status html living standard living standard ...
Window: animationend event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this example listens for the animationend event: window.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: window.onanimationend = () => { console.log('animation ended'); }; see a live example of this event.
Window: animationiteration event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this code uses animationiteration to keep track of the number of iterations an animation has completed: let iterationcount = 0; window.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: let iterationcount = 0; window.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; see a live example of this event.
Window: animationstart event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this listens for the animationstart event and logs a message when it is fired: window.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: window.onanimationstart = () => { console.log('animation started'); }; see a live example of this event.
Window: beforeunload event - Web APIs
attaching an event handler/listener to window or document's beforeunload event prevents browsers from using in-memory page navigation caches, like firefox's back-forward cache or webkit's page cache.
... window.addeventlistener('beforeunload', (event) => { // cancel the event as stated by the standard.
Window: copy event - Web APIs
WebAPIWindowcopy event
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples window.addeventlistener('copy', (event) => { console.log('copy action initiated') }); specifications specification status clipboard api and events working draft ...
Window: cut event - Web APIs
WebAPIWindowcut event
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples window.addeventlistener('cut', (event) => { console.log('cut action initiated') }); specifications specification status clipboard api and events working draft ...
Window.devicePixelRatio - Web APIs
let pixelratiobox = document.queryselector(".pixel-ratio"); let mqstring = `(resolution: ${window.devicepixelratio}dppx)`; const updatepixelratio = () => { let pr = window.devicepixelratio; let prstring = (pr * 100).tofixed(0); pixelratiobox.innertext = `${prstring}% (${pr.tofixed(2)})`; } updatepixelratio(); matchmedia(mqstring).addlistener(updatepixelratio); the string mqstring is set up to be the media query itself.
... then the updatepixelratio() function is called once to display the starting value, after which the media query is created using matchmedia() and addeventlistener() is called to set up updatepixelratio() as a handler for the change event.
Window: load event - Web APIs
WebAPIWindowload event
bubbles no cancelable no interface event event handler property onload examples log a message when the page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents...
...eas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domc...
Window.onbeforeinstallprompt - Web APIs
syntax window.addeventlistener("beforeinstallprompt", function(event) { ...
... window.addeventlistener("beforeinstallprompt", function(beforeinstallpromptevent) { beforeinstallpromptevent.preventdefault(); // prevents immediate prompt display // shows prompt after a user clicks an "install" button installbutton.addeventlistener("click", function(mouseevent) { // you should not use the mouseevent here, obviously beforeinstallpromptevent.prompt(); }); installbutton.hidden = false; // make button operable }); ...
Window.open() - Web APIs
WebAPIWindowopen
windowfeatures optional a domstring containing a comma-separated list of window features given with their corresponding values in the form "name=value".
... window features windowfeatures is an optional string containing a comma-separated list of requested features of the new window.
Window: pageshow event - Web APIs
bubbles no cancelable no interface pagetransitionevent event handler property onpageshow examples this example sets up event handlers for events listed in the array events.
..."persisted" : "not persisted"; console.log('event:', event.type, '-', ispersisted); break; default: console.log('event:', event.type); break; } }; events.foreach(eventname => window.addeventlistener(eventname, eventlogger) ); html <p>open the console and watch the output as you navigate to and from this page.
Window: paste event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples window.addeventlistener('paste', (event) => { console.log('paste action initiated') }); specifications specification status clipboard api and events working draft ...
Window: resize event - Web APIs
it is still possible to set onresize attributes or use addeventlistener() to set a handler on any element.
.../code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function reportwindowsize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = reportwindowsize; addeventlistener equivalent you could set up the event handler using the addeventlistener() method: window.addeventlistener('resize', reportwindowsize); specifications specification status document object model (dom) level 3 events specificationthe definition of 'resize' in that specification.
Window: transitioncancel event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the transitioncancel event: window.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): window.ontransitioncancel = () => { console.log('transition canceled'); }; see a live example of this event.
Window: transitionend event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the transitionend event: window.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend property instead of addeventlistener(): window.ontransitionend = () => { console.log('transition ended'); }; see a live example of this event.
Window: transitionrun event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the transitionrun event: window.addeventlistener('transitionrun', () => { console.log('transition is running but hasn't necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): window.ontransitionrun = () => { console.log('transition started running'); }; see a live example of this event.
Window: transitionstart event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the transitionstart event: window.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): window.ontransitionrun = () => { console.log('started transitioning'); }; see a live example of this event.
Window: unhandledrejection event - Web APIs
window.addeventlistener("unhandledrejection", event => { console.warn(`unhandled promise rejection: ${event.reason}`); }); you can also use the onunhandledrejection event handler property to set up the event listener: window.onunhandledrejection = event => { console.warn(`unhandled promise rejection: ${event.reason}`); }; preventing default handling many environments (such as node.js) report unhandled prom...
... window.addeventlistener('unhandledrejection', function (event) { // ...your code here to handle the unhandled rejection...
Window: unload event - Web APIs
examples <!doctype html> <html> <head> <title>parent frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 1st one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html> below, the content of child-frame.html: <!doctype html> <html> <head> <title>child frame</title...
...> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 2nd one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 4th and last one…'); }); </script> </head> <body> ☻ </body> </html> when the parent frame is unloaded, events will be fired in the order described by the console.log() messages.
WindowEventHandlers.onbeforeprint - Web APIs
syntax window.addeventlistener("beforeprint", function(event) { ...
... var mediaquerylist = window.matchmedia('print'); mediaquerylist.addlistener(function(mql) { if(mql.matches) { console.log('webkit equivalent of onbeforeprint'); } }); specification specification status comment html living standardthe definition of 'onbeforeprint' in that specification.
WindowEventHandlers.onlanguagechange - Web APIs
such an event is sent by the browser to inform that the preferred languages list has been updated.
... the list is accessible via navigatorlanguage.languages.
WindowEventHandlers.onunload - Web APIs
syntax window.addeventlistener("unload", function(event) { ...
...}; typically, it is better to use window.addeventlistener() and the unload event, instead of onunload.
Worker - Web APIs
WebAPIWorker
event handlers abstractworker.onerror an eventlistener called whenever an errorevent of type error bubbles through to the worker.
... worker.onmessage an eventlistener called whenever a messageevent of type message bubbles through the worker — i.e.
WorkerGlobalScope.self - Web APIs
this provides a full list of the objects available to that worker scope, so it is quite a useful test if you want to see whether something is available to your worker or not.
... we also maintain a list of functions and classes available to web workers.
WritableStream.WritableStream() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStream.getWriter() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStream - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStreamDefaultWriter.close() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStreamDefaultWriter.write() - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(...
...-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, ...
WritableStreamDefaultWriter - Web APIs
const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwrit...
...t queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", ...
XMLHttpRequest: abort event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: error event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: load event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: progress event - Web APIs
11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); ...
... addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest.upload - Web APIs
it is an opaque object, but because it's also an xmlhttprequesteventtarget, event listeners can be attached to track its process.
... the following events can be triggered on an upload object and used to monitor the upload: event event listener description loadstart onloadstart the upload has begun.
XRBoundedReferenceSpace.boundsGeometry - Web APIs
additionally, the points must be listed in clockwise order.
... each entry in boundsgeometry is equal to an entry in the list of native bounds geometry points for the room, premultiplied by the inverse of the origin offset.
XRInputSourceEvent() - Web APIs
permitted values are listed under event types below.
... xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
the read-only xrinputsourceschangeevent property added is a list of zero or more input sources, each identified using an xrinputsource object, which have been newly made available for use.
... examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system.
XRInputSourcesChangeEvent.session - Web APIs
the xrinputsourceschangeevent property session specifies the xrsession to which the input source list change event applies.
... syntax let inputssession = xrinputsourceschangeevent.session; value an xrsession indicating the webxr session to which the input source list change applies.
XRInputSourcesChangeEventInit.added - Web APIs
the xrinputsourceschangeeventinit property added specifies a list of input sources, each identified using an xrinputsource object, which the represented inputsourceschange event is to indicate are newly available for use.
...newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, each representing one input device added to the xr system.
XRInputSourcesChangeEventInit.session - Web APIs
the xrinputsourceschangeeventinit property session specifies the xrsession to which the input source list change event applies.
...newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an xrsession indicating the webxr session to which the input source list change applies.
XRReferenceSpace - Web APIs
in addition to using addeventlistener(), you can establish a reset event handler by setting the onreset event handler property.
... reference space descriptors the types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them.
XRSession: inputsourceschange event - Web APIs
the received event, of type xrinputsourceschangeevent, contains a list of any newly added and/or removed input devices.
... bubbles yes cancelable no interface xrinputsourceschangeevent event handler property oninputsourceschange the event object contains lists of the newly-added and/or removed input devices in its added and removed properties.
XRSession.requestReferenceSpace() - Web APIs
reference space descriptors the types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them.
... exceptions rather than throwing true exceptions, requestreferencespace() rejects the returned promise with a domexception whose name is found in the list below: notsupportederror the requested reference space is not supported.
XRSession: select event - Web APIs
examples the following example uses addeventlistener() to set up a handler for the select event.
... xrsession.addeventlistener("select", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the event: xrsession.onselect = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsou...
XRSession: selectend event - Web APIs
examples the following example uses addeventlistener() to establish handlers for the selection events: selectstart, selectend, and select.
... xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if ...
XRSession: selectstart event - Web APIs
examples the following example uses addeventlistener() to establish handlers for the selection events: selectstart, selectend, and select.
... xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if ...
XRSession: squeezeend event - Web APIs
examples the following example uses addeventlistener() to establish handlers for the squeezeion events: squeezestart, squeezeend, and squeeze.
... xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!tar...
XRSession: squeezestart event - Web APIs
examples the following example uses addeventlistener() to establish handlers for the squeezeion events: squeezestart, squeezeend, and squeeze.
... xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!tar...
XRSessionEvent - Web APIs
examples this example creates a listiener that watches for the visibility state of the session to change.
... xrsession.addeventlistener("visibilitystate", e => { switch(e.session.visibilitystate) { case "visible": case "visible-blurred": mysessionvisible(true); break; case "hidden": mysessionvisible(false); break; } }); specifications specification status comment webxr device apithe definition of 'xrsessionevent' in that specification.
XRSystem: requestSession() - Web APIs
navigator.xr.requestsession("immersive-vr") .then((xrsession) => { xrsession.addeventlistener('end', onxrsessionended); // do necessary session setup here.
... if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('click', onbuttonclicked); immersivebutton.innerhtml = 'enter xr'; immersivebutton.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = ...
XRWebGLLayer - Web APIs
this information includes the pose (an xrviewerpose object) that describes the position and facing direction of the viewer within the scene as well as a list of xrview objects, each representing one perspective on the scene.
... in current webxr implementations, there will never be more than two entries in this list: one describing the position and viewing angle of the left eye and another doing the same for the right.
msthumbnailclick - Web APIs
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 from a pinned site shortcut.
... example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the taskba...
Using the group role - Accessibility
however, when a group is used in the context of list, authors must limit its children to listitem elements.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce the group when focus first lands on a control inside it, and if aria-describedby has been set, the description may be spoken.
Using the log role - Accessibility
assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce changes inside a log when the user is idle, unless aria-live=”assertive” has been set and in which case the user may be interrupted.
... <div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite".
ARIA: timer role - Accessibility
the timer role indicates to assistive technologies that an element is a numerical counter listing the amount of elapsed time from a starting point or the remaining time until an end point.
... description the timer role indicates to assistive technologies that this part of the web content is a live region containing a timer listing the time remaining or elapsed time.
ARIA: application role - Accessibility
the at will read any semantics like links, headings, form controls, tables, lists, or images.
...such elements usually include headings, form fields, lists, tables, links, graphics, or landmark regions.
ARIA: Complementary role - Accessibility
content listed within a container with the complementary landmark role should make sense if separated from the main content of the document.
... added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
ARIA: grid role - Accessibility
="' + newrow + '"][data-col="' + newcol + '"]'); if (tgt && (tgt.getattribute('role')==='gridcell') ) { array.prototype.foreach.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) + 1); break; case "arrowleft": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.target.dataset.row, 10) + ...
...="' + newrow + '"][data-col="' + newcol + '"]'); if (tgt && (tgt.getattribute('role')==='gridcell') ) { array.prototype.foreach.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) + 1); break; case "arrowleft": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.target.dataset.row, 10) + ...
ARIA: Region role - Accessibility
the region role should be reserved for sections of content sufficiently important that users will likely want to navigate to the section easily and to have it listed in a summary of the page.
... added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
Web applications and ARIA FAQ - Accessibility
document.getelementbyid("update-button").addeventlistener("click", function (e) { updateprogress(75); e.preventdefault(); }, false); } initdemo(); how do assistive technologies work?
... wai-xtech mailing list -- holds discussions on aria specs.
Cognitive accessibility - Accessibility
some forms of assistive technology allow users to navigate by lists of all the links present on the page.
... link to a list of pronunciations.
Community - Accessibility
this document provides links to mailing lists, newsgroups, forums, and other communities related to accessbility.
... mozilla accessibility newsgroup wai interest group discussion list unix accessibility project (reference) sun mozilla accessibility task force contribute/get involved webaim discussion list ...
-moz-context-properties - CSS: Cascading Style Sheets
to do this the embedding element needs to list the properties that are to be made available to the image by listing them as values of the -moz-context-properties property, and the image needs to opt in to using those properties by using values such as the context-fill value.
... formal definition initial valuenoneapplies toany element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using an <img> element.
:has() - CSS: Cascading Style Sheets
WebCSS:has
/* selects any <a>, as long as it has an <img> element directly inside it */ /* note that this is not supported in any browser yet */ let test = document.queryselector('a:has(> img)'); syntax :has( <relative-selector-list> )where <relative-selector-list> = <relative-selector>#where <relative-selector> = <combinator>?
...'='<attr-modifier> = i | s description the :has() pseudo-class takes a relative selector list as an argument.
:where() - CSS: Cascading Style Sheets
WebCSS:where
the :where() css pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
... syntax :where( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
fallback - CSS: Cascading Style Sheets
when the fixed system is used and there are not enough symbols to cover all the list items, the fallback style will be used for the rest of the list items.
... formal definition related at-rule@counter-styleinitial valuedecimalcomputed valueas specified formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallback: upper-alpha; } .list { list-style: fallback-example; } result specifications specification status comment css counter styles level 3the definition of 'fallback' in that specification.
speak-as - CSS: Cascading Style Sheets
bullets a phrase or an audio cue defined by the user agent for representing an unordered list item will be read out.
... let's talk about speech css | css tricks formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax auto | bullets | numbers | words | spell-out | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed; symbols:     ; suffix: " "; speak-as: numbers; } .list { list-style: speak-as-example; } result specifications specification status comment css counter styles level 3the definition of 'speak-as' in...
@page - CSS: Cascading Style Sheets
WebCSS@page
formal syntax @page <page-selector-list> { <page-body> }where <page-selector-list> = [ <page-selector># ]?<page-body> = <declaration>?
...| <page-margin-box> <page-body>where <page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*<page-margin-box> = <page-margin-box-type> '{' <declaration-list> '}'where <pseudo-page> = : [ left | right | first | blank ]<page-margin-box-type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @right-top | @right-middle | @right-bottom examples @page pseudo-class examples please refer to the various pseudo-classes of @page for examples.
@supports - CSS: Cascading Style Sheets
WebCSS@supports
the following example returns true if and only if the two shorter expressions are simultaneously true: @supports (display: table-cell) and (display: list-item) {} multiple conjunctions can be juxtaposed without the need of more parentheses.
... the following are both equivalent: @supports (display: table-cell) and (display: list-item) and (display:run-in) {} @supports (display: table-cell) and ((display: list-item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions.
CSS Display - CSS: Cascading Style Sheets
reference css properties display css data types <display-outside> <display-inside> <display-listitem> <display-box> <display-internal> <display-legacy> guides css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relationship of flexbox to other layo...
...basic values: none, block, inline and list-item.
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
you will see that many of the listed bugs apply to old browser versions and are fixed in current browsers.
... each of the bugs has a workaround listed — which can save you many hours of puzzling.
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
values: see the flex reference for values and default spec: https://drafts.csswg.org/css-flexbox/#flex-property @mixin flex($fg: 1, $fs: 0, $fb: auto) { // set a variable to be used by box-flex properties $fg-boxflex: $fg; // box-flex only supports a flex-grow value so lets grab the // first item in the list and just return that.
... @if type-of($fg) == 'list' { $fg-boxflex: nth($fg, 1); } -webkit-box: $fg-boxflex; -moz-box: $fg-boxflex; -webkit-flex: $fg $fs $fb; -ms-flex: $fg $fs $fb; flex: $fg $fs $fb; } flexbox justify content the justify-content property aligns flex items along the main axis of the current line of the flex container.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
navigation a common pattern for navigation is to have a list of items displayed as a horizontal bar.
... card layout pushing footer down whether you use flexbox or css grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid component.
In Flow and Out of Flow - CSS: Cascading Style Sheets
in the following example i have a heading, paragraph, a list and a final paragraph which contains a strong element.
...the list is displayed using flexbox to arrange the items into a row, however it too is participating in block and inline layout - the container has an outside display type of block.
Introduction to formatting contexts - CSS: Cascading Style Sheets
ements (including position: fixed or position: sticky) elements with display: inline-block table cells or elements with display: table-cell, including anonymous table cells created when using the display: table-* properties table captions or elements with display: table-caption block elements where overflow has a value other than visible elements with display: flow-root or display: flow-root list-item elements with contain: layout, content, or strict flex items grid items multicol containers elements with column-span set to all this is useful because a new bfc will behave much like the outermost document in that it becomes a mini-layout inside the main layout.
... explicitly creating a bfc using display: flow-root using display: flow-root (or display: flow-root list-item) on the containing block will create a new bfc without any other potentially problematic side-effects.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
visually it now appears as the fourth item in the list.
...an example would be where some content was semantically marked up as a list but you decide to use a set of <div> elements instead as then you can have the element to be a direct child of a container set to display: grid.
Layout using named grid lines - CSS: Cascading Style Sheets
the repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated.
... .wrapper { grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end]; } if you have used a track list then you can use the span keyword not just to span a number of lines but also to span a number of lines of a certain name.
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
auto-filling grid tracks we can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the auto-fill and auto-fit properties.
... in this next example, i have used the auto-fill keyword in place of an integer in the repeat notation and set the track listing to 200 pixels.
Subgrid - CSS: Cascading Style Sheets
if you set the value subgrid on grid-template-columns, grid-template-rows or both, instead of creating a new track listing the nested grid uses the tracks defined on the parent.
...this is achieved by adding a list of line names enclosed in square brackets after the subgrid keyword.
CSS Properties Reference - CSS: Cascading Style Sheets
common css properties reference the following is a basic list of the most common css properties with the equivalent of the dom notation which is usually accessed from javascript: note: this list is incomplete.
... cursor cursor display display filter filter float cssfloat font font font-family fontfamily font-size fontsize font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line-height lineheight list-style liststyle list-style-image liststyleimage list-style-position liststyleposition list-style-type liststyletype margin margin margin-bottom marginbottom margin-left marginleft margin-right marginright margin-top margintop overflow overflow padding padding padding...
Descendant combinator - CSS: Cascading Style Sheets
/* list items that are descendants of the "my-things" list */ ul.my-things li { margin: 2em; } the descendant combinator is technically one or more css white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator.
... syntax selector1 selector2 { /* property declarations */ } examples css li { list-style-type: disc; } li li { list-style-type: circle; } html <ul> <li> <div>item 1</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> <li> <div>item 2</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> </ul> result specifications specification status comment selectors level 4the definition of 'descendant combinator' in that specification.
CSS Layout cookbook - CSS: Cascading Style Sheets
flexbox, margin breadcrumb navigation creating a list of links to allow the visitor to navigate back up through the page hierarchy.
... flexbox list group with badges a list of items with a badge to display a count.
Media queries - CSS: Cascading Style Sheets
you can also use mediaquerylist.addlistener() to be notified whenever the state of a query changes.
... testing media queries programmatically describes how to use media queries in your javascript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).
CSS Tutorials - CSS: Cascading Style Sheets
WebCSSTutorials
this page lists them all, with a short description.
... editor's note: we should look at using "difficulty level" tags on the tutorial/guide pages so that difficulty-based lists can be automatically built.
Visual formatting model - CSS: Cascading Style Sheets
some elements may generate additional boxes in addition to the principal box, for example display: list-item generates more than one box (e.g.
... css grid layout css flexible box layout css table layout lists independent formatting contexts elements either participate in the formating context of their containing block or establish an independent formatting context.
backdrop-filter - CSS: Cascading Style Sheets
<filter-function-list> a space-separated list of <filter-function>s or an svg filter that will be applied to the backdrop.
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>?
background-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valuea list, each item consisting of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting background-repeat html <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div> </l...
...y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is matched with a different value of background-repeat.
<blend-mode> - CSS: Cascading Style Sheets
syntax the <blend-mode> data type is defined using a keyword value chosen from the list below.
...luminosity</option> </select> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specifications specification status comment compositing and blending level 1the definition of '<blend-mode>' in that specification.
border-image-repeat - CSS: Cascading Style Sheets
* keyword value */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; /* vertical | horizontal */ border-image-repeat: round stretch; /* global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset; the border-image-repeat property may be specified using one or two values chosen from the list of values below.
...div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
clip-path - CSS: Cascading Style Sheets
WebCSSclip-path
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below.
...0px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'clip-path' in that specification.
conic-gradient() - CSS: Cascading Style Sheets
a conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops.
...the following two declarations are equivalent: conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn); color stops should be listed in ascending order.
counter() - CSS: Cascading Style Sheets
WebCSScounter
)where <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples default value compared to upper roman html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::after { content: "[" counter(listcounter) "] == [" counter(listcounter, upper-roman) "]"; } result decimal-leading-zero compared to lower-alpha html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::after { content: "[" counter(count, decimal-lea...
...ding-zero) "] == [" counter(count, lower-alpha) "]"; } result specifications specification status comment css lists module level 3the definition of 'css counters' in that specification.
counters() - CSS: Cascading Style Sheets
WebCSScounters
t> examples default value compared to upper roman html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::marker { content: counters(listcounter, '.', upper-roman) ') '; } li::before { content: counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ; } result decimal-leading-zero compared to lower-alpha html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> ...
.../li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::marker { content: counters(count, '.', upper-alpha) ') '; } li::before { content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); } result specifications specification status comment css lists module level 3the definition of 'css counters' in that specification.
cursor - CSS: Cascading Style Sheets
WebCSScursor
for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the progress keyword value if neither image can be loaded: cursor: url(one.svg), url(two.svg) 5 5, progress; values <url> a url(…) or a comma separated list url(…), url(…), …, pointing to an image file.
...a non-url fallback (one or more of the keyword values) must be at the end of the fallback list.
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
there are mappings for all of the existing values of display; the most common ones are listed in the table below.
... to see a full list take a look at the table found in the display property specification.
<filter-function> - CSS: Cascading Style Sheets
syntax the <filter-function> data type is specified using one of the filter functions listed below.
...} input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); const slider = document.queryselector('input'); const output = document.queryselector('output'); const curvalue = document.queryselector('p code'); selectelem.addeventlistener('change', () => { setslider(selectelem.value); setdiv(selectelem.value); }); slider.addeventlistener('input', () => { setdiv(selectelem.value); }); function setslider(filter) { if(filter === 'blur') { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === 'contr...
font-kerning - CSS: Cascading Style Sheets
in the image below, for instance, the examples on the left do not use kerning, while the ones on the right do: syntax the font-kerning property is specified as one of the keyword values listed below.
...ij</textarea> css div { font-size: 2rem; font-family: serif; } #nokern { font-kerning: none; } #kern { font-kerning: normal; } javascript let input = document.getelementbyid('input'); let kern = document.getelementbyid('kern'); let nokern = document.getelementbyid('nokern'); input.addeventlistener('keyup', function() { kern.textcontent = input.value; /* update content */ nokern.textcontent = input.value; }); kern.textcontent = input.value; /* initialize content */ nokern.textcontent = input.value; specifications specification status comment css fonts module level 3the definition of 'font-kerning' in that specification.
font-style - CSS: Cascading Style Sheets
syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg; /* global values */ font-style: inherit; font-style: initial; font-style: unset; the font-style property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique.
... margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = slant; } slantinput.addeventlistener('input', update); update(); accessibility concerns large sections of text set with a font-style value of italic may be difficult for people with cognitive concerns such as dyslexia to read.
font-variant - CSS: Cascading Style Sheets
stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation() specifies the keywords and functions related to the font-variant-alternates longhand property.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | none | [ <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values> | stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) | [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-valu...
font-weight - CSS: Cascading Style Sheets
-weight: lighter; font-weight: bolder; /* numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900; /* global values */ font-weight: inherit; font-weight: initial; font-weight: unset; the font-weight property is specified using any one of the values listed below.
...ontainer > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinput.addeventlistener('input', update); update(); accessibility concerns people experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low contrast color ratio.
font - CSS: Cascading Style Sheets
WebCSSfont
menu the system font used in menus (e.g., dropdown menus and menu lists).
... prefixed system font keywords browsers often implement several more, prefixed, keywords: gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field.
image() - CSS: Cascading Style Sheets
examples directionally-sensitive images <ul> <li dir="ltr">bullet is a right facing arrow on the left</li> <li dir="rtl">bullet is the same arrow, flipped to point left.</li> </ul> ul { list-style-image: image(ltr 'https://mdn.mozillademos.org/files/16412/rightarrow.png'); } in the left-to-right list items — those with dir="ltr" set on the element itself or inheriting the directionality from an ancestor or default value for the page — the image will be used as-is.
... list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if transform: scalex(-1) had been set.
<length> - CSS: Cascading Style Sheets
WebCSSlength
syntax the <length> data type consists of a <number> followed by one of the units listed below.
...: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>`; resultsdiv.appendchild(result); inputelem.value = ''; inputelem.focus(); }) result specifications specification status commen...
margin-left - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
... block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
margin-right - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
... block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
mask-clip - CSS: Cascading Style Sheets
WebCSSmask-clip
ord values */ mask-clip: no-clip; /* non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the keyword values listed below, separated by commas.
...padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskclip = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-clip' in that specification.
mask-composite - CSS: Cascading Style Sheets
/* keyword values */ mask-composite: add; mask-composite: subtract; mask-composite: intersect; mask-composite: exclude; /* global values */ mask-composite: inherit; mask-composite: initial; mask-composite: unset; syntax one or more of the keyword values listed below, separated by commas.
... 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-composite' in that specification.
mask-mode - CSS: Cascading Style Sheets
WebCSSmask-mode
/* keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* multiple values */ mask-mode: alpha, match-source; /* global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset; syntax the mask-mode property is specified as one or more of the keyword values listed below, separated by commas.
...tps://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-mode' in that specification.
mask-origin - CSS: Cascading Style Sheets
syntax one or more of the keyword values listed below, separated by commas.
...nt-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select> javascript var origin = document.getelementbyid("origin"); origin.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-origin' in that specification.
mask-position - CSS: Cascading Style Sheets
ntainer elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
mask-size - CSS: Cascading Style Sheets
WebCSSmask-size
formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/126...
... <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-size' in that specification.
overscroll-behavior - CSS: Cascading Style Sheets
syntax the overscroll-behavior property is specified as one or two keywords chosen from the list of values below.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.
page-break-inside - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | avoid examples avoiding page breaks inside elements html <div class="page"> <p>this is the first paragraph.</p> <section class="list"> <span>a list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </section> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>this is the second paragraph.</p> <p>this is the third paragraph, it contains more text.</p> <p>this is the fourth paragraph.
... it has a little bit more text than the third one.</p> </div> css .page { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p { background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: orange; } p:first-child { margin-top: 0; } result specifications specification status comment css paged media module level 3the definition of 'page-break-inside' in that specification.
place-content - CSS: Cascading Style Sheets
afe</option> <option value="unsafe">unsafe</option> </select><code>;</code> var update = function () { document.getelementbyid("container").style.placecontent = document.getelementbyid("aligncontentalignment").value + " " + document.getelementbyid("justifycontentalignment").value; } var aligncontentalignment = document.getelementbyid("aligncontentalignment"); aligncontentalignment.addeventlistener("change", update); var justifycontentalignment = document.getelementbyid("justifycontentalignment"); justifycontentalignment.addeventlistener("change", update); var writingm = document.getelementbyid("writingmode"); writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("...
...direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; } .small { font-size: 12px; height: 40px; } .large { font-size: 14px; height: 50px; } result specifications specification status comment css box alignment module level 3the definition of 'place content' i...
position - CSS: Cascading Style Sheets
WebCSSposition
syntax the position property is specified as a single keyword chosen from the list of values below.
... a common use for sticky positioning is for the headings in an alphabetized list.
repeat() - CSS: Cascading Style Sheets
WebCSSrepeat
the repeat() css function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
...otherwise, the specified track list repeats only once.
symbols() - CSS: Cascading Style Sheets
WebCSSsymbols
the symbols() css function lets you define counter styles inline, directly as the value of a property such as list-style.
... examples html <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ol> css ol { list-style: symbols(cyclic "*" "†" "‡"); } result specifications specification status comment css counter styles level 3the definition of 'symbols()' in that specification.
touch-action - CSS: Cascading Style Sheets
by explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures.
... applications using touch events disable the browser handling of gestures by calling preventdefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.
<transform-function> - CSS: Cascading Style Sheets
syntax the <transform-function> data type is specified using one of the transformation functions listed below.
...tey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; }, 2000) } }) result specifications specification status comment css transforms level 2the definitio...
transform - CSS: Cascading Style Sheets
WebCSStransform
if perspective() is one of multiple function values, it must be listed first.
...g wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()> | <skew()> | <skewx()> | <skewy()> | <matrix3d()> | <translate3d()> | <translatez()> | <scale3d()> | <scalez()> | <rotate3d()> | <rotatex()> | <rotatey()> | <rotatez()> | <perspective()>where <matrix()> = matrix(...
url() - CSS: Cascading Style Sheets
WebCSSurl()
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/1...
... the url() function can be included as a value for background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls.
<url> - CSS: Cascading Style Sheets
WebCSSurl
urls can be used in numerous css properties, such as background-image, cursor, and list-style.
... <a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/mycursor.png) examples .topbanner { background: url("topbanner.png") #00d no-repeat fixed; } ul { list-style: square url(http://www.example.com/redball.png); } specifications specification status comment css values and units module level 4the definition of '<url>' in that specification.
white-space - CSS: Cascading Style Sheets
syntax /* keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* global values */ white-space: inherit; white-space: initial; white-space: unset; the white-space property is specified as a single keyword chosen from the list of values below.
...ode { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results { background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.queryselector("#results p"); select.addeventlistener("change", function(e) { results.setattribute("style", "white-space: "+e.target.value); }) <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ajax - Developer guides
WebGuideAJAX
pure-ajax navigation example this article provides a working (minimalist) example of a pure-ajax website composed only of three pages.
...file objects may be obtained from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
Writing Web Audio API code that works in every browser - Developer guides
there's a section in the spec that lists the old names and their updated equivalences; be sure to check it out and change your code accordingly.
...in the meantime, you can explicitly specify 'equalpower' instead: var panner = new audiocontext.pannernode(); panner.panningmodel = 'equalpower'; note that there's a list of projects built with the web audio api, specifying which ones use the standard audiocontext and which browsers do they work on.
Using device orientation with 3D transforms - Developer guides
here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality.
... this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation matri...
Event developer guide - Developer guides
WebGuideEvents
the custom events page describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.
... two common styles are: the generalized addeventlistener() and a set of specific on-event handlers.media eventsvarious events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section lists them and provides some helpful information about using them.mouse gesture eventsgecko 1.9.1 added support for several mozilla-specific dom events used to handle mouse gestures.
Constraint validation - Developer guides
typemismatch constraint violation for both of these input types, if the multiple attribute is set, several values can be set, as a comma-separated list, for this input.
... <textarea> the validitystate interface describes the object returned by the validity property of the element types listed above.
Mobile Web Development - Developer guides
WebGuideMobile
see this list of gecko-specific properties, and this list of webkit-specific properties, and peter beverloo's table of vendor-specific properties.
... take care with user agent sniffing it's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly.
HTML attribute: accept - HTML: Hypertext Markup Language
the accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.
... acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or mime types.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_color.svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.addeventlistener("load", imagereceived, false); downloadedimg.src = imageurl; } we're using a hard-coded url here (imageurl), but that could easily come from anywhere.
...an event listener is added for the load event being fired on the image element, which means the image data has been received.
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content: h1 beetles h2 etymology h2 distribution and diversity h2 evolution h3 late paleozoic h3 jurassic h3 cretaceous h3 cenozoic h2 external morphology h3 head h4 mouthparts h3 thorax h4 protho...
...c understanding wcag 2.0 mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.1 | w3c understanding wcag 2.0 understanding success criterion 2.4.6 | w3c understanding wcag 2.0 understanding success criterion 2.4.10 | w3c understanding wcag 2.0 labeling section content another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.
<area> - HTML: Hypertext Markup Language
WebHTMLElementarea
ping contains a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background).
...the value is a space-separated list of link types values.
<basefont> - HTML: Hypertext Markup Language
WebHTMLElementbasefont
face this attribute contains a list of one or more font names.
...if no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
content categories flow content, phrasing content, interactive content, listed, labelable, and submittable form-associated element, palpable content.
...it can have client-side scripts listen to the element's events, which are triggered when the events occur.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
WebHTMLElementdialog
> <output aria-live="polite"></output> javascript var updatebutton = document.getelementbyid('updatedetails'); var favdialog = document.getelementbyid('favdialog'); var outputbox = document.queryselector('output'); var selectel = document.queryselector('select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "clos...
...e" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring(); }); result specifications specification status comment html living standardthe definition of '<dialog>' in that specification.
<dir>: The Directory element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementdir
do not use this obsolete element; instead, you should use the <ul> element for lists, including lists of files.
... compact this boolean attribute hints that the list should be rendered in a compact style.
<dt>: The Description Term element - HTML: Hypertext Markup Language
WebHTMLElementdt
the html <dt> element specifies a term in a description or definition list, and as such must be used inside a <dl> element.
... implicit aria role term permitted aria roles listitem dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element.
<font> - HTML: Hypertext Markup Language
WebHTMLElementfont
face this attribute contains a comma-separated list of one or more font names.
...if no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.
<input type="checkbox"> - HTML: Hypertext Markup Language
WebHTMLElementinputcheckbox
var overall = document.queryselector('input[id="enchtbl"]'); var ingredients = document.queryselectorall('ul input'); overall.addeventlistener('click', function(e) { e.preventdefault(); }); for(var i = 0; i < ingredients.length; i++) { ingredients[i].addeventlistener('click', updatedisplay); } function updatedisplay() { var checkedcount = 0; for(var i = 0; i < ingredients.length; i++) { if(ingredients[i].checked) { checkedcount++; } } if(checkedcount === 0) { overall.check...
...width: 600px; margin: 0 auto; } div { margin-bottom: 10px; } fieldset { background: cyan; border: 5px solid blue; } legend { padding: 10px; background: blue; color: cyan; } javascript var othercheckbox = document.queryselector('input[value="other"]'); var othertext = document.queryselector('input[id="othervalue"]'); othertext.style.visibility = 'hidden'; othercheckbox.addeventlistener('change', () => { if(othercheckbox.checked) { othertext.style.visibility = 'visible'; othertext.value = ''; } else { othertext.style.visibility = 'hidden'; } }); specifications specification status comment html living standardthe definition of '<input type="checkbox">' in that specification.
<input type="week"> - HTML: Hypertext Markup Language
WebHTMLElementinputweek
value a domstring representing a week and year, or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list.
... mobile platforms such as android and ios make really good use of such input types, providing specialist ui controls that make it really easy to select values in a touchscreen environment.
<nav>: The Navigation Section element - HTML: Hypertext Markup Language
WebHTMLElementnav
<nav> is intended only for major block of navigation links; typically the <footer> element often has a list of links that don't need to be in a <nav> element.
... examples in this example, a <nav> block is used to contain an unordered list (<ul>) of links.
<object> - HTML: Hypertext Markup Language
WebHTMLElementobject
content categories flow content; phrasing content; embedded content, palpable content; if the element has a usemap attribute, interactive content; listed, submittable form-associated element.
... archivehtml 4 onlyobsolete since html5 a space-separated list of uris for archives of resources for the object.
<output>: The Output element - HTML: Hypertext Markup Language
WebHTMLElementoutput
content categories flow content, phrasing content, listed, labelable, resettable form-associated element, palpable content.
... for a space-separated list of other elements’ ids, indicating that those elements contributed input values to (or otherwise affected) the calculation.
<picture>: The Picture element - HTML: Hypertext Markup Language
WebHTMLElementpicture
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on size.
... it is composed of a comma-separated list of image descriptors.
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
nonce a cryptographic nonce (number used once) to whitelist scripts in a script-src content-security-policy.
...javascript mime types are listed in the specification.
<td>: The Table Data Cell element - HTML: Hypertext Markup Language
WebHTMLElementtd
headers this attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element.
... axis this attribute contains a list of space-separated strings.
<th> - HTML: Hypertext Markup Language
WebHTMLElementth
headers this attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element.
... axis obsolete since html5 this attribute contains a list of space-separated strings.
<title>: The Document Title element - HTML: Hypertext Markup Language
WebHTMLElementtitle
the content of the title is one of the components used by search engine algorithms to decide the order in which to list pages in search results.
... don't use "keyword blobs." if your title is just a list of words, algorithms often reduce your page's position in the search results.
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
WebHTMLElementtrack
label a user-readable title of the text track which is used by the browser when listing available text tracks.
... let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); examples <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source s...
accesskey - HTML: Hypertext Markup Language
control + alt + key on firefox 13 or older: control + key internet explorer alt + key alt + shift + key n/a edge n/a control + option + key control + option + shift + key google chrome alt + shift + key safari n/a opera 15+ alt + key control + alt + key opera 12 shift + esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key accessibility concerns in addition to poor browser support, there are numerous concerns with the accesskey attribute: an accesskey value can conflict with a system or browser keyboard shortcut, or assistive technology functionality.
... recommendation more realistic behavior described for what is implemented in reality.
Microformats - HTML: Hypertext Markup Language
ed7ac8e849f492b5bc7e6a630/thumb.jpg" ], "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ] }, "lang": "en", "value": "greg mcverry" } ] }, "lang": "en" } h-feed the h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts example h-feed <div class="h-feed"> <h1 class="p-name">microformats blogs</h1> <article class="h-entry"> <h2 class="p-name">microformats are amazing</h2> <p>published by <a class="p-author h-card" href="http://example.com">w.
...h-event is often used with both event listings and individual event pages <div class="h-event"> <h1 class="p-name">microformats meetup</h1> <p>from <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> june 2013, 12:00</time> to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at <span class="p-location">some bar in sf</span></p> <p class="p-summary">get together and discuss all things microformats-...
Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz' - HTTP
the header itself accepts a comma-delineated list of origins, so adding a new origin is not difficult.
... header set access-control-allow-origin 'origin-list' for nginx, the command to set up this header is: add_header 'access-control-allow-origin' 'origin-list' ...
Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’ - HTTP
the http method being used by the cors request is not included in the list of methods specified by the response's access-control-allow-methods header.
... this header specifies a comma-delineated list of the http methods which may be used when using cors to access the url specified in the request; if the request is using any other method, this error occurs.
Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel - HTTP
the value of access-control-allow-headers should be a comma-delineated list of header names, such as "x-custom-information" or any of the standard but non-basic header names (which are always allowed).
... this error occurs when attempting to preflight a header that is not expressly allowed (that is, it's not included in the list specified by the access-control-allow-headers header sent by the server).
Content Security Policy (CSP) - HTTP
WebHTTPCSP
a csp compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling html attributes).
...your policy should include a default-src policy directive, which is a fallback for other resource types when they don't have policies of their own (for a complete list, see the description of the default-src directive).
HTTP conditional requests - HTTP
these are: if-match succeeds if the etag of the distant resource is equal to one listed in this header.
... if-none-match succeeds if the etag of the distant resource is different to each listed in this header.
Accept-Encoding - HTTP
notes: an iana registry maintains a complete list of official content encodings.
... * matches any content encoding not already listed in the header.
Allow - HTTP
WebHTTPHeadersAllow
the allow header lists the set of methods supported by a resource.
... header type entity header forbidden header name no syntax allow: <http-methods> directives <http-methods> the comma-separated list of allowed http request methods.
Content-Language - HTTP
header type entity header forbidden header name no cors-safelisted response header yes cors-safelisted request header yes, with the additional restriction that values can only be 0-9, a-z, a-z, space or *,-.;=.
... note: language tags are formaly defined in rfc 5646, which rely on the iso 639 standard (quite often the iso 639-1 code list) for language codes to be used.
CSP: base-uri - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
CSP: default-src - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
CSP: form-action - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
CSP: frame-ancestors - HTTP
syntax one or more sources can be set for the frame-ancestors policy: content-security-policy: frame-ancestors <source>; content-security-policy: frame-ancestors <source> <source>; sources <source> can be one of the following: the frame-ancestors directive’s syntax is similar to a source list of other directives (e.g.
...only the sources listed below are allowed: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number, separated by spaces.
CSP: img-src - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
CSP: navigate-to - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
CSP: prefetch-src - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
... example prefetch resources do not match header given a page with the following content security policy: content-security-policy: prefetch-src https://example.com/ fetches for the following code will return network errors, as the urls provided do not match prefetch-src's source list: <link rel="prefetch" src="https://example.org/"></link> <link rel="prerender" src="https://example.org/"></link> specification specification status comment content security policy level 3the definition of 'prefetch-src' in that specification.
CSP: script-src-attr - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
CSP: script-src-elem - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
...at the same time, any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
Cookie - HTTP
WebHTTPHeadersCookie
header type request header forbidden header name yes syntax cookie: <cookie-list> cookie: name=value cookie: name=value; name2=value2; name3=value3 <cookie-list> a list of name-value pairs in the form of <cookie-name>=<cookie-value>.
... pairs in the list are separated by a semicolon and a space ('; ').
Feature-Policy: accelerometer - HTTP
syntax feature-policy: accelerometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: ambient-light-sensor - HTTP
syntax feature-policy: ambient-light-sensor <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: autoplay - HTTP
syntax feature-policy: autoplay <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: battery - HTTP
syntax feature-policy: battery <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: camera - HTTP
syntax feature-policy: camera <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: document-domain - HTTP
syntax feature-policy: document-domain <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: fullscreen - HTTP
syntax feature-policy: fullscreen <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: geolocation - HTTP
syntax feature-policy: geolocation <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: gyroscope - HTTP
syntax feature-policy: gyroscope <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: layout-animations - HTTP
syntax feature-policy: layout-animations <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: legacy-image-formats - HTTP
syntax feature-policy: legacy-image-formats <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: magnetometer - HTTP
syntax feature-policy: magnetometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: microphone - HTTP
syntax feature-policy: microphone <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: oversized-images - HTTP
syntax feature-policy: oversized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: sync-xhr - HTTP
syntax feature-policy: sync-xhr <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: unoptimized-images - HTTP
syntax feature-policy: unoptimized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: unsized-media - HTTP
syntax feature-policy: unsized-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
Feature-Policy: vibrate - HTTP
syntax feature-policy: vibrate <allowlist>; <vibrate> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
web-share - HTTP
syntax feature-policy: web-share <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... features are each defined to have a default allowlist, which is one of: *: the feature is allowed by default in top-level browsing contexts and all nested browsing contexts (iframes).
If-Match - HTTP
WebHTTPHeadersIf-Match
for get and head methods, the server will send back the requested resource only if it matches one of the listed etags.
...if a listed etag has the w/ prefix indicating a weak entity tag, it will never match under this comparison algorithm.
Link prefetching FAQ - HTTP
in the current implementation (mozilla 1.2), idle time is determined using the nsiwebprogresslistener api.
... we attach a listener to the toplevel nsiwebprogress object ("@mozilla.org/docloaderservice;1").
406 Not Acceptable - HTTP
WebHTTPStatus406
the hypertext transfer protocol (http) 406 not acceptable client error response code indicates that the server cannot produce a response matching the list of acceptable values defined in the request's proactive content negotiation headers, and that the server is unwilling to supply a default representation.
... if a server returns such an error status, the body of the message should contain the list of the available representations of the resources, allowing the user to choose among them.
Functions - JavaScript
a list of parameters to the function, enclosed in parentheses and separated by commas.
...the function is defined as follows: function myconcat(separator) { var result = ''; // initialize list var i; // iterate through arguments for (i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; } you can pass any number of arguments to this function, and it concatenates each argument into a string "list": // returns "red, orange, blue, " myconcat(', ', 'red', 'orange', 'blue'); // returns "elephant; giraffe; lion; cheetah; " myconcat(...
Regular expression syntax cheatsheet - JavaScript
see unicode data proplist.txt for more info.
... unicodepropertyname the name of a non-binary property: general_category (gc) script (sc) script_extensions (scx) see also propertyvaluealiases.txt unicodepropertyvalue one of the tokens listed in the values section, below.
Groups and ranges - JavaScript
examples counting vowels var aliceexcerpt = "there was a long silence after this, and alice could only hear whispers now and then."; var regexpvowels = /[aeiouy]/g; console.log("number of vowels:", aliceexcerpt.match(regexpvowels).length); // number of vowels: 25 using groups let personlist = `first_name: john, last_name: doe first_name: jane, last_name: smith`; let regexpnames = /first_name: (\w+), last_name: (\w+)/mg; let match = regexpnames.exec(personlist); do { console.log(`hello ${match[1]} ${match[2]}`); } while((match = regexpnames.exec(personlist)) !== null); using named groups let personlist = `first_name: john, last_name: doe first_name: jane, last_name: smith`; l...
...et regexpnames = /first_name: (?<firstname>\w+), last_name: (?<lastname>\w+)/mg; let match = regexpnames.exec(personlist); do { console.log(`hello ${match.groups.firstname} ${match.groups.lastname}`); } while((match = regexpnames.exec(personlist)) !== null); note: not all browsers support this feature; refer to the compatibility table.
Arrow function expressions - JavaScript
syntax basic syntax (param1, param2, …, paramn) => { statements } (param1, param2, …, paramn) => expression // equivalent to: => { return expression; } // parentheses are optional when there's only one parameter name: (singleparam) => { statements } singleparam => { statements } // the parameter list for a function with no parameters should be written with a pair of parentheses.
... () => { statements } advanced syntax // parenthesize the body of a function to return an object literal expression: params => ({foo: bar}) // rest parameters and default parameters are supported (param1, param2, ...rest) => { statements } (param1 = defaultvalue1, param2, …, paramn = defaultvaluen) => { statements } // destructuring within the parameter list is also supported var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6 description see also "es6 in depth: arrow functions" on hacks.mozilla.org.
Default parameters - JavaScript
, g]; } withdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] withoutdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] scope effects if default parameters are defined for one or more parameter, then a second scope (environment record) is created, specifically for the identifiers within the parameter list.
... function go() { return ':p' } } ...and this function will print undefined because variable var a is hoisted only to the top of the scope created for the function body (and not the parent scope created for the parameter list): function f(a, b = () => console.log(a)) { var a = 1 b() // prints `undefined`, because default parameter values exist in their own scope } parameters without defaults after default parameters parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.
Array.prototype.flatMap() - JavaScript
let's generate a list of words from a list of sentences.
... let arr1 = ["it's sunny in", "", "california"]; arr1.map(x => x.split(" ")); // [["it's","sunny","in"],[""],["california"]] arr1.flatmap(x => x.split(" ")); // ["it's","sunny","in", "", "california"] notice, the output list length can be different from the input list length.
Array.prototype.map() - JavaScript
let mappedvalue be the result of calling the call internal // method of callback with t as the this value and argument // list containing kvalue, k, and o.
...this is because queryselectorall returns a nodelist (which is a collection of objects).
Array.prototype.slice() - JavaScript
function list() { return array.prototype.slice.call(arguments) } let list1 = list(1, 2, 3) // [1, 2, 3] binding can be done with the call() method of function.prototype and it can also be reduced using [].slice.call(arguments) instead of array.prototype.slice.call.
... let unboundslice = array.prototype.slice let slice = function.prototype.call.bind(unboundslice) function list() { return slice(arguments) } let list1 = list(1, 2, 3) // [1, 2, 3] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.slice' in that specification.
Array.prototype.sort() - JavaScript
// the array to be sorted var list = ['delta', 'alpha', 'charlie', 'bravo']; // temporary array holds objects with position and sort-value var mapped = list.map(function(el, i) { return { index: i, value: el.tolowercase() }; }) // sorting the mapped array containing the reduced values mapped.sort(function(a, b) { if (a.value > b.value) { return 1; } if (a.value < b.value) { return -1; } return 0; }); // cont...
...ainer for the resulting order var result = mapped.map(function(el){ return list[el.index]; }); there is an open source library available called mapsort which applies this approach.
Intl.PluralRules() constructor - JavaScript
possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information).
...possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0.
Object.fromEntries() - JavaScript
the object.fromentries() method transforms a list of key-value pairs into an object.
... description the object.fromentries() method takes a list of key-value pairs and returns a new object whose properties are given by those entries.
Object.getOwnPropertyNames() - JavaScript
items on the prototype chain are not listed: function parentclass() {} parentclass.prototype.inheritedmethod = function() {}; function childclass() { this.prop = 5; this.method = function() {}; } childclass.prototype = new parentclass; childclass.prototype.prototypemethod = function() {}; console.log( object.getownpropertynames( new childclass() // ["prop", "method"] ) ); get non-enumerable properties only this uses the...
... array.prototype.filter() function to remove the enumerable keys (obtained with object.keys()) from a list of all keys (obtained with object.getownpropertynames()) thus giving only the non-enumerable keys as output.
handler.ownKeys() - JavaScript
the result list must contain the keys of all non-configurable own properties of the target object.
... if the target object is not extensible, then the result list must contain all the keys of the own properties of the target object and no other values.
Reflect.apply() - JavaScript
syntax reflect.apply(target, thisargument, argumentslist) parameters target the target function to call.
... argumentslist an array-like object specifying the arguments with which target should be called.
Symbol.for() - JavaScript
description in contrast to symbol(), the symbol.for() function creates a symbol available in a global symbol registry list.
... global symbol registry the global symbol registry is a list with the following record structure and it is initialized empty: a record in the global symbol registry field name value [[key]] a string key used to identify a symbol.
Object initializer - JavaScript
an object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).
...you simply notate a list of key: value pairs delimited by commas.
Spread syntax (...) - JavaScript
function myfunction(x, y, z) { } const args = [0, 1, 2]; myfunction.apply(null, args); with spread syntax the above can be written as: function myfunction(x, y, z) { } const args = [0, 1, 2]; myfunction(...args); any argument in the argument list can use spread syntax, and the spread syntax can be used multiple times.
...with spread syntax this becomes much more succinct: const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"] just like spread for argument lists, ...
new operator - JavaScript
arguments a list of values that the constructor will be called with.
...if no argument list is specified, foo is called without arguments.
this - JavaScript
it's not exactly dead because it gets executed, but it can be eliminated with no outside effects.) as a dom event handler when a function is used as an event handler, its this is set to the element on which the listener is placed (some browsers do not follow this convention for listeners added dynamically with methods other than addeventlistener()).
... // when called as a listener, turns the related element blue function bluify(e) { // always true console.log(this === e.currenttarget); // true when currenttarget and target are the same object console.log(this === e.target); this.style.backgroundcolor = '#a5d9f3'; } // get a list of every element in the document var elements = document.getelementsbytagname('*'); // add bluify as a click listener so when the // element is clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this is set to the dom element on which the listener is placed: <button onclick="alert(this.tagname.tolowercase());"> show this </button> the...
for...of - JavaScript
the for...of statement creates a loop iterating over iterable objects, including: built-in string, array, array-like objects (e.g., arguments or nodelist), typedarray, map, set, and user-defined iterables.
...nst value of iterable) { console.log(value); } // 1 // 2 // 3 iterating over the arguments object you can iterate over the arguments object to examine all of the parameters passed into a javascript function: (function() { for (const argument of arguments) { console.log(argument); } })(1, 2, 3); // 1 // 2 // 3 iterating over a dom collection iterating over dom collections like nodelist: the following example adds a read class to paragraphs that are direct descendants of an article: // note: this will only work in platforms that have // implemented nodelist.prototype[symbol.iterator] const articleparagraphs = document.queryselectorall('article > p'); for (const paragraph of articleparagraphs) { paragraph.classlist.add('read'); } closing iterators in for...of loops, abrupt...
var - JavaScript
the corresponding name is also added to a list on the internal [[varnames]] slot on the global environment record (which forms part of the global lexical environment).
... the list of names in [[varnames]] enables the runtime to distinguish between global variables and straightforward properties on the global object.
categories - Web app manifests
there is no standard list of possible values, but the w3c maintains a list of known categories.
... note: categories are used only as hints for catalogs or stores listing web applications.
MathML attribute reference - MathML
this is an alphabetical list of mathml attributes.
... notation <menclose> a list of notations, separated by white space, to apply to the child elements.
Authoring MathML - MathML
html becomes verbose when your document contains advanced structures like lists or tables but fortunately there are many generators from simple notations, wysiwyg editors and other content management systems to help writing web pages.
...of course, the list is by no means exhaustive and you are invited to check out the w3c mathml software list where you can find various other tools.
Web Performance
web performance checklist a performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.
... mobile performance checklist a concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.
Privacy, permissions, and information security
for example, if a site leaks a list of users' names and zip codes online, a bad actor could almost certainly track down at least some percentage of those users by simply using the corresponding phone books.
...the following list includes features affecting both, since many of these features are used for both.
Installing and uninstalling web apps - Progressive web apps (PWAs)
installed applications are more conveniently invoked as they have a presence in a device’s home screen or app list or bar.
...among the options should be the "add to home screen" option, unless it's been specifically removed from the list by the user editing the optons displayed: choosing "add to home screen" here presents the confirmation dialog box, which not only confirms that the user wants to add the app to the home screen, but also lets the user customize its name.
PWA developer guide - Progressive web apps (PWAs)
in the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive web applications (pwas).
... --->>> titles below are just for the list; give articles good seo names and feel free to tweak those and this as needed...
Progressive loading - Progressive web apps (PWAs)
we won't do that because the app itself is dependent on javascript — without it, the list of games wouldn't even be loaded, and the service worker code wouldn't be executed.
...it would work like an infinite scroll — loading the items on the list only when the user scrolls the page down.
Web API reference - Web technology reference
WebReferenceAPI
each individual interface across all apis is listed in the index.
... there's also a listing of all available events in the event reference.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: auto|optimizespeed|optimizelegibility|geometricprecision|inherit; animatable: yes transform defines a list of transform definitions that are applied to an element and the element's children.
... value: <transform-list>; animatable: yes unicode-bidi - value:; animatable: - vector-effect specifies the vector effect to use when drawing an object.
display - SVG: Scalable Vector Graphics
WebSVGAttributedisplay
<rect x="20" y="20" width="60" height="60" fill="yellow"></rect> <!-- here the yellow rectangle is not displayed --> <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect> <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect> </svg> usage notes default value inline value [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where <display-outside> = block | inline | run-in<display-inside> = flow | flow-root | table | flex | grid | ruby<display-listitem> = <display-outside>?
...&& list-item<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid animatable yes for a description of the values, please refer to the css display property.
gradientTransform - SVG: Scalable Vector Graphics
" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system.
... working draft defines the <transformation-list> value.
keySplines - SVG: Scalable Vector Graphics
the keysplines attribute defines a set of bézier curve control points associated with the keytimes list, defining a cubic bézier function that controls interval pacing.
... default value none animatable no the attribute value is a semicolon-separated list of control point descriptions.
media - SVG: Scalable Vector Graphics
WebSVGAttributemedia
style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied.
... candidate recommendation changed the value definition from different media types as defined in css 2 to <media-query-list>.
requiredExtensions - SVG: Scalable Vector Graphics
the requiredextensions attribute defines a list of required language extensions.
... usage notes value <list-of-extensions> default value none animatable no <list-of-extensions> the value is a list of references (iri references in svg 1, url references in svg 2) which identify the required extensions, with the individual values separated by white space.
string - SVG: Scalable Vector Graphics
WebSVGAttributestring
the string attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent <font-face-uri> element supports.
... only one element is using this attribute: <font-face-format> usage notes value <anything> default value none animatable no <anything> this value specifies a list of formats that are supported by the font referenced by the parent <font-face-uri> element.
stroke-dasharray - SVG: Scalable Vector Graphics
ine x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none animatable yes <dasharray> a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps.
... if an odd number of values is provided, then the list of values is repeated to yield an even number of values.
transform - SVG: Scalable Vector Graphics
the transform attribute defines a list of transform definitions that are applied to an element and the element's children.
... value <transform-list> default value none animatable yes transform functions the following transform functions can be used by the transform attribute <transform-list> warning: as per the spec, you should be able to also use css transform functions.
<pattern> - SVG: Scalable Vector Graphics
WebSVGElementpattern
value type: <transform-list>; default value: none; animatable: yes patternunits this attribute defines the coordinate system for attributes x, y, width , and height.
... value type: <list-of-numbers> ; default value: none; animatable: yes width this attribute determines the width of the pattern tile.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
svgsvgelement unimplemented attributes: contentscripttype, contentstyletype, viewport, currentview unimplemented bindings: getintersectionlist, getenclosurelist, checkintersection, checkenclosure g implemented.
... svgpathelement interface unimplemented attributes: normalizedpathseglist, animatednormalizedpathseglist rect implemented.
Mixed content - Web security
passive content list this section lists all types of http requests which are considered passive content: <img> (src attribute) <audio> (src attribute) <video> (src attribute) <object> subresources (when an <object> performs http requests) mixed active content mixed active content is content that has access to all or parts of the document object model of the https page.
... active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes css stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in css where a <url> value is used (@font-face, cursor, background-image, and so forth).
Web Components
add child elements, event listeners, etc., to the shadow dom using regular dom methods.
... event.composedpath: returns the event’s path (objects on which listeners will be invoked).
XPath
xpath:axes list and definition of the axes defined in the xpath specification.
... xpath:functions list and description of the core xpath functions and xslt-specific additions to xpath.
<xsl:copy> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementcopy
syntax <xsl:copy use-attribute-sets=list-of-names> template </xsl:copy> required attributes none.
... optional attributes use-attribute-sets lists attribute sets that should be applied to the output node, if it is an element.
<xsl:element> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementelement
syntax <xsl:element name=name namespace=uri use-attribute-sets=list-of-names > template </xsl:element> required attributes name specifies the desired name of the output element.
... use-attribute-sets a whitespace‐separated list of attribute-set element names to be applied to the element element’s output element.
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementoutput
syntax <xsl:output method="xml" | "html" | "text" version=string encoding=string omit-xml-declaration="yes" | "no" standalone="yes" | "no" doctype-public=string doctype-system=string cdata-section-elements=list-of-names indent="yes" | "no" media-type=string /> required attributes none.
... cdata-section-elements lists elements whose text contents should be written as cdata sections.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElement
for example, assume that a variable "image-dir" is defined as follows: <xsl:variable name="image-dir">/images</xsl:variable> the expression to be evaluated is placed inside curly brackets: <img src="{$image-dir}/mygraphic.jpg"/> this would result in the following: <img src="/images/mygraphic.jpg"/> the element annotations that follow include a description, a syntax listing, a list of required and optional attributes, a description of type and position, its source in the w3c recommendation and an explanation of the degree of present gecko support.
... use the {{listsubpages}} macro once the bcd for <xsl:fallback>, <xsl:import>, <xsl:namespace-alias>, <xsl:number>, <xsl:output>, <xsl:stylesheet>, <xsl:text> and <xsl:value-of> is fully migrated.
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
the context position is the position of the context node in the initial current node list used when executing the stylesheet.
... the context size is the size of the initial current node list used when executing the stylesheet.
XSLT: Extensible Stylesheet Language Transformations
WebXSLT
common xslt errors this article lists some common problems using xslt in firefox.
... mailing list newsgroup rss feed related topics xml, xpath, xquery ...
Compiling a New C/C++ Module to WebAssembly - WebAssembly
large variety of javascript "glue" code to handle memory allocation, memory leaks, and a host of other problems calling a custom function defined in c if you have a function defined in your c code that you want to call as needed from javascript, you can do this using the emscripten ccall() function, and the emscripten_keepalive declaration (which adds your functions to the exported functions list (see why do functions in my c/c++ source code vanish when i compile to javascript, and/or i get no functions to process?)).
... <button class="mybutton">run myfunction</button> now add the following code at the end of the first <script> element: document.queryselector('.mybutton') .addeventlistener('click', function() { alert('check console'); var result = module.ccall( 'myfunction', // name of c function null, // return type null, // argument types null // arguments ); }); this illustrates how ccall() is used to call the exported function.
Cross-domain Content Scripts - Archive of obsolete content
an iframe, if that content is served from a different domain make cross-domain xmlhttprequests however, you can enable these features for specific domains by adding them to your add-on's package.json under the "cross-domain-content" key, which itself lives under the "permissions" key: "permissions": { "cross-domain-content": ["http://example.org/", "http://example.com/"] } the domains listed must include the scheme and fully qualified domain name, and these must exactly match the domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
Reddit Example - Archive of obsolete content
finally, it registers a listener to the user-defined click event which in turn passes the url into the open function of the tabs module.
Classes and Inheritance - Archive of obsolete content
it specifies a list of objects, which properties are to be copied to the prototype of the constructor.
Module structure of the SDK - Archive of obsolete content
there's a list of these "community-developed modules" in the sdk's github wiki, and to learn how to use them, see the tutorial on using external modules to add menu items to firefox.
Guides - Archive of obsolete content
this page lists more theoretical in-depth articles about the sdk.
content/loader - Archive of obsolete content
usage the module exports a constructor for the loader object, which inherits on(), once(), and removelistener() functions that enable its users to listen to events.
content/symbiont - Archive of obsolete content
symbiont symbiont is composed from the worker trait, therefore instances of symbiont and their descendants expose all the public properties exposed by worker along with additional public properties that are listed below: properties contentscriptfile the local file urls of content scripts to load.
frame/hidden-frame - Archive of obsolete content
the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
net/xhr - Archive of obsolete content
this can probably be done most securely by white-listing the protocols that can be used in the url passed to the open() method, and limiting them to http:, https:, and possibly a special scheme that can be used to access the add-on's packaged, read-only resources.
platform/xpcom - Archive of obsolete content
for example, the add-on below implements the nsiobserver interface to listen for and log all topic notifications: var { class } = require('sdk/core/heritage'); var { unknown } = require('sdk/platform/xpcom'); var { cc, ci } = require('chrome') var observerservice = cc['@mozilla.org/observer-service;1'].
system/runtime - Archive of obsolete content
see os_target for a more complete list of possible values.
test/httpd - Archive of obsolete content
the server listens at http://localhost:port/ and serves files from the specified directory.
util/collection - Archive of obsolete content
a simple list-like class and utilities for using it.
Tools - Archive of obsolete content
articles listed here provide a reference for the sdk's tools: cfx enables you to test, run, and package add-ons.
Add a Context Menu Item - Archive of obsolete content
in this case the script listens for the user to click on the item, then sends a message to the add-on containing the selected text.
Getting Started (jpm) - Archive of obsolete content
after installation they'll show up disabled in the list of installed add-ons, noting the missing signature.
Getting started (cfx) - Archive of obsolete content
an alternative development model is to use the extension auto-installer add-on: this listens for new xpi files on a specified port and installs them automatically.
Localization - Archive of obsolete content
now when the browser's locale is set to "en-us", users see this in the add-ons manager: when the browser's locale is set to "fr", they see this: the menulist and the radio preference types have options.
Add-on SDK - Archive of obsolete content
interact with the browser open web pages, listen for pages loading and list open pages.
Drag & Drop - Archive of obsolete content
first, you need to hook up the basic drag event handlers: elem.addeventlistener("dragover", _dragover, true); elem.addeventlistener("dragdrop", _dragdrop, true); here, elem could be a window or an xul element.
HTML in XUL for rich tooltips - Archive of obsolete content
vechild(div.firstchild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.appendchild(injecthtml); } } window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to enable html tags to be used inside the xul.
Page Loading - Archive of obsolete content
page loading on page load how to execute code each time a new page is loaded in browser/mail progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
QuerySelector - Archive of obsolete content
along the lines of other frameworks such as jquery or prototype, shortening the "queryselector" name can be convenient: function $ (selector, el) { if (!el) {el = document;} return el.queryselector(selector); } function $$ (selector, el) { if (!el) {el = document;} return el.queryselectorall(selector); // note: the returned object is a nodelist.
Rosetta - Archive of obsolete content
mime types here is a short list of the mime types associated to some programming languages: language mime type bash text/x-shellscript java text/x-java-source c text/x-c, text/x-csrc c++ text/x-c++, text/x-c++src python text/x-python there are no limitations to the mime types that can be used for the type attribute of the <script> element.
Tabbox - Archive of obsolete content
examples: .tabs-closebutton { list-style-image: url(http://mozilla.org/favicon.ico); } .tabs-closebutton { list-style-image: url("chrome://global/skin/icons/close.gif"); } ...
JavaScript timers - Archive of obsolete content
this article provides a list of those.
Windows - Archive of obsolete content
example var startpos = null; function mousedown(event) { startpos = [event.clientx, event.clienty]; } function mousemove(event) { if (startpos) { var newx = event.screenx - startpos[0]; var newy = event.screeny - startpos[1]; window.moveto(newx, newy); } } function mouseup(event) { startpos = null; } window.addeventlistener("mousedown", mousedown, false); window.addeventlistener("mouseup", mouseup, false); window.addeventlistener("mousemove", mousemove, false); xul titlebar element xul applications can take advantage of the titlebar element to achieve a similar result without extra javascript code.
Jetpack Processes - Archive of obsolete content
if a crash report minidump is available, the context.dumpid property will list the minidump id of the crash report that was collected.
Offering a context menu for form controls - Archive of obsolete content
window.addeventlistener("load", function() { let settargetoriginal = nscontextmenu.prototype.settarget; components.utils.reporterror(settargetoriginal); nscontextmenu.prototype.settarget = function(anode, arangeparent, arangeoffset) { settargetoriginal.apply(this, arguments); if (this.istargetaformcontrol(anode)) this.shoulddisplay = true; }; }, false); this code, which is run...
Chapter 1: Introduction to Extensions - Archive of obsolete content
the add-ons manager handles the following tasks: safely installs and uninstalls add-ons makes sure add-ons are compatible with the version of firefox you're using manages a whitelist of sites trusted for installing add-ons helps troubleshoot add-ons by disabling them and offering a safe mode confirms and runs updates provides access to add-ons' settings dialogs provides access to add-ons' support sites development environment amenities initially, there wasn't adequate documentation available, and extension developers were largely left to fend for themselves1; however, ...
Appendix D: Loading Scripts - Archive of obsolete content
debugging: chromebug (at least) can list component.utils modules and single step through them.
Introduction - Archive of obsolete content
there's a very comprehensive list of xulrunner applications in the xulrunner hall of fame.
JavaScript Object Management - Archive of obsolete content
} // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.browseroverlay.init(); }, false); there are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs.
The Box Model - Archive of obsolete content
in order to use this page, you'll need to install the remote xul manager extension and add developer.mozilla.org to the whitelist.
Security best practices in extensions - Archive of obsolete content
frame.docshell.allowimages = false; frame.docshell.allowjavascript = false; frame.docshell.allowplugins = false; there are more examples listed in the document listed above in this section.
Signing an extension - Archive of obsolete content
show the certificate list in your database.
Firefox addons developer guide - Archive of obsolete content
todo: all fixme notes inside the documents; add abbreviation definition to acronyms; add some link to the internal mdc documentation when it makes sense; indent source code; make sure documentation is relevant for all platforms: gnu/linux, macos, windows; add anchor links to figures & listings; add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter 3 or 5 more informations...
Add-ons - Archive of obsolete content
in your extension's browser.xul overlay, write code which listens for a custom dom event.
Case Sensitivity in class and id Names - Archive of obsolete content
class = cdata-list [cs] this attribute assigns a class name or set of class names to an element.
Creating a dynamic status bar extension - Archive of obsolete content
we use the window.addeventlistener() dom function to tell firefox to call the stockwatcher.startup() function when a new browser window is opened: window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); our new extension has two primary functions: startup() and refreshinformation().
DOMSubtreeModified - Archive of obsolete content
document.body.addeventlistener('domsubtreemodified', function () { document.title = 'dom changed at ' + new date(); }, false); ...
MozOrientation - Archive of obsolete content
to normalize between the two you can do something like this: function orientationhandler(evt){ // for ff3.6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (180 / math.pi)); evt.beta = -(evt.y * (180 / math.pi)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.addeventlistener('deviceorientation', orientationhandler, false); window.addeventlistener('mozorientation', orientationhandler, false); example window.addeventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser window as the events arrive.
cached - Archive of obsolete content
the cached event is fired when the resources listed in the application cache manifest have been downloaded, and the application is now cached.
chargingchange - Archive of obsolete content
"yes" : "no")); battery.addeventlistener('chargingchange', function() { console.log("battery charging?
chargingtimechange - Archive of obsolete content
example navigator.getbattery().then(function(battery) { console.log("battery charging time: " + battery.chargingtime + " seconds"); battery.addeventlistener('chargingtimechange', function() { console.log("battery charging time: " + battery.chargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
dischargingtimechange - Archive of obsolete content
example navigator.getbattery().then(function(battery) { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); battery.addeventlistener('dischargingtimechange', function() { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
downloading - Archive of obsolete content
the downloading event is fired after checking for an application cache update, if the user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
levelchange - Archive of obsolete content
example navigator.getbattery().then(function(battery) { console.log("battery level: " + battery.level * 100 + " %"); battery.addeventlistener('levelchange', function() { console.log("battery level: " + battery.level * 100 + " %"); }); }); related events chargingchange chargingtimechange dischargingtimechange ...
progress - Archive of obsolete content
the progress event is fired when the user agent is downloading resources listed by the manifest.
updateready - Archive of obsolete content
the updateready event is fired when the resources listed in the application cache manifest have been newly redownloaded, and the script can use swapcache() to switch to the new cache.
Source Navigator - Archive of obsolete content
but on the other hand mxr can only allow you to type in the name for it to generate a long list of occurances.
Visualizing an audio spectrum - Archive of obsolete content
, canvas.width, canvas.height); for (var i = 0; i < fft.spectrum.length; i++ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float32array(buffersize/2); this.real = new float32array(buffer...
Autodial for Windows NT - Archive of obsolete content
if more than one dialup connection is configured, and none is selected as the default, we display a list of dialup connections and let the user choose one.
Automated testing tips and tricks - Archive of obsolete content
me privileges using a chrome doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -chrome chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect content onload event from chrome use the domcontentloaded event chromewindow.addeventlistener('domcontentloaded',callbackfunction,false); ...
Bonsai - Archive of obsolete content
bonsai is tree control it is a tool that lets you perform queries on the contents of a cvs archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time period.
Bookmark Keywords - Archive of obsolete content
this will add a bookmark of the current page to the list of bookmarks.
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
it displays a list of active tinderbox clients along with the result of their last build attempt.
Making a Mozilla installation modifiable - Archive of obsolete content
the chrome registry is a file that lists each major mozilla component and where in the chrome directory its ui files are located.
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
pt 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://tinderstatus/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://tinderstatus/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-ima...
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource="...
Dehydra - Archive of obsolete content
mailing list newsgroup rss feed #static on irc.mozilla.org blogs taras glek david mandelin benjamin smedberg related topics pork c/c++ refactoring tools, mozilla 2, spidermonkey categories interwiki language links ...
Drag and Drop - Archive of obsolete content
the list below describes the event handlers that can be called, which may be placed on any element.
Exception logging in JavaScript - Archive of obsolete content
exception reporting in firefox 3 firefox 3 improves reporting of unhandled exceptions by establishing a set of rules that determines whether or not an exception is worth reporting: any methods on interfaces annotated with the [function] attribute in idl (see, for example, nsidomeventlistener) that throw exceptions always report those exceptions into the error console.
External CVS snapshots in mozilla-central - Archive of obsolete content
the following list of directories (incomplete) contain them.
Layout FAQ - Archive of obsolete content
also lists some profiles.
Gecko Coding Help Wanted - Archive of obsolete content
so we've compiled a list of pointers —from the experts.
HTTP Class Overview - Archive of obsolete content
nshttphandler implements nsiprotocolhandler manages preferences owns the authentication cache holds references to frequently used services nshttpchannel implements nsihttpchannel talks to the cache initiates http transactions processes http response codes intercepts progress notifications nshttpconnection implements nsistreamlistener & nsistreamprovider talks to the socket transport service feeds data to its transaction object routes progress notifications nshttpconnectioninfo identifies a connection nshttptransaction implements nsirequest encapsulates a http request and response parses incoming data nshttpchunkeddecoder owned by a transaction strips chunked transfer encoding nshttprequesthead ow...
Twitter - Archive of obsolete content
list methods, spam reporting methods, and oauth are not currently supported.
Me - Archive of obsolete content
ArchiveMozillaJetpackMetaMe
note that this mechanism is independent of the first-run page; in particular, the callback is not a load event listener or jquery ready callback.
Jetpack Snippets - Archive of obsolete content
alling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now be global slider = aslidebar;} // then, accessing the slidebar htmlvar tl = slider.contentdocument.getelementbyid("thumblist"); // or calling slidebar api methods or accessing propertiesslider.notify(); ...
Simple Storage - Archive of obsolete content
we'll add a notes menu with// a submenu, which lists all the notes.
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain text.
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain text.
slideBar - Archive of obsolete content
jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
Simple Storage - Archive of obsolete content
we'll add a notes menu with // a submenu, which lists all the notes.
Selection - Archive of obsolete content
ArchiveMozillaJetpackdocsUISelection
features can get, set, and listen for selection events in html or plain text.
Mozilla Application Framework - Archive of obsolete content
community a large, active development community that interacts via newsgroups, mailing lists, irc channels, and web sites.
How to Write and Land Nanojit Patches - Archive of obsolete content
in this case, you have to look through the converted revisions you're about to push (run hg outgoing to list them) and figure out which patch(es) caused the breakage.
BlogPosts - Archive of obsolete content
pdate thanscorner: mozilla prism - webrunner with pazzaz mozilla prism - a revolution in web apps thanscorner: mozilla webrunner 0.7 site specific browsers webrunner using webrunner webrunner + gears = offline desktop reader webrunner 0.5 webrunner 0.5 - mac support webrunner 0.5 - linux install webrunner, google reader, and google notebook distraction free gtd - 32+ web app files for online todo lists mozilla webrunner: a one-window, tabless browser with no url bar webrunner becomes prism - a mozilla labs project mozilla labs: prism alex faaborg: prism mozilla prism: bringing web apps to the desktop everyone should use site specific browsers mozilla prism portable (spanish) prism, l'avenir des applications web selon mozilla (french) mozilla prism : bundle custom google reader + talk (french) ...
BundleLibrary - Archive of obsolete content
bundles gmail: gmail.webapp google calendar: gcalendar.webapp google docs: gdocs.webapp google groups: groups.webapp google analytics: ganalytics.webapp google reader: greader.webapp facebook: facebook.webapp twitter: twitter.webapp user contributed bundles gmail w/gtalk: gmail.webapp (note: work with latest version of prism!) 32 online todo lists: zip file with web apps for 32 online todo lists anywhere.fm: anywhere.fm@prism.app.webapp a service that lets you upload your entire music library to their servers and listen from anywhere through a slick flash interface.
Configuration - Archive of obsolete content
here is the list of parameters: id the unique name of this web application.
Extensions - Archive of obsolete content
to support prism specifically, you'll need to add prism to the list of target applications in the extension's install.rdf file.
Proxy UI - Archive of obsolete content
manual proxy is a list of proxy types that require a hostname and a port number.
Reading textual data - Archive of obsolete content
xxx: document nsiunicharstreamlistener (gecko 1.8) xxx: also document nsistreamlistener here?
Remotely debugging Firefox for Metro - Archive of obsolete content
set up firefox for metro go to about:config in firefox for metro, and set the following required preference: devtools.debugger.remote-enabled = true you may also want to set these optional preferences: devtools.debugger.force-local = false (if you want to connect from a different machine over the network) devtools.debugger.remote-host (to change the tcp hostname where firefox will listen for connections) devtools.debugger.remote-port (to change the tcp port number where firefox will listen for connections) devtools.debugger.prompt-connection = false (allow connections without displaying a confirmation prompt.
Running Windows Debug Builds Downloaded From Tinderbox - Archive of obsolete content
to run tests of the tests package you can, for example, run the reftests as follows: python reftest/runreftest.py --appname=firefox/firefox.exe --utility-path=bin --extra-profile-file=bin/plugins reftest/tests/layout/reftests/reftest.list ...
open - Archive of obsolete content
syntax open(mode,type) parameters mode a comma-delimited list describing the method to use to open the file, described in detail here.
File object - Archive of obsolete content
file.list() get a list of files, potentially matching a regular expression filter, from the file.
Merging TraceMonkey Repo - Archive of obsolete content
conflicting files can be listed via hg resolve -l.
Actionscript Acceptance Tests - Archive of obsolete content
any test arguments (--) must be placed after the multiabc file listings.
Tamarin Roadmap - Archive of obsolete content
comments or questions are welcome and encouraged via the tamarin-devel mailing list.
Tamarin - Archive of obsolete content
log a bug against tamarin tamarin-devel mailing list #tamarin channel on irc.mozilla.org blogroll mason chang david mandelin related topics javascript spidermonkey actionmonkey tamarin on mozilla.org ...
The new nsString class implementation (1999) - Archive of obsolete content
our minimalistic nsimemoryagent interface is just rich enough to support the nsstring idiom, and could be extended to serve as the general memory allocation idiom.
Treehydra - Archive of obsolete content
mailing list newsgroup rss feed #static on irc.mozilla.org blogs taras glek david mandelin related topics pork c/c++ refactoring tools, mozilla 2, spidermonkey categories interwiki language links ...
URIScheme - Archive of obsolete content
list of mozilla supported uri schemes list of uri schemes http:// by default, port 80 https:// by default, port 443 (ssl) ftp:// by default, port 21 file:// : file:///etc/hosts on unix/linux, file:///c:/some/file.txt on windows.
Using gdb on wimpy computers - Archive of obsolete content
versions of gdb earlier than 5 use a very slow algorithm for walking the list of already loaded symbols as it adds symbols to its symbol table.
Venkman Internals - Archive of obsolete content
filecontainerrecord - list of script tags found in the parent record's window.document property.
Using Breakpoints in Venkman - Archive of obsolete content
to debug an extension, uncheck "exclude browser files" on the debug menu and your installed extension files should appear in the loaded scripts list.) venkman also indicates that one or more breakpoints have been set in the loaded scripts view, where red dots appear next to the files in which breakpoints have been set, along with the line number where the function begins whose code is being stopped.
Venkman - Archive of obsolete content
mailing list newsgroup rss feed irc: #venkman on irc.mozilla.org report a bug in venkman if you find a problem with venkman, please follow directives mentioned at venkman faq section 5.4 and then you may report a bug on javascript debugger component.
When To Use ifdefs - Archive of obsolete content
this rule has many exceptions, some of which are listed here: the code in editor/ui/ is built by the suite, standalone composer, and thunderbird, but it is considered application-specific.
Mac stub installer - Archive of obsolete content
for example, see the xpcom section that lists all the shared libraries as seen in dist.
Unix stub installer - Archive of obsolete content
for example, see the xpcom section that lists all the shared libraries as seen in dist.
Install script template - Archive of obsolete content
* * @param empty param list **/ function createsecondaryinstall() { // use getfolder in such a way that it creates c:\winnt\system32\myplugin secondaryfolder = getfolder("win system", company_name); // if secondaryfolder is null, then there has been an error if(!secondaryfolder) return nosecondaryinstall; else { // we have admin privileges to write to the win system directory // so we will set up dll and ...
Using XPInstall to Install Plugins - Archive of obsolete content
in particular, the windows registry keys should point to the secondary install location so that future netscape gecko browsers can find and add to their list of available plugin locations.
Windows Install - Archive of obsolete content
winreg.setrootkey(winreg.hkey_current_user) ;// current_user subkey = "software\\microsoft\\windows\\currentversion\\runonce" ; winreg.createkey(subkey,""); valname = "ren8dot3"; value = fprogram + "ren8dot3.exe " + ftemp + "ren8dot3.ini"; err = winreg.setvaluestring(subkey, valname, value); } } function prepareren8dot3(listlongfilepaths) { var ftemp = getfolder("temporary"); var fprogram = getfolder("program"); var fren8dot3ini = getwinprofile(ftemp, "ren8dot3.ini"); var binicreated = false; var flongfilepath; var sshortfilepath; if(fren8dot3ini != null) { for(i = 0; i < listlongfilepaths.length; i++) { flongfilepath = getfolder(fprogram, listlongfilepaths[i]); sshortf...
copy - Archive of obsolete content
for a list of possible values, see return codes.
dirCreate - Archive of obsolete content
for a list of possible values, see return codes.
dirRemove - Archive of obsolete content
for a list of possible values, see return codes.
dirRename - Archive of obsolete content
for a list of possible values, see return codes.
execute - Archive of obsolete content
for a list of possible values, see return codes.
macAlias - Archive of obsolete content
for a list of possible values, see return codes.
move - Archive of obsolete content
for a list of possible values, see return codes.
remove - Archive of obsolete content
for a list of possible values, see return codes.
rename - Archive of obsolete content
for a list of possible values, see return codes.
windowsRegisterServer - Archive of obsolete content
for a list of possible values, see return codes.
windowsShortcut - Archive of obsolete content
for a list of possible values, see return codes.
addDirectory - Archive of obsolete content
for a list of possible values, see return codes.
addFile - Archive of obsolete content
for a list of possible values, see return codes.
cancelInstall - Archive of obsolete content
for a list of possible values, and any custom errorcode created by install writer, see return codes.
deleteRegisteredFile - Archive of obsolete content
for a list of possible values, see return codes.
execute - Archive of obsolete content
for a list of possible values, see return codes.
getFolder - Archive of obsolete content
see the list in the description section for the two sets of locations.
getLastError - Archive of obsolete content
for a list of possible values, see return codes.
initInstall - Archive of obsolete content
for a list of possible values, see return codes.
logComment - Archive of obsolete content
for a list of possible values, see return codes.
patch - Archive of obsolete content
for a list of possible values, see return codes.
performInstall - Archive of obsolete content
for a list of possible values, see return codes.
registerChrome - Archive of obsolete content
for a list of possible values, see return codes.
Methods - Archive of obsolete content
refreshplugins refreshes the list of plug-ins registered for the browser.
getString - Archive of obsolete content
unlike that function, this method does not support using a null key to return a list of keys in a section.
createKey - Archive of obsolete content
for a list of possible values, see return codes.
deleteKey - Archive of obsolete content
for a list of possible values, see return codes.
setValue - Archive of obsolete content
for a list of possible values, see return codes.
setValueNumber - Archive of obsolete content
for a list of possible values, see return codes.
setValueString - Archive of obsolete content
for a list of possible values, see return codes.
WinRegValue - Archive of obsolete content
winregvalue.reg_sz = 1 winregvalue.reg_expand_sz = 2 winregvalue.reg_binary = 3 winregvalue.reg_dword = 4 winregvalue.reg_dword_little_endian = 4 winregvalue.reg_dword_big_endian = 5 winregvalue.reg_link = 6 winregvalue.reg_multi_sz = 7 winregvalue.reg_resource_list = 8 winregvalue.reg_full_resource_descriptor = 9 winregvalue.reg_resource_requirements_list = 10 regdata a java byte array containing the data.
XPInstall API reference - Archive of obsolete content
methods createkey deletekey deletevalue enumkeys enumvaluenames getvalue getvaluenumber getvaluestring iskeywritable keyexists setrootkey setvalue setvaluenumber setvaluestring valueexists winregvalue constructor other information return codes see complete list examples trigger scripts and install scripts code samples file.macalias file.windowsshortcut install.adddirectory install.addfile installtrigger.installchrome installtrigger.startsoftwareupdate windows install ...
XPInstall - Archive of obsolete content
mailing list newsgroup rss feed tools xpinstall trigger page related topics extensions, xul, xpi ...
completedefaultindex - Archive of obsolete content
if set to false or omitted, the value must be selected from the list.
completeselectedindex - Archive of obsolete content
« xul reference home completeselectedindex type: boolean if true, the text in the text field will be autocompleted as the user selects from the popup list.
containment - Archive of obsolete content
it may be set to a space-separated list of rdf properties or resources.
currentset - Archive of obsolete content
the value of this attribute should be a comma-separated list of item ids from the toolbarpalette or, additionally, any of the following strings: "separator", "spring", "spacer".
customindex - Archive of obsolete content
« xul reference home customindex not in seamonkey 1.x type: integer this value is the index of the toolbar in the list of the custom toolbars.
datasources - Archive of obsolete content
« xul reference home datasources type: space separated list of datasource uris a space-separated list of datasources that an element's template will use for content generation.
editable - Archive of obsolete content
« xul reference home editable type: boolean indicates that the value of the menulist can be modified by typing directly into the value field.
flags - Archive of obsolete content
« xul reference home flags type: space-separated list of the values below a set of flags used for miscellaneous purposes.
image.onload - Archive of obsolete content
this applies whether the image is applied via the src attribute or the list-style-image style property.
insertafter - Archive of obsolete content
this value may be a comma-separated list of ids, which are scanned and the first one found in the window is used.
insertbefore - Archive of obsolete content
this value may be a comma-separated list of ids, which are scanned and the first one found in the window is used.
keycode - Archive of obsolete content
valid keys are listed at keyboard shortcuts.
label - Archive of obsolete content
for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem.
maxrows - Archive of obsolete content
« xul reference home maxrows type: integer the number of rows to show in the results list at a time.
modifiers - Archive of obsolete content
« xul reference home modifiers type: space-separated list of the values below a list of modifier keys that should be pressed to invoke the keyboard shortcut.
pageid - Archive of obsolete content
the wizard always starts with the wizardpage that appears first in the wizard child list.
panel.type - Archive of obsolete content
autocomplete-richlistbox specify this for a panel that provides a richlistbox for an autocomplete element.
persist - Archive of obsolete content
« xul reference home persist type: space-separated list of attribute names a space-separated list of attributes that are maintained when the window is closed.
properties - Archive of obsolete content
« xul reference home properties type: space-separated list of property names sets the properties of the element, which can be used to style the element.
searchSessions - Archive of obsolete content
« xul reference home searchsessions obsolete since gecko 26 type: space-separated list of session names set to a keyword indicating what type of data to look up for autocomplete.
showimagecolumn - Archive of obsolete content
there is no default styling of this image, but the class name returned by the results appears in the property list for the column.
sizemode - Archive of obsolete content
listen to the sizemodechange event dispatched to the dom window to get notified when the window state changes.
sizetopopup - Archive of obsolete content
this is the default value for menulists.
tabscrolling - Archive of obsolete content
« xul reference home tabscrolling new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the user may cycle through the results list by pressing the tab key.
targets - Archive of obsolete content
« xul reference home targets type: comma-separated list of element ids a comma-separated list of element ids that the command updater will update upon.
textbox.crop - Archive of obsolete content
« xul reference home crop type: boolean this attribute is not used and is only provided for compatibility with the menulist element.
textbox.tabScrolling - Archive of obsolete content
« xul reference home tabscrolling obsolete since gecko 1.9.1 type: boolean if true, the user may cycle through the results list by pressing the tab key.
textbox.type - Archive of obsolete content
a listener for the command event should update search results.
toolbarname - Archive of obsolete content
« xul reference home toolbarname not in seamonkey 1.x type: string the name of the toolbar, which is listed on the show/hide toolbars menu.
type - Archive of obsolete content
ArchiveMozillaXULAttributetype
see button.type browser.type colorpicker.type datepicker.type editor.type listcell.type listitem.type menuitem.type notification.type prefwindow.type query.type script.type textbox.type toolbarbutton.type treecol.type ...
value - Archive of obsolete content
for user editable menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
broadcast - Archive of obsolete content
the broadcast event is executed when the attributes of the element (such as a broadcaster) being listened to are changed.
close - Archive of obsolete content
example window.addeventlistener("close", function( event ) { // make the close button ineffective event.preventdefault(); }, false); ...
Getting File Information - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
Uploading and Downloading Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
TOC - Archive of obsolete content
ArchiveMozillaXULFileGuideTOC
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
Menus - Archive of obsolete content
for more information about how to use an overlay to modify a menu, see using menus and popups in extensions the following tables list the ids of menus in firefox that are commonly overlaid upon.
addPane - Archive of obsolete content
ArchiveMozillaXULMethodaddPane
« xul reference home addpane( prefpane ) return type: no return value append a prefpane to a list of panes.
addSession - Archive of obsolete content
this can be used to create a customized autocomplete results list.
appendCustomToolbar - Archive of obsolete content
you can supply a comma-separated list of toolbar item ids as the second argument to add some items by default.
clearResults - Archive of obsolete content
clears the results list.
contains - Archive of obsolete content
« xul reference home contains( item ) return type: boolean returns true if the menulist contains the specified menuitem as one of its items.
ensureSelectedElementIsVisible - Archive of obsolete content
« xul reference home ensureselectedelementisvisible() return type: no return value if the currently selected element in the list box is not currently visible to the user, the list box view is scrolled so that it is.
getElementsByAttributeNS - Archive of obsolete content
« xul reference home getelementsbyattributens(ns, attrib, value ) return type: dom nodelist returns an array of all the child elements of the element that have the attribute namespace given by the first argument, the attribute name given by the second argument, and the value given by the third argument.
getIndexOfItem - Archive of obsolete content
items are numbered starting at the first item displayed in the list.
getSelectedItem - Archive of obsolete content
the argument index specifies the index in the list of the selected items, not the row number of the item.
getSessionStatusAt - Archive of obsolete content
« xul reference home getsessionstatusat( index ) obsolete since gecko 26 return type: any value listed in nsiautocompletestatus returns the status for the session object with the given index.
reloadWithFlags - Archive of obsolete content
the flags listed below may be used, which are all constants of the webnavigation property (or the nsiwebnavigation interface).
reset - Archive of obsolete content
ArchiveMozillaXULMethodreset
for a textbox it also clears the undo transaction list (gecko 1.9).
selectItemRange - Archive of obsolete content
this method does nothing for single-selection list boxes.
toggleItemSelection - Archive of obsolete content
other items in the list box that are selected are not affected, and retain their selected state.
MenuModification - Archive of obsolete content
if we were to use the example above, we would also want to make sure to remove the items again in a popuphiding event listener.
Positioning - Archive of obsolete content
if a context menu was opened via the keyboard only, the menu will appear at the top left corner of the document, or underneath the currently selected item if a list is focused.
Tooltips - Archive of obsolete content
this can be accomplished by using a popupshowing event listener and adjusting the tooltip as needed.
accessibleType - Archive of obsolete content
xulcheckbox 1003 xulcolorpicker 1004 xulcolorpickertile 1005 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xullisthead 1024 xullistheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 ...
allNotifications - Archive of obsolete content
« xul reference allnotifications type: nodelist nodelist of all notifications.
browsers - Archive of obsolete content
« xul reference browsers type: nodelist of browser elements holds a list of the browser elements inside the tabbrowser.
children - Archive of obsolete content
« xul reference children type: array of elements returns the list of items in the richlistbox.
currentIndex - Archive of obsolete content
url" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> see also listbox.currentindex ...
currentItem - Archive of obsolete content
« xul reference currentitem type: listitem element returns the currently focused item in the list box, which is only useful in a multiple selection list box.
currentSet - Archive of obsolete content
« xul reference currentset not in seamonkey 1.x type: comma-separated list of strings holds a comma-separated list of the ids of the items currently on the toolbar.
datasources - Archive of obsolete content
« xul reference datasources type: space-separated list of datasource uris gets and sets the value of the datasources attribute.
eventNode - Archive of obsolete content
« xul reference eventnode type: eventtarget indicates the node where keyboard navigation events listener is set up.
label - Archive of obsolete content
ArchiveMozillaXULPropertylabel
see also richlistitem.label textbox.label ...
menupopup - Archive of obsolete content
« xul reference menupopup type: menupopup element a reference to the menupopup used by the menu or menulist.
pageid - Archive of obsolete content
the wizard always starts with the wizardpage that appears first in the wizard child list.
persist - Archive of obsolete content
« xul reference persist type: space-separated list of attribute names gets and sets the value of the persist attribute.
preferenceElements - Archive of obsolete content
« xul reference preferenceelements type: dom nodelist holds a list of the ui elements in the pane that are attached to preferences.
preferencePanes - Archive of obsolete content
« xul reference preferencepanes type: dom nodelist holds a list of all the prefpane elements in the window.
prefpane.preferences - Archive of obsolete content
« xul reference preferences type: dom nodelist holds a list of the preference elements in the pane.
scrollBoxObject - Archive of obsolete content
« xul reference scrollboxobject type: nsiscrollboxobject the scroll box object implements the nsiscrollboxobject interface, which may be used to retrieve and adjust the scroll position of the list box.
searchSessions - Archive of obsolete content
« xul reference searchsessions obsolete since gecko 26 type: space-separated list of session names gets the value of the searchsessions attribute.
selectedItem - Archive of obsolete content
the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
selectedItems - Archive of obsolete content
« xul reference selecteditems type: array of listitems returns an array of the selected items in the list.
selstyle - Archive of obsolete content
to see the difference, compare the selection style in the folder list and the message list in mozilla mail.
tabbrowser.tabs - Archive of obsolete content
« xul reference tabs type: array a nodelist containing the tab objects for each tab in the tabbrowser.
textbox.label - Archive of obsolete content
note: prior to firefox 3, and always in thunderbird and seamonkey, the label property of an autocomplete textbox returns its value, for compatibility with the menulist element.
value - Archive of obsolete content
ArchiveMozillaXULPropertyvalue
for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax.
view - Archive of obsolete content
ArchiveMozillaXULPropertyview
for a complete list of view functions, see the nsitreeview interface.
wizardPages - Archive of obsolete content
« xul reference wizardpages type: dom nodelist of wizardpage elements this property holds the list of wizardpage elements in the wizard.
Property - Archive of obsolete content
focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrem...
Sorting and filtering a custom tree view - Archive of obsolete content
weapon: "bo"}); data.push({name: "raphael", description: "cool, but rude", weapon: "sai"}); data.push({name: "splinter", description: "rat", weapon: "walking stick"}); data.push({name: "shredder", description: "armored man", weapon: "blades"}); data.push({name: "casey jones", description: "goalie masked man", weapon: "hockey stick"}); data.push({name: "april o'neil", description: "journalist", weapon: "none"}); } if (filtertext == "") { //show all of them table = data; } else { //filter out the ones we want to display table = []; data.foreach(function(element) { //we'll match on every property for (var i in element) { if (prepareforcomparison(element[i]).indexof(filtertext) != -1) { table.push(element); break; } } }); } sort(); //restor...
Style classes - Archive of obsolete content
ArchiveMozillaXULStyle
« xul reference home alert-icon chromeclass-toolbar error-icon groove header indent listcell-iconic listitem-iconic menuitem-iconic menuitem-non-iconic message-icon monospace plain question-icon small-margin statusbarpanel-iconic statusbarpanel-iconic-text statusbarpanel-menu-iconic text-link thin tree-splitter treecol-image ...
Building Hierarchical Trees - Archive of obsolete content
if a particular photo had a value for one of the properties listed in the containment attribute, it would be accepted as a container, and the user could open the row.
Building Menus With Templates - Archive of obsolete content
the query generates a list of the person tags within the datasource and outputs the action body for each one.
Containment Properties - Archive of obsolete content
that is, in addition to iterating over the children, it will iterate over the predicates listed in the containment attribute.
Rule Compilation - Archive of obsolete content
for instance, if generating the items in a listbox, you will typically use only one rule.
Special Condition Tests - Archive of obsolete content
if the node has one of the predicates listed in the containment attribute pointing out of it, it will also be considered to be a container.
Template Guide - Archive of obsolete content
te syntax sqlite templates common template syntax attribute substitution multiple rules using recursive templates building menus with templates special condition tests multiple queries using multiple queries to generate more results building trees with templates building trees building hierarchical trees template modifications template builder interface template and tree listeners rdf modifications additional topics sorting results additional template attributes template logging xml namespaces alternative approaches javascript templates xuljsdatasource: a component for extensions, which bring a "javascript template syntax".
The Joy of XUL - Archive of obsolete content
todo: describe cool toolkit and xul runner features case study: a mozilla calendar application this mini case study describes how oeone corporation (now part of hipplay; this calendar application is no longer listed on their site) integrated its calendar application with the core mozilla product.
Custom toolbar button - Archive of obsolete content
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 ...
Additional Install Features - Archive of obsolete content
for example, you might put the following as the last section of your script: if (getlasterror() == success) { performinstall(); } else { cancelinstall(); } error codes that could be returned by getlasterror() are listed in the mozilla source file nsinstall.h.
Box Objects - Archive of obsolete content
some of these subtypes, such as the stack or listbox are needed for more complex layouts than the basic box, while others such as the button are used only to add extra mouse and key event handling.
Creating a Wizard - Archive of obsolete content
?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide additional details about the dog you would like:"/> <radiogroup> <caption label="size"/> <radio val...
Features of a Window - Archive of obsolete content
the third is a list of display flags.
Modifying the Default Skin - Archive of obsolete content
you can assign images to a button, checkbox and other elements by using the list-style-image property as in the following: checkbox { list-style-image: url("chrome://findfile/skin/images/check-off.jpg"); } checkbox[checked="true"] { list-style-image: url("chrome://findfile/skin/images/check-on.jpg"); } this code changes the image associated with a checkbox.
Persistent Data - Archive of obsolete content
the persist attribute should be set to a space-separated list of attributes of the element that you want to save.
Property Files - Archive of obsolete content
this element reads in the contents of a property file and builds a list of properties for you.
Scroll Bars - Archive of obsolete content
the value 100 might be the number of lines in a list, but it could be anything you want.
Splitters - Archive of obsolete content
the iframe will be replaced later with a results list when we know how to create it.
Tree Box Objects - Archive of obsolete content
n tree.boxobject.queryinterface(components.interfaces.nsitreeboxobject) as shown in the code examples on this page because: let boxobject = tree.treeboxobject; note: is equivalent to: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); scrolling the tree you can also scroll the tree using four different methods, similar to those available for listboxes.
Tree Selection - Archive of obsolete content
multiple selection for trees that allow multiple selection, getting the list of selected rows is a bit more complicated.
XBL Attribute Inheritance - Archive of obsolete content
its value should be set to a comma-separated list of attribute names that are to be inherited.
Using multiple DTDs - Archive of obsolete content
assuming you have an entity called somebutton.label defined in mainwindow.dtd, you can access the entity like this: <button id="somebutton" label="&somebutton.label"> multiple dtds if you want to use multiple dtds with your xul file, you can simply list all of the dtds inside your dtd declaration: <!doctype window [ <!entity % commondtd system "chrome://myextensions/locale/common.dtd"> %commondtd; <!entity % mainwindowdtd system "chrome://myextension/locale/mainwindow.dtd"> %mainwindowdtd; ]> you can now access the entities declared in the dtds as shown above.
Using nsIXULAppInfo - Archive of obsolete content
for complete list of nsixulappinfo's properties, please see nsixulappinfo interface description.
Using spell checking in XUL - Archive of obsolete content
ary = components.classes["@mozilla.org/spellchecker/personaldictionary;1"] .getservice(components.interfaces.mozipersonaldictionary); if (mpersonaldictionary.check("kat", gspellcheckengine.dictionary)) { // it's spelled correctly accourdly to user personal dictionary } else { // it's spelled incorrectly } } getting a list of suggestions to get a list of suggestions for a misspelled word, you call the suggest() method, specifying the word and an object to be filled with an array of possible suggestions.
Widget Cheatsheet - Archive of obsolete content
menu <menu value="menu widget"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menu value="sub"> <menupopup> <menuitem value="subitem" /> </menupopup> </menu> </menupopup> </menu> <menulist value="menulist element"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menulist> <menubutton src="back.gif"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menubutton> ...
XUL Accesskey FAQ and Policies - Archive of obsolete content
toolbar buttons tree items list items column headers are there any crucial bugs i should know about?
XUL FAQ - Archive of obsolete content
a list of projects (dead and active) aiming to create a xul ide/editor is at wikimo:xul:ide.
XUL accessibility tool - Archive of obsolete content
been suggested or are planned for a future version of the tool: new tests: (aaronlev) warning: hardcoded color and pixel sizings (aaronlev) error: duplicate accesskey in a dialog (already have this for menus) (aaronlev) error: form control without accesskey (aaronlev) warning: accesskey as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives).
The Implementation of the Application Object Model - Archive of obsolete content
the list goes on and on.
XML - Archive of obsolete content
all of the events and attributes -- even the javascript event listeners normally formatted in the javascript world with uppercase verbs (e.g., onclick, onload) -- must be lowercase or they are invalid.
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorne...
Building XULRunner with Python - Archive of obsolete content
for example def onload(): btntest = document.getelementbyid("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
CommandLine - Archive of obsolete content
var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; he...
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
you will, however, need to change the name of the icon file in info.plist.in.
Debugging a XULRunner Application - Archive of obsolete content
debuggerserver.addbrowseractors("myxulrunnerappwindowtype"); } debuggerserver.openlistener(6000); for xulrunner version 37+ the code to enable the debugger has changed: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = true; } let dbglistener=debuggerserver.createlistener(); dbglistener.portorpath=6000; dbglistener.open...
Dialogs in XULRunner - Archive of obsolete content
here is a short list of the button attributes on dialog; see also creating dialogs at mozillazine knowledge base: buttons a comma separated list of buttons to show on dialog (accept, cancel, help, extra1, and extra2).
MacFAQ - Archive of obsolete content
] .queryinterface(components.interfaces.nsicommandline); for (var i = 0; i < cmdline.length; ++i) { debug(cmdline.getargument(i)) } } catch(ex) { debug(window.arguments[0]) // do something with window.arguments[0] //nspreferences.setunicharpref("myxul.cmdlinevalue", window.arguments[0]) } window.addeventlistener("load", checkotherwindows , false); } ]]></script> </window> ...
Using SOAP in XULRunner 1.9 - Archive of obsolete content
though jquery is listed as a dependency, it can be worked around easily.
What XULRunner Provides - Archive of obsolete content
nd toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if developer time permits and code size is controlled: ldap support spellchecking support (with or without dictionaries provided) see bug 285977 core support for profile roaming (with application-specific extensibility) pyxpcom embedding (not yet complete) - but it does work, if you compile a custom build that includes the py...
Windows and menus in XULRunner - Archive of obsolete content
here’s the css file: /* global skin --------------------------------------------------- */ @import url(chrome://global/skin/); /* toolbar ------------------------------------------------------- */ #open { list-style-image: url(chrome://basicapp/skin/open.png); -moz-box-orient: vertical; } #save { list-style-image: url(chrome://basicapp/skin/save.png); -moz-box-orient: vertical; } of course, you need to make sure the png files are included in the application.
XULRunner - Archive of obsolete content
mailing list newsgroup rss feed #xulrunner on irc.mozilla.org other community links...
XUL Explorer - Archive of obsolete content
it has a list of code snippets (small fragments of xul or javascript) that can be quickly inserted into the editor.
application/http-index-format specification - Archive of obsolete content
the application/http-index-format file format is an attempt to provide a generic, extensible file listing format that is principly machine readable.
Mozprofile - Archive of obsolete content
if a profile is not specified, one will be created in a temporary directory which will be echoed to the terminal: (mozmill)> mozprofile /tmp/tmp4q1ieu.mozrunner (mozmill)> ls /tmp/tmp4q1ieu.mozrunner user.js to run mozprofile from the command line enter: mozprofile --help for a list of options.
Mozilla.dev.apps.firefox-2006-10-06 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-10-06 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-10-13 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-10-20 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-10-26 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-10-27 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-11-03 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-11-04 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-11-10 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-11-17 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-11-24 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-12-01 - Archive of obsolete content
authors sara minchella (sara) dave manley (senemanley) back to summary list ...
2006-10-06 - Archive of obsolete content
discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project information (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one get started on the project.
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - october 7-13, 2006 announcements updated: thunderbird developer documentation eric shepherd has put together a checklist for the upcoming thunderbird developer documentation and is looking for feedback as well as contributors.
2006-09-29 - Archive of obsolete content
the solutions are listed in the posting.
2006-10-06 - Archive of obsolete content
../../dist/host/bin/host_xpidl -m header -w -i~mozilla/xpcom/base -i../../dist/idl -o _xpidlgen/nsiconsolelistener ~/mozilla/xpcom/base/nsiconsolelistener.idl gmake[2]: *** [_xpidlgen/nsiconsolelistener.h] bus error gmake[2]: *** deleting file `_xpidlgen/nsiconsolelistener.h' gmake[1]: *** [export] error 2 make: *** [all] error 2:: on octorber 4th ludwig hügelschäfer responded to his original post with the solution to his own problem.
2006-10-27 - Archive of obsolete content
./configure --prefix=/export/home/alex/thunderbird --enable-application=browser --disable-tests --disable-debug -disable-auto-deps --disable-freetype2 -enable-official-branding --enable-default-toolkit=gtk2 --enable-optimize=-xo5 --enable-static --disable-shared --enable-xft --enable-svg the build tools that he used to build firefox 2 are listed in his posting along with the error that he receives when he tries to build it.
2006-10-13 - Archive of obsolete content
a few bugs have been listed.
2006-10-13 - Archive of obsolete content
firefox 1.5.0.x and vista firefox 1.5.0.x was added to the vista compatibility list firefox 2 rc3 code freeze the firefox 2 rc3 code was frozen on oct.
2006-11-17 - Archive of obsolete content
a full list can be found here mozilla/configure regeneration down preed says that the machine that does autoconf went down during a power outage.
2006-11-24 - Archive of obsolete content
announcments bon echo status mike beltzner posted a small to-do list with regards to bon echo firefox 1.5.0.9/2.0.0.1 jay patel posted an update of bugs for the firefox 1.5.0.9/2.0.0.1 releases discussion non-ascii rendering performance boris zbarsky made some suggestions on how to improve international font rendering cvs commit access changes a large discussion went on about changes to policies surrounding cvs commit access project drivers and technical oversight mike connor suggested ways to better organize project management, policy making, and technical oversight.
2006-10-06 - Archive of obsolete content
as well as any protocols that you have implemented and are not in the list of protocols nsscriptsecuritymanager::checkloaduri feed: consensus is that it should be allowed and treated as an ordinary link.
2006-12-01 - Archive of obsolete content
peter wilson lists some important comparisons between spidermonkey and php.
2006-11-17 - Archive of obsolete content
nightly builds, instructions and the current list of known regressions on the branch can be found at: http://wiki.mozilla.org/gecko:reflow...ng#quick_links.
2006-11-24 - Archive of obsolete content
treating calendars as tags discussions concerning about the layout of calendar list in lightning/sunbird.
NPAPI plugin developer guide - Archive of obsolete content
if there are plugin features which are not available in the web platform, we encourage developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize web platform work to make those use cases possible.
NPN_Version - Archive of obsolete content
for a listing of version constants defined in the plug-in api, see version feature constants.
NPP_GetValue - Archive of obsolete content
the full list is in the npapi headers.
NPP_New - Archive of obsolete content
place private options at the end of the list of standard attributes in the embed tag.
NPAPI plugin reference - Archive of obsolete content
np_getmimedescription np_getmimedescription returns a supported mime type list for your plugin.
Samples and Test Cases - Archive of obsolete content
spy tester npapi plugin test cases mozilla.org qa plugins testcases mozilla.org qa oji testcases plugins verification testing checklist (including smoketesting) ...
The First Install Problem - Archive of obsolete content
example: [hkey_local_machine\software\mozillaplugins\]\@mycompany.com/myapplication,version=5.01\mimetypes\application/x-myapp] description=myapplication plugin for app files "suffixes" -- this will be a semi-colon concatenated list of supported suffixes.
Writing a plugin for Mac OS X - Archive of obsolete content
info.plist the plugin communicates its mime and filename extension information using the info.plist file, which is packaged in the plugin bundle.
Syndicating content with RSS - Archive of obsolete content
syndication (or web syndication) is a method which lets a web site make its content available for others to read, listen to, or watch.
Atomic RSS - Archive of obsolete content
ArchiveRSSModuleAtom
references atomic rss element list examples none available at this time community none available at this time tools none available at this time other resources tim bray's atom rss article rss, atom, rdf, xml ...
Content - Archive of obsolete content
references rss content module element list examples none available at this time community none available at this time tools none available at this time other resources rss content module spec rss, rdf, xml ...
Element - Archive of obsolete content
ArchiveRSSModuleSlashElement
rss slash module elements note: in the list of elements below the slash xml namespace prefix is used (since it is a popular choice).
Slash - Archive of obsolete content
ArchiveRSSModuleSlash
references rss slash module element list examples none available at this time community none available at this time tools none available at this time other resources rss slash module slash slashdot rss, rdf, xml ...
Element - Archive of obsolete content
rss well-formed web module elements note: in the list of elements below the wfw xml namespace prefix is used (since it is a popular choice).
Well-Formed Web - Archive of obsolete content
references rss well-formed web module element list examples none available at this time community none available at this time tools none available at this time other resources well-formed web spec rss, rdf, xml ...
RSS - Archive of obsolete content
mailing list newsgroup rss feed related topics rdf, xml ...
title - Archive of obsolete content
why can't i get any tang?</description> </item> </channel> </rss> attributes none sub-elements none parent elements the table below shows a list of rss elements that this element can be a child of.
SAX - Archive of obsolete content
// don't care }, // nsisupports queryinterface: function(iid) { if(!iid.equals(components.interfaces.nsisupports) && !iid.equals(components.interfaces.nsisaxcontenthandler)) throw components.results.ns_error_no_interface; return this; } }; start parsing the xml reader component can parse xml from a string, an nsiinputstream, or asynchronously via the nsistreamlistener interface.
Sunbird Theme Tutorial - Archive of obsolete content
you also need knowledge of: using your operating system to create files and directories using the tools listed above css graphic design knowledge of xul, xbl and javascript is useful for advanced themes.
Tamarin Tracing Build Documentation - Archive of obsolete content
running avmshell without any arguments will list the available options.
The Basics of Web Services - Archive of obsolete content
introducing soap soap, a web service, is listed as a w3c standard, and is similar in ways to xml-rpc.
Building a Theme - Archive of obsolete content
see install manifests for a complete listing of the required and optional properties.
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_t...
Theme changes in Firefox 3.5 - Archive of obsolete content
all known changes for a list of all the known changes see: mozillazine's forum: theme changes for firefox 3.5 ...
Settings - Archive of obsolete content
show variables filter box enabling this option adds a "filter variables" search box to the variables pane, so that you can filter the displayed list of variables.
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
we need to add lines to the manifest for thunderbird and sunbird, like this: # thunderbird overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul # sunbird overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul these lines cause the main thunderbird message list window and the main window in sunbird to be the target of the overlays we apply in the stockwatcher2.xul file.
Using the W3C DOM - Archive of obsolete content
orms[0] more on accessing forms and form elements: referencing forms and form controls by comp.lang.javascript newsgroup faq notes dom 2 specification on accessing forms and form elements referencing forms and form elements correctly, javascript best practices, by matt kruse for accessing a group of elements, the dom specification also includes getelementsbytagname, which returns a nodelist of all the elements with the given tag name in the order they appear in the document: var arrcollection_of_pargs = document.getelementsbytagname("p"); var objfirst_parg = arrcollection_of_pargs[0]; // objfirst_parg will reference the first paragraph in the document objfirst_parg.style.border = "2px solid green"; // and now, the first paragraph in the document // gets a 2px solid green border.
Browser Detection and Cross Browser Support - Archive of obsolete content
try { // code to implement fancy menu } catch (errors) { // handle exceptions } </script> <noscript> <!-- if javascript is not enabled, then the browser will display the contents of the noscript tag which in this case is a simple menu implemented as an unordered list.
-moz-window-shadow - Archive of obsolete content
<window>, <panel>inheritednocomputed valueas specifiedanimation typediscrete syntax the -moz-window-shadow property is specified as one of the keyword values listed below.
-ms-scroll-chaining - Archive of obsolete content
.imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480px; height: 270px; overflow: auto; } specifications not part of any specification.
-ms-scroll-limit - Archive of obsolete content
elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-scroll-limit-x-min: as specified-ms-scroll-limit-y-min: as specified-ms-scroll-limit-x-max: as specified-ms-scroll-limit-y-max: as specifiedanimation typediscrete syntax the -ms-scroll-limit property is specified as one or more of the following scroll limit values, in the order listed, separated by spaces.
-ms-scroll-snap-x - Archive of obsolete content
.scroll1 { -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); } .scroll2 { -ms-scroll-snap-x: proximity snaplist(100%, 200%, 300%, 400%, 500%); } specifications not part of any specification.
-ms-scroll-translation - Archive of obsolete content
if your javascript is listening for scroll wheel document object model (dom) events, the events that occur when the user scrolls vertically will always be vertical scroll events, not horizontal scroll events.
display-inside - Archive of obsolete content
syntax one of the keyword values listed below.
display-outside - Archive of obsolete content
syntax one of the keyword values listed below.
CSS - Archive of obsolete content
ArchiveWebCSS
obsolete css features -moz-bindingthe -moz-binding css property is used by mozilla-based applications to attach an xbl binding to a dom element.-moz-border-bottom-colorsin mozilla applications like firefox, the -moz-border-bottom-colors css property sets a list of colors for the bottom border.-moz-border-left-colorsin mozilla applications like firefox, the -moz-border-left-colors css property sets a list of colors for the left border.-moz-border-right-colorsin mozilla applications like firefox, the -moz-border-right-colors css property sets a list of colors for the right border.-moz-border-top-colorsin mozilla applications like firefox, the -moz-border-top-colors css property sets a list of colors for the top border.-moz-stack-sizing-moz-stack-sizing is an extended css property.
E4X - Archive of obsolete content
ArchiveWebE4X
workaround: var response = xmlhttprequest.responsetext; // bug 270553 response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug 336551 var e4x = new xml(response); resources e4x tutorial processing xml with e4x on mdc e4x for templating see the list of e4x-related pages on mdc ecma-357 standard brendan's presentation e4x at faqts.com e4x quick reference at rephrase.net ...
Using JavaScript Generators in Firefox - Archive of obsolete content
var generator; // simple event listener function to pass the received event to the generator.
Array.observe() - Archive of obsolete content
it's equivalent to object.observe() invoked with the accept type list ["add", "update", "delete", "splice"].
Expression closures - Archive of obsolete content
examples a shorthand for binding event listeners: document.addeventlistener('click', function() false, true); using this notation with some of the array functions from javascript 1.6: elems.some(function(elem) elem.type == 'text'); ...
Enumerator.atEnd - Archive of obsolete content
example in following code, the atend method is used to determine if the end of a list of drives has been reached: function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.fre...
Enumerator.moveFirst - Archive of obsolete content
example in following example, the movefirst method is used to evaluate members of the drivescollection from the beginning of the list: function showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; ...
New in JavaScript 1.2 - Archive of obsolete content
arrays can now be created using literal notation (inspired by list literal syntax from python 1.x).
New in JavaScript 1.3 - Archive of obsolete content
additional features of version 1.2, at the time not specified by ecma-262 were kept in the javascript language (see below for a list of differences).
New in JavaScript 1.8.5 - Archive of obsolete content
bug 520696 function.apply() can accept any array-like object as the arguments list, instead of only true arrays.
Archived JavaScript Reference - Archive of obsolete content
it's equivalent to object.observe() invoked with the accept type list ["add", "update", "delete", "splice"].
LiveConnect Overview - Archive of obsolete content
note: a more realistic example would place the call to getmember inside a try...catch statement to handle errors of type jsexception.
LiveConnect - Archive of obsolete content
mailing list newsgroup rss feed related topics javascript, plugins older notes (please update or remove as needed.) while the bloated liveconnect code in the mozilla source was removed in version 1.9.2 of the platform (see bug 442399), its former api has been restored (see also the specification and this thread) (building on npapi?), and as of java 6 update 12, extensi...
Old Proxy API - Archive of obsolete content
after a call to fix(), the proxy becomes a regular (non-proxy) object with the properties listed in the return value.
RDF: Resource Description Framework for metadata - Archive of obsolete content
ArchiveWebRDF
mailing list newsgroup rss feed rdf-dev mailing list tools rdf editors and tools rdf validator related topics xml categories interwiki language links ...
Sharp variables in JavaScript - Archive of obsolete content
var a = { foo:[], bar:undefined }; a.bar = a.foo; a.foo.push("hello"); a.bar.push("there!"); alert(a.foo[1]); // "there!" cyclic references sharp variables can be used to create a circularly linked list in one line of code.
forEach - Archive of obsolete content
if you wish to make changes, and especially if you wish to revert another user's changes, please either add a comment here, or post to dev-mdc@lists.mozila.org, explaining the change you desire.
Writing JavaScript for XHTML - Archive of obsolete content
every browser sends with its request a list of mime types it understands, as part of the http content negotiation mechanism.
RFE to the XForms API - Archive of obsolete content
ArchiveWebXFormsRFEXForms API
xforms dom is a list of interfaces that are available from xforms elements directly.
XForms Message Element - Archive of obsolete content
introduction used in combination with xml event listeners to display a message to the user when the specified event occurs (see the spec).
XForms Switch Module - Archive of obsolete content
toggle element the element (see the spec) selects one possible case from an exclusive list of alternatives in a switch.
XForms - Archive of obsolete content
mailing list newsgroup rss feed #xforms channel on irc.mozilla.org w3c forms mailing list other community links...
Window: devicelight event - Archive of obsolete content
examples window.addeventlistener('devicelight', function(event) { console.log(event.value); }); specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
Community - Archive of obsolete content
if you know of useful mailing lists, newsgroups, forums, or other communities related to web standards, please link to them here.
Displaying a graphic with audio samples - Archive of obsolete content
// multiply spectrum by a zoom value magnitude = signal[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> ...
Mozilla's DOCTYPE sniffing - Archive of obsolete content
quirks mode the following trigger quirks mode (this list needs to be comprehensive to ensure that pages already existing on the web trigger quirks mode): the following sites have been useful in preparing this list: w3c html validator, htmlhelp html validator.
Popup Window Controls - Archive of obsolete content
ript"> <!-- // attempt to open an unsolicited window var popup = window.open('about:blank', 'popup'); if (!popup) { // the user has suppressed the popup } // --> </script> </head> <body> <!-- your page here --> </body> </html> if your popup window is crucial to the operation of your web site you can notify the user and ask them to add your site to the list of sites which are allowed to use unsolicited popup windows.
Web Standards - Archive of obsolete content
mailing list newsgroup rss feed the web standards project webdev feedhouse other community links...
Anatomy of a video game - Game development
go through the list of requestanimationframe callbacks and invoke them.
Introduction to game development for the Web - Game development
here's a thorough list to give you a taste of what the web can do for you: full screen api this simple api lets your game take over the entire screen, thereby immersing the player in action.
Game distribution - Game development
if you're looking for more information about the different types of app stores you can check the list of mobile software distribution platforms article on wikipedia.
Explaining basic 3D theory - Game development
textures textures are 2d images used in the 3d space to make the objects look better and more realistic.
Building up a basic demo with Babylon.js - Game development
conclusion here's the final code listing, along with a viewable live example: you can also see it on github and fork the repository if you want to play with it yourself locally.
WebVR — Virtual Reality for the Web - Game development
it's not easy to achieve, but it doesn't require realistic images.
Techniques for game development - Game development
this page lists essential core techniques for anyone wanting to develop games using open web technologies.
Tools for game development - Game development
what specialist tools are available?
Randomizing gameplay - Game development
be sure to check the ever growing list of examples and the official documentation, and visit the html5 gamedevs forums if you ever need any help.
Visual-js game engine - Game development
1) click create application 2) enter new application name in input prompt 3) select folder for server part of application (important : www is not secure place) 4) select folder for client part of application ( any path in www) 5) new app name will appear in project list , select and click open application 6) open your server folder : install node.js modules one way - use windows bat-s file (in server root folder with prefix install_ ) second way - open cmd terminal and enter next command : 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 pr...
Game development
examples for a list of web game examples, see our examples page.
404 - MDN Web Docs Glossary: Definitions of Web-related terms
learn more list of http response codes advice for beginners on avoiding 404 errors ...
502 - MDN Web Docs Glossary: Definitions of Web-related terms
learn more list of http response codes ...
Accessibility tree (AOM) - MDN Web Docs Glossary: Definitions of Web-related terms
for example, is it a button, a nav bar, or a list of items?
Breadcrumb - MDN Web Docs Glossary: Definitions of Web-related terms
a breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in relation to the the site's structure, from top level to current page, or a list of the links the user followed to get to the current page, in the order visited.
CORS - MDN Web Docs Glossary: Definitions of Web-related terms
access-control-expose-headers indicates which headers can be exposed as part of the response by listing their names.
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
client hints are a set of http request header fields for proactive content negotiation allowing clients to indicate a list of device and agent specific preferences.
Compile - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge compiler on wikipedia the gnu compiler collection (gcc) learning resources base cs introduction on compilers a big list of learning material on stackoverflow ...
Computer Programming - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge computer programming on wikipedia list of programming languages: wikipedia ...
DNS - MDN Web Docs Glossary: Definitions of Web-related terms
dns maintains a list of domain names along with the resources, such as ip addresses, that are associated with them.
DOM (Document Object Model) - MDN Web Docs Glossary: Definitions of Web-related terms
event listeners can be added to nodes and triggered on occurrence of a given event.
DoS attack - MDN Web Docs Glossary: Definitions of Web-related terms
here is a non-exhaustive list of dos attack types: bandwidth attack service request flood syn flooding attack icmp flood attack peer-to-peer attack permanent dos attack application level flood attack learn more denial-of-service attack on wikipedia denial-of-service on owasp ddos ...
Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
here is a non-exhaustive list of dos attack types: bandwidth attack service request flood syn flooding attack icmp flood attack peer-to-peer attack permanent dos attack application level flood attack learn more denial-of-service attack on wikipedia denial-of-service on owasp ddos ...
Document directive - MDN Web Docs Glossary: Definitions of Web-related terms
see document directives for a complete list.
Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded.
Entity - MDN Web Docs Glossary: Definitions of Web-related terms
learn more technical reference official list of character entities ...
Entity header - MDN Web Docs Glossary: Definitions of Web-related terms
a few request headers after a get request: in the following example, content-length is an entity header, while host and user-agent are requests headers: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...
Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
see fetch directives for a complete list.
Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms
e one of the following names: accept-charset accept-encoding access-control-request-headers access-control-request-method connection content-length cookie cookie2 date dnt expect feature-policy host keep-alive origin proxy- sec- referer te trailer transfer-encoding upgrade via note: the user-agent header is no longer forbidden, as per spec — see forbidden header name list (this was implemented in firefox 43) — it can now be set in a fetch headers object, or via xhr setrequestheader().
Method - MDN Web Docs Glossary: Definitions of Web-related terms
learn more learn about it method (computer programming) in wikipedia defining a method in javascript (comparison of the traditional syntax and the new shorthand) technical reference list of javascript built-in methods ...
MitM - MDN Web Docs Glossary: Definitions of Web-related terms
learn more owasp article: man-in-the-middle attack wikipedia: man-in-the-middle attack the public-key-pins header (hpkp) can significantly decrease the risk of mitm by instructing browsers to require a whitelisted certificate for all subsequent connections to that website.
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
list of csp navigation directives form-action restricts the urls which can be used as the target of a form submissions from a given context.
Parameter - MDN Web Docs Glossary: Definitions of Web-related terms
note the difference between parameters and arguments: function parameters are the names listed in the function's definition.
Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms
ght be asking a server if it would allow a delete request, before sending a delete request, by using a preflight request: options /resource/foo access-control-request-method: delete access-control-request-headers: origin, x-requested-with origin: https://foo.bar.org if the server allows it, then it will respond to the preflight request with an access-control-allow-methods response header, which lists delete: http/1.1 204 no content connection: keep-alive access-control-allow-origin: https://foo.bar.org access-control-allow-methods: post, get, options, delete access-control-max-age: 86400 the preflight response can be optionally cached for the requests created in the same url using access-control-max-age header like in the above example.
Reporting directive - MDN Web Docs Glossary: Definitions of Web-related terms
see reporting directives for a complete list.
Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
ab key and the arrow keys: next interactive element: tab previous interactive element: shift + tab next radio button in a same named-group: right or down arrow previous radio button in a same named-group: left or up arrow navigating through the content of a page is done with the tab key and a series of other keys along with control + option keys next heading: control + option + h next list: control + option + x next graphic: control + option + g next table: control + option + t down an html hierarchical order control + option + right arrow previous heading: shift + control + option + h previous list: shift + control + option + x previous graphic: shift + control + option + g previous table: shift + control + option + t up an html hierarchical order: control + option + left ...
Simple header - MDN Web Docs Glossary: Definitions of Web-related terms
old term for cors-safelisted request header.
Simple response header - MDN Web Docs Glossary: Definitions of Web-related terms
old term for cors-safelisted response header.
Site - MDN Web Docs Glossary: Definitions of Web-related terms
this is computed by consulting a public suffix list to find the portion of the host which is counted as the public suffix (e.g.
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
they are listed in the specification in the well-known symbols table: symbol.hasinstance symbol.isconcatspreadable symbol.iterator symbol.toprimitive …and so on.
TLD - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge tld on wikipedia list of top-level domains ...
Validator - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge validator on wikipedia short list of validators ...
WebDAV - MDN Web Docs Glossary: Definitions of Web-related terms
author or creation date) link pages of any media type to related pages create sets of documents and retrieve hierarchical list copy and move webpages lock a document from being edited by more than one person at a time learn more general knowledge webdav on wikipedia technical reference rfc 2518 rfc 3253 rfc 3744 ...
Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
this non-exhaustive list gives you an idea of which standards websites and network systems must conform to: ietf (internet engineering task force): internet standards (std), which among other things govern set-up and use of uris, http, and mime w3c: specifications for markup language (e.g., html), style definitions (i.e., css), dom, accessibility iana (internet assigned numbers authority): name and number registries...
Challenge-response authentication - MDN Web Docs Glossary: Definitions of Web-related terms
challenge-response protocols are one way to fight against replay attacks where an attacker listens to the previous messages and resends them at a later time to get the same credentials as the original message.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
$(document).ready(function(){ alert("hello world!"); $("#blackbox").hide(); }); the above code carries out the same function as the following code: window.onload = function() { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery official website technical information offical api reference documentation ...
Assessment: Accessibility troubleshooting - Learn web development
can you list two more ideas for improvements that would make the website more accessible?
Advanced styling effects - Learn web development
} .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in any way you want, for example to create a more realistic look with shadows based on multiple light sources.
Debugging CSS - Learn web development
you can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and devtools will show you an autocomplete list of matching properties.
Test your skills: Selectors - Learn web development
remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list.
Legacy layout methods - Learn web development
if you search for "css grid framework" on the web, you will find a huge list of options to choose from.
Responsive design - Learn web development
the first was the idea of fluid grids, something which was already being explored by gillenwater, and can be read up on in marcotte's article, fluid grids (published in 2009 on a list apart).
How CSS works - Learn web development
it processes the document in a number of stages, which we've listed below.
What is CSS? - Learn web development
note: you can find links to all the css property pages (along with other css features) listed on the mdn css reference.
Use CSS to solve common problems - Learn web development
LearnCSSHowto
he dom how to use whitespace in css how to write comments in css how to select elements via element name, class or id how to select elements via attribute name and content how to use pseudo-classes how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in css how to debug css in the browser css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size css boxes how to control overflowing content how to control the part of a css box that the background is drawn under how do i define inline, block, and inline-block?
Learn to style HTML using CSS - Learn web development
we round off the module by looking at applying custom fonts to your page, and styling lists and links.
How can we design for all types of users? - Learn web development
this article lists the most important quick-wins for universal design.
How do you upload your files to a web server? - Learn web development
you can see the full list at the rsync man page (search for "options summary").
What is a URL? - Learn web development
those parameters are a list of key/value pairs separated with the & symbol.
What is a Domain Name? - Learn web development
the full list of tlds is maintained by icann.
How do you set up a local testing server? - Learn web development
here you'll see the contents of the directory listed — click the html file you want to run.
Common questions - Learn web development
design and accessibility this section lists questions related to aesthetics, page structure, accessibility techniques, etc.
HTML forms in legacy browsers - Learn web development
complete : function () { app.init(); } }); the modernizr team conveniently maintains a list of great polyfills.
Example - Learn web development
<span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], inpu...
CSS property compatibility table for form controls - Learn web development
datalist see the <datalist> and <input> elements and the list attribute.
Test your skills: Basic controls - Learn web development
create a submit button inside the remaining list item, with button text of "log in".
Test your skills: Form validation - Learn web development
add an event listener that checks whether the inputted value is an email address, and whether it is long enough.
Installing basic software - Learn web development
that looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these.
What will your website look like? - Learn web development
font to choose a font: go to google fonts and scroll down the list until you find one you like.
HTML Cheatsheet - Learn web development
aditional information <details><summary>html cheatsheet</summary><p>inline elements</p><p>block elements</p></details> html cheatsheet inline elements block elements an unordered list <ul> <li>i'm an item</li> <li>i'm another item</li> </ul> i'm an item i'm another item an ordered list <ol> <li>i'm the first item</li> <li>i'm the second item</li> </ol> i'm the first item i'm the second item a definition list <dl> <dt>a term</dt> <dd>definition...
Tips for authoring fast-loading HTML pages - Learn web development
note, however, that many of the tips listed in this article are common-sense techniques which apply to any user agent, and can be applied to any web page, regardless of browser-support requirements.
Use HTML to solve common problems - Learn web development
LearnHTMLHowto
how to create a list of items with html how to stress or emphasize content how to indicate that text is important how to display computer code with html how to annotate images and graphics how to mark abbreviations and make them understandable how to add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks...
Marking up a letter - Learn web development
use an appropriate list type to mark up the semester start dates, study subjects, and exotic dances.
Test your skills: Advanced HTML text - Learn web development
advanced html text 1 in this task we want you to turn the provided animals and their definitions into a description list.
Test your skills: HTML text basics - Learn web development
html text basics 2 in this task we want you to turn the first un-marked up list into an unordered list, and the second one into an ordered list.
HTML table advanced features and accessibility - Learn web development
each headers attribute has to contain a list of the ids of all the <th> elements that act as a header for that cell, separated by spaces.
Structuring the web with HTML - Learn web development
html is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
Functions — reusable blocks of code - Learn web development
you can check the full list of the built-in functions, as well as the built-in objects and their corresponding methods here.
Image gallery - Learn web development
alternatively, you can add one event listener to the thumb bar.
Function return values - Learn web development
(in these cases, our reference pages list the return value as void or undefined.) for example, in the displaymessage() function we built in the previous article, no specific value is returned when the function is invoked.
Test your skills: Loops - Learn web development
loops 1 in our first looping task we want you start by creating a simple loop that goes through all the items in the provided myarray and prints them out on the screen inside list items (i.e., <li> elements), which are appended to the provided list.
JavaScript building blocks - Learn web development
for example, looking through a list of names.
Storing the information you need — Variables - Learn web development
note: you can find a fairly complete list of reserved keywords to avoid at lexical grammar — keywords.
JavaScript First Steps - Learn web development
arrays in the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name.
Solve common problems in your JavaScript code - Learn web development
what does the addeventlistener() function do, and how do you use it?
Adding features to our bouncing balls demo - Learn web development
setcontrols() this method will add an onkeydown event listener to the window object so that when certain keyboard keys are pressed, we can move the evil circle around.
Object building practice - Learn web development
we could have done something far more complex, like get the balls to bounce off each other realistically, but that would have been far more complex to implement.
Web performance resources - Learn web development
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling.
Deploying our app - Learn web development
netlify will prompt you with a list of the github repositories it can find.
Web APIs: Mozilla-specific documents
in the pages listed here, we provide mozilla-specific documents about standard web apis.
Embedding API for Accessibility
no timed events setboolpref("browser.accept.timed_events", accepttimedevents); no timer speed setintpref("timer.relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with keyboard focus setboolpref("keyboardnav.mouse_follows_keyboard_focus", mousefollows); /* if this pref is set, the mouse pointer will always be move to the 0,0 pixel of the current keyboard fo...
Mozilla's Section 508 Compliance
here is a detailed list of section 508 bugs in mozilla's seamonkey application suite.
Android-specific test suites
disabling one failing test there is no manifest listing the android local unit tests.
What to do and what not to do in Bugzilla
it lists the requirements and the email to contact.
Bugzilla
testopia - test case management extension bugzilla.org - the project site wikipedia:bugzilla - general description of bugzilla (not specific to mozilla projects) bmo on wiki.mozilla.org - information about mozilla's customized bugzilla installation, including how to contribute to it tools bugzilla todos lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.
Building Mozilla
in this article, we list documents that will guide you in building firefox or other projects based upon mozilla code.
Debugging JavaScript
console.log in browser console you can dump variables in the browser console from addon code, by adding this line to import the console utility: const { console } = components.utils.import("resource://gre/modules/devtools/console.jsm", {}); this has an advantage over dump in that you can list out properties of an object logged with console.log.
Debugging Table Reflow
it can be invoked by set gecko_block_debug_flags=reflow the available options are: reflow really-noisy-reflow max-element-size space-manager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate.
Articles for new developers
to help you find the most critical stuff as quickly as possible, we've created this list of the articles you'll find most useful as you get yourself oriented and make your first contributions to the project.
Makefile - targets
this article lists possible targets provided by the makefile.
Makefiles - Best practices and suggestions
laundry list makefiles should remove all content that it will generate.
OS TARGET
the following list is not complete as any platform could have its own os_target.
Old Thunderbird build
the executable will be at the location listed under running below.
Simple SeaMonkey build
high speed internet installing build tools if your system is not listed below, see the build prerequisites page.
Simple Sunbird build
installing build tools if your system is not listed below, see the build prerequisites page.
Simple Thunderbird build
the executable will be at the location listed under running below.
Windows SDK versions
windows 7 sdk features that depend on this sdk include: windows 7 taskbar previews windows 7 download taskbar progress windows 7 jump lists you can download the sdk (v7.0 [web setup or iso image] or unsupported v7.1 [web setup or iso image]) from the microsoft download center.
ESLint
foo.jsm exports a symbol, but that is not recognised by eslint check it is listed correctly in tools/lint/eslint/modules.json using services.scriptloader.loadsubscript?
Gecko Logging
the log crate lists the available log levels: log level purpose rust logging levels error designates very serious errors.
Interface development guide
mailing list newsgroup rss feed related topics javascript, xpcom, developing mozilla ...
Obsolete Build Caveats and Tips
if you are building from an older project branch that still uses cvs, you will need to set moz_co_project to the appropriate value or values, using a comma-separated list, such as "mk_add_options moz_co_project=browser,mail,calendar,suite,xulrunner".
SVG Guidelines
here's an example taking into account the list below: version x="0" and y="0" enable-background (unsupported by gecko and now deprecated by the filter effects specification) id (id on root element has no effect) xmlns:xlink attribute when there are no xlink:href attributes used throughout the file other unused xml namespace definitions xml:space when there is no text used in the file other empty tags, this may be obvious, but th...
Experimental features in Firefox
this page lists features that are in nightly versions of firefox along with information on how to activate them, if necessary.
Linux compatibility matrix
the following table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.
Process scripts
the following code uses the global parent process message manager, which will load the script into the the chrome process and any child processes: // chrome code let ppmm = cc["@mozilla.org/parentprocessmessagemanager;1"] .getservice(ci.nsiprocessscriptloader); ppmm.loadprocessscript("chrome://whatever/process-script.js", true); ppmm.addmessagelistener("hello", function(msg) { ...
Message manager
guides message manager overview frame script loading and lifetime communicating with frame scripts performance best practices frame script environment limitations of frame scripts process scripts api reference nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster nsimessagesender nsisyncmessagesender nsicontentframemessagemanager nsiprocessscriptloader ...
Blocked: Custom cookie permission
the permission can be changed or removed by: going to preferences > content blocking > cookies and site data clicking on the manage permissions button and updating the listed exceptions ...
Errors
this page lists the errors that can be raised due to firefox's anti-tracking functionality, governed by the storage access policy.
Privacy
this document lists privacy-related documentation.
Firefox Operational Information Database: SQLite
in the manager, select the database you want to explore in the '(select profile database)' pulldown, click 'go', select one of the tables listed in the left column and see the current contents of the database in the 'browse & search' tab.) some databases are used by the browser itself, others are used by applications that you have installed or used; for example: content-prefs.sqlite cookies.sqlite download.sqlite formhistory.sqlite persmissions.sqlite places.sqlite search.sqlite signons.sqlite webappstore.sqlite ...
HTMLIFrameElement.clearMatch()
searchtoggle.addeventlistener('touchend',function() { if(search.getattribute('class') === 'search') { search.setattribute('class', 'search shifted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); if(searchactive) { browser.clearmatch(); searchactive = false; prev.disabled = true; next.disabled = true; searchbar.value = '...
HTMLIFrameElement.findAll()
searchform.addeventlistener('submit', function(e) { e.preventdefault(); browser.findall(searchbar.value, 'case-sensitive'); searchactive = true; prev.disabled = false; next.disabled = false; searchbar.blur(); }); specification not part of any specification.
HTMLIFrameElement.findNext()
prev.addeventlistener('touchend',function() { browser.findnext('backward'); }); next.addeventlistener('touchend',function() { browser.findnext('forward'); }); specification not part of any specification.
HTMLIFrameElement.getManifest()
examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getmanifest().then(function(json) { console.log(json); }); }); specification not part of any specification.
HTMLIFrameElement.getStructuredData()
examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getstructureddata(); request.onsuccess = function() { console.log(request.result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the website of british alt-country band salter cane) will result in a json object being returned, along the lines of: { "items": [ ...
HTMLIFrameElement.goBack()
examples back.addeventlistener('touchend',function() { browser.goback(); }); specification not part of any specification.
HTMLIFrameElement.goForward()
examples fwd.addeventlistener('touchend',function() { browser.goforward(); }); specification not part of any specification.
mozbrowseractivitydone
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrows...
mozbrowserasyncscroll
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandp...
mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercaretstatechanged
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserclose
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusern...
mozbrowsercontextmenu
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernamea...
mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired...
mozbrowsererror
locked phishingblocked malwareblocked unwantedblocked offline malformeduri redirectloop unknownsockettype netreset notcached isprinting deniedportaccess proxyresolvefailure 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 mozbrowserusernameandpasswordreq...
mozbrowserfindchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritycha...
mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadend
var browser = document.queryselector("iframe"); 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 mozbrowserlo...
mozbrowserloadstart
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowm...
mozbrowserlocationchange
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermanifestchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernamea...
mozbrowsermetachange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermetachange", function(event) { console.log("a meta tag has been " + event.details.type + ".
mozbrowseropensearch
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowseropentab
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernam...
mozbrowserresize
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserresize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowseruser...
mozbrowserscroll
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscroll", function( event ) { console.log("the new scroll position is " + event.details.left + " across and " + event.details.top + "down."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowser...
mozbrowserscrollareachanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollareachanged", function( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowserti...
mozbrowserscrollviewchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsersecuritychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserselectionstatechanged
example 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 mozbrowserlocation...
mozbrowsershowmodalprompt
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowseruserna...
mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameand...
mozbrowserusernameandpasswordrequired
example var browser = document.queryselector("iframe[mozbrowser]"); browser.addeventlistener("mozbrowserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowservisibilitychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowservisibilitychange", function( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow ...
HTMLIFrameElement.reload()
examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification.
HTMLIFrameElement.stop()
MozillaGeckoChromeAPIBrowser APIstop
examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification.
HTMLIFrameElement.zoom()
MozillaGeckoChromeAPIBrowser APIzoom
examples var browser = document.queryselector('iframe'); var zoomfactor = 1; zoomin.addeventlistener('touchend',function() { zoomfactor += 0.1; browser.zoom(zoomfactor); }); zoomout.addeventlistener('touchend',function() { zoomfactor -= 0.1; browser.zoom(zoomfactor); }); specification not part of any specification.
-moz-window-dragging
<window>, <panel> inherited no media visual computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-window-dragging property is specified as one of the keyword values listed below.
::-moz-tree-image
associated elements <xul:treeitem> <xul:treecell> style properties margin list-style position examples bookmark icons in the places window - mozillazine forum ...
::-moz-tree-twisty
associated elements <xul:treecell> style properties border margin padding display list-style position -moz-appearance ...
overflow-clip-box-block
overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box-inline
verflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box
.scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
MozScrolledAreaChanged
example document.addeventlistener("mozscrolledareachanged", event => { // find something useful to do with those values event.width; event.height; event.x; event.y; }, false); ...
smartcard-insert
example document.addeventlistener("smartcard-insert", smartcardchangehandler ); related events smartcard-remove ...
smartcard-remove
example document.addeventlistener("smartcard-remove", smartcardchangehandler ); related events smartcard-insert ...
Chrome-only Events reference
this page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
Roll your own browser: An embedding how-to
here's a partial list.
Embedding Mozilla
mailing list newsgroup rss feed #embedding irc channel related topics gecko, xpcom ...
Script security
from the point of view of chrome code, the script security model in gecko is intended to provide that help to make writing secure, system-privileged javascript a realistic expectation.
HTTP Cache
the memory pool is represented by two lists (strong refering ordered arrays) of cacheentry objects: sorted by expiration time (that default to 0xffffffff) sorted by frecency (defaults to 0) we have two such pools, one for memory-only entries actually representing the memory-only cache and one for disk cache entries for which we only keep the meta data.
Hacking with Bonsai
there is a web page, which records if the tree is open or closed what the date stamp of the last known good tree is who is on the hook for the current tree before the tree is opened, the list of checkins that happened when the tree was closed is reviewed to insure that only build related checkins took place.
How test harnesses work
e tests) gathers the tests (manifestdestiny) potentially sets up an http server for test data (mozhttpd) invokes the binary (mozrunner) it is the job of the shim extension to shut down the browser logging (mozlog, in theory) (run tests, accrue results) cleanup: shutdown the browser check for crashes (mozcrash) reporting (moztest) marionette tests list of testing extensions pageloader (talos) mochitest: //github.com/realityripple/uxp/blob/master/testing/mochitest/install.rdf (mochitest) ...
How to add a build-time test
xpcshell_tests be a list of subdirectories of the current directory which contain xpcshell tests.
How to get a process dump with Windows Task Manager
find firefox.exe among the list of processes.
How to get a stacktrace with WinDbg
.logopen /t c:\temp\firefox-debug.log .childdbg 1 .tlist sxn gp lm if you see firefox.exe listed in the output from .tlist more than once, then you are already running the application and need to close the running instance first before you start debugging, otherwise you won't get useful results.
Internationalized Domain Names (IDN) Support in Mozilla Browsers
this will list all the preferences for your current profile.
JavaScript Tips
(the property could have been implemented as ["class"'] but that just looks silly.) xul also maps the hidden and collapsed attributes to properties, but note that these are boolean properties whereas the above list are all string properties.
AddonType
the lower the number the higher in the list the type will appear.
NetUtil.jsm
}); remarks note: if you specify an nsichannel as the input source, and its notification callbacks have already been set, callers are responsible for implementing nsibadcertlistener and nsisslerrorlistener.
PerfMeasurement.jsm
perfmeasurement( eventmask tomeasure ); parameters tomeasure a mask of all of the event types you want to record; see event mask constants for a list of values.
PopupNotifications.jsm
this is normally specified in css using list-style-image and the .popup-notification-icon[popupid=...] selector.
Task.jsm
this comes in handy when iterating over function lists where some items have been converted to tasks and some not.
Encodings for localization files
browser/installer/installer.inc utf-8 toolkit/installer/unix/install.it utf-8 native windows encodings the following table lists native windows encodings, and the win_installer_charset and charset= values for each: encoding name win_installer_charset (charset.mk) charset= (windows/install.it) ansi_charset cp1252 0 baltic_charset cp1257 186 chinesebig5_charset cp950 136 easteurope_charset cp1250 238 gb2312_charset cp936 134 ...
Localization: Frequently asked questions
this page lists tweaks and tips that may not require a complete page on its own.
Localizing extension descriptions
g line to it (where extension_id matches your application id from install.rdf and path_to_localization_file is the chrome path to the localization file you added to earlier): pref("extensions.extension_id.description", "path_to_localization_file"); localizable strings the following add-on metadata can be localized using this process: name description creator homepageurl localizable lists in cases where multiple values can exist, a numeric index is appended to the end of the preference name: extensions.extension_id.contributor.1=first_localized_contributor_name extensions.extension_id.contributor.2=second_localized_contributor_name extensions.extension_id.contributor.3=thrid_localized_contributor_name pref("extensions.extension_id.contributor.1", "path_to_localization_file"); ...
QA phase
changeset: 0:7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings now compare the local repository on your machine with the remote hg repository by entering this command: $ hg outgoing http://hg.mozilla.org/l10n-central/x-testing the hg outgoing command compares the two repositories and lists all changesets that are present locally, but not in the remote repository.
SVN for Localizers
you can also run svn status to check the list of modified files (they'll display a m before the name) you're about to commit.
Localization formats
you may choose to present just the html for localization: we give an html file which lists several pieces of content like, <h1>getting started</h1> and the localizer translates to <h1>débuter avec firefox</h1> the localizer then submits the translated html or php back to us by either checking in changes to svn or sending us a patch that pascal checks in.
Web Localizability
the following list contains links to pages that highlight steps that can be taken to make web content localizable.
Basics
so it responds to other browser operations such as the zoom (try view -> text zoom), and you can do links a 2 + b 2 = c 2 , apply stylistic effects a 2 + b 2 = c 2 , or use color a 2 + b 2 = c 2 in very strange ways p(x) q(x) = a0 + a1x + a2 x2 + ...
Extras
mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg> </div> inline javascript html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math> javascript content function whoistherealert(evt) { alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoistherealert); } function init() { attachlistener("num"); attachlistener("denum"); } window.addeventlistener("load", init); ...
Fonts for Mozilla 2.0's MathML engine
furthermore, in accordance with the w3c css2 recommendation on fonts, authors can specify an ordered list of particular fonts which they prefer (using the font-family property of css), with the assurance that mozilla's font engine will hunt for alternate fonts whenever their specified fonts are not found on a particular user's system.
MathML Torture Test
addeventlistener("change", updatemathfont, false) } window.addeventlistener("load", load, false); the following test contains sample tex formulas from knuth's tex book and equivalent mathml representations.
Mozilla MathML Status
sections related to semantics/content mathml or irrelevant features are left blank or not listed at all.
MathML Accessibility in Mozilla
this table below provides a list of mathml constructions and how they are read in mozilla applications for various platforms: windows: mathml support is provided by nvda, which actually delegates math reading to the proprietary mathplayer plugin.
Mozilla MathML Project
mailing list newsgroup rss feed irc channel wiki used by contributors - check out the latest developments and help us improving mathml in mozilla.
Mozilla Web Developer FAQ
here’s the check list: does the html document validate?
Mozilla Development Tools
this page lists the various development tools that we operate and/or maintain here at mozilla.org.
Automated performance testing and sheriffing
current list of automated systems we are tracking (at least to some degree): talos: the main performance system, run on virtually every check-in to an integration branch build metrics: a grab bag of performance metrics generated by the build system arewefastyet: a generic javascript and web benchmarking system areweslimyet: a memory benchmarking tool ...
Leak-hunting strategies and tips
some places you can do this are: layout engine define debug_tracemalloc_framearena where it is commented out in layout/base/nspresshell.cpp glib set the environment variable g_slice=always-malloc other references performance tools leak debugging screencasts (dbaron) leakingpages - a list of pages known to leak mdc:performance - contains documentation for all of our memory profiling and leak detection tools ...
Memory Profiler
rank-list view and tree view the rank-list view shows top functions that are most memory eager.
Power profiling overview
the following sections list them from best to worst.
about:memory
note that in both cases the generated data contains privacy-sensitive details such as the full list of the web pages you have open in other tabs.
dtrace
you can see a complete list of probes by running sudo dtrace -l.
Phishing: a short definition
the following is a non-exhaustive list of the most common approaches.
A brief guide to Mozilla preferences
any use of this technique by software such as firefox extension to override normal user preference will result in being added to the firefox blocklist or the preferences being forcibly removed.
Preferences system
example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
Research and prep
ensure that your suggestions follow these parameters: search there are typically five search plug-ins listed for firefox desktop (only four for firefox mobile): generic search the default option should expose the quickest path to the best result on the world wide web for the user (indexing a large portion of the global www).
Crash reporting
type about:crashes into your location bar to get a page listing both submitted and unsubmitted crash reports.
JSHydra
mailing list newsgroup rss feed #static on irc.mozilla.org blogs joshua cranmer related topics dehydra, treehydra, spidermonkey categories interwiki language links ...
Midas editor module security preferences
the clipboard buttons in the demo, or similar buttons on the sites you listed, should now function.
NSPR release procedure
release checklist change the nspr version in mozilla/nsprpub/pr/include/prinit.h.
I/O Functions
list of functions: pr_openudpsocket pr_newudpsocket pr_opentcpsocket pr_newtcpsocket pr_importtcpsocket pr_connect pr_connectcontinue pr_accept pr_bind pr_listen pr_shutdown pr_recv pr_send pr_recvfrom pr_sendto pr_transmitfile pr_acceptread pr_getsockname pr_getpeername pr_getsocketoption pr_setsocketoption converting between host and network addresses pr_ntohs pr_nto...
NSPR Error Handling
pr_max_error placeholder for the end of the list.
NSPR LOG MODULES
syntax modulename:level[, modulename:level]* modulename is the name specified in a pr_newlogmodule call or one of the handy magic names listed below.
PR_Accept
description the socket fd is a rendezvous socket that has been bound to an address with pr_bind and is listening for connections after a call to pr_listen.
PR_AcceptRead
syntax #include <prio.h> print32 pr_acceptread( prfiledesc *listensock, prfiledesc **acceptedsock, prnetaddr **peeraddr, void *buf, print32 amount, printervaltime timeout); parameters the function has the following parameters: listensock a pointer to a prfiledesc object representing a socket descriptor that has been called with the pr_listen function, also known as the rendezvous socket.
PR_InitializeNetAddr
this wildcard value is typically used to establish a socket on which to listen for incoming connection requests.
PR_LOG
possible values are: pr_log_none = 0 pr_log_always = 1 pr_log_error = 2 pr_log_warning = 3 pr_log_debug = 4 pr_log_notice = pr_log_debug pr_log_warn = pr_log_warning pr_log_min = pr_log_debug pr_log_max = pr_log_debug _args a variable length argument list, as if to printf.
PR_NewTCPSocket
typically, the server binds its socket to a well-known port with pr_bind, calls pr_listen to start listening for connection setup requests, and calls pr_accept to accept a connection.
PR_Open
possible values of the mode parameter are listed in the table below.
PR_OpenTCPSocket
typically, the server binds its socket to a well-known port with pr_bind, calls pr_listen to start listening for connection setup requests, and calls pr_accept to accept a connection.
NSPR API Reference
erval functions date and time types and constants time parameter callback functions functions memory management operations memory allocation functions memory allocation macros string operations pl_strlen pl_strcpy pl_strdup pl_strfree floating point number to string conversion pr_strtod pr_dtoa pr_cnvtf long long (64-bit) integers bitmaps formatted printing linked lists linked list types prclist linked list macros pr_init_clist pr_init_static_clist pr_append_link pr_insert_link pr_next_link pr_prev_link pr_remove_link pr_remove_and_init_link pr_insert_before pr_insert_after dynamic library linking library linking types prlibrary prstaticlinktable library linking functions pr_setlib...
NSPR
mailing list newsgroup rss feed related topics necko, nss ...
Deprecated SSL functions
applications that want to use the ssl shared libraries must convert to calling the new replacement functions listed below.
NSS FAQ
MozillaProjectsNSSFAQ
exports (including those (a) on the bureau of industry and security denied parties list or entity list, (b) on the office of foreign assets control list of specially designated nationals and blocked persons, and (c) involved with missile technology or nuclear, chemical or biological weapons).
FIPS Mode - an explanation
some third-parties distribute firefox ready for fips mode, a partial list can be found at the nss wiki.
JSS FAQ
MozillaProjectsNSSJSSJSS FAQ
ectory to look for sample code is in the org/mozilla/jss/tests directory: http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/tests org/mozilla/jss/tests/closedbs.java org/mozilla/jss/tests/keyfactorytest.java org/mozilla/jss/tests/digesttest.java org/mozilla/jss/tests/jcasigtest.java org/mozilla/jss/tests/keywrapping.java org/mozilla/jss/tests/listcerts.java org/mozilla/jss/tests/pk10gen.java org/mozilla/jss/tests/sdr.java org/mozilla/jss/tests/selftest.java org/mozilla/jss/tests/setupdbs.java org/mozilla/jss/tests/sigtest.java org/mozilla/jss/tests/symkeygen.java org/mozilla/jss/tests/testkeygen.java org/mozilla/jss/tests/sslclientauth.java org/mozilla/jss/tests/listcacerts.java o...
JSS Provider Notes
by default, the jca provider will be installed in the list of providers maintained by the java.security.security class.
Mozilla-JSS JCA Provider notes
by default, the jca provider will be installed in the list of providers maintained by the java.security.security class.
NSS 3.14 release notes
bugs fixed in nss 3.14 this bugzilla query returns all the bugs fixed in nss 3.14: https://bugzilla.mozilla.org/buglist.cgi?list_id=4643675;resolution=fixed;classification=components;query_format=advanced;product=nss;target_milestone=3.14 ...
NSS 3.16.1 release notes
bugs fixed in nss 3.16.1 this bugzilla query returns all the bugs fixed in nss 3.16.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.1 ...
NSS 3.16.2.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.16.2.2 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.16.2.3 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.16.2 release notes
bugs fixed in nss 3.16.2 this bugzilla query returns all the bugs fixed in nss 3.16.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.2 ...
NSS 3.16.5 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.16.6 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.16 release notes
bugs fixed in nss 3.16 this bugzilla query returns all the bugs fixed in nss 3.16: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16 ...
NSS 3.17 release notes
bugs fixed in nss 3.17 this bugzilla query returns all the bugs fixed in nss 3.17: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17 ...
NSS 3.19.2.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.19.2.2 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.19.2.3 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.19.2.4 release notes
furthermore, applications that restrict the use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.19.4 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.20.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.20.2 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.21.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.21.2 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.21.3 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.21.4 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.22.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.22.2 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.22.3 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.25.1 release notes
applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.26.2 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.28.2 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.28.3 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.28.4 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.29.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.29.2 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.29.3 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.29.5 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.30.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.31.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.36.4 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.36.5 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.36.6 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.36.7 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.36.8 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.37.3 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.40.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.44.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.44.4 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.51.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.52.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
NSS 3.53.1 release notes
furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries.
sample2
----" #define ns_sig_trailer "-----end signature-----" #define ns_cert_header "-----begin certificate-----" #define ns_cert_trailer "-----end certificate-----" /* missing publically from nss versions earlier than 3.13 */ #ifndef sec_error_base #define sec_error_base (-0x2000) typedef enum { sec_error_io = sec_error_base + 0, sec_error_token_not_logged_in = (sec_error_base + 155), sec_error_end_of_list } secerrorcodes; #endif /* port_errortostring introduced in nss 3.13.
NSS sources building testing
for any functions that are listed in the .def files, nss promises that the binary function interface (abi) will remain stable.
nss tech note1
if kind is the sec_asn1_choice modifier, you must also specify additional templates in a null terminated array to list the various possible types that this component can have.
nss tech note3
the list of known seccertusages is short: certusagesslclient ........... an ssl client authentication cert certusagesslserver ........... an ordinary ssl server cert certusagesslserverwithstepup.. an ssl server cert that allows export clients to use strong crypto.
nss tech note7
nss doesn't yet support pkcs #1 v2.0 and v2.1, in particular oaep, but oaep support is on our to-do list.
NSS Third-Party Code
this is a list of third-party code included in the nss repository, broken into two lists: code that can be compiled into the nss libraries, and code that is only used for testing.
New NSS Samples
see https://bugzilla.mozilla.org/show_bug.cgi?id=490238 how to download the samples: hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update samples_branch samples list: sample code 1: hashing sample code 2: init nss database sample code 3: encrypt/decrypt and mac using token sample code 4: encrypt/decrypt and mac using session objects sample code 5: encrypt/decrypt/mac output public key as a csr sample code 6: encrypt/decrypt/mac generating a pkcs#11 csr common code used by these samples: sample code 0: utilities thanks are due to shailendra jai...
PKCS 12 functions
the public functions listed here perform pkcs #12 operations required by some of the nss tools and other applications.
Installation guide
the libraries you need to install are listed below.
FC_DeriveKey
ptemplate [in] pointer to the list of attributes for the new key.
FC_FindObjectsInit
description fc_findobjectsinit sets the attribute list for an object search.
FC_UnwrapKey
ptemplate [in] pointer to the list of attributes for the unwrapped key.
NSPR functions
these nspr functions are listed in this section.
FIPS mode of operation
general-purpose functions fc_getfunctionlist fc_initialize fc_finalize fc_getinfo slot and token management functions fc_getslotlist fc_getslotinfo fc_gettokeninfo fc_waitforslotevent fc_getmechanismlist fc_getmechanisminfo fc_inittoken fc_initpin fc_setpin session management functions fc_opensession fc_closesession fc_closeallsessions fc_getsessioninfo fc_getoperationstate fc_setoperationstate fc_login fc_logout object management functions these functions manage certificates and keys.
NSS environment variables
nss_shared_db 3.12 nss_disable_arena_free_list string (any non-empty value) define this variable to get accurate leak allocation stacks when using leak reporting software.
NSS tools : ssltab
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun.
NSS tools : ssltap
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun.
NSS tools : vfyserv
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
NSS reference
these functions are listed in this section.
sslintro.html
a server application typically uses these functions to establish a connection: pr_bind pr_listen pr_accept pr_getsockname a client application typically uses these functions to establish a connection: pr_gethostbyname pr_enumeratehostent pr_connect pr_getconnectstatus when an application imports a socket into ssl after the tcp connection on that socket has already been established, it must call ssl_resethandshake to determine whether ssl should behave like an ssl client or an...
TLS Cipher Suite Discovery
the cipher suites are listed in the table in order of preference, from the most preferred cipher suite to the least preferred.
NSS Tools
source, documentation crlutil manage certificate revocation lists (crls).
NSS troubleshooting
list of environment variables ...
modutil-tasks.html
nss security tools: modutil tasks newsgroup: mozilla.dev.tech.crypto task list the jar installation script is very fragile with respect to platform definitions (especially version numbers).
NSS Tools dbck-tasks
nss security tools: dbck tasks newsgroup: mozilla.dev.tech.crypto task list in analyze mode, there should be an option to create a file containing a graph of the certificate database without any information about the user's certificates (no common names, email addresses, etc.).
NSS Tools modutil-tasks
nss security tools: modutil tasks newsgroup: mozilla.dev.tech.crypto task list the jar installation script is very fragile with respect to platform definitions (especially version numbers).
NSS Tools pk12util-tasks
nss security tools: pk12util tasks newsgroup: mozilla.dev.tech.crypto task list need to migrate code to use an up-to-date version of nss.
NSS Tools signver-tasks
nss security tools: signver tasks newsgroup: mozilla.dev.tech.crypto task list remove private hash algortihms and replace with code in lib/hash, lib/crypto, and ...
NSS tools : ssltap
MozillaProjectsNSStoolsssltap
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape and now with red hat and sun.
Proxies in Necko
alternatively, if proxies are disabled, or this host is in the list of hosts for which no proxy should be used, null is also returned.
Necko
mailing list newsgroup rss feed ...
Renaming With Pork
in the analysis copy make a list of files to process.
Pork Tools
it takes a list of functions as input and rewrites the definition and call sites of those functions.
Pork
mailing list newsgroup rss feed #static on irc.mozilla.org related topics dehydra, treehydra, mozilla 2, spidermonkey ...
Rhino community
here are some additional resources for help: mailing list rhino discussions happen on the mozilla-rhino group on google groups.
Rhino Debugger
you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard.
Rhino documentation
check out the rhino wish list.
Download Rhino
running the ./gradlew tasks command at the top directory of the rhino distribution will print the list of available build targets.
Small Footprint
to build such minimalist jar without debug information, run the following command from the top directory of rhino distribution: ant clean ant -ddebug=off -dno-regexp=true -dno-e4x=true smalljar if you omit -dno-regexp=true, then the resulting smalljs.jar will include regular expression support.
New in Rhino 1.7R4
n updates and fixes faster number to string conversion several regexp fixes regexp performance improvements es5 compliance fixes improved interpreter performance improved commonjs module implementation javascript 1.8 generator expressions many parser and ast fixes use javascript 1.7 as default version in rhino shell javaadapter improvements fixes in js to java access include mozilla test suite a list of bugs that were fixed since the previous release.
Performance Hints
arrays use the forms of the array constructor that specify a size or take a list of initial elements.
Rhino serialization
it is also possible to add names of objects to a list in the scriptableoutputstream object.
Shumway
the simple method is to install the shumway extension (or run a browser version with shumway included and enabled) and browse to your flash content with adobe flash player set "ask to activate" or "never activate" in firefox's add-ons menu (this will be listed as "shockwave flash" under the plugins tab).
SpiderMonkey Build Documentation
for a list of other available build options, type (assuming the current working directory is one of the above-created build directories): /bin/sh ../configure.in --help generating a compilation database some tools (like ides, static analyzers and refactoring tools) consume a file called compile_commands.json which contains a description of all the pieces required to build a piece of software so that too...
GCIntegration - SpiderMonkey Redirect 1
the goal is to keep a list, called the remembered set, of all pointers from the tenured generation into the nursery.
GC Rooting Guide
the main types of gc thing pointer are: js::value jsobject* jsstring* jsscript* jsid note that js::value and jsid can contain pointers internally even though they are not a normal pointer type, hence their inclusion in this list.
Statistics API
slices: array of objects - a list of objects describing each slice in detail.
SpiderMonkey Internals
jsclist.h doubly-linked circular list struct and macros.
JIT Optimization Outcomes
the interpreted callee function has been explicitly blacklisted against ion compilation.
JIT Optimization Strategies
in particular, arguments cannot be returned from the function, or passed as an argument into calls (except for the apply example listed above).
JSAPI Cookbook
*/ js::autovaluevector args(cx); // empty argument list js::rootedvalue r(cx); if (!js_callfunctionvalue(cx, null, f, args, &r) return false; returning an integer // javascript return 23; /* jsapi * * warning: this only works for integers that fit in 32 bits.
JS::CloneFunctionObject
the new object has the same code and argument list as funobj.
JSFunction
for native functions and jsapi-compiled functions - that is, functions returned by the apis listed above-there is a simple one-to-one relationship between the jsfunction and the corresponding javascript function object.
JSString
working with jsstring objects (add a list of links to methods here, maybe some text) ...
JS_CloneFunctionObject
the new object has the same code and argument list as funobj, but uses parent as its enclosing scope.
JS_DefineConstDoubles
on success, js_defineconstdoubles/js_defineconstintegers returns true, indicating it has created all properties listed in the array.
JS_DefineOwnProperty
see object.defineproperty for a list of possible fields.
JS_DefineProperties
on success, js_defineproperties returns true, indicating it has created all properties listed in the array.
JS_GetFunctionArity
otherwise fun is implemented in javascript, and the result is the number of identifiers in its formal parameter list (see ecma 262-3 §13).
JS_GetFunctionId
examples the name returned by js_getfunctiondisplayid is the same as returned by js_getfunctionid if the function explicitly has a name listed in the source, or if not it is an intelligently guessed name for the function based on its context in the source.
JS_GetTypeName
the following table lists jstypes and the string literals reported by js_gettypename: type literal jstype_void "undefined" jstype_object "object" jstype_function "function" jstype_string "string" jstype_number "number" jstype_boolean "boolean" any other value null see also js_convertvalue js_typeofvalue js_valuetoboolea...
JS_MaybeGC
the analysis is simplistic but produces acceptable performance for many applications.
JS_RemoveRootRT
description js_removerootrt removes the gc thing that rp points to from the list of gc things that are protected from garbage collection.
JS_SetGCCallback
sometimes these four callbacks happen once each, in the order listed.
JS_SetPrototype
take care not to create a circularly-linked list of prototypes using this function, because such a set of prototypes cannot be resolved by the javascript engine and can easily lead to an infinite loop.
SpiderMonkey 45
here is a list of the most significant changes: js::nullptr is obsolete.
SpiderMonkey releases
this page lists spidermonkey release notes.
SavedFrame
savedframe a savedframe instance is a singly linked list of stack frames.
Setting up CDT to work on SpiderMonkey
the initial build was in clang, so the modified build commands look like this: mkdir _dbg.obj cd _dbg.obj cc='clang -qunused-arguments -fcolor-diagnostics' cxx='clang++ -qunused-arguments -fcolor-diagnostics' \ ../configure --enable-debug --disable-optimize --enable-debug-symbols note: if you want to use ccache, you can enable it by adding --with-ccache to the arguments list.
Split object
note that none of the rules listed here affects ordinary property accesses.
Web Replay
the list of redirected functions can be found in toolkit/recordreplay/processredirectdarwin.cpp.
Zest usecase: Reporting Security Vulnerabilities to Developers
in this case the sequence of events could be: the security team discovers a vulnerability using specialist security tools they use those tools to create a zest script which reproduces the problem they hand the script over to the developer the developer adjusts the script to match their local environment they run the script and see the vulnerability they fix the vulnerability they rerun the script to check that the vulnerability is fixed the fix is applied to the system that the security ...
compare-locales
options to get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff format.
Using RAII classes in Mozilla
explicit nsautoscriptblocker(jscontext *cx moz_guard_object_notifier_param) { // note: no ',' before macro moz_guard_object_notifier_init; nscontentutils::addscriptblocker(cx); } ~nsautoscriptblocker() { nscontentutils::removescriptblocker(); } private: moz_decl_use_guard_object_notifier }; moz_guard_object_notifier_param is added to the end of the constructor's parameter list.
Exploitable crashes
if you see a hex address such as 0x292c2830 rather than a function name such as nslistboxbodyframe::getrowcount at the top of the stack, a bug has caused the program to transfer control to a "random" part of memory that isn't part of the program.
Animated PNG graphics
MozillaTechAPNG
removed num_frames from 'anim' chunk from 0.3 added 'actl', 'fdat', 'fctl' chunk descriptions as per the latest png-list discussion added section 4, "interactions with other png chunks"; described global and local palettes and transparency changed 'offs' chunk section to refer to more general chunks updated 'adat' description to indicate that all frames must either be in a single chunk, or that the first chunk must have empty data.
Gecko events
« at apis support page this page offers a list of accessibility-related events supported by gecko.
ROLE_CELL
interfaces nsiaccessible nsisupports nsiaccessibletext nsiaccessiblehypertext nsiaccessibleeditabletext nsiaccessiblehyperlink nsiaccessibleselectable nsiaccessiblevalue nsiaccessnode mapped to at-spi: atk_role_table_cell atk: atk_role_list_item ua: nsaccessibilitygrouprole msaa/ia2: role_system_cell used by aria: gridcell xul: <listcell/> html: <td> ...
ROLE_COLUMNHEADER
interfaces nsiaccessnode nsiaccessible mapped to at-spi: role_table atk: atk_role_column_header ua: nsaccessibilitygrouprole msaa/ia2: role_system_columnheader used by aria: colheader xul: <listheader/> html: <th> ...
ROLE_OUTLINEITEM
interfaces nsiaccessibletreecache nsiaccessible nsiaccessibleselectable nsiaccessnode mapped to at-spi: role_list_item atk: atk_role_list_item ua: nsaccessibilityrowrole (use outlinerow as subrole) msaa/ia2: role_system_outlineitem used by aria: treeitem html: ??
ROLE_ROW
interfaces nsiaccessible nsisupports nsiaccessiblehyperlink nsiaccessibleselectable mapped to at-spi: role_list_item atk: atk_role_list_item ua: nsaccessibilityrowrole msaa/ia2: role_system_row used by aria: row html: <tr> xul:<listitem/> ...
ROLE_TABLE
mapped to at-spi: role_table atk: atk_role_table ua: nsaccessibilitygrouprole msaa/ia2: role_system_table used by aria: grid html: <table> xul: <listbox/> ...
Embedded Dialog API
apologies, but at this time there is no complete list of all dialogs and the components in which they reside.
Using the Places history service
many pages are not visible in normal history lists, such as redirects and sub-frame contents.this is not implemented in navhistory.
Using the Places livemark service
when the update timer fires, it iterates over the list of livemarks, and will refresh a livemark *only* if it's expired.
FUEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
SMILE
objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
STEEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
Accessing the Windows Registry Using XPCOM
you can use these methods to read a list of values or recursively access a branch of the registry.
Binary compatibility
comments and questions should be directed to the newsgroup, mozilla.dev.tech.xpcom, or the mailing list, mozilla-xpcom@mozilla.org.
XPCOM glue
MozillaTechXPCOMGlue
linux and mac: make sure the gecko libraries are listed after your object (.o) files on the link line.
How to build an XPCOM component in JavaScript
for a new component in firefox/thunderbird/b2g if you are adding a new feature to applications in the mozilla-central repository, you can create a makefile listing the idl files and the build system will automatically generate the typelib.
Resources
« previous this last section of the book provides a list of resources referred to in the tutorial and other links that may be useful to the gecko developer.
Detailed XPCOM hashtable guide
in these situations, an array, a linked-list, or various tree data structures are more efficient.
Receiving startup notifications
the startup process during application startup, the application's manifest is used to get a list of the components it needs to register, and those components are loaded.
Introduction to XPCOM for the DOM
the argument list and return type are turned into correct c++ types according to rules not described here.
Components.results
components.results is a read-only object whose properties are the names listed as the first parameters of the macros in js/xpconnect/src/xpc.msg (also at table of errors), with the value of each corresponding to that constant's value.
Components.utils.Sandbox
for example, the code in the sandbox might be a third-party library that sets expando properties or adds event listeners to a window.
Components.utils.createObjectIn
example to create a new object in the scope of a specified dom window, you can simply do: function genpropdesc(value) { return { enumerable: true, configurable: true, writable: true, value: value }; } var myobject = components.utils.createobjectin(mywindow); var proplist = { name: genpropdesc("name"), date: genpropdesc("date"), id: genpropdesc("id"), func: genpropdesc(function() { alert("called func!"); }) }; object.defineproperties(myobject, proplist); components.utils.makeobjectpropsnormal(myobject); this sets up the new object in the scope of the object mywindow, then adds properties by calling object.defineproperties(), then normalizes them by call...
Components.utils.importGlobalProperties
therefore readystate must be checked, if it is not complete, then a load listener must be attached.
Development
list of open javaxpcom bugs open a new javaxpcom bug checkins within the last month ...
JavaXPCOM
mailing list newsgroup rss feed related topics xpcom, embedding mozilla ...
PlXPCOM
project page (mozdev) perl object definition (mozdev) developer's guide to perl xpcom (mozdev) newsgroup (mozdev) mailing list (mozdev) ...
PyXPCOM
other resources pythonext - extension that provides pyxpcom samples - demo applications using pyxpcom community python-xpcom bindings mailing list (activestate) #pyxpcom on irc.mozilla.org source code the pyxpcom code is available here: http://hg.mozilla.org/pyxpcom/ to build pyxpcom, see building pyxpcom.
RbXPCOM
project page (mozdev) manual (mozdev) mailing list (mozdev) newsgroup (mozdev) ...
XPCShell Reference
the last option listed is the one that takes effect.
XPCshell Test Manifest Expressions
note that it currently seems like neither this list nor the one on the official docs is exhaustive, so if you need something and it's not here, best check the source code!
XPConnect
wrappers what sorts of wrappers xpconnect generates and uses xpconnect security membranes tools xpcshell join the xpcom community choose your preferred method for joining the discussion: mailing list newsgroup rss feed irc: #developers (learn more)tools: javascript component wizard, visual c++ component wizard, visual c++ component wizard for visual studio 2010 ...
Language bindings
the scriptable methods on the nsicomponentmanager interface can be called directly on this object.components.resultscomponents.results is a read-only object whose properties are the names listed as the first parameters of the macros in js/xpconnect/src/xpc.msg (also at table of errors), with the value of each corresponding to that constant's value.components.returncodecomponents.stackcomponents.stack is a read only property of type nsistackframe (idl definition) that represents a snapshot of the current javascript callstack.
nsresult
for a list of defined result values, see error codes returned by mozilla apis.
Core XPCOM functions
for a list of defined result values, see error codes returned by mozilla apis.
IAccessible2
used for tree items, list items, tab panel labels, radio buttons, and so on.
amIWebInstallInfo
toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable this interface is used by the default implementation of amiwebinstalllistener to communicate with the running application and allow it to warn the user about blocked installs and start the installs running.
amIWebInstallPrompt
toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable called when installation by websites is currently disabled.
imgIContainer
adds to the end of the list of frames.
imgIRequest
note that cancel() is asynchronous, which means that some time after you call it, the listener/observer will get an onstoprequest().
mozIRegistry
mozregistry this is the simplistic implementation of the moziregistry interface.
mozIStorageError
result long one of the error code values listed under constants on this page.
mozIStorageStatement
params mozistoragestatementparams the current list of named parameters, which may be set.
mozIStorageStatementCallback
void handlecompletion( in unsigned short areason ); parameters areason the reason the statement stopped executing; see the list of possible values in the constants section.
nsIAbCard
ismaillist boolean maillisturi string if ismaillist is true then maillisturi will contain the uri of the associated mailing list.
nsIAboutModule
hide_from_aboutabout (1 << 2) a flag that indicates whether this about: uri doesn't want to be listed in about:about, especially if it's not useful without a query string.
nsIAbstractWorker
1.0 66 introduced gecko 1.9.1 inherits from: nsidomeventtarget last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description onerror nsidomeventlistener the error listener for the worker.
GetAccessibleRelated
nsiaccessible getaccessiblerelated( in unsigned long arelationtype ); parameters arelationtype[in] the relation type between the accessible (see constants listed in relations documentation).
GetKeyBindings
nsidomdomstringlist getkeybindings( in pruint8 aactionindex ); parameters aactionindex[in] index of the given action.
GroupPosition
used for tree items, list items, tab panel labels, radio buttons, etc.
IndexInParent
« nsiaccessible page summary the 0-based index of this accessible in its parent's list of children, or -1 if this accessible does not have a parent.
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001...
nsIApplicationCacheChannel
see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcacheservice nsiapplicationcachenamespace nsidomofflineresourcelist ...
nsIApplicationCacheContainer
see also offline resources in firefox nsiapplicationcache nsiapplicationcachechannel nsiapplicationcacheservice nsiapplicationcachenamespace nsidomofflineresourcelist ...
nsIApplicationCacheNamespace
see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcachechannel nsiapplicationcacheservice nsidomofflineresourcelist ...
nsIAutoCompleteInput
completeselectedindex boolean if true, the text in the text field will be autocompleted as the user selects from the popup list.
nsIBrowserHistory
alength the number of pages listed in the auris array.
nsICRLInfo
security/manager/ssl/public/nsicrlinfo.idlscriptable information on a certificate revocation list (crl) issued by a certificate authority (ca).
nsICRLManager
void deletecrl( in unsigned long crlindex ); parameters crlindex getcrls() get a list of crl entries in the db.
nsICacheEntryDescriptor
see also nsicachevisitor nsicache nsisimpleenumerator nsicachelistener nsiinputstream nsioutputstream nsifile nsicachemetadatavisitor nsicacheentryinfo ...
nsICacheService
see also nsicache nsisimpleenumerator nsicachelistener nsicachesession nsicachevisitor ...
nsIChromeRegistry
checkfornewchrome() refreshes the chrome list at runtime, looking for new packages and so forth.
nsIContentFrameMessageManager
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.
nsIContentViewManager
once you have the view manager, you can call getcontentviewsin() to get a list of the content views for a given portion of the browser display, then use those nsicontentview objects to manipulate the content views.
nsIContentViewer
the entry must have the docshells for all of the child documents stored in its child shell list.
nsIDNSRecord
since a dns query may return more than one resolved ip address, the record acts like an enumerator, allowing the caller to easily step through the list of ip addresses.
nsIDNSRequest
the listener will passed to asyncresolve will be notified immediately with a status code of ns_error_abort.
nsIDOMFile
see also nsidomfilelist nsidomfileexception datatransfer drag and drop ...
nsIDOMFileReader
examples os.file for the main thread - example - save canvas to disk see also file api specification working draft nsidomfile nsidomfilelist nsidomfileexception ...
nsIDOMGeoPositionError
last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsisupports attributes attribute type description code short numerical error code; see error constants for a complete list.
nsIDOMNSHTMLDocument
see rich-text editing in mozilla for a list of supported commands.
nsIDOMNode
childnodes nsidomnodelist read only.
nsIDOMStorageWindow
attributes attribute type description globalstorage nsidomstoragelist global storage, accessible by domain.
nsIDeviceMotionData
see also mozorientation nsidomorientationevent nsidevicemotionlistener nsidevicemotion ...
nsIDirIndex
see also nsidirindexlistener nsidirindexparser ...
nsIDispatchSupport
see nsiactivexsecuritypolicy for list of flags.
nsIDocumentLoader
it is also responsible for sending nsiwebprogresslistener notifications.
nsIDownload
see also nsidownloadmanager nsidownloadprogresslistener nsixpinstallmanagerui ...
nsIDragDropHandler
use this to register where the listeners should attach (something that implements nspidomeventtarget which is what we end up using under the hood).
nsIDragService
[noscript] void firedrageventatsource( in mozilla::eventmessage aeventmessage ); parameters aeventmessage one of the event messages between edragdropeventfirst and edragdropeventlast defined in widget/eventmessagelist.h getcurrentsession() returns the current nsidragsession.
nsIDynamicContainer
anewindex the index at which the container will be inserted, or "-1" to append to the end of the list.
nsIEditorMailSupport
text, in astring acitation, in boolean ainserthtml); nsidomnode insertasquotation(in astring aquotedtext); void inserttextwithquotations(in domstring astringtoinsert); void pasteascitedquotation(in astring acitation, in long aselectiontype); void pasteasquotation(in long aselectiontype); void rewrap(in boolean arespectnewlines); void stripcites(); methods getembeddedobjects() get a list of img and object tags in the current document.
ExtensionManager (Toolkit)
examples here is how to retrive all the extensions installed: var em = cc['@mozilla.org/extensions/manager;1'] .getservice(ci.nsiextensionmanager); const nsiupdateitem = ci.nsiupdateitem; var extension_type = nsiupdateitem.type_extension; items = em.getitemlist(extension_type, {}); items.foreach(function(item, index, array) { alert(item.name + " / " + item.id + " version: " + item.version); }); ...
nsIFileOutputStream
methods init() void init( in nsifile file, in long ioflags, in long perm, in long behaviorflags ); parameters file file to write to (must qi to nsilocalfile) ioflags file open flags listed are listed in the pr_open() documentation.
nsIFrameLoader
see also content process event handling nsiframeloaderowner nsiframemessagelistener nsichromeframemessagemanager nsidomwindowutils ...
nsIGeolocationProvider
watch() attaches a callback listener to be notified when a location change is observed.
nsIIOService
this involves consulting a list of unsafe ports, corresponding to network services that may be easily exploitable.
nsIIdleService
time the amount of time they were listening for.
nsILocaleService
getlocalefromacceptlanguage() gets the most preferred locale from a list of locale preferences.
nsILoginManager
example this method can be called from javascript like this: var logins = myloginmgr.findlogins({}, 'https://bugzilla.mozilla.org', '', '', {}); getalldisabledhosts() returns a list of all hosts for which login saving is disabled.
nsILoginManagerIEMigrationHelper
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void migrateandaddlogin(in nsilogininfo alogin); methods migrateandaddlogin() takes a login provided from nsieprofilemigrator, migrates it to the current login manager format, and adds it to the list of stored logins.
nsIMicrosummaryService
if the caller passes a bookmark id, and one of the microsummaries is the current one for the bookmark, this method will retrieve content from the datastore for that microsummary, which is useful when callers want to display a list of microsummaries for a page that isn't loaded, and they want to display the actual content of the selected microsummary immediately (rather than after the content is asynchronously loaded).
nsIMimeConverter
thunderbird stored uint32 properties (not a complete list): indexed used for spotlight integration on osx.
nsIMsgAccount
outgoing identity list (array of nsimsgidentity's) incomingserver nsimsgincomingserver incoming server stuff key acstring internal key identifying itself methods addidentity() adds a new identity to this account.
nsIMsgFilter
ze, out boolean result ) logrulehit() void nsimsgfilter::logrulehit ( in nsimsgruleaction afilteraction, in nsimsgdbhdr aheader ) createaction() nsimsgruleaction nsimsgfilter::createaction ( ) getactionat() nsimsgruleaction nsimsgfilter::getactionat (in long aindex) appendaction() void nsimsgfilter::appendaction (in nsimsgruleaction action ) clearactionlist() void nsimsgfilter::clearactionlist() getsortedactionlist() void nsimsgfilter::getsortedactionlist (in nsisupportsarray actionlist) ...
nsIMsgSearchTerm
possible values: * plugin filter imapflag user whitelist * @return true if matches */ boolean matchjunkscoreorigin(in string ajunkscoreorigin); matchbody /** * test if the body of the passed in message matches "this" search term.
nsIMsgWindow
it clears out the content listener, the windowcommands, the statusfeedback and the docshell objects.
nsIMsgWindowCommands
mailnews/base/public/nsimsgwindow.idlscriptable this interface defines methods used by the back end to update the user interface in a mail or news message list.
nsINavBookmarkObserver
see nsinavbookmarksservice.transaction constants for a list of possible values.
nsINavHistoryResultNode
obsolete since gecko 2.0 tags astring for uri nodes, this is a sorted list of the tags, delimited with commans, for the uri represented by this node.
nsINavHistoryResultTreeViewer
obsolete since gecko 1.9 flatitemcount pruint32 this tells you how many items are in the flattened list of results, that is how many rows are in this tree right now.
nsINavHistoryResultViewObserver
warning: do not change the content of the observer list.
nsINavHistoryResultViewer
note: most methods in this interface were renamed in gecko 1.9.2, and others have slightly different parameter lists.
nsIObserver
see observer notifications for a list of built-in topics possible.
nsIPlacesView
for example, the representation of selection differs between trees, menus, and other such lists.
nsIPrompt
ng text, inout wstring password, in wstring checkmsg, inout boolean checkvalue); boolean promptusernameandpassword(in wstring dialogtitle, in wstring text, inout wstring username, inout wstring password, in wstring checkmsg, inout boolean checkvalue); boolean select(in wstring dialogtitle, in wstring text, in pruint32 count, [array, size_is(count)] in wstring selectlist, out long outselection); constants the button flags defined in nsiprompt are the same as those defined in nsipromptservice.constants.
nsIPushSubscription
ce(ci.nsiscriptsecuritymanager); const pushservice = cc["@mozilla.org/push/service;1"] .getservice(ci.nsipushservice); function sendsubscriptiontoserver(subscription) { let request = cc["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(ci.nsixmlhttprequest); request.open("post", "https://example.com/register-for-push", true); request.addeventlistener("error", () => { cu.reporterror("error sending subscription to server"); }); request.send(json.stringify({ endpoint: subscription.endpoint, // base64-encode the key and authentication secret.
nsIRequestObserver
astatuscode reason for stopping (ns_ok if completed successfully) see also nsistreamlistener ...
nsIScreen
rotation unsigned long the screen's current rotation; you may set this to any of the values listed in screen rotation constants.
nsIScriptableIO
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
nsISocketTransport
this object supports nsibadcertlistener2 and nsisslerrorlistener for ssl connections, and possibly other interfaces.
nsISocketTransportService
attachsocket adds a new socket to the list of controlled sockets.
nsISpeculativeConnect
acallbacks any security callbacks for use with ssl for interfaces such as nsibadcertlistener.
nsIStandardURL
void init( in unsigned long aurltype, in long adefaultport, in autf8string aspec, in string aorigincharset, in nsiuri abaseuri ); parameters aurltype one of the constants listed above.
nsITaskbarWindowPreview
when made invisible, the window disappears from the list of the application's windows in the taskbar.
nsITimer
void init( in nsiobserver aobserver, in unsigned long adelay, in unsigned long atype ); parameters aobserver a callback object, that is capable listening to timer events.
nsITransaction
see also nsitransactionlist nsitransactionlistener nsitransactionmanager ...
nsITransportSecurityInfo
the possible values are defined in nsiwebprogresslistener.
nsIUpdate
see also nsiupdatepatch nsiupdatechecklistener nsiupdatechecker nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...
nsIUpdatePatch
see also nsiupdate nsiupdatechecklistener nsiupdatechecker nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...
nsIUpdateTimerManager
see also nsiupdate nsiupdatechecklistener nsiupdatechecker nsiupdatepatch nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt ...
nsIWebBrowserChrome
this includes positioning setting up listeners etc.
nsIWebBrowserPersist
progresslistener nsiwebprogresslistener callback listener for progress notifications.
nsIWifiAccessPoint
see also monitoring wifi access points nsiwifimonitor nsiwifilistener ...
nsIWorker
method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); attributes attribute type description onmessage nsidomeventlistener an object to receive notifications when messages are received on the worker's message port.
nsIWorkerGlobalScope
onerror nsidomeventlistener self nsiworkerglobalscope returns the global scope object itself.
nsIXFormsNSModelElement
last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) interface code [scriptable, uuid(85fd60c7-1db7-40c0-ae8d-f723fdd1eea8)] interface nsixformsnsmodelelement : nsisupports { nsidomnodelist getinstancedocuments(); }; methods getinstancedocuments nsidomnodelist getinstancedocuments(); getinstancedocuments returns a nsidomnodelist containing all the instance documents for the model, making it possible to enumerate over instances in the model without knowing their names.
nsIXMLHttpRequestUpload
1.0 66 introduced gecko 1.9.1 inherits from: nsidomeventtarget last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description onabort nsidomeventlistener onerror nsidomeventlistener onload nsidomeventlistener onloadstart nsidomeventlistener onprogress nsidomeventlistener see also nsixmlhttprequest nsixmlhttprequesteventtarget xmlhttprequest using xmlhttprequest ...
nsIXULBrowserWindow
note: the xulbrowserwindow object offered to javascript code provides a great many more methods and attributes than those listed here, which are only the ones available to c++ code.
nsMsgFilterFileAttribValue
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilterlist.idl const nsmsgfilterfileattribvalue attribnone = 0; const nsmsgfilterfileattribvalue attribversion = 1; const nsmsgfilterfileattribvalue attriblogging = 2; const nsmsgfilterfileattribvalue attribname = 3; const nsmsgfilterfileattribvalue attribenabled = 4; const nsmsgfilterfileattribvalue attribdescription = 5; const nsmsgfilterfileattribvalue attribtype = 6; const nsmsgfilterfileattribvalue attribscriptfile = 7; const nsmsgfilterfileattribvalue attribaction = 8; const nsmsgfilterfileattribvalue attribactionvalue = 9; const nsmsgfilterfileattribvalue attribcondition = 10; const nsmsgfilterfileattribvalue attribcustomid = 11; ...
nsMsgFolderFlagType
* (note that directories may have zero children.) */ const nsmsgfolderflagtype directory = 0x00000008; /** whether the children of this folder are currently hidden in the listing.
nsMsgSearchAttrib
nst nsmsgsearchattribvalue date = 3; const nsmsgsearchattribvalue priority = 4; /* mail only */ const nsmsgsearchattribvalue msgstatus = 5; const nsmsgsearchattribvalue to = 6; const nsmsgsearchattribvalue cc = 7; const nsmsgsearchattribvalue toorcc = 8; const nsmsgsearchattribvalue alladdresses = 9; const nsmsgsearchattribvalue location = 10; /* result list only */ const nsmsgsearchattribvalue messagekey = 11; /* message result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 13; /* for "view thread context" from result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchattribvalue anytext = 15; const nsmsgsearchattribvalue keywords = 16; // keywords ...
Getting Started Guide
the following lists are good starting point, but by no means complete.
Reference Manual
you're more likely to see it in a form like this nscomptr<nsifoo> foo( do_queryinterface(alist->elementat(i)) ); // |elementat|, like all good getters, |addrefs| it's result // which would be dropped on the floor, after querying it for the needed // interface bugzilla bug 8221 is specifically about finding and fixing this particular kind of leak.
Working with Multiple Versions of Interfaces
the realist's solution to make sure we call the right methods of the right interfaces we need to have two versions of both the nsiaccessibledocument and nsiaccessibleretrieval interfaces at our fingertips.
XPCOM ABI
note: platforms this is not an exhaustive list of possible cpu architectures and compiler abis.
XPCOM tasks
5.1 3rd party code that doesn't use any services from our tree should be below xpcom; particularly, code xpcom could exploit, e.g., expat berkeley db changes to apis, functionality, and implementations the following items are listed (very) roughly in their order of importance, i.e., fixing observers is the first thing i want to do.
xptcall FAQ
the growing list: porting status where can i find other resources?
Xptcall Porting Status
just because these people are listed here does not mean that they have commited themselves to do the work.
XPCOM
join the xpcom community choose your preferred method for joining the discussion: mailing list newsgroup rss feed irc: #developers (learn more)tools: javascript component wizard, visual c++ component wizard, visual c++ component wizard for visual studio 2010, xpcomviewer addon: browse xpcom interfaces easily ...
Account Provisioner
the account provisioner gives the user the chance to search for and order a vanity email account from a list of partner providers.
nsIMsgCloudFileProvider
if awithui is false, and the credentials are stale, the onstoprequest of the acallback nsirequestlistener will get the autherr status code passed to it.
LDAP Support
mail compose typedown in mail compose, when typing a partial mail address, a typedown window appears listing possible matches against address books and ldap directories.
MailNews Filters
for new incoming messages, the protocol specific object that handles new messages calls nsimsgfilterlist::applyfilterstohdr and passes itself in as nsimsgfilterhitnotify interface to handle filter hits.
Mail client architecture overview
address book - the address book contains lists of people and all attributes associated with them such as their e-mail address, phone number, etc.
Spam filtering
white listing happens after filters, but before spam detection.
Thunderbird Configuration Files
this will display a list of used preferences, as well as a search bar at the top.
Finding the code for a feature
here is my (edited) response: nsimsgtagservice is used to store the list of valid tags, so it is not the correct way to tag messages.
Access Window
check if the window is a tab or the root window window.addeventlistener("load", function(e) { alert("is root?: " + isroot()); }, false); function isroot() { if(window != window.top) return "false"; else return "true"; } the example above tells you if the window object is a reference of the application window or of one of it is a tabs.
Add Toolbar Button
ript type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Detect Opening Folder
to do this you need to capture the select event of the folder [[xul:tree|tree]] whose id is (conveniently) foldertree like so: window.document.getelementbyid('foldertree').addeventlistener("select", testcolumns, false); ...
Use SQLite
} this.dbconnection = dbconnection; }, _dbcreate: function(adbservice, adbfile) { var dbconnection = adbservice.opendatabase(adbfile); this._dbcreatetables(dbconnection); return dbconnection; }, _dbcreatetables: function(adbconnection) { for(var name in this.dbschema.tables) adbconnection.createtable(name, this.dbschema.tables[name]); }, }; window.addeventlistener("load", function(e) { tbirdsqlite.onload(e); }, false); this is another practical sample on how to handle opendatabase and sql queries on the client side, using in-memory (blob) storage of 2mb: var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executesql('create table if not exists logs (id unique, log)'); tx.executesql('insert ...
Thunderbird developer reference docs
folder classes db views (message list) message summary database mailnews protocols mailnews filters ...
Thunderbird
community thunderbird product home page thunderbird project community pages user support is handled at mozilla support development discussion happens on the tb-planning mailing list: subscribe archives add-on developers forum/mailing list mozillazine forums mozilla messaging web page #thunderbird on irc.mozilla.org (for users) #maildev on irc.mozilla.org (for developers) a list of all thunderbird communication channels ...
Using JS in Mozilla code
however, there are a few exceptions, listed here.
Using popup notifications
you can use this to style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", ...
Virtualenv
the populate_virtualenv.py script, when invoked, installs a list of packages, http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/packages.txt , into the virtualenv via one of various methods.
Working with windows in chrome code
the third, and optional, parameter is a list of special window features the window should have.
Using Objective-C from js-ctypes
objc_msgsend function, receives the instance which receives the message, the selector, and variable argument list for the message, returning the returned value from the method.
Memory Management
this is not an exhaustive list, but will help you to understand memory management and how it affects your use of js-ctypes: a function or static data declared using the declare() method will hold that library alive.
Working with data
using arrays of non-pointers if a function expects an argument that is a pointer to a list of elements, this is how it is accomplished: var myarraytype = ctypes.char.array(5); var myarray = myarraytype(); var somecfunction = library.declare("somecfunction", ctypes.default_abi, ctypes.void_t, ctypes.char.array() /*same as ctypes.char.ptr*/); somecfunction(myarray); second example: var mystruct = ctypes.structtype('foo', [{bar: ctypes.bool}]); var mystructarraytype = mystruct.array(...
Using js-ctypes
the current working directory the directories listed in the path environment variable.
CType
there are several kinds of types: primitive types these are typical unstructured data, such as the predefined types listed in predefined data types.
StructType
a complete field descriptor list might look like this: [ {'serialnumber': ctypes.int}, {'username': ctypes.char.ptr} ] properties property type description fields ctype[] a sealed array of field descriptors.
js-ctypes
mailing list newsgroup rss feed stackoverflow - jsctypes related topics xpcom in gecko 2 - binary components ...
URLs - Plugins
in addition, gecko may support urls not listed on this table.
Plugin Roadmap for Firefox - Plugins
in order to improve security and performance, mozilla will maintain a list of sites which cannot use any plugins.
Plugins
plugin blocking by domain in order to improve security and performance for firefox users, firefox maintains a list of sites that are not able to use plugins.
Preferences System
example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(url, "preferences", features); bugzilla the component for bugs in the preferences bindings (but not in firefox/thunderbird options ui) is toolkit:preferences (file a bug list open bugs) ...
3D view - Firefox Developer Tools
see the blocklisted drivers page for more information.
Color vision simulation - Firefox Developer Tools
in the simulate menu, you can choose one option at a time from the following list: none — choose this to return to normal display protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss these simulations are not completely medically accurate.
The Web Developer Menu - Firefox Developer Tools
on os x and linux, it's under the "tools" menu: on windows 7, it's under the "firefox" menu: you'll see that the menu is split into three sections: the first section lists tools that are hosted in the toolbox, which is a dedicated window for developer tools the second section lists integrated tools that are not hosted in the toolbox, as well as any tools installed as add-ons (you'll see in the windows screenshot above that i've installed the firefox os simulator) the third section, "get more tools", is a link to more web development add-ons for firefox ...
DOM Inspector internals - Firefox Developer Tools
at the top of each panel is a toolbar which contains a menu button allowing you to choose which viewer to display from the viewer list, a label displaying the name of the currently active viewer, and another menu button allowing you to issue viewer-specific commands.
DOM Inspector - Firefox Developer Tools
to find out who knows dom inspector code and where it lives, see the dom inspector module listing.
Inspecting web app manifests - Firefox Developer Tools
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.
DOM Property Viewer - Firefox Developer Tools
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.
Breaking on exceptions - Firefox Developer Tools
to instruct the debugger to pause on an exception, tick these checkboxes in the breakpoints list: pause on exceptions pause on caught exceptions when an exception occurs, the line where it occurs is highlighted in the source pane, with a squiggly red line under the problematic code.
Disable breakpoints - Firefox Developer Tools
to disable a single breakpoint, uncheck the checkbox next to it in the breakpoints list.
Highlight and inspect DOM nodes - Firefox Developer Tools
also, when you view the details of a dom node in the code panel, objects that you can highlight in the list will also have a target next to them.
Ignore a source - Firefox Developer Tools
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).
Set a breakpoint - Firefox Developer Tools
when you first choose to set a conditional breakpoint, a text entry line will appear into which you add the condition you want it to break on: once you've entered your condition and pressed enter/return, the line number will be highlighted in orange: breakpoints list once you've set some breakpoints, the breakpoints list in the right-hand column shows the filename and line number for each one: unsetting a breakpoint once a breakpoint has been set, you can unset it again in various ways: click on the line number highlight.
Set a conditional breakpoint - Firefox Developer Tools
this makes it possible to debug specific scenarios, such as bugs that only happen on odd entries in a list, or errors that occur the last time through a loop, for example.
Use a source map - Firefox Developer Tools
the compiled source contains a comment like this, that points to a source map: //# sourcemappingurl=main.js.map in the debugger's source list pane, the original coffeescript source now appears as "main.coffee", and we can debug it just like any other source.
Set a logpoint - Firefox Developer Tools
you can view the list of logpoints in the breakpoints side panel.
The Firefox JavaScript Debugger - Firefox Developer Tools
there are multiple ways to tell the debugger how and when to pause: set a breakpoint set a conditional breakpoint set an xhr breakpoint set event listener breakpoints break on exceptions use watchpoints for property reads and writes break on dom mutation disable breakpoints control execution what can you do after execution pauses?
DOM allocation example - Firefox Developer Tools
it just contains a script that creates a large number of dom nodes: var toolbarbuttoncount = 20; var toolbarcount = 200; function getrandomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("div"); // stop spidermonkey from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolbarbutton = createtoolbarbutton(); ...
Dominators view - Firefox Developer Tools
dominators ui to see the dominators view for a snapshot, select "dominators" in the "view" drop-down list.
Monster example - Firefox Developer Tools
(var i = 0; i &lt; monster_count; i++) { monsters.friendly.push(new monster()); } for (var i = 0; i &lt; monster_count; i++) { monsters.fierce.push(new monster()); } for (var i = 0; i &lt; monster_count; i++) { monsters.undecided.push(new monster()); } console.log(monsters); } var makemonstersbutton = document.getelementbyid("make-monsters"); makemonstersbutton.addeventlistener("click", makemonsters); the page contains a button: when you push the button, the code creates some monsters.
Network monitor recording - Firefox Developer Tools
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
ui overview the ui is divided into four main pieces: the main screen contains the toolbar, the network request list, and the network request details pane: the performance analysis view is a separate screen: working with the network monitor the following articles cover different aspects of using the network monitor: toolbar network request list network request details network traffic recording performance analysis throttling ...
Select an element - Firefox Developer Tools
ghlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with 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.
Select and highlight elements - Firefox Developer Tools
ghlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with 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.
Animation inspector example: CSS transitions - Firefox Developer Tools
,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", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...
Animation inspector example: Web Animations API - Firefox Developer Tools
set, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } if (e.target.id != "icon") { return; } if (firsttime) { iconanimation.play(); noteanimation.play(); firsttime = false; } else { iconanimation.reverse(); noteanimation.reverse(); } } document.addeventlistener("click", animatechannel); ...
How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...
Page Inspector - Firefox Developer Tools
how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...
Call Tree - Firefox Developer Tools
for example, we can expand the entry for bubblesort(): so we can see the call graph is like this: sortall() -> sort() -> bubblesort() note also that self cost for sort() here is 1.45%, and note that this is the same as for the separate entry for sort() later in the list.
Examples - Firefox Developer Tools
list of demo pages for performance scenarios and walkthroughs.
UI Tour - Firefox Developer Tools
access the settings popup recordings pane the recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.
Waterfall - Firefox Developer Tools
for example, consider code like this: var timerbutton = document.getelementbyid("timer"); timerbutton.addeventlistener("click", handleclick, false); function handleclick() { console.time("timer"); runtimer(1000).then(timerfinished); } function timerfinished() { console.timeend("timer"); console.log("ready!"); } function runtimer(t) { return new promise(function(resolve) { settimeout(resolve, t); }); } the waterfall will display a marker for the period between time() and timeend(), and if y...
Debugging Firefox Desktop - Firefox Developer Tools
run the debuggee from the command line, passing it the --start-debugger-server option: /path/to/firefox --start-debugger-server passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000.
Cache Storage - Firefox Developer Tools
if you select a cache, you'll see a list of the resources it contains.
Cookies - Firefox Developer Tools
when you select an origin inside the cookies storage type from the storage tree, all the cookies present for that origin will be listed in a table.
Extension Storage - Firefox Developer Tools
when selecting an extension id in the storage tree of the storage inspector, a table lists the details of all the extension storage present for the extension.
Local Storage / Session Storage - Firefox Developer Tools
when an origin corresponding to local storage or session storage is selected within the storage inspector, the names and values of all the items corresponding to local storage or session storage will be listed in a table.
Tips - Firefox Developer Tools
click the "ev" icon besides a node to see all event listeners attached to it.
Toolbox - Firefox Developer Tools
the array may include the following tools: web console javascript debugger page inspector style editor profiler network monitor note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging target is not the firefox instance that launched the window, not all the hosted tools will be shown).
Validators - Firefox Developer Tools
this document lists different resources for developers to validate web pages.
Web Audio Editor - Firefox Developer Tools
this list the values of that node's audioparam properties.
Firefox Developer Tools
click it to display a list of the iframes on the current page and select the one with which you want to work.
AbortSignal: abort event - Web APIs
you can use the abort event in an addeventlistener method: var controller = new abortcontroller(); var signal = controller.signal; signal.addeventlistener('abort', function() { console.log('request aborted'); }; or use the onabort event handler property: var controller = new abortcontroller(); var signal = controller.signal; signal.onabort = function() { console.log('request aborted'); }; specifications specification st...
AbstractWorker - Web APIs
event handlers abstractworker.onerror an eventlistener which is invoked whenever an errorevent of type error bubbles through the worker.
Accelerometer.x - Web APIs
WebAPIAccelerometerx
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer.y - Web APIs
WebAPIAccelerometery
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer.z - Web APIs
WebAPIAccelerometerz
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer - Web APIs
let acl = new accelerometer({frequency: 60}); acl.addeventlistener('reading', () => { console.log("acceleration along the x-axis " + acl.x); console.log("acceleration along the y-axis " + acl.y); console.log("acceleration along the z-axis " + acl.z); }); acl.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Animation.commitStyles() - Web APIs
examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification.
Animation.finish() - Web APIs
WebAPIAnimationfinish
interfaceelement.addeventlistener("mousedown", function() { try { player.finish(); } catch(e if e instanceof invalidstate) { console.log("finish() called on paused or finished animation."); } catch(e); logmyerrors(e); //pass exception object to error handler } }); the following example finishes all the animations on a single element, regardless of their direction of playback.
Animation.pause() - Web APIs
WebAPIAnimationpause
cake.addeventlistener("mouseup", stopplayingalice, false); bottle.addeventlistener("mouseup", stopplayingalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.startTime - Web APIs
*/ function addcat(){ var newcat = document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(keyframes, timing); // set the animation's start time to be the same as the original .cat#withwaapi newanimationplaye...
Animation.updatePlaybackRate() - Web APIs
examples a speed selector component would benefit from smooth updating of updateplaybackrate(), as demonstrated below: speedselector.addeventlistener('input', evt => { cartoon.updateplaybackrate(parsefloat(evt.target.value)); cartoon.ready.then(() => { console.log(`playback rate set to ${cartoon.playbackrate}`); }); }); specifications specification status comment web animationsthe definition of 'updateplaybackrate()' in that specification.
Attr.localName - Web APIs
WebAPIAttrlocalName
html content <button id="example">click me</button> javascript content const element = document.queryselector("#example"); element.addeventlistener("click", function() { const attribute = element.attributes[0]; alert(attribute.localname); }); notes the local name of an attribute is the part of the attribute's qualified name that comes after the colon.
AudioContext.createMediaStreamDestination() - Web APIs
e </p> <button>make sine wave</button> <audio controls></audio> <script> var b = document.queryselector("button"); var clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.start(0); e.target.innerhtml = "stop recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (...
AudioContext.getOutputTimestamp() - Web APIs
play.addeventlistener('click', () => { if(!audioctx) { audioctx = new window.audiocontext(); } getdata(); source.start(0); play.setattribute('disabled', 'disabled'); raf = requestanimationframe(outputtimestamps); }); stop.addeventlistener('click', () => { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimes...
AudioNode - Web APIs
WebAPIAudioNode
for a list of all audio nodes, see the web audio api homepage.
AudioParam.setTargetAtTime() - Web APIs
you don't have to worry about reaching the target value; once you are close enough, any further changes will be imperceptible to a human listener.
AudioParam.setValueCurveAtTime() - Web APIs
the setvaluecurveattime() method of the audioparam interface schedules the parameter's value to change following a curve defined by a list of values.
AudioProcessingEvent - Web APIs
properties the list below includes the properties inherited from its parent, event.
AudioScheduledSourceNode: ended event - Web APIs
examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing: node.addeventlistener('ended', () => { document.getelementbyid("startbutton").disabled = false; }) you can also set up the event handler using the audioscheduledsourcenode.onended property: node.onended = function() { document.getelementbyid("startbutton").disabled = false; } fo...
AudioScheduledSourceNode.onended - Web APIs
examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing.
AudioScheduledSourceNode - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended fired when the source node has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played.
AudioTrack.kind - Web APIs
WebAPIAudioTrackkind
see audio track kind strings for a list of the kinds available for audio tracks.
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
the property is not a part of the audioworkletprocessor interface, but, if defined, it is called internally by the audioworkletprocessor constructor to create a list of custom audioparam objects in the parameters property of the associated audioworkletnode.
AuthenticatorResponse - Web APIs
interfaces based on authenticatorresponse below is a list of interfaces based on the authenticatorresponse interface.
BaseAudioContext - Web APIs
baseaudiocontext.listener read only returns the audiolistener object, used for 3d spatialization.
BatteryManager.onchargingchange - Web APIs
specifies an event listener to receive chargingchange events.
BatteryManager.onchargingtimechange - Web APIs
specifies an event listener to receive chargingtimechange events.
BatteryManager.ondischargingtimechange - Web APIs
specifies an event listener to receive dischargingtimechange events.
BatteryManager.onlevelchange - Web APIs
the batterymanager.onlevelchange property specifies an event listener to receive levelchange events.
BeforeInstallPromptEvent.prompt() - Web APIs
example var istoosoon = true; window.addeventlistener("beforeinstallprompt", function(e) { if (istoosoon) { e.preventdefault(); // prevents prompt display // prompt later instead: settimeout(function() { istoosoon = false; e.prompt(); // throws if called more than once or default not prevented }, 10000); } // the event was re-dispatched in response to our request // ...
BeforeInstallPromptEvent - Web APIs
example window.addeventlistener("beforeinstallprompt", function(e) { // log the platforms provided as options in an install prompt console.log(e.platforms); // e.g., ["web", "android", "windows"] e.userchoice.then(function(choiceresult) { console.log(choiceresult.outcome); // either "accepted" or "dismissed" }, handleerror); }); ...
BiquadFilterNode - Web APIs
the meaning of the different parameters depending of the type of the filter (detune has the same meaning regardless, so isn't listed below) type description frequency q gain lowpass standard second-order resonant lowpass filter with 12db/octave rolloff.
Blob.size - Web APIs
WebAPIBlobsize
// fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { console.log(files[i].name + " has a size of " + files[i].size + " bytes"); } specifications specification status comment file apithe definition of 'blob.size' in that specification.
Blob.type - Web APIs
WebAPIBlobtype
var i, fileinput, files, allowedfiletypes; // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) files = fileinput.files; // our application only allows gif, png, and jpeg images allowedfiletypes = ["image/png", "image/jpeg", "image/gif"]; for (i = 0; i < files.length; i++) { // test if file.type is an allowed file type.
BluetoothCharacteristicProperties - Web APIs
let device = await navigator.bluetooth.requestdevice({ filters: [{services: ['heart_rate']}] }); let gatt = await device.gatt.connect(); let service = await gatt.getprimaryservice('heart_rate'); let characteristic = await service.getcharacteristic('heart_rate_measurement'); if (characteristic.properties.notify) { characteristics.addeventlistener('characteristicvaluechanged', function(event) { console.log(`received heart rate measurement: ${event.target.value}`); } await characteristic.startnotifications(); } specifications specification status comment web bluetooththe definition of 'bluetoothcharacteristicproperties' in that specification.
BluetoothDevice.uuids - Web APIs
the bluetoothdevice.uuids read-only property lists the uuids of gatt services provided by the device, that the current origin is allowed to access.
BluetoothDevice - Web APIs
bluetoothdevice.uuids read only lists the uuid's of gatt services provided by the device, that the current origin is allowed to access.
BluetoothRemoteGATTServer - Web APIs
bluetoothremotegattserver.getprimaryservices() returns a promise to a list of primary bluetoothgattservice objects offered by the bluetooth device for a specified bluetoothserviceuuid.
getCharacteristics() - Web APIs
the bluetoothgattservice.getcharacteristics() method returns a promise to a list of bluetoothgattcharacteristic instances for a given universally unique identifier (uuid).
BluetoothRemoteGATTService - Web APIs
the bluetoothremotegattservice interface of the web bluetooth api represents a service provided by a gatt server, including a device, a list of referenced services, and a list of the characteristics of this service.
BroadcastChannel: messageerror event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessageerror examples this code uses addeventlistener to listen for messages and errors: const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); channel.addeventlistener('messageerror', (event) => { console.error(event); }); the same, but using the onmessage and onmessageerror event handler properties: const channel = new broadcastchannel('example-channel'); channel.onmessage = (event) => { received.textcontent = event.data; }; channel.onme...
BroadcastChannel.onmessageerror - Web APIs
the onmessageerror event handler of the broadcastchannel interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the broadcastchannel instance — that is, when it receives a message that cannot be deserialized.
BroadcastChannel.postMessage() - Web APIs
the broadcastchannel.postmessage() sends a message, which can be of any kind of object, to each listener in any browsing context with the same origin.
CSSImageValue - Web APIs
the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
CSSKeyframesRule - Web APIs
csskeyframesrule.cssrules read only returns a cssrulelist of the css rules in the media rule.
CSSMathValue - Web APIs
interfaces based on cssmathvalue below is a list of interfaces based on the cssmathvalue interface.
CSSNumericValue.sub() - Web APIs
examples let mathsum = css.px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment css typed om level 1the definition of 'sub' in that specification.
CSSNumericValue.sum() - Web APIs
examples let mathsum = css.px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment css typed om level 1the definition of 'sub' in that specification.
CSSNumericValue - Web APIs
interfaces based on cssnumericvalue below is a list of interfaces based on the cssnumericvalue interface.
CSSStyleDeclaration.item() - Web APIs
javascript has a special simpler syntax for obtaining an item from a nodelist by index: var propertyname = style[index]; example var style = document.getelementbyid('div1').style; var propertyname = style.item(1); // or simply style[1] - returns the second style listed specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.item()' in that specification.
CSSStyleDeclaration.setProperty() - Web APIs
rder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.setproperty()' in that specification.
CSSStyleDeclaration - Web APIs
an alternative to accessing nodelist[i] (which instead returns undefined when i is out-of-bounds).
CSSStyleSheet.deleteRule() - Web APIs
syntax cssstylesheet.deleterule(index) parameters index the index into the stylesheet's cssrulelist indicating the rule to be removed.
CSSStyleSheet.ownerRule - Web APIs
let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (!rule.ownerrule) { /* rule is not imported */ } } this snipped obtains a reference to the stylesheet associated with the @import and processes it in some manner: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (rule.ownerrule) { checkstylesheet(rule.ownerrule.stylesheet); } }...
CSSStyleSheet.removeRule() - Web APIs
syntax cssstylesheet.removerule(index) parameters index the index into the stylesheet's cssrulelist indicating the rule to be removed.
CSSStyleValue - Web APIs
interfaces based on cssstylevalue below is a list of interfaces based on the cssstylevalue interface.
CSSUnparsedValue - Web APIs
it consists of a list of string fragments and variable references.
CSSValue.cssValueType - Web APIs
css_value_list the value is a cssvalue list and an instance of the cssvaluelist interface can be obtained by using binding-specific casting methods on this instance of the cssvalue interface.
CSSValue - Web APIs
WebAPICSSValue
css_value_list the value is a cssvalue list and an instance of the cssvaluelist interface can be obtained by using binding-specific casting methods on this instance of the cssvalue interface.
CSS Counter Styles - Web APIs
the css counter styles module allows to define custom counter styles, which can be used for css list-marker and generated-content counters.
Using dynamic styling information - Web APIs
</body> </html> the list of properties available in the dom from the style property is given on the dom css properties list page.
Cache.add() - Web APIs
WebAPICacheadd
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add('/sw-test/index.html'); }) ); }); specifications specification status comment service workersthe definition of 'cache: add' in that specification.
Cache.addAll() - Web APIs
WebAPICacheaddAll
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test...
Cache.match() - Web APIs
WebAPICachematch
self.addeventlistener('fetch', function(event) { // we only want to call event.respondwith() if this is a get request for an html document.
CacheStorage.delete() - Web APIs
this.addeventlistener('activate', function(event) { var cachestokeep = ['v2']; event.waituntil( caches.keys().then(function(keylist) { return promise.all(keylist.map(function(key) { if (cachestokeep.indexof(key) === -1) { return caches.delete(key); } })); }) ); }); specifications specification status comment service workersthe definitio...
CacheStorage.has() - Web APIs
WebAPICacheStoragehas
if so, we add a list of assets to it.
CacheStorage.match() - Web APIs
self.addeventlistener('fetch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value if (response !== undefined) { return response; } else { return fetch(event.request).then(function (response) { // response may be used only once // we need to save c...
CacheStorage.open() - Web APIs
WebAPICacheStorageopen
self.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', ...
CanvasPattern.setTransform() - Web APIs
var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specification status comment html living standardthe definition of 'canvaspattern.settransform' in that specification.
CanvasRenderingContext2D.beginPath() - Web APIs
the canvasrenderingcontext2d.beginpath() method of the canvas 2d api starts a new path by emptying the list of sub-paths.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 = document.getelementbyid('button1'); const button2 = document.getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2, 20, 80); } function handleclick(e) { // calculate click coordinates const x = e.clientx - canvas.offsetleft; const y = e.clie...
CanvasRenderingContext2D.drawImage() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 104, 124, 21, 20, 87, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.isPointInPath() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circle const circle = new path2d(); circle.arc(150, 75, 50, 0, 2 * math.pi); ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification ...
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150, 75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linewidth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); result ...
CanvasRenderingContext2D.miterLimit - Web APIs
100); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.miterli...
CanvasRenderingContext2D.save() - Web APIs
the current dash list.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
crollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that ...
A basic ray-caster - Web APIs
=) the ray-caster the nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment i've posted the individual file contents as code listings (see below).
Applying styles and colors - Web APIs
the setlinedash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the linedashoffset property sets an offset where to start the pattern.
Drawing text - Web APIs
llo world", 0, 100);</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); advanced text measurements in the case you need to obtain more details about the text, the following method allows you to measure it.
Hit regions and accessibility - Web APIs
<canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: 'circle'}); canvas.addeventlistener('mousemove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.addhitregion({control: element}); this can be useful for routing to <input> elements, for example.
Using images - Web APIs
so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.addeventlistener('load', function() { // execute drawimage statements here }, false); img.src = 'myimage.png'; // set source path if you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever.
Canvas API - Web APIs
the libraries listed below can make the creation of canvas-based projects faster and easier.
ChannelMergerNode - Web APIs
in that case, when the signal is sent to the audiocontext.listener object, supernumerary channels will be ignored.
ChildNode.after() - Web APIs
WebAPIChildNodeafter
the childnode.after() method inserts a set of node or domstring objects in the children list of this childnode's parent, just after this childnode.
ChildNode.before() - Web APIs
WebAPIChildNodebefore
the childnode.before() method inserts a set of node or domstring objects in the children list of this childnode's parent, just before this childnode.
ChildNode.replaceWith() - Web APIs
the childnode.replacewith() method replaces this childnode in the children list of its parent with a set of node or domstring objects.
Client.type - Web APIs
WebAPIClienttype
a document) function sendmessage(message) { return new promise(function(resolve, reject) { // note that this is the serviceworker.postmessage version navigator.serviceworker.controller.postmessage(message); window.serviceworker.onmessage = function(e) { resolve(e.data); }; }); } // controlling service worker self.addeventlistener("message", function(e) { // e.source is a client object e.source.postmessage("hello!
Client.url - Web APIs
WebAPIClienturl
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: 'window' }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status co...
Clients.openWindow() - Web APIs
examples // send notification to os if applicable if (self.notification.permission === 'granted') { const notificationobject = { body: 'click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registration.shownotification('you\'ve got messages!', notificationobject); } // notification click event listener self.addeventlistener('notificationclick', e => { // close the notification popout e.notification.close(); // get all the window clients e.waituntil(clients.matchall({ type: 'window' }).then(clientsarr => { // if a window tab matching the targeted url already exists, focus that; const hadwindowtofocus = clientsarr.some(windowclient => windowclient.url === e.notification.data.u...
Clients - Web APIs
WebAPIClients
addeventlistener('notificationclick', event => { event.waituntil(async function() { const allclients = await clients.matchall({ includeuncontrolled: true }); let chatclient; // let's see if we already have a chat window open: for (const client of allclients) { const url = new url(client.url); if (url.pathname == '/chat/') { // excellent, let's use it!
CloseEvent - Web APIs
this is delivered to the listener indicated by the websocket object's onclose attribute.
Console.dirxml() - Web APIs
WebAPIConsoledirxml
the output is presented as a hierarchical listing of expandable nodes that let you see the contents of child nodes.
Console.table() - Web APIs
WebAPIConsoletable
// an object whose properties are objects var family = {}; family.mother = new person("jane", "smith"); family.father = new person("john", "smith"); family.daughter = new person("emily", "smith"); console.table(family); restricting the columns displayed by default, console.table() lists all elements in each row.
Credential Management API - Web APIs
this is sometimes referred to as public suffix list (psl) matching; however the spec only recommends using psl to determine the effective scope of a credential.
CustomEvent() - Web APIs
example // add an appropriate event listener obj.addeventlistener("cat", function(e) { process(e.detail) }); // create and dispatch the event var event = new customevent("cat", { detail: { hazcheeseburger: true } }); obj.dispatchevent(event); additional examples can be found at creating and triggering events.
CustomEvent.detail - Web APIs
example // add an appropriate event listener obj.addeventlistener("cat", function(e) { process(e.detail) }); // create and dispatch the event let event = new customevent("cat", { detail: { hazcheeseburger: true } }); obj.dispatchevent(event); // will return an object contaning the hazcheeseburger property let mydetail = event.detail; specifications specification status comment domthe definition of 'detail' in that specification.
DOMConfiguration - Web APIs
cdata-sections", "check-character-normalization", "comments", "datatype-normalization", "element-content-whitespace", "entities", "error-handler", "infoset", "namespaces", "namespace-declarations", "normalize-characters","schema-location", "schema-type", "split-cdata-sections", "validate", "validate-if-schema", "well-formed" properties domconfiguration.parameternames read only is a domstringlist methods domconfiguration.cansetparameter() returns a boolean domconfiguration.getparameter() returns a domuserdata domconfiguration.setparameter() sets a parameter specification http://www.w3.org/tr/dom-level-3-cor...mconfiguration ...
DOMMatrixReadOnly - Web APIs
for a 2d matrix, the elements a through f are listed, for a total of six values and the form matrix(a, b, c, d, e, f).
DataTransfer.dropEffect - Web APIs
on setting, if the new value is one of the values listed below, then the property's current value will be set to the new value and other values will be ignored.
DataTransfer.getData() - Web APIs
example data types are text/plain and text/uri-list.
DataTransfer.mozCursor - Web APIs
syntax datatransfer.mozcursor; return value a domstring representing one of the values listed above.
DataTransfer.mozSetDataAt() - Web APIs
function dragstart_handler(event) { var dt = event.datatransfer; var idx = dt.mozitemcount; // add two new items to the drag transfer if (idx >= 0) { dt.mozsetdataat("text/uri-list","http://www.example.com/", idx); dt.mozsetdataat("text/html", "hello world", idx+1); } } specifications this method is not defined in any web standard.
DataTransfer.types - Web APIs
if the drag operation included no data, this list will be empty.
DataTransferItem.getAsFile() - Web APIs
drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("...
DataTransferItem.getAsString() - Web APIs
drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("...
DataTransferItem.type - Web APIs
drop: html"); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("...
DedicatedWorkerGlobalScope: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples this code creates a new worker and sends it a message using worker.postmessage(): const worker = new worker("static/scripts/worker.js"); worker.addeventlistener('message', (event) => { console.log(`received message from worker: ${event.data}`) }); the worker can listen for this message using addeventlistener(): // inside static/scripts/worker.js self.addeventlistener('message', (event) => { console.log(`received message from parent: ${event.data}`); }); alternatively, it could listen using the onmessage event handler property: // stati...
DedicatedWorkerGlobalScope: messageerror event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessageerror examples listen for messageerror using addeventlistener(): // inside worker.js self.addeventlistener('messageerror', (event) => { self.postmessage('error receiving message'); console.error(event); }); the same, but using the onmessageerror event handler property: // inside worker.js self.onmessageerror = (event) => { self.postmessage('error receiving message'); console.error(event); }; specifications specification status html living standard living standard ...
DedicatedWorkerGlobalScope.onmessageerror - Web APIs
the onmessageerror event handler of the dedicatedworkerglobalscope interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the worker—that is, when it receives a message that cannot be deserialized.
DedicatedWorkerGlobalScope - Web APIs
some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the javascript reference.
DeviceLightEvent - Web APIs
example window.addeventlistener('devicelight', function(event) { console.log(event.value); }); specifications no specification.
DeviceMotionEvent - Web APIs
example window.addeventlistener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); }); specifications specification status comment deviceorientation event specificationthe definition of 'devicemotionevent' in that specification.
DeviceOrientationEvent - Web APIs
example window.addeventlistener('deviceorientation', function(event) { console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma); }); specifications specification status comment deviceorientation event specification editor's draft initial specification.
DeviceProximityEvent - Web APIs
examples window.addeventlistener('deviceproximity', function(event) { console.log("value: " + event.value, "max: " + event.max, "min: " + event.min); }); ...
DisplayMediaStreamConstraints.video - Web APIs
this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track.
Document.caretRangeFromPoint() - Web APIs
tartcontainer; offset = range.startoffset; } // only split text_nodes if (textnode && textnode.nodetype == 3) { let replacement = textnode.splittext(offset); let br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } let paragraphs = document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].addeventlistener('click', insertbreakatpoint, false); } result ...
Document.cookie - Web APIs
WebAPIDocumentcookie
syntax read all cookies accessible from this location allcookies = document.cookie; in the code above allcookies is a string containing a semicolon-separated list of all cookies (i.e.
Document.createDocumentFragment() - Web APIs
you can also use the documentfragment constructor to create a new fragment: let fragment = new documentfragment(); example this example creates a list of major web browsers in a documentfragment, then adds the new dom subtree to the document to be displayed.
Document.createNodeIterator() - Web APIs
its acceptnode() method will be called for each node in the subtree based at root which is accepted as included by the whattoshow flag to determine whether or not to include it in the list of iterable nodes (a simple callback function may also be used instead).
Document.createTouch() - Web APIs
note: previous versions of this method included the following additional parameters but those parameters are not included in either of the standards listed below.
Document.createTreeWalker() - Web APIs
var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var nodelist = []; var currentnode = treewalker.currentnode; while(currentnode) { nodelist.push(currentnode); currentnode = treewalker.nextnode(); } specifications specification status comment domthe definition of 'document.createtreewalker' in that specification.
Document.documentElement - Web APIs
syntax const element = document.documentelement example const rootelement = document.documentelement; const firsttier = rootelement.childnodes; // firsttier is a nodelist of the direct children of the root element // such as <head> and <body> for (const child of firsttier) { // do something with each direct child of the root element } notes for any non-empty html document, documentelement will always be an <html> element.
Document.evaluate() - Web APIs
WebAPIDocumentevaluate
results of node_snapshot types are snapshots, which are essentially lists of matched nodes.
Document.exitPointerLock() - Web APIs
to track the success or failure of the request, it is necessary to listen for the pointerlockchange and pointerlockerror events.
Document: fullscreenchange event - Web APIs
document.addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one.
Document: fullscreenerror event - Web APIs
examples const requestor = document.queryselector('div'); document.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Document.getElementsByClassName() - Web APIs
<html> <body> <div id="parent-id"> <p>hello world 1</p> <p class="test">hello world 2</p> <p>hello world 3</p> <p>hello world 4</p> </div> <script> var parentdom = document.getelementbyid("parent-id"); var test = parentdom.getelementsbyclassname("test"); // a list of matching elements, *not* the element itself console.log(test); //htmlcollection[1] var testtarget = parentdom.getelementsbyclassname("test")[0]; // the first element, as we wanted console.log(testtarget); //<p class="test">hello world 2</p> </script> </body> </html> multiple classes example document.getelementsbyclassname works very similarly to document.querysel...
Document.getElementsByTagName() - Web APIs
the latest w3c specification says elements is an htmlcollection; however, this method returns a nodelist in webkit browsers.
Document.hidden - Web APIs
WebAPIDocumenthidden
syntax var boolean = document.hidden examples document.addeventlistener("visibilitychange", function() { console.log( document.hidden ); // modify behavior...
Document.implementation - Web APIs
a list of module names (e.g., core, html, xml, etc.) is available in the dom level 2 conformance section.
Document.links - Web APIs
WebAPIDocumentlinks
syntax nodelist = document.links value an htmlcollection.
Document.onafterscriptexecute - Web APIs
example function finished(e) { logmessage(`finished script with id: ${e.target.id}`); } document.addeventlistener('afterscriptexecute', finished, true); view live example specification html5 ...
Document.onbeforescriptexecute - Web APIs
example function starting(e) { logmessage("starting script with id: " + e.target.id); } document.addeventlistener("beforescriptexecute", starting, true); view live examples specification html5 ...
Document.ononline - Web APIs
WebAPIDocumentononline
you can register listeners for these events in a few familiar ways: using addeventlistener on the window, document, or document.body by setting the .ononline or .onoffline properties on document or document.body to a javascript function object.
Document.open() - Web APIs
WebAPIDocumentopen
for example: all event listeners currently registered on the document, nodes inside the document, or the document's window are removed.
Document.plugins - Web APIs
WebAPIDocumentplugins
for a list of installed plugins, use navigatorplugins.plugins instead.
Document: pointercancel event - Web APIs
examples using addeventlistener(): document.addeventlistener('pointercancel', (event) => { console.log('pointer event cancelled') }); using the onpointercancel event handler property: document.onpointercancel = (event) => { console.log('pointer event cancelled') }; specifications specification status pointer events obsolete ...
Document: pointerdown event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointerdown examples using addeventlistener(): document.addeventlistener('pointerdown', (event) => { console.log('pointer down event'); }); using the onpointerdown event handler property: document.onpointerdown = (event) => { console.log('pointer down event'); }; specifications specification status pointer events obsolete ...
Document: pointerenter event - Web APIs
bubbles no cancelable no interface pointerevent event handler property onpointerenter examples using addeventlistener(): document.addeventlistener('pointerenter', (event) => { console.log('pointer entered element'); }); using the onpointerenter event handler property: document.onpointerenter = (event) => { console.log('pointer entered element'); }; specifications specification status pointer events obsolete ...
Document: pointerleave event - Web APIs
bubbles no cancelable no interface pointerevent event handler property onpointerleave examples using addeventlistener(): document.addeventlistener('pointerleave', (event) => { console.log('pointer left element'); }); using the onpointerleave event handler property: document.onpointerleave = (event) => { console.log('pointer left element'); }; specifications specification status pointer events obsolete ...
Document: pointerlockchange event - Web APIs
bubbles yes cancelable no interface event event handler property onpointerlockchange examples using addeventlistener(): document.addeventlistener('pointerlockchange', (event) => { console.log('pointer lock changed'); }); using the onpointerlockchange event handler property: document.onpointerlockchange = (event) => { console.log('pointer lock changed'); }; specifications specification status pointer lock candidate recommendation ...
Document: pointerlockerror event - Web APIs
bubbles yes cancelable no interface event event handler property onpointerlockerror examples using addeventlistener(): const para = document.queryselector('p'); document.addeventlistener('pointerlockerror', (event) => { console.log('error locking pointer'); }); using the onpointerlockerror event handler property: document.onpointerlockerror = (event) => { console.log('error locking pointer'); }; specifications specification status pointer lock candidate recommendation ...
Document: pointermove event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointermove examples using addeventlistener(): document.addeventlistener('pointermove', (event) => { console.log('pointer moved'); }); using the onpointermove event handler property: document.onpointermove = (event) => { console.log('pointer moved'); }; specifications specification status pointer events obsolete ...
Document: pointerout event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointerout examples using addeventlistener(): document.addeventlistener('pointerout', (event) => { console.log('pointer moved out'); }); using the onpointerout event handler property: document.onpointerout = (event) => { console.log('pointer moved out'); }; specifications specification status pointer events obsolete ...
Document: pointerover event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointerover examples using addeventlistener(): document.addeventlistener('pointerover', (event) => { console.log('pointer moved in'); }); using the onpointerover event handler property: document.onpointerover = (event) => { console.log('pointer moved in'); }; specifications specification status pointer events obsolete ...
Document: pointerup event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointerup examples using addeventlistener(): document.addeventlistener('pointerup', (event) => { console.log('pointer up'); }); using the onpointerup event handler property: document.onpointerup = (event) => { console.log('pointer up'); }; specifications specification status pointer events obsolete ...
Document.querySelector() - Web APIs
if you need a list of all elements matching the specified selectors, you should use queryselectorall() instead.
Document.readyState - Web APIs
loaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded document.addeventlistener('readystatechange', event => { if (event.target.readystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { initapp(); } }); specifications specification status comment html living standardthe definition of 'document readiness' i...
Document: readystatechange event - Web APIs
as: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domc...
Document.requestStorageAccess() - Web APIs
examples: allow lists, block lists, on-device classification, user settings, anti-clickjacking heuristics, or prompting the user for explicit permission.
Document: scroll event - Web APIs
// reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; function dosomething(scroll_pos) { // do something with the scroll position } window.addeventlistener('scroll', function(e) { last_known_scroll_position = window.scrolly; if (!ticking) { window.requestanimationframe(function() { dosomething(last_known_scroll_position); ticking = false; }); ticking = true; } }); see more, similar examples on the resize event page.
Document: selectionchange event - Web APIs
bubbles no cancelable no interface event event handler property onselectionchange examples // addeventlistener version document.addeventlistener('selectionchange', () => { console.log(document.getselection()); }); // onselectionchange version document.onselectionchange = () => { console.log(document.getselection()); }; specifications specification status comment selection apithe definition of 'selectionchange' in that specification.
Document: selectstart event - Web APIs
bubbles yes cancelable yes interface event event handler property onselectstart examples // addeventlistener version document.addeventlistener('selectstart', () => { console.log('selection started'); }); // onselectstart version document.onselectstart = () => { console.log('selection changed.'); }; specifications specification status comment selection apithe definition of 'selectstart' in that specification.
Document.visibilityState - Web APIs
syntax var string = document.visibilitystate examples document.addeventlistener("visibilitychange", function() { console.log( document.visibilitystate ); // modify behavior...
Document: visibilitychange event - Web APIs
document.addeventlistener("visibilitychange", function() { if (document.visibilitystate === 'visible') { backgroundmusic.play(); } else { backgroundmusic.pause(); } }); specifications specification status comment page visibility (second edition)the definition of 'visibilitychange' in that specification.
Document: wheel event - Web APIs
{ event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: document.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.
DocumentOrShadowRoot.activeElement - Web APIs
ctionstart, activetextarea.selectionend ); const outputelement = document.getelementbyid('output-element'); const outputtext = document.getelementbyid('output-text'); outputelement.innerhtml = activetextarea.id; outputtext.innerhtml = selection; } const textarea1 = document.getelementbyid('ta-example-one'); const textarea2 = document.getelementbyid('ta-example-two'); textarea1.addeventlistener('mouseup', onmouseup, false); textarea2.addeventlistener('mouseup', onmouseup, false); result specifications specification status comment html living standardthe definition of 'activeelement' in that specification.
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
offset = range.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { var replacement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
DocumentOrShadowRoot - Web APIs
documentorshadowroot.stylesheetsread only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.
DocumentType - Web APIs
childnode.remove() removes the object from its parent children list.
Example - Web APIs
<html> <head> <title>my document</title> <script type="text/javascript"> function change() { // document.getelementsbytagname("h1") returns a nodelist of the h1 // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h1").item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
Using the W3C DOM Level 1 Core - Web APIs
the following script would do the job: html content <body> <input type="button" value="change this document." onclick="change()"> <h2>header</h2> <p>paragraph</p> </body> javascript content function change() { // document.getelementsbytagname("h2") returns a nodelist of the <h2> // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h2").item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
DragEvent.dataTransfer - Web APIs
} dragtarget.addeventlistener("dragend", function(ev) { // call the drag and drop data processor if (ev.datatransfer !== null) processdata(ev.datatransfer); }, false); specifications specification status comment html living standardthe definition of 'dragevent.datatransfer' in that specification.
Element: MSGestureTap event - Web APIs
typically, it's preferable to listen for the click event instead.
Element: MSManipulationStateChanged event - Web APIs
examples // listen for panning state change events outerscroller.addeventlistener("msmanipulationstatechanged", function(e) { // check to see if they lifted while pulled to the top if (e.currentstate == ms_manipulation_state_inertia && outerscroller.scrolltop === 0) { refreshitemsasync(); } }); specifications not part of any specification.
Element.attachShadow() - Web APIs
the following is a list of elements you can attach a shadow root to: any autonomous custom element with a valid name <article> <aside> <blockquote> <body> <div> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <header> <main> <nav> <p> <section> <span> syntax var shadowroot = element.attachshadow(shadowrootinit); parameters shadowrootinit a shadowrootinit dictionary, which can contain the following fields: mode a string specifying the...
Element: auxclick event - Web APIs
when listening for auxclick events originating on elements that do not support input or navigation, you will often want to explicitly prevent other default actions mapped to the down action of the middle mouse button.
Element: contextmenu event - Web APIs
html <p id="nocontextmenu">the context menu has been disabled on this paragraph.</p> <p>but it has not been disabled on this one.</p> javascript nocontext = document.getelementbyid('nocontextmenu'); nocontext.addeventlistener('contextmenu', e => { e.preventdefault(); }); result specifications specification status comment html living standardthe definition of 'contextmenu' in that specification.
Element: copy event - Web APIs
le html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element: cut event - Web APIs
WebAPIElementcut event
le html <div class="source" contenteditable="true">try cutting text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); selection.deletefromdocument(); event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element: dblclick event - Web APIs
javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications ...
Element: error event - Web APIs
ntrol; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const imgerror = document.queryselector('#img-error'); imgerror.addeventlistener('click', () => { badimg.setattribute('src', 'i-dont-exist'); }); result specifications specification status ui events working draft ...
Element: focusin event - Web APIs
es yes cancelable no interface focusevent event handler property onfocusin sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
Element: focusout event - Web APIs
s yes cancelable no interface focusevent event handler property onfocusout sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
Element: fullscreenerror event - Web APIs
examples const requestor = document.queryselector('div'); requestor.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Element.getAttribute() - Web APIs
non-existing attributes essentially all web browsers (firefox, internet explorer, recent versions of opera, safari, konqueror, and icab, as a non-exhaustive list) return null when the specified attribute does not exist on the specified element; this is what the current dom specification draft specifies.
Element.getElementsByTagNameNS() - Web APIs
living standard changed the return value from nodelist to htmlcollection.
Element.innerHTML - Web APIs
WebAPIElementinnerHTML
useevent based events (such as mousedown, click, and mouseenter): function logevent(event) { var msg = "event <strong>" + event.type + "</strong> at <em>" + event.clientx + ", " + event.clienty + "</em>"; log(msg); } then we use this as the event handler for a number of mouse events on the box that contains our log: var boxelem = document.queryselector(".box"); boxelem.addeventlistener("mousedown", logevent); boxelem.addeventlistener("mouseup", logevent); boxelem.addeventlistener("click", logevent); boxelem.addeventlistener("mouseenter", logevent); boxelem.addeventlistener("mouseleave", logevent); html the html is quite simple for our example.
Element.insertAdjacentText() - Web APIs
example beforebtn.addeventlistener('click', function() { para.insertadjacenttext('afterbegin',textinput.value); }); afterbtn.addeventlistener('click', function() { para.insertadjacenttext('beforeend',textinput.value); }); have a look at our insertadjacenttext.html demo on github (see the source code too.) here we have a simple paragraph.
Element: mousedown event - Web APIs
// add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(...
Element: mousemove event - Web APIs
// add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(...
Element: mouseover event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( ev...
Element: mouseup event - Web APIs
// add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(...
Element: msContentZoom event - Web APIs
bubbles unknown cancelable unknown interface unknown event handler property unknown example contentzoom.addeventlistener("mscontentzoom", function(e) { zoomfactor.value = contentzoom.mscontentzoomfactor.tofixed(2); }); specifications not part of any specification.
Element: overflow event - Web APIs
wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px...
Element: paste event - Web APIs
le html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.createtextnode(paste)); event.preventdefault(); }); result specifications ...
Element.querySelector() - Web APIs
the entire hierarchy of elements is considered when matching, including those outside the set of elements including baseelement and its descendants; in other words, selectors is first applied to the whole document, not the baseelement, to generate an initial list of potential elements.
Element.requestPointerLock() - Web APIs
to track the success or failure of the request, it is necessary to listen for the pointerlockchange and pointerlockerror events at the document level.
Element.scrollWidth - Web APIs
therdiv'); //check to determine if an overflow is happening function isoverflowing(element) { return (element.scrollwidth > element.offsetwidth); } function alertoverflow(element) { if (isoverflowing(element)) { alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </html> result specification specification status comment css object model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Element: scroll event - Web APIs
// reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; function dosomething(scroll_pos) { // do something with the scroll position } window.addeventlistener('scroll', function(e) { last_known_scroll_position = window.scrolly; if (!ticking) { window.requestanimationframe(function() { dosomething(last_known_scroll_position); ticking = false; }); ticking = true; } }); note: you can find more examples on the resize event page.
Element: select event - Web APIs
examples selection logger <input value="try selecting some text in this element."> <p id="log"></p> function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const input = document.queryselector('input'); input.addeventlistener('select', logselection); onselect equivalent you can also set up the event handler using the onselect property: input.onselect = logselection; specifications specification status ui eventsthe definition of 'select' in that specification.
Element: show event - Web APIs
bubbles no cancelable no interface event event handler property onshow examples <div contextmenu="test"></div> <menu type="context" id="test"> <menuitem label="alert" onclick="alert('the alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){ alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification.
Element.toggleAttribute() - Web APIs
html <input value="text"> <button>toggleattribute("readonly")</button> javascript var button = document.queryselector("button"); var input = document.queryselector("input"); button.addeventlistener("click", function(){ input.toggleattribute("readonly"); }); result dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) s...
Element: underflow event - Web APIs
wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px...
Element: wheel event - Web APIs
center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: el.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.
Event() - Web APIs
WebAPIEventEvent
composed optional a boolean indicating whether the event will trigger listeners outside of a shadow root (see event.composed for more details).
Event.currentTarget - Web APIs
function hide(e){ e.currenttarget.style.visibility = 'hidden'; console.log(e.currenttarget); // when this function is used as an event handler: this === e.currenttarget } var ps = document.getelementsbytagname('p'); for(var i = 0; i < ps.length; i++){ // console: print the clicked <p> element ps[i].addeventlistener('click', hide, false); } // console: print <body> document.body.addeventlistener('click', hide, false); // click around and make paragraphs disappear note: the value of event.currenttarget is only available while the event is being handled.
Event.defaultPrevented - Web APIs
event.preventdefault(); } function logclick(event) { const log = document.getelementbyid('log'); if (event.target.tagname === 'a') { if (event.defaultprevented) { log.innertext = 'sorry, but you cannot visit this link!\n' + log.innertext; } else { log.innertext = 'visiting link...\n' + log.innertext; } } } const a = document.getelementbyid('link2'); a.addeventlistener('click', stoplink); document.addeventlistener('click', logclick); result specifications specification status comment domthe definition of 'event.defaultprevented()' in that specification.
Event.explicitOriginalTarget - Web APIs
function mycommand(ev) { alert(ev.explicitoriginaltarget.nodename); // returns 'menuitem' } <xul:command id="my-cmd-anaction" oncommand="mycommand(event);"/> <xul:menulist> <xul:menupopup> <xul:menuitem label="get my element name!" command="my-cmd-anaction"/> </xul:menupopup> </menulist> specifications this is a mozilla-specific property.
Event.timeStamp - Web APIs
WebAPIEventtimeStamp
</p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time = document.getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; } document.body.addeventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might get rounded depending on browser settings.
EventSource() - Web APIs
examples var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.
EventSource: error event - Web APIs
bubbles no cancelable no interface event or errorevent event handler property eventsource.onerror examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('error', (e) => { console.log("an error occurred while attempting to connect."); }); // onerror version evtsource.onerror = (e) => { console.log("an error occurred while attempting to connect."); }; specifications specification status html living standardthe definition of 'error event' in that specification.
EventSource: message event - Web APIs
var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.addeventlistener('message', (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }); onmessage equivalent evtsource.onmessage = (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(ne...
EventSource.onmessage - Web APIs
syntax eventsource.onmessage = function examples evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.
EventSource: open event - Web APIs
bubbles no cancelable no interface event event handler property eventsource.onopen examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('open', (e) => { console.log("the connection has been established."); }); // onopen version evtsource.onopen = (e) => { console.log("the connection has been established."); }; specifications specification status html living standardthe definition of 'open event' in that specification.
EventTarget() - Web APIs
examples class myeventtarget extends eventtarget { constructor(mysecret) { super(); this._secret = mysecret; } get secret() { return this._secret; } }; let myeventtarget = new myeventtarget(5); let value = myeventtarget.secret; // == 5 myeventtarget.addeventlistener("foo", function(e) { this._secret = e.detail; }); let event = new customevent("foo", { detail: 7 }); myeventtarget.dispatchevent(event); let newvalue = myeventtarget.secret; // == 7 specifications specification status comment domthe definition of 'eventtarget() constructor' in that specification.
ExtendableEvent.waitUntil() - Web APIs
example using waituntil() within a service worker's install event: addeventlistener('install', event => { const precache = async () => { const cache = await caches.open('static-v1'); return cache.addall([ '/', '/about/', '/static/styles.css' ]); }; event.waituntil(precache()); }); specifications specification status comment service workersthe definition of 'waituntil()' in that specification.
ExtendableMessageEvent() - Web APIs
examples var init = { data : 'hello message', source : messageportreference, ports : messageportlistreference } var myeme = new extendablemessageevent('message', init); specifications specification status comment service workersthe definition of 'extendablemessageevent()' in that specification.
ExtendableMessageEvent.data - Web APIs
var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.data); port = e.ports[0]; } specifications specification status comment se...
ExtendableMessageEvent.lastEventId - Web APIs
var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.lasteventid); port = e.ports[0]; } specifications specification status comment ...
ExtendableMessageEvent.origin - Web APIs
var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.origin); port = e.ports[0]; } specifications specification status comment ...
ExtendableMessageEvent.ports - Web APIs
var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { port = e.ports[0]; } specifications specification status comment service workersthe defini...
ExtendableMessageEvent.source - Web APIs
var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.source); port = e.ports[0]; } specifications specification status comment ...
ExtendableMessageEvent - Web APIs
// in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', ...
FeaturePolicy.allowedFeatures() - Web APIs
the allowedfeatures() method of the featurepolicy interface returns a list of directive names of all features allowed by the feature policy.enables introspection of individual directives of the feature policy it is run on.
FetchEvent.client - Web APIs
WebAPIFetchEventclient
example self.addeventlistener('fetch', function(event) { console.log(event.client); ​}); ...
FetchEvent.clientId - Web APIs
example self.addeventlistener('fetch', function(event) { console.log(event.clientid); ​}); specifications specification status comment service workersthe definition of 'clientid' in that specification.
FetchEvent.isReload - Web APIs
example self.addeventlistener('fetch', function(event) { event.respondwith( if (event.isreload) { //return something } else { //return something else }; ); ​}); ...
FetchEvent.navigationPreload - Web APIs
addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
FetchEvent.replacesClientId - Web APIs
example self.addeventlistener('fetch', function(event) { console.log(event.replacesclientid); }); specifications specification status comment service workersthe definition of 'replacesclientid' in that specification.
FetchEvent.resultingClientId - Web APIs
example self.addeventlistener('fetch', function(event) { console.log(event.resultingclientid); }); specifications specification status comment service workersthe definition of 'resultingclientid' in that specification.
FetchEvent - Web APIs
self.addeventlistener('fetch', event => { // let the browser do its default thing // for non-get requests.
Using Fetch - Web APIs
they can also be created programmatically via javascript, but this is only really useful in serviceworkers, when you are providing a custom response to a received request using a respondwith() method: const mybody = new blob(); addeventlistener('fetch', function(event) { // serviceworker intercepting a fetch event.respondwith( new response(mybody, { headers: { 'content-type': 'text/plain' } }) ); }); the response() constructor takes two optional arguments — a body for the response, and an init object (similar to the one that request() accepts.) note: the static method error() simply returns an error resp...
File.getAsBinary() - Web APIs
WebAPIFilegetAsBinary
example // fileinput is an htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.binary.indexof(file.type) > -1)...
File.getAsDataURL() - Web APIs
WebAPIFilegetAsDataURL
syntax var url = instanceoffile.getasdataurl(); returns a string representing a data: url example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // array with acceptable file types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file type if (accept.indexof(files[0].mediatype) > -1) { // display the image // same as <img src="data:image/png,<imagedata>"> img.src = files[...
File.getAsText() - Web APIs
WebAPIFilegetAsText
example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.text.indexof(file.mediatype) > ...
File.lastModified - Web APIs
WebAPIFilelastModified
example reading from file input <input type="file" multiple id="fileinput"> const fileinput = document.queryselector('#fileinput'); fileinput.addeventlistener('change', (event) => { // files is a filelist object (similar to nodelist) const files = event.target.files; for (let file of files) { const date = new date(file.lastmodified); console.log(`${file.name} has a last modified date of ${date}`); } }); try the results out below: dynamically created files if a file is created dynamically, the last modified time can be supplie...
File.lastModifiedDate - Web APIs
example // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert(files[i].name + " has a last modified date of " + files[i].lastmodifieddate); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodifieddate.gettime() might get rounded depending on browser settings.
File - Web APIs
WebAPIFile
file objects are generally retrieved from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
FileReader: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onerror examples const fileinput = document.queryselector('input[type="file"]'); const reader = new filereader(); function handleselected(e) { const selectedfile = fileinput.files[0]; if (selectedfile) { reader.addeventlistener('error', () => { console.error(`error occurred reading file: ${selectedfile.name}`); }); reader.addeventlistener('load', () => { console.error(`file: ${selectedfile.name} read successfully`); }); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); specifications specification ...
FileReader.result - Web APIs
WebAPIFileReaderresult
it works by creating a filereader object and creating a listener for load events such that when then file is read, the result is obtained and passed to the callback function provided to read().
FileSystem - Web APIs
this name is unique among the entire list of exposed file systems.
FileSystemDirectoryEntry.getDirectory() - Web APIs
let dictionary = null; function loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.addeventlistener("loadend", function() { dictionary = json.parse(reader.result); }); reader.readastext(dictfile); }); }); }); } the loaddictionaryforlanguage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
FileSystemDirectoryEntry.getFile() - Web APIs
let dictionary = null; function loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.addeventlistener("loadend", function() { dictionary = json.parse(reader.result); }); reader.readastext(dictfile); }); }); }); } the loaddictionaryforlanguage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
FileSystemEntry - Web APIs
chrome shows a read-only list of all the files and folders stored the origin of your app.
FileSystemEntrySync - Web APIs
chrome shows a read-only list of all the files and folders stored the origin of your app.
FileSystemSync - Web APIs
the name must be unique across the list of exposed file systems.
Introduction to the File and Directory Entries API - Web APIs
for example, you are likely to use one of the following: xmlhttprequest (such as the send() method for file and blob objects) drag and drop api web workers (for the synchronous version of the file and directory entries api) the input element (to programmatically obtain a list of files from the element) the file and directory entries api is case sensitive the filesystem api is case-sensitive, and case-preserving.
FontFace.FontFace() - Web APIs
WebAPIFontFaceFontFace
e weight: weight stretch: stretch unicoderange: unicode range variant: variant featuresettings: feature settings example async function loadfonts() { const font = new fontface('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with css class document.body.classlist.add('fonts-loaded'); } specifications specification status comment css font loading module level 3the definition of 'fontface constructor' in that specification.
FormData.getAll() - Web APIs
WebAPIFormDatagetAll
if the key doesn't exist, the method returns an empty list.
FormDataEvent() - Web APIs
composed: a boolean indicating whether the event will trigger listeners outside of a shadow root (see event.composed for more details).
FormDataEvent.formData - Web APIs
examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } ...
Gamepad.id - Web APIs
WebAPIGamepadid
syntax readonly attribute domstring id; example window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a string.
Gamepad.index - Web APIs
WebAPIGamepadindex
syntax readonly attribute long index; example window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a number.
Gamepad - Web APIs
WebAPIGamepad
example window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
GamepadEvent.gamepad - Web APIs
window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
Gamepad API - Web APIs
it contains three interfaces, two events and one specialist function, to respond to gamepads being connected and disconnected, and to access other information about the gamepads themselves, and what buttons and other controls are currently being pressed.
Using the Geolocation API - Web APIs
itude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme); result ...
Geolocation API - Web APIs
itude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme); result specifications specification status comment geolocation api recommendation ...
GeometryUtils - Web APIs
methods geometryutils.getboxquads() returns a list of domquad objects representing the css fragments of the node.
GlobalEventHandlers.onanimationcancel - Web APIs
function handlecancelevent(event) { log("animation canceled", event); }; then we add a method to handle toggle display between "flex" and "none" and establish it as the handler for a click event on the "hide/show" the box button: document.getelementbyid('togglebox').addeventlistener('click', function() { if (box.style.display == "none") { box.style.display = "flex"; document.getelementbyid("togglebox").innerhtml = "hide the box"; } else { box.style.display = "none"; document.getelementbyid("togglebox").innerhtml = "show the box"; } }); toggling the box to display: none has the effect of aborting its animation.
GlobalEventHandlers.onanimationend - Web APIs
we set up the event handlers for the animationstart and animationend events: let box = document.getelementbyid("box"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.onanimationiteration - Web APIs
finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { box.style.animationplaystate = "running"; iterationcounter++; }, false); this sets the box element's animation-play-state to "running" and increments the iteration counter.
GlobalEventHandlers.onanimationstart - Web APIs
we set up the event handlers for the animationstart and animationend events: let box = document.getelementbyid("box"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.onauxclick - Web APIs
you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.oncancel - Web APIs
you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.onclick - Web APIs
you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.onclose - Web APIs
you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.ondblclick - Web APIs
you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.onload - Web APIs
there are also dom events like domcontentloaded and domframecontentloaded (which can be handled using eventtarget.addeventlistener()) which are fired after the dom for the page has been constructed, but do not wait for other resources to finish loading.
GlobalEventHandlers.onloadend - Web APIs
examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); ...
GlobalEventHandlers.onloadstart - Web APIs
examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status comment html living standardthe definition of 'onloadstart' in that specification.
GlobalEventHandlers.onmouseenter - Web APIs
the mouseenter event is fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
GlobalEventHandlers.onmouseleave - Web APIs
the mouseleave event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached.
GlobalEventHandlers.onmouseup - Web APIs
10px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = release; result specification specification status comment html living standardthe definition of 'onmouseup' in that specification.
GlobalEventHandlers.onpointerleave - Web APIs
syntax eventtarget.onpointerleave = leavehandler; var leavehandler = eventtarget.onpointerleave; value leavehandler the eventlistener which will be invoked to handle pointerleave events sent to the target.
GlobalEventHandlers.onscroll - Web APIs
for greater flexibility, you can pass a scroll event to the eventtarget.addeventlistener() method instead.
Gyroscope.x - Web APIs
WebAPIGyroscopex
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocity along the x-axis " + gyroscope.x); console.log("angular velocity along the y-axis " + gyroscope.y); console.log("angular velocity along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope.y - Web APIs
WebAPIGyroscopey
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocety along the x-axis " + gyroscope.x); console.log("angular velocety along the y-axis " + gyroscope.y); console.log("angular velocety along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope.z - Web APIs
WebAPIGyroscopez
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocety along the x-axis " + gyroscope.x); console.log("angular velocety along the y-axis " + gyroscope.y); console.log("angular velocety along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope - Web APIs
WebAPIGyroscope
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocity along the x-axis " + gyroscope.x); console.log("angular velocity along the y-axis " + gyroscope.y); console.log("angular velocity along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
HTMLAnchorElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <a> element and the current document.
HTMLAreaElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <area> element and the current document.
msAudioCategory - Web APIs
examples include the following local media playback scenarios: local playlist streaming radio streaming playlist music videos streaming audio/radio, youtube, netflix, etc.
HTMLCanvasElement.mozGetAsFile() - Web APIs
function draw() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specif...
HTMLCanvasElement.toDataURL() - Web APIs
color in this example): html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelemen...
HTMLCanvasElement: webglcontextcreationerror event - Web APIs
bubbles yes cancelable yes interface webglcontextevent event handler property none example var canvas = document.getelementbyid('canvas'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log(e.statusmessage || 'unknown error'); }, false); var gl = canvas.getcontext('webgl'); // logs statusmessage or "unknown error" if unable to create webgl context specifications specification status comment webgl 1.0the definition of 'webglcontextcreationerror' in that specification.
HTMLCanvasElement: webglcontextlost event - Web APIs
bubbles yes cancelable yes interface webglcontextevent event handler property none example with the help of the webgl_lose_context extension, you can simulate the webglcontextlost event: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', (event) => { console.log(event); }); gl.getextension('webgl_lose_context').losecontext(); // "webglcontextlost" event is logged.
HTMLCanvasElement: webglcontextrestored event - Web APIs
bubbles yes cancelable yes interface webglcontextevent event handler property none example with the help of the webgl_lose_context extension, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); // "webglcontextrestored" event is logged.
HTMLCanvasElement - Web APIs
events listen to these events using addeventlistener().
HTMLContentElement.select - Web APIs
it is a domstring containing a space-separated list of css selectors that select the content to insert in place of the <content> element.
HTMLDetailsElement: toggle event - Web APIs
</section> css body { display: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); }); result specifications specification status comment html living standardthe definition of 'toggle event' in that specification.
HTMLDetailsElement - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HTMLDialogElement.close() - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.open - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.returnValue - Web APIs
} } function handleuserinput(returnvalue) { if (returnvalue === 'cancel' || returnvalue == null) { // user canceled the dialog, do nothing } else if (returnvalue === 'confirm') { // user chose a favorite animal, do something with it } } // “update details” button opens the <dialog> modally updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); handleuserinput(dialog.returnvalue); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.show() - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment html living standardthe ...
HTMLDialogElement.showModal() - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLElement: beforeinput event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('beforeinput', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status ui eventsthe definition of 'beforeinput event' in that specification.
HTMLElement.hidden - Web APIs
javascript document.getelementbyid("okbutton") .addeventlistener("click", function() { document.getelementbyid("welcome").hidden = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
HTMLElement: pointercancel event - Web APIs
examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointercancel', (event) => { console.log('pointer event cancelled'); }); using the onpointercancel event handler property: const para = document.queryselector('p'); para.onpointercancel = (event) => { console.log('pointer event cancelled'); }; specifications specification status pointer events ...
HTMLElement: pointerdown event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointerdown examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerdown', (event) => { console.log('pointer down event'); }); using the onpointerdown event handler property: const para = document.queryselector('p'); para.onpointerdown = (event) => { console.log('pointer down event'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerenter event - Web APIs
bubbles no cancelable no interface pointerevent event handler property onpointerenter examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerenter', (event) => { console.log('pointer entered element'); }); using the onpointerenter event handler property: const para = document.queryselector('p'); para.onpointerenter = (event) => { console.log('pointer entered element'); }; specifications specification status pointer events ...
HTMLElement: pointerleave event - Web APIs
bubbles no cancelable no interface pointerevent event handler property onpointerleave examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerleave', (event) => { console.log('pointer left element'); }); using the onpointerleave event handler property: const para = document.queryselector('p'); para.onpointerleave = (event) => { console.log('pointer left element'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointermove event - Web APIs
examples to add a handler for pointermove events using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointermove', (event) => { console.log('pointer moved'); }); you can also use the onpointermove event handler property: const para = document.queryselector('p'); para.onpointermove = (event) => { console.log('pointer moved'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerout event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointerout examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerout', (event) => { console.log('pointer moved out'); }); using the onpointerout event handler property: const para = document.queryselector('p'); para.onpointerout = (event) => { console.log('pointer moved out'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerover event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointerover examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerover', (event) => { console.log('pointer moved in'); }); using the onpointerover event handler property: const para = document.queryselector('p'); para.onpointerover = (event) => { console.log('pointer moved in'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerup event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointerup examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerup', (event) => { console.log('pointer up'); }); using the onpointerup event handler property: const para = document.queryselector('p'); para.onpointerup = (event) => { console.log('pointer up'); }; specifications specification status pointer events obsolete ...
HTMLFontElement - Web APIs
htmlfontelement.face is a domstring that reflects the face html attribute, containing a comma-separated list of one or more font names.
HTMLFormElement.reportValidity() - Web APIs
syntax htmlformelement.reportvalidity() return value boolean example document.forms['myform'].addeventlistener('submit', function() { document.forms['myform'].reportvalidity(); }, false); specifications specification status comment html living standardthe definition of 'htmlformelement.reportvalidity()' in that specification.
HTMLImageElement.alt - Web APIs
<li class="toolbar" aria-role="toolbar"> <a href="songs.html" aria-role="button"><img src="songicon.svg" alt="songs"</a> <a href="albums.html" aria-role="button"><img src="albumicon.svg" alt="albums"</a> <a href="artists.html" aria-role="button"><img src="artisticon.svg" alt="artists"</a> <a href="playlists.html" aria-role="button"><img src="playlisticon.svg" alt="playlists"</a> </li> images containining diagrams or maps when an image contains information presented as a diagram, chart, graph, or map, the alt text should provide the same information, at least in summary form.
HTMLImageElement.crossOrigin - Web APIs
const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <div class="container"> <p>here's a paragraph.
HTMLImageElement.height - Web APIs
var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updateheight = event => { output.innertext = clockimage.height; }; window.addeventlistener("load", updateheight); window.addeventlistener("resize", updateheight); result this example may be easier to try out in its own window.
HTMLImageElement.lowSrc - Web APIs
it was never technically part of the html specification (it was a mozilla extension to html); however, html 5 does list it among the obsolete attributes.
HTMLImageElement.naturalHeight - Web APIs
javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.
HTMLImageElement.naturalWidth - Web APIs
javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.
HTMLImageElement.srcset - Web APIs
syntax htmlimageelement.srcset = imagecandidatestrings; let srcset = htmlimageelement.srcset; value a usvstring containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the <img> element represented by the htmlimageelement.
HTMLImageElement.width - Web APIs
var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updatewidth = event => { output.innertext = clockimage.width; }; window.addeventlistener("load", updatewidth); window.addeventlistener("resize", updatewidth); result this example may be easier to try out in its own window.
HTMLInputElement: invalid event - Web APIs
html <form action="#"> <ul> <li><label>enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li> <li><input type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const input = document.queryselector('input') const log = document.getelementbyid('log') input.addeventlistener('invalid', logvalue) function logvalue(e) { log.textcontent += e.target.value } result specifications specification status comment html living standardthe definition of 'invalid event' in that specification.
HTMLInputElement: search event - Web APIs
examples // addeventlistener version const input = document.queryselector('input[type="search"]'); input.addeventlistener('search', () => { console.log("the term searched for was " + input.value); }) // onsearch version const input = document.queryselector('input[type="search"]'); input.onsearch = () => { console.log("the term searched for was " + input.value); }) specifications this event is not part of any speci...
HTMLInputElement.webkitEntries - Web APIs
html <input id="files" type="file" multiple> javascript document.getelementbyid("files").addeventlistener("change", function(event) { event.target.webkitentries.foreach(function(entry) { /* do stuff with the entry */ }); }); each time a change event occurs, this code iterates over the selected files, obtaining their filesystementry-based objects and acting on them.
HTMLKeygenElement - Web APIs
labels read only unimplemented (see bug 556743) is a nodelist that represents a list of label elements associated with this keygen element.
HTMLLinkElement.rel - Web APIs
it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <link> element and the current document.
HTMLMediaElement: abort event - Web APIs
bubbles no cancelable no interface event event handler property onabort examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('abort', () => { console.log(`abort loading: ${videosrc}`); }); const source = document.createelement('source'); source.setattribute('src', videosrc); source.setattribute('type', 'video/webm'); video.appendchild(source); specifications specification status html living standard living standard html5 recommendation ...
HTMLMediaElement.captureStream() - Web APIs
document.queryselector('.playandrecord').addeventlistener('click', function() { var playbackelement = document.getelementbyid("playback"); var capturestream = playbackelement.capturestream(); playbackelement.play(); }); see recording a media element for a longer and more intricate example and explanation.
HTMLMediaElement.currentSrc - Web APIs
syntax var mediaurl = audioobject.currentsrc; value a domstring object containing the absolute url of the chosen media source; this may be an empty string if networkstate is empty; otherwise, it will be one of the resources listed by the htmlsourceelement contained within the media element, or the value or src if no <source> element is provided.
HTMLMediaElement: error event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('error', () => { console.error(`error loading: ${videosrc}`); }); video.setattribute('src', videosrc); specifications specification status html living standard living standard html5 recommendation ...
HTMLMediaElement: loadstart event - Web APIs
grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } js const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); ...
HTMLMediaElement.onerror - Web APIs
syntax htmlmediaelement.onerror = eventlistener; value a function which serves as the event handler for the error event.
HTMLMediaElement.play() - Web APIs
example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.getelementbyid("video"); let playbutton = document.getelementbyid("playbutton"); playbutton.addeventlistener("click", handleplaybutton, false); playvideo(); async function playvideo() { try { await videoelem.play(); playbutton.classlist.add("playing"); } catch(err) { playbutton.classlist.remove("playing"); } } function handleplaybutton() { if (videoelem.paused) { playvideo(); } else { videoelem.pause(); playbutton.classlist.remove("playing"); } } in this exampl...
HTMLMediaElement: progress event - Web APIs
a: video; } .event-log { grid-area: log; } .event-log>label { display: block; } javascript const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); ...
HTMLMediaElement.src - Web APIs
note: the best way to know the url of the media resource currently in active use in this element is to look at the value of the currentsrc attribute, which also takes into account selection of a best or preferred media resource from a list provided in an htmlsourceelement (which represents a <source> element).
HTMLMeterElement - Web APIs
htmlmeterelement.labelsread only a nodelist of <label> elements that are associated with the element.
HTMLObjectElement - Web APIs
htmlobjectelement.archive is a domstring that reflects the archive html attribute, containing a list of archives for resources for this object.
HTMLOptGroupElement - Web APIs
htmloptgroupelement.disabled is a boolean representing whether or not the whole list of children <option> is disabled (true) or not (false).
HTMLOptionsCollection - Web APIs
the htmloptionscollection interface represents a collection of <option> html elements (in document order) and offers methods and properties for selecting from the list as well as optionally altering its items.
HTMLOrForeignElement - Web APIs
each of these interfaces can, of course, add more features in addition to the ones listed below.
HTMLProgressElement - Web APIs
htmlprogresselement.labelsread only returns nodelist containing the list of <label> elements that are labels for this element.
HTMLSelectElement.disabled - Web APIs
for="drink-select">drink selection:</label> <select id="drink-select" disabled> <option value="1">water</option> <option value="2">beer</option> <option value="3">pepsi</option> <option value="4">whisky</option> </select> javascript var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", function(event) { if (event.target.checked) { drinkselect.disabled = false; } else { drinkselect.disabled = true; } }, false); result specifications specification status comment html living standardthe definition of 'disabled' in that specification.
HTMLSelectElement.form - Web APIs
for select, the two possible values are "select-one" or "select-multiple", depending on the type of selection list.
HTMLSelectElement.item() - Web APIs
the htmlselectelement.item() method returns the element corresponding to the htmloptionelement whose position in the options list corresponds to the index given in the parameter, or null if there are none.
HTMLSelectElement.options - Web APIs
example html <label for="test">label</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status comment html living standardthe definition of 'options' in that specification.
HTMLSelectElement.remove() - Web APIs
example var sel = document.getelementbyid("existinglist"); sel.remove(1); /* takes the existing following select object: <select id="existinglist" name="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> and changes it to: <select id="existinglist" name="existinglist"> <option value="1">option: value 1</option> <option value="3">option...
HTMLSelectElement.selectedIndex - Web APIs
= index; example html <p id="p">selectedindex: 0</p> <select id="select"> <option selected>option a</option> <option>option b</option> <option>option c</option> <option>option d</option> <option>option e</option> </select> javascript var selectelem = document.getelementbyid('select') var pelem = document.getelementbyid('p') // when a new <option> is selected selectelem.addeventlistener('change', function() { var index = selectelem.selectedindex; // add that data to the <p> pelem.innerhtml = 'selectedindex: ' + index; }) specifications specification status comment html living standardthe definition of 'htmlselectelement' in that specification.
HTMLShadowElement - Web APIs
htmlshadowelement.getdistributednodes() returns a static nodelist of the distributed nodes associated with this <shadow> element.
HTMLSlotElement.assignedNodes() - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLSlotElement.name - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLSlotElement: slotchange event - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the <slot>s, then add a slotchange event listener to the template's second slot — which is the one which has its contents changed in the example.
HTMLSlotElement - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLSourceElement - Web APIs
htmlsourceelement.srcset is a domstring reflecting the srcset html attribute, containing a list of candidate images, separated by a comma (',', u+002c comma).
HTMLStyleElement.media - Web APIs
syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list.
HTMLTableElement.rows - Web APIs
syntax htmlcollectionobject = table.rows; value an htmlcollection providing a live-updating list of the htmltablerowelement objects representing all of the <tr> elements contained in the table.
HTMLVideoElement.msHorizontalMirror - Web APIs
example var myvideo = document.getelementbyid("videotag1"); myvideo.mshorizontalmirror = true; myvideo.play(); example #2: var flip = document.queryselector('#flip'); flip.addeventlistener('click', function() { video.mshorizontalmirror = true; }); see also htmlvideoelement microsoft api extensions ...
HTMLVideoElement.msIsLayoutOptimalForPlayback - Web APIs
you can listen to the onmsvideooptimallayoutchanged event to be notified when the msislayoutoptimalforplayback property changes.
onMSVideoFormatChanged - Web APIs
syntax value description event property object.onmsvideoformatchanged = handler; attachevent method object.attachevent("onmsvideoformatchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
onMSVideoFrameStepCompleted - Web APIs
syntax value description event property object.onmsvideoframestepcompleted = handler; attachevent method object.attachevent("onmsvideoframestepcompleted", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
onMSVideoOptimalLayoutChanged - Web APIs
syntax value description event property object.onmsvideooptimallayoutchanged = handler; attachevent method object.attachevent("onmsvideooptimallayoutchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) synchronous no bubbles no cancelable no see also msislayoutoptimalforplayback htmlvideoelement microsoft api extensions ...
HTMLVideoElement.videoHeight - Web APIs
let v = document.getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
HTMLVideoElement.videoWidth - Web APIs
let v = document.getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
element.addeventlistener("load", () => console.log("loaded data")); console.log("fetching data..."); element.getdata(); console.log("data fetched"); executing this code twice in a row gives the results shown in the table below: results when data isn't cached (left) vs.
HashChangeEvent.newURL - Web APIs
example window.addeventlistener('hashchange', function(event) { console.log('hash changed to ' + event.newurl); }); specifications specification status comment html living standardthe definition of 'hashchangeevent: newurl' in that specification.
HashChangeEvent.oldURL - Web APIs
example window.addeventlistener('hashchange', function(event) { console.log('hash changed from ' + event.oldurl); }); specifications specification status comment html living standardthe definition of 'hashchangeevent: oldurl' in that specification.
History.go() - Web APIs
WebAPIHistorygo
add a listener for the popstate event in order to determine when the navigation has completed.
History - Web APIs
WebAPIHistory
internet explorer lets you specify a string, instead of an integer, to go to a specific url in the history list.
History API - Web APIs
examples the following example assigns a listener to the onpopstate property.
IDBCursor.continue() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { ...
IDBCursor.key - Web APIs
WebAPIIDBCursorkey
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor...
IDBCursor.primaryKey - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); ...
IDBCursor - Web APIs
WebAPIIDBCursor
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { ...
IDBCursorWithValue.value - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); curs...
IDBCursorWithValue - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { ...
IDBDatabase.close() - Web APIs
WebAPIIDBDatabaseclose
syntax idbdatabase.close(); example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // opening a database.
IDBDatabase.onabort - Web APIs
dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: fal...
IDBDatabase.onerror - Web APIs
dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: fal...
IDBDatabase.onversionchange - Web APIs
request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: fal...
IDBDatabase.version - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBEnvironment - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open("todolist"); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.result; }; } browser compatibility the compatibility table on this page is generated from structured data.
IDBFactory.cmp() - Web APIs
WebAPIIDBFactorycmp
return value an integer that indicates the result of the comparison; the table below lists the possible values and their meanings: returned value description -1 1st key is less than the 2nd key 0 1st key is equal to the 2nd key 1 1st key is greater than the 2nd key exceptions this method may raise a domexception of the following types: attribute description dataerror one of the supplied keys was not a va...
IDBFactory.deleteDatabase() - Web APIs
example var dbdeleterequest = window.indexeddb.deletedatabase("todolist"); dbdeleterequest.onerror = function(event) { console.log("error deleting database."); }; dbdeleterequest.onsuccess = function(event) { console.log("database deleted successfully"); console.log(event.result); // should be undefined }; specifications specification status comment indexed database api draftthe definition of 'deletedatabase()' in that specifi...
IDBIndex.count() - Web APIs
WebAPIIDBIndexcount
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var countrequest = myindex.count(); countrequest.onsuccess = function() { console.log(countrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'...
IDBIndex.get() - Web APIs
WebAPIIDBIndexget
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getrequest = myindex.get('bungle'); getrequest.onsuccess = function() { console.log(getrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'...
IDBIndex.getKey() - Web APIs
WebAPIIDBIndexgetKey
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getkeyrequest = myindex.getkey('bungle'); getkeyrequest.onsuccess = function() { console.log(getkeyrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.create...
IDBIndex.isAutoLocale - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' ...
IDBIndex.keyPath - Web APIs
WebAPIIDBIndexkeyPath
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' ...
IDBIndex.locale - Web APIs
WebAPIIDBIndexlocale
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' ...
IDBIndex.multiEntry - Web APIs
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' ...
IDBIndex.name - Web APIs
WebAPIIDBIndexname
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.name); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' ...
IDBIndex.openCursor() - Web APIs
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.ln...
IDBIndex.unique - Web APIs
WebAPIIDBIndexunique
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' ...
IDBIndex - Web APIs
WebAPIIDBIndex
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lna...
IDBKeyRange.bound() - Web APIs
WebAPIIDBKeyRangebound
ory in the indexeddb-examples repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'bo...
IDBKeyRange.lower - Web APIs
WebAPIIDBKeyRangelower
mple live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of '...
IDBKeyRange.lowerBound() - Web APIs
ok at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of '...
IDBKeyRange.lowerOpen - Web APIs
live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'low...
IDBKeyRange.only() - Web APIs
WebAPIIDBKeyRangeonly
nge, have a look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'onl...
IDBKeyRange.upper - Web APIs
WebAPIIDBKeyRangeupper
mple live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of '...
IDBKeyRange.upperBound() - Web APIs
ok at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition o...
IDBKeyRange.upperOpen - Web APIs
live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of '...
IDBKeyRange - Web APIs
a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'idbkeyrange' in tha...
FileHandle.onabort - Web APIs
summary specifies an event listener to receive abort events.
FileHandle.onerror - Web APIs
summary specifies an event listener to receive error events.
IDBObjectStore.index() - Web APIs
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lna...
IDBObjectStore.openCursor() - Web APIs
to determine if the add operation has completed successfully, listen for the results’s success event.
IDBObjectStore.openKeyCursor() - Web APIs
to determine if the add operation has completed successfully, listen for the results’s success event.
IDBObjectStore.put() - Web APIs
for a full working example, see our to-do notifications app (view example live.) const title = "walk dog"; // open up a transaction as usual const objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title const objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = () => { // grab the data object returned as the result const data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create anot...
IDBObjectStoreSync - Web APIs
openindex (in domstring name) raises (idbdatabaseexception); any put (in any value, in optional any key) raises (idbdatabaseexception); void remove (in any key) raises (idbdatabaseexception); void removeindex (in domstring indexname) raises (idbdatabaseexception); attributes attribute type description indexnames readonly domstringlist a list of the names of the indexes on this object store.
IDBOpenDBRequest.onupgradeneeded - Web APIs
the event passed to the listener is an idbversionchangeevent.
IDBRequest.onerror - Web APIs
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create ano...
IDBRequest.onsuccess - Web APIs
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create ano...
IDBRequest.readyState - Web APIs
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create ano...
IDBRequest.result - Web APIs
WebAPIIDBRequestresult
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create ano...
IDBRequest.source - Web APIs
WebAPIIDBRequestsource
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as its title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create anot...
IDBRequest.transaction - Web APIs
for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create ano...
IDBVersionChangeEvent.newVersion - Web APIs
to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBVersionChangeEvent - Web APIs
nces to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
ImageCapture.grabFrame() - Web APIs
ryselector('button#grabframe'); var canvas = document.queryselector('canvas'); grabframebutton.onclick = grabframe; function grabframe() { imagecapture.grabframe() .then(function(imagebitmap) { console.log('grabbed frame:', imagebitmap); canvas.width = imagebitmap.width; canvas.height = imagebitmap.height; canvas.getcontext('2d').drawimage(imagebitmap, 0, 0); canvas.classlist.remove('hidden'); }) .catch(function(error) { console.log('grabframe() error: ', error); }); } specifications specification status comment mediastream image capturethe definition of 'grabframe()' in that specification.
ImageCapture.takePhoto() - Web APIs
var takephotobutton = document.queryselector('button#takephoto'); var canvas = document.queryselector('canvas'); takephotobutton.onclick = takephoto; function takephoto() { imagecapture.takephoto().then(function(blob) { console.log('took photo:', blob); img.classlist.remove('hidden'); img.src = url.createobjecturl(blob); }).catch(function(error) { console.log('takephoto() error: ', error); }); } specifications specification status comment mediastream image capturethe definition of 'takephoto()' in that specification.
firesTouchEvents - Web APIs
syntax var boolean = inputdevicecapabilities.firestouchevents returns a boolean example mybutton.addeventlistener('mousedown', function(e) { if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); specifications specification status comment inputdevicecapabilitiesthe definition of 'firetouchevents' in that specification.
InputEvent - Web APIs
see the property page for a complete list of input types.
InstallEvent.activeWorker - Web APIs
examples self.addeventlistener('install', function(event) { var myactiveworker = event.activeworker; }); ...
InstallEvent - Web APIs
var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event.
IntersectionObserver.observe() - Web APIs
when the visibility of the specified element crosses over one of the observer's visibility thresholds (as listed in intersectionobserver.thresholds), the observer's callback is executed with an array of intersectionobserverentry objects representing the intersection changes which occurred.
IntersectionObserver.takeRecords() - Web APIs
calling this method clears the pending intersection list, so the callback will not be run.
IntersectionObserver.thresholds - Web APIs
the intersectionobserver interface's read-only thresholds property returns the list of intersection thresholds that was specified when the observer was instantiated with intersectionobserver().
IntersectionObserver - Web APIs
intersectionobserver.thresholds read only a list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target.
Keyboard.lock() - Web APIs
WebAPIKeyboardlock
a list of valid code values is found in the ui events keyboardevent code values spec.
Keyboard - Web APIs
WebAPIKeyboard
a list of valid code values is found in the ui events keyboardevent code values spec.
KeyboardEvent: code values - Web APIs
only keys which generate scan codes on windows are listed.
KeyboardEvent.keyCode - Web APIs
example window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (event.key !== undefined) { // handle the event with keyboardevent.key and set handled true.
KeyboardLayoutMap.get() - Web APIs
a list of valid keys is found in the ui events keyboardevent code values spec.
KeyboardLayoutMap.has() - Web APIs
a list of valid keys is found in the ui events keyboardevent code values spec.
KeyboardLayoutMap - Web APIs
a list of valid keys is found in the ui events keyboardevent code values specification.
KeyframeEffect.getKeyframes() - Web APIs
computedoffset the computed offset for this keyframe, calculated when the list of computed keyframes was produced according to keyframeeffect.spacing.
LinearAccelerationSensor.x - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor.y - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor.z - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LockedFile.onabort - Web APIs
summary specifies an event listener to receive abort events.
LockedFile.oncomplete - Web APIs
summary specifies an event listener to receive complete events.
LockedFile.onerror - Web APIs
summary specifies an event listener to receive error events.
MSCandidateWindowHide - Web APIs
syntax event property object.oncandidatewindowhide = handler; addeventlistener method object.addeventlistener("mscandidatewindowhide", handler, usecapture) nbsp; parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
MSCandidateWindowUpdate - Web APIs
syntax event property object.oncandidatewindowupdate = handler; addeventlistener method object.addeventlistener("mscandidatewindowupdate", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
MSSiteModeEvent - Web APIs
properties property description actionurl gets the url of a jump list item that is removed.
Magnetometer.x - Web APIs
WebAPIMagnetometerx
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer.y - Web APIs
WebAPIMagnetometery
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer.z - Web APIs
WebAPIMagnetometerz
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer - Web APIs
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
MediaDevices: devicechange event - Web APIs
bubbles no cancelable no interface event event handler ondevicechange example you can use the devicechange event in an addeventlistener method: navigator.mediadevices.addeventlistener('devicechange', function(event) { updatedevicelist(); }); or use the ondevicechange event handler property: navigator.mediadevices.ondevicechange = function(event) { updatedevicelist(); } specifications specification status media capture and streamsthe definition of 'devicechange' in that specification.
MediaDevices.getUserMedia() - Web APIs
typeerror the list of constraints specified is empty, or has all constraints set to false.
initDataTypes - Web APIs
the mediakeysystemconfiguration.initdatatypes read-only property returns a list of supported initialization data type names.
MediaRecorder: error event - Web APIs
examples using addeventlistener to listen for error events: async function record() { const stream = await navigator.mediadevices.getusermedia({audio: true}); const recorder = new mediarecorder(stream); recorder.addeventlistener('error', (event) => { console.error(`error recording stream: ${event.error.name}`) }); recorder.start(); } record(); the same, but using the onerror event handler prop...
MediaRecorder.mimeType - Web APIs
for their official list of defined media type strings, see the article media types on the iana site.
MediaRecorder.ondataavailable - Web APIs
} mediarecorder.addeventlistener('dataavailable', function(event) { ...
MediaRecorder.onerror - Web APIs
function recordstream(stream) { let recorder = null; let bufferlist = []; try { recorder = new mediarecorder(stream); } catch(err) { return err.name; /* return the error name */ } recorder.ondataavailable = function(event) { bufferlist.push(event.data); }; recorder.onerror = function(event) { let error = event.error; switch(error.name) { case invalidstateerror: shownotification("you can't record the video righ...
MediaRecorder.onpause - Web APIs
} mediarecorder.addeventlistener('pause', function(event) { ...
MediaRecorder.onresume - Web APIs
} mediarecorder.addeventlistener('resume', function(event) { ...
MediaRecorder.onstart - Web APIs
} mediarecorder.addeventlistener('start', function(event) { ...
MediaRecorder.onstop - Web APIs
} mediarecorder.addeventlistener('stop', function(event) { ...
MediaRecorder.onwarning - Web APIs
} mediarecorder.addeventlistener('warning', function(event) { ...
MediaRecorderErrorEvent.error - Web APIs
function recordstream(stream) { let recorder = null; let bufferlist = []; try { recorder = new mediarecorder(stream); } catch(err) { /* exception while trying to create the recorder; handle that */ } recorder.ondataavailable = function(event) { bufferlist.push(event.data); }; recorder.onerror = function(event) { let error = event.error; }; recorder.start(100); /* 100ms time slices per buffer */ return recorder; } specificat...
MediaSession.setActionHandler() - Web APIs
syntax navigator.mediasession.setactionhandler(type, callback) parameters type a domstring representing an action type to listen for.
MediaSession - Web APIs
see the method page for a full list.
MediaSource.MediaSource() - Web APIs
ag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } ...
MediaSource.duration - Web APIs
is true.) example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); mediasource.duration = 120; video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaSource.endOfStream() - Web APIs
ag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.isTypeSupported() - Web APIs
ag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.readyState - Web APIs
example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.removeSourceBuffer() - Web APIs
the removesourcebuffer() method of the mediasource interface removes the given sourcebuffer from the sourcebuffers list associated with this mediasource object.
MediaStream: addtrack event - Web APIs
bubbles no cancelable no interface mediastreamtrackevent event handler property onaddtrack examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('addtrack', (event) => { console.log(`new ${event.track.kind} track added`); }); using the onaddtrack event handler property: let stream = new mediastream(); stream.onaddtrack = (event) => { console.log(`new ${event.track.kind} track added`); }; specifications specification status media capture and streamsthe definition of 'addtrack' in that specification.
MediaStream.getAudioTracks() - Web APIs
early versions of this api included a special audiostreamtrack interface which was used as the type for each entry in the list of audio streams; however, this has since been merged into the main mediastreamtrack interface.
MediaStream.getVideoTracks() - Web APIs
early versions of this api included a special videostreamtrack interface which was used as the type for each entry in the list of video streams; however, this has since been merged into the main mediastreamtrack interface.
MediaStream: removetrack event - Web APIs
bubbles no cancelable no interface mediastreamtrackevent event handler property onremovetrack examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('removetrack', (event) => { console.log(`${event.track.kind} track removed`); }); using the onremovetrack event handler property: let stream = new mediastream(); stream.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); }; specifications specification status media capture and streamsthe definition of 'removetrack' in that specification.
MediaStreamTrack.applyConstraints() - Web APIs
syntax const appliedpromise = track.applyconstraints([constraints]) parameters constraints optional a mediatrackconstraints object listing the constraints to apply to the track's constrainable properties; any existing constraints are replaced with the new values specified, and any constrainable properties not included are restored to their default constraints.
MediaStreamTrack: ended event - Web APIs
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 sta...
MediaStreamTrack.getConstraints() - Web APIs
the properties in the returned object are listed in the same order as when they were set, and only properties specifically set by the site or app are included.
MediaStreamTrack: mute event - Web APIs
musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its background col...
MediaStreamTrack: unmute event - Web APIs
musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its background col...
MediaTrackConstraints.displaySurface - Web APIs
this value does not affect the list of display sources in the browser's user interface.
MediaTrackConstraints - Web APIs
this may be a single one of the following strings, or a list of them to allow multiple source surfaces: application the stream contains all of the windows of the application chosen by the user rendered into the one video track.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.autoGainControl - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.channelCount - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.cursor - Web APIs
the supported constraints list is obtained by calling navigator.mediadevices.getsupportedconstraints().
MediaTrackSupportedConstraints.deviceId - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.displaySurface - Web APIs
the supported constraints list is obtained by calling navigator.mediadevices.getsupportedconstraints().
MediaTrackSupportedConstraints.echoCancellation - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.facingMode - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.frameRate - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.groupId - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.height - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.latency - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.logicalSurface - Web APIs
the supported constraints list is obtained by calling navigator.mediadevices.getsupportedconstraints().
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.sampleRate - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.sampleSize - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.volume - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints.width - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false.
MediaTrackSupportedConstraints - Web APIs
the mediatracksupportedconstraints dictionary establishes the list of constrainable properties recognized by the user agent or browser in its implementation of the mediastreamtrack object.
Using the Media Capabilities API - Web APIs
nt.getelementbyid("results") li.innerhtml = content; ul.appendchild(li); }).catch((error) => { var li = document.createelement('li'), ul = document.getelementbyid("results"); li.innertext = 'codec ' + mc.videoconfiguration.video.contenttype + ' threw an error: ' + error; ul.appendchild(li); }); } } document.getelementbyid('tryit').addeventlistener('click', mc.tryit); live result ...
Media Session API - Web APIs
the following example adds a pointerup event to an on-page play button, which is then used to kick off the media session code: playbutton.addeventlistener('pointerup', function(event) { var audio = document.queryselector('audio'); // user interacted with the page.
MessageChannel - Web APIs
var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic demo...
MessageEvent.ports - Web APIs
example onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using addeventlistener.
MessagePort.onmessageerror - Web APIs
the onmessageerror event handler of the messageport interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the port—that is, when it receives a message that cannot be deserialized.
Microsoft API extensions - Web APIs
ndedcode msgraphicstrust msgraphicstruststatus msisboxed msplaytodisabled msplaytopreferredsourceuri msplaytoprimary msplaytosource msrealtime mssetmediaprotectionmanager mssetvideorectangle msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...
MimeType - Web APIs
WebAPIMimeType
for example, a browser's content decryption module may appear in the plugin list but support more file extensions than can be anticipated.
MouseEvent.altKey - Web APIs
WebAPIMouseEventaltKey
html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.button - Web APIs
WebAPIMouseEventbutton
example html <button id="button" oncontextmenu="event.preventdefault();">click here with your mouse...</button> <p id="log"></p> javascript let button = document.queryselector('#button'); let log = document.queryselector('#log'); button.addeventlistener('mouseup', logmousebutton); function logmousebutton(e) { if (typeof e === 'object') { switch (e.button) { case 0: log.textcontent = 'left button clicked.'; break; case 1: log.textcontent = 'middle button clicked.'; break; case 2: log.textcontent = 'right button clicked.'; break; default: log.textcontent = `...
MouseEvent.buttons - Web APIs
html <p>click anywhere with one or more mouse buttons.</p> <pre id="log">buttons: </pre> javascript let log = document.createtextnode('?'); // let log = new text('?'); function logbuttons(e) { log.data = `${e.buttons} (${e.type})`; // log.nodevalue= `${e.buttons} (${e.type})`; } document.addeventlistener('mouseup', logbuttons); document.addeventlistener('mousedown', logbuttons); // document.addeventlistener('mousemove', logbuttons); document.queryselector('#log').appendchild(log) result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.buttons' in that specification.
MouseEvent.clientX - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clientx' in that specification.
MouseEvent.clientY - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'clienty' in that specification.
MouseEvent.ctrlKey - Web APIs
html <p>click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
MouseEvent.metaKey - Web APIs
html <p>click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.metakey' in that specification.
MouseEvent.movementX - Web APIs
html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.insertadjacenthtml('afterbegin', `movement: ${event.movementx}, ${event.movementy}<br>`); while (log.childnodes.length > 128) log.lastchild.remove() } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status comment pointer lockthe definition of 'mouseevent.movementx' in that specification.
MouseEvent.movementY - Web APIs
html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.innertext = `movement: ${event.movementx}, ${event.movementy}\n${log.innertext}`; } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status comment pointer lockthe definition of 'mouseevent.movementy' in that specification.
MouseEvent.pageX - Web APIs
WebAPIMouseEventpageX
javascript var box = document.queryselector(".box"); var pagex = document.getelementbyid("x"); var pagey = document.getelementbyid("y"); function updatedisplay(event) { pagex.innertext = event.pagex; pagey.innertext = event.pagey; } box.addeventlistener("mousemove", updatedisplay, false); box.addeventlistener("mouseenter", updatedisplay, false); box.addeventlistener("mouseleave", updatedisplay, false); the javascript code uses addeventlistener() to register the function updatedisplay() as the event handler for the mousemove, mouseenter, and mouseleave events.
MouseEvent.region - Web APIs
WebAPIMouseEventregion
<canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "circle"}); canvas.addeventlistener("mousemove", function(event){ if(event.region) { console.log("hit region: " + event.region); } }); </script> ...
MouseEvent.screenX - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result routing an event when you trap events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates: function check...
MouseEvent.screenY - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object model (cssom) view modulethe definition of 'screeny' in that specification.
MouseEvent.shiftKey - Web APIs
html <p>click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
msPlayToSource - Web APIs
ptm.addeventlistener("sourcerequested", function(e) { // step 3: specify the media to be streamed (to filter devices).
MutationObserver.disconnect() - Web APIs
const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); /* some time later...
MutationObserverInit.subtree - Web APIs
subtree can be used in concert with the other options to extend monitoring of attributes, text content, and child lists to the entire subtree rooted at the target node.
NDEFMessage - Web APIs
attributes ndefmessage.records read only represents a list of ndef records defining the ndef message.
NDEFReader - Web APIs
properties in addition to the properties listed below, ndefreader inherits properties from its parent interface, eventtarget.
NDEFRecord.toRecords() - Web APIs
return value a list of ndefrecords.
NamedNodeMap - Web APIs
objects inside a namednodemap are not in any particular order, unlike nodelist, although they may be accessed by an index as in an array.
Navigator.getBattery() - Web APIs
let batteryischarging = false; navigator.getbattery().then(function(battery) { batteryischarging = battery.charging; battery.addeventlistener('chargingchange', function() { batteryischarging = battery.charging; }); }); for more examples and details, see battery status api.
Navigator.getGamepads() - Web APIs
syntax var gamepads = navigator.getgamepads(); example window.addeventlistener("gamepadconnected", function(e) { var gp = navigator.getgamepads()[e.gamepad.index]; console.log( "gamepad connected at index %d: %s.
Navigator.getUserMedia() - Web APIs
see {anch("errors")}} below for a list of the errors which can occur.
Navigator.registerProtocolHandler() - Web APIs
this will be displayed to the user, such as prompting “allow this site to handle [scheme] links?” or listing registered handlers in the browser’s settings.
Navigator.share() - Web APIs
WebAPINavigatorshare
the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare().
navigator.hardwareConcurrency - Web APIs
let workerlist = []; for (let i = 0; i < window.navigator.hardwareconcurrency; i++) { let newworker = { worker: new worker('cpuworker.js'), inuse: false }; workerlist.push(newworker); } specification specification status comment html living standardthe definition of 'navigator.hardwareconcurrency' in that specification.
NavigatorPlugins.mimeTypes - Web APIs
returns a mimetypearray object, which contains a list of mimetype objects representing the mime types recognized by the browser.
NetworkInformation.downlinkMax - Web APIs
r downlinkmax = 'not supported'; if ('connection' in navigator) { connectiontype = navigator.connection.effectivetype; if ('downlinkmax' in navigator.connection) { downlinkmax = navigator.connection.downlinkmax; } } console.log('current connection type: ' + connectiontype + ' (downlink max: ' + downlinkmax + ')'); } logconnectiontype(); navigator.connection.addeventlistener('change', logconnectiontype); specifications specification status comment network information apithe definition of 'downlinkmax' in that specification.
NetworkInformation.onchange - Web APIs
} // register for event changes: navigator.connection.onchange = changehandler; // another way: navigator.connection.addeventlistener('change', changehandler); specifications specification status comment network information apithe definition of 'onchange' in that specification.
Network Information API - Web APIs
var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; var type = connection.effectivetype; function updateconnectionstatus() { console.log("connection type changed from " + type + " to " + connection.effectivetype); type = connection.effectivetype; } connection.addeventlistener('change', updateconnectionstatus); preload large resources the connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory.
Node.firstChild - Web APIs
WebAPINodefirstChild
if the node is a document, it returns the first node in the list of its direct children.
Node.isEqualNode() - Web APIs
WebAPINodeisEqualNode
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 equals div 0: " + divlist[0].isequalnode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 equals div 1: " + divlist[0].isequalnode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 equals div 2: " + divlist[0].isequalnode(divlist[2]) + "<br/>"; results specifications specification status comment ...
Node.isSameNode() - Web APIs
WebAPINodeisSameNode
html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 same as div 1: " + divlist[0].issamenode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 same as div 2: " + divlist[0].issamenode(divlist[2]) + "<br/>"; results specifications specification status comment ...
Node.isSupported() - Web APIs
WebAPINodeisSupported
possible values defined within the core dom specification are listed on the dom level 2 conformance section.
Node.nodeType - Web APIs
WebAPINodenodeType
possible values are listed in node type constants.
NodeIterator - Web APIs
the nodeiterator interface represents an iterator over the members of a list of the nodes in a subtree of the dom.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
the nondocumenttypechildnode.nextelementsibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.
Notification.onclick - Web APIs
the onclick property of the notification interface specifies an event listener to receive click events.
Notification.onclose - Web APIs
the onclose property of the notification interface specifies an event listener to receive close events.
Notification.onerror - Web APIs
the onerror property of the notification interface specifies an event listener to receive error events.
Notification.onshow - Web APIs
the onshow property of the notification interface specifies an event listener to receive show events.
Notification.requestPermission() - Web APIs
to see a example in action, check out our to-do list example (also see the app running live.) note: in the above example we spawn notifications in response to a user gesture (clicking a button).
Notification - Web APIs
to see a example in action, check out our to-do list example (also see the app running live.) note: in the above example we spawn notifications in response to a user gesture (clicking a button).
NotificationAction - Web APIs
self.registration.shownotification("new mail from alice", { actions: [ { action: 'archive', title: 'archive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'archive') { // archive action was clicked archiveemail(); } else { // main body of notification was clicked clients.openwindow('/inbox'); } }, false); specifications specification status comment notifications api living standard living standard ...
NotificationEvent.action - Web APIs
example self.registration.shownotification("new articles available", { actions: [{action: "get", title: "get now."}] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'get') { synchronizereader(); } else { clients.openwindow("/reader"); } }, false); specifications specification status comment notifications apithe definition of 'action' in that specification.
NotificationEvent - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; ...
Notifications API - Web APIs
this should be done in response to a user gesture, such as clicking a button, for example: btn.addeventlistener('click', function() { let promise = notification.requestpermission(); // wait for permission }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture.
OfflineAudioContext: complete event - Web APIs
no default action none interface offlineaudiocompletionevent event handler property offlineaudiocontext.oncomplete examples when processing is complete, you might want to use the oncomplete handler the prompt the user that the audio can now be played, and enable the play button: let offlineaudioctx = new offlineaudiocontext(); offlineaudioctx.addeventlistener('complete', () => { console.log('offline audio processing now complete'); showmodaldialog('song processed and ready to play'); playbtn.disabled = false; }) you can also set up the event handler using the offlineaudiocontext.oncomplete property: let offlineaudioctx = new offlineaudiocontext(); offlineaudioctx.oncomplete = function() { console.log('offline audio processing now comple...
OfflineAudioContext - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: complete fired when the rendering of an offline audio context is complete.
PageTransitionEvent.persisted - Web APIs
syntax window.addeventlistener('pageshow', function(event) { if (event.persisted) { console.log('page was loaded from cache.'); } }); value a boolean.
PageTransitionEvent - Web APIs
example html <!doctype html> <html> <body> </body> </html> javascript window.addeventlistener('pageshow', myfunction); function myfunction(event) { if (event.persisted) { alert("the page was cached by the browser"); } else { alert("the page was not cached by the browser"); } } specifications specification status comment html living standardthe definition of 'pagetransitionevent' in that specification.
PannerNode.positionX - Web APIs
if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
ParentNode.append() - Web APIs
WebAPIParentNodeappend
examples appending an element let parent = document.createelement("div") let p = document.createelement("p") parent.append(p) console.log(parent.childnodes) // nodelist [ <p> ] appending text let parent = document.createelement("div") parent.append("some text") console.log(parent.textcontent) // "some text" appending an element and text let parent = document.createelement("div") let p = document.createelement("p") parent.append("some text", p) console.log(parent.childnodes) // nodelist [ #text "some text", <p> ] parentnode.append() is unscopable the app...
ParentNode.children - Web APIs
if the node has no element children, then children is an empty list with a length of 0.
ParentNode.prepend() - Web APIs
examples prepending an element var parent = document.createelement("div"); var p = document.createelement("p"); var span = document.createelement("span"); parent.append(p); parent.prepend(span); console.log(parent.childnodes); // nodelist [ <span>, <p> ] prepending text var parent = document.createelement("div"); parent.append("some text"); parent.prepend("headline: "); console.log(parent.textcontent); // "headline: some text" appending an element and text var parent = document.createelement("div"); var p = document.createelement("p"); parent.prepend("some text", p); console.log(parent.childnodes); // nodelist [ #text "some...
ParentNode - Web APIs
parentnode.queryselectorall() returns a nodelist representing a list of elements with the current element as root that matches the specified group of selectors.
PaymentAddress - Web APIs
mount: { currency: "usd", value: "65.00" }, }, ], shippingoptions: [ { id: "standard", label: "standard shipping", amount: { currency: "usd", value: "0.00" }, selected: true, }, ], }; const options = { requestshipping: true }; async function dopaymentrequest() { const request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
PaymentDetailsUpdate.error - Web APIs
the paymentdetailsupdate object specifies no valid shipping options in its shippingoptions list.
PaymentDetailsUpdate - Web APIs
properties the paymentdetailsupdate dictionary is based on the paymentdetailsbase dictionary, and inherits its properties, which are included in the list below.
PaymentMethodChangeEvent.methodName - Web APIs
this may be a string chosen from the list of standardized payment method identifiers, or a url used by the payment processing service.
PaymentRequest.PaymentRequest() - Web APIs
label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
PaymentRequest.canMakePayment() - Web APIs
for instance, you might call canmakepayment() to determine if the browser will let the user pay using payment request api, and if it won't, you could fall back to another payment method, or offer a list of methods that aren't handled by payment request api (or even provide instructions for paying by mail or by phone).
PaymentRequest: merchantvalidation event - Web APIs
request.addeventlistener("merchantvalidation", event => { event.complete(async () => { const merchantserverurl = window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }, false); }; const response = await request.show(); how merchant server h...
PaymentRequest.shippingAddress - Web APIs
var payment = new paymentrequest(supportedinstruments, details, options); payment.addeventlistener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for brevity.
PaymentRequest: shippingaddresschange event - Web APIs
const paymentrequest = new paymentrequest(methoddata, details, options); paymentrequest.addeventlistener("shippingaddresschange", event => { let detailsupdate = checkaddress(paymentrequest.shippingaddress); event.updatewith(detailsupate); }, false); const checkaddress = theaddress => { let detailsupdate = {}; // check the address, return a paymentdetailsupdate object // with any changes or errors.
PaymentResponse.complete() - Web APIs
if an error occurs, the promise instead rejects, returning one of the exceptions listed below.
PaymentResponse.shippingAddress - Web APIs
var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of brevity.
PaymentResponse.shippingOption - Web APIs
var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingoptionchange', function(evt) { evt.updatewith(new promise(function(resolve, reject) { updatedetails(details, request.shippingoption, resolve, reject); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of brevity.
PaymentResponse - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
Performance: resourcetimingbufferfull event - Web APIs
function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resourcetimingbufferfull', buffer_full); specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
PerformanceEntry - Web APIs
function print_performanceentries() { // use getentries() to get a list of all performance entries var p = performance.getentries(); for (var i=0; i < p.length; i++) { console.log("performanceentry[" + i + "]"); print_performanceentry(p[i]); } } function print_performanceentry(perfentry) { var properties = ["name", "entrytype", "starttime", "duration"]; for (var i=0; i < properties.length;...
PeformanceObserver.disconnect() - Web APIs
syntax performanceobserver.disconnect(); example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event // ...
PerformanceServerTiming - Web APIs
.js server like this: const http = require('http'); function requesthandler(request, response) { const headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=53, app;dur=47.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from javascript via the performanceresourcetiming.servertiming property: let entries = performance.getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duratio...
PerformanceTiming - Web APIs
each time is provided as an unsigned long long representing the moment, in milliseconds since the unix epoch these properties are listed in the order in which they occur during the navigation process.
Using the Performance API - Web APIs
other web performance guides (listed in the see also section) describe how to use additional methods and properties of the performance interface.
Performance API - Web APIs
performance timeline recommendation adds the performanceentry interface, the performanceentrylist type, as well as the getentries(), getentriesbytype(), and getentriesbyname() methods on the performance interface.
PermissionStatus.onchange - Web APIs
} permissionstatus.addeventlistener('change', function() { ...
Permissions.revoke() - Web APIs
var revokepromise = navigator.permissions.revoke(descriptor); parameters descriptor an object based on the permissiondescriptor dictionary that sets options for the operation consisting of a comma-separated list of name-value pairs.
Plugin - Web APIs
WebAPIPlugin
methods plugin.item returns the mime type of a supported content type, given the index number into a list of supported types.
PluginArray - Web APIs
the pluginarray interface is used to store a list of plugin objects describing the available plugins; it's returned by the window.navigator.plugins property.
PointerEvent.isPrimary - Web APIs
target.addeventlistener('pointerdown', function(event) { if (event.isprimary) process_primary_pointer(event); else process_secondary_pointer(event); }, false); specifications specification status comment pointer events – level 2the definition of 'isprimary' in that specification.
PointerEvent.pointerId - Web APIs
let id; // let's assume that this is a previously saved pointerid target.addeventlistener('pointerdown', function(event) { // compare previous event's id that was cached // to current event's id and handle accordingly if (id === event.pointerid) process_event(event); }, false); specifications specification status comment pointer events – level 2the definition of 'pointerid' in that specification.
PointerEvent.pressure - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.pressure == 0) { // no pressure process_no_pressure(event); } else if (event.pressure == 1) { // maximum pressure process_max_pressure(event); } else { // default process_pressure(event); } }, false); specifications specification status comment pointer events – level 2the definition of 'pre...
PointerEvent.tangentialPressure - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.tangentialpressure == 0) { // no pressure process_no_tanpressure(event); } else if (event.tangentialpressure == 1) { // maximum pressure process_max_tanpressure(event); } else { // default process_tanpressure(event); } }, false); specifications specification status comment pointer events – ...
PointerEvent.tiltX - Web APIs
someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status comment pointer events – level 2the definition of 'tiltx' in that specification.
PointerEvent.tiltY - Web APIs
someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status comment pointer events – level 2the definition of 'tilty' in that specification.
PointerEvent.twist - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.twist == 0) { // no twist process_no_twist(event); } else { // default process_twist(event); } }, false); specifications specification status comment pointer events – level 2the definition of 'twist' in that specification.
PointerEvent.width - Web APIs
target.addeventlistener("pointerdown", function(ev) { // calculate the contact area var area = ev.width * ev.height; }, false); specifications specification status comment pointer events – level 2the definition of 'width' in that specification.
PromiseRejectionEvent.promise - Web APIs
examples this example listens for unhandled promises and, if the reason is an object with a code field containing the text "module not ready", it sets up an idle callback that will retry the task that failed to execute correctly.
PublicKeyCredentialRequestOptions.extensions - Web APIs
here is the current (as of march 2019) list of potential extensions which may be used during the registration operation.
PushManager.subscribe() - Web APIs
console.log(error); } ); }); responding to user gestures subscribe() calls should be done in response to a user gesture, such as clicking a button, for example: btn.addeventlistener('click', function() { serviceworkerregistration.pushmanager.subscribe(options) .then(function(pushsubscription) { // handle subscription }); }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture.
PushMessageData.arrayBuffer() - Web APIs
examples self.addeventlistener('push', function(event) { var buffer = event.data.arraybuffer(); // do something with your array buffer }); specifications specification status comment push apithe definition of 'arraybuffer()' in that specification.
PushMessageData.blob() - Web APIs
examples self.addeventlistener('push', function(event) { var blob = event.data.blob(); // do something with your blob }); specifications specification status comment push apithe definition of 'blob()' in that specification.
PushMessageData.json() - Web APIs
examples self.addeventlistener('push', function(event) { var mydata = event.data.json(); // do something with your data }); specifications specification status comment push apithe definition of 'json()' in that specification.
PushMessageData.text() - Web APIs
examples self.addeventlistener('push', function(event) { var textobj = event.data.text(); // do something with your text }); specifications specification status comment push apithe definition of 'text()' in that specification.
PushMessageData - Web APIs
examples self.addeventlistener('push', function(event) { var obj = event.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { firenotification(obj, event); port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); specifications specification status comment push apithe definition of 'pushmessaged...
PushSubscription.getKey() - Web APIs
og('not yet subscribed to push') // we aren't subscribed to push, so set ui // to allow the user to enable push return; } // set your ui to show they have subscribed for // push messages subbtn.textcontent = 'unsubscribe from push messaging'; ispushenabled = true; // initialize status, which includes setting ui elements for subscribed status // and updating subscribers list via push var endpoint = subscription.endpoint; var key = subscription.getkey('p256dh'); var auth = subscription.getkey('auth'); ...
RTCDTMFSender: tonechange event - Web APIs
this can be done using addeventlistener(): dtmfsender.addeventlistener("tonechange", ev => { let tone = ev.tone; if (tone === "") { tone = "&lt;none&gt;"; } document.getelementbyid("playingtone").innertext = tone; }, false); you can also just set the ontonechange event handler property directly: dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "&lt;none&gt;" } do...
RTCDTMFToneChangeEvent - Web APIs
dtmfsender.addeventlistener("change", function(event) { if (event.tone !== "") { dialstringbox.innertext += event.tone; } else { senddtmfbutton.disabled = false; } }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftonechangeevent' in that specification.
RTCDataChannel.binaryType - Web APIs
example this code configures a data channel to receive binary data in arraybuffer objects, and establishes a listener for message events which constructs a string representing the received data as a list of hexadecimal byte values.
RTCDataChannel.bufferedAmountLowThreshold - Web APIs
listeners may be added with onbufferedamountlow or addeventlistener().
RTCDataChannel: close event - Web APIs
dc.addeventlistener("close", ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; }, false); all this code does in response to receiving the close event is to disable an input box and its "send" button, and to enable the button used to start a call (while disabling the one that ends a call).
RTCDataChannel: error event - Web APIs
cookie error", "sender is out of resource (i.e., memory)", "unable to resolve address", "unrecognized sctp chunk type received", "invalid mandatory parameter", "unrecognized parameters", "no user data (sctp data chunk has no data)", "cookie received while shutting down", "restart of an association with new addresses", "user-initiated abort", "protocol violation" ]; dc.addeventlistener("error", ev => { const err = ev.error; console.error("webrtc error: ", err.message); // handle specific error detail types switch(err.errordetail) { case "sdp-syntax-error": console.error(" sdp syntax error in line ", err.sdplinenumber); break; case "idp-load-failure": console.error(" identity provider load failure: http error ", ...
RTCDataChannel: message event - Web APIs
dc.addeventlistener("message", ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); }, false); lines 2-4 create the new paragraph element and add the message data to it as a new text node.
RTCDataChannel: open event - Web APIs
dc.addeventlistener("open", ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.focus(); }, false); this can also be done by directly setting the value of the channel's onopen event handler property.
RTCDataChannelEvent - Web APIs
just listen for the datachannel event to be received by the rtcpeerconnection and when you receive it, use the rtcdatachannelevent.channel property to gain access to the data channel which has been opened.
RTCDtlsTransport.state - Web APIs
*/ function tallysenders(pc) { let results = { transportmissing: 0, connectionpending: 0, connected: 0, closed: 0, failed: 0, unknown: 0 }; let senderlist = pc.getsenders(); senderlist.foreach(sender => { let transport = sender.transport; if (!transport) { results.transportmissing++; } else { switch(transport.state) { case "new": case "connecting": results.connectionpending++; break; case "connected": results.connected++; break; case "closed": ...
RTCDtlsTransport - Web APIs
*/ function tallysenders(pc) { let results = { transportmissing: 0, connectionpending: 0, connected: 0, closed: 0, failed: 0, unknown: 0 }; let senderlist = pc.getsenders(); senderlist.foreach(sender => { let transport = sender.transport; if (!transport) { results.transportmissing++; } else { switch(transport.state) { case "new": case "connecting": results.connectionpending++; break; case "connected": results.connected++; break; case "closed": ...
RTCIceCandidate.address - Web APIs
if (ipbanlist.includes(candidate.address)) { rejectcandidate(candidate); } else { acceptcandidate(candidate); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate: address' in that specification.
RTCIceCandidate.type - Web APIs
these candidate types are listed in order of priority; the higher in the list they are, the more efficient they are.
RTCIceCandidate.usernameFragment - Web APIs
ewcandidate = signalmsg => { let candidate = new rtcicecandidate(signalmsg.candidate); let receivers = pc.getreceivers(); receivers.foreach(receiver => { let parameters = receiver.transport.getparameters(); if (parameters.usernamefragment === candidate.usernamefragment) { return; } }); pc.addicecandidate(candidate) .catch(reporterror); } this walks through the list of the rtcrtpreceiver objects being used to receive ice data, and looks to see if the usernamefragment indicated in the candidate matches any of them.
RTCIceCandidate - Web APIs
the permitted values are listed in the rtcicecomponent enumerated type.
RTCIceCandidatePair.local - Web APIs
var candidatepair = pc.getsenders()[0].transport.transport.getselectedcandidatepair(); var localcandidate = candidatepair.local; the rtcicetransport is found by getting the list of rtcrtpsender objects for the rtcpeerconnection pc.
RTCIceCandidatePair.remote - Web APIs
var candidatepair = pc.getsenders()[0].transport.transport.getselectedcandidatepair(); var remotecandidate = candidatepair.remote; the rtcicetransport is found by getting the list of rtcrtpsender objects for the rtcpeerconnection pc.
RTCIceCandidateType - Web APIs
values these candidate types are listed in order of priority; the higher in the list they are, the more efficient they are.
RTCIceRole - Web APIs
the rtcicerole enumerated type lists the string values that identify whether a connection's ice agent is serving as the controlling agent or the controlled agent, as indicated by rtcicetransport.role.
RTCIceTransport: gatheringstatechange event - Web APIs
here, the addeventlistener() method is called to add a listener for gatheringstatechange events: pc.getsenders().foreach(sender => { sender.transport.icetransport.addeventlistener("gatheringstatechange", ev => { let transport = ev.target; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }, false); likewis...
RTCIceTransport: selectedcandidatepairchange event - Web APIs
let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem = document.getelementbyid("local-protocol"); let remoteprotoelem = document.getelementbyid("remote-protocol"); icetransport.addeventlistener("selectedcandidatepairchange", ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); }, false) this can also be done by setting the onselectedcandidatepairchange event handler property directly.
RTCIceTransport: statechange event - Web APIs
let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.addeventlistener("statechange", ev => { if (icetransport.state === "failed") { handlefailure(pc); } }, false); the same code, using the onstatechange event handler property, looks like this: let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = ev => { if (icetransport.state === "failed") { handlefailure(pc); } }; specifications specifica...
RTCPeerConnection.addIceCandidate() - Web APIs
during negotiation, your app will likely receive many candidates which you'll deliver to the ice agent in this way, allowing it to build up a list of potential connection methods.
RTCPeerConnection.addStream() - Web APIs
you can write web compatible code using feature detection instead: // add a track to a stream and the peer connection said stream was added to: stream.addtrack(track); if (pc.addtrack) { pc.addtrack(track, stream); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } // remove a track from a stream and the peer connection said stream was added to: stream.removetrack(track); if (pc.removetrack) { pc.removetrack(pc.getsenders().find(sender => sender.track == track)); } else { // if you have code listening for negotiationneeded events: settimeout(()...
RTCPeerConnection.canTrickleIceCandidates - Web APIs
pc.setremotedescription(remoteoffer) .then(_ => pc.createanswer()) .then(answer => pc.setlocaldescription(answer)) .then(_ => if (pc.cantrickleicecandidates) { return pc.localdescription; } return new promise(r => { pc.addeventlistener('icegatheringstatechange', e => { if (e.target.icegatheringstate === 'complete') { r(pc.localdescription); } }); }); }) .then(answer => sendanswertopeer(answer)) // signaling message .catch(e => handleerror(e)); pc.addeventlistener('icecandidate', e => { if (pc.cantrickleicecandidates) { sendcandidatetopeer(e.candidate); // signaling message ...
RTCPeerConnection: connectionstatechange event - Web APIs
: setonlinestatus("online"); break; case "disconnected": setonlinestatus("disconnecting..."); break; case "closed": setonlinestatus("offline"); break; case "failed": setonlinestatus("error"); break; default: setonlinestatus("unknown"); break; } } you can also create a handler for connectionstatechange by using addeventlistener(): pc.addeventlistener("connectionstatechange", ev => { switch(pc.connectionstate) { /* ...
RTCPeerConnection.currentLocalDescription - Web APIs
also included is a list of any ice candidates that may already have been generated by the ice agent since the offer or answer represented by the description was first instantiated.
RTCPeerConnection.currentRemoteDescription - Web APIs
also included is a list of any ice candidates that may already have been generated by the ice agent since the offer or answer represented by the description was first instantiated.
RTCPeerConnection: datachannel event - Web APIs
pc.addeventlistener("datachannel", ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; }, false); receivechannel is set to the value of the event's channel property, which specifies the rtcdatachannel object representing the data channel linking the remote peer to the local one.
RTCPeerConnection.getConfiguration() - Web APIs
the configuration includes a list of the ice servers used by the connection, information about transport policies, and identity information.
RTCPeerConnection.getStats() - Web APIs
a section is created for each report with a header and all of the statistics below, with the type, id, and timestamp handled specially to place them at the top of the list.
RTCPeerConnection: icegatheringstatechange event - Web APIs
pc.onicegatheringstatechange = ev => { let connection = ev.target; switch(connection.icegatheringstate) { case "gathering": /* collection of candidates has begun */ break; case "complete": /* collection of candidates is finished */ break; } } likewise, you can use addeventlistener() to add a listener for icegatheringstatechange events: pc.addeventlistener("icegatheringstatechange", ev => { let connection = ev.target; switch(connection.icegatheringstate) { case "gathering": /* collection of candidates has begun */ break; case "complete": /* collection of candidates is finished */ break; } }, false); specifications speci...
RTCPeerConnection.onaddstream - Web APIs
pc.onaddstream = function(event) { document.getelementbyid("received_video").srcobject = event.stream; document.getelementbyid("hangup-button").disabled = false; }; you can also use addeventlistener() to add a handler for addstream events to an rtcpeerconnection.
RTCPeerConnection.onicecandidateerror - Web APIs
see rfc 5389, section 15.6 // for a list of codes.
RTCPeerConnection.onnegotiationneeded - Web APIs
the rtcpeerconnection interface's onnegotiationneeded property is an eventlistener which specifies a function which is called to handle the negotiationneeded event when it occurs on an rtcpeerconnection instance.
RTCPeerConnection.onsignalingstatechange - Web APIs
you may also, as always, set up a handler for the signalingstatechange event using addeventlistener(): myrtcpeerconnection.addeventlistener("signalingstatechange", mysignalingstatechangehandler); or, using an anonymous (inline) handler: myrtcpeerconnection.addeventlistener("signalingstatechange", event => { /* handle the event here */ }); example this snippet shows a handler for signalingstatechange that looks for the "have-local-pranswer" signaling state—indicating that a remote ...
RTCPeerConnection.ontrack - Web APIs
this information includes the mediastreamtrack object representing the new track, the rtcrtpreceiver and rtcrtptransceiver, and a list of mediastream objects which indicates which stream or streams the track is part of..
RTCPeerConnection.removeStream() - Web APIs
example var pc, videostream; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); videostream = stream; pc.addstream(stream); } document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removestream(videostream); pc.close(); }, false); ...
RTCPeerConnection.restartIce() - Web APIs
pc.addeventlistener("iceconnectionstatechange", event => { if (pc.iceconnectionstate === "failed") { /* possibly reconfigure the connection in some way here */ /* then request ice restart */ pc.restartice(); } }); with this code in place, a transition to the failed state during ice negotiation will cause a negotiationneeded event to be fired, in response to which your code should renegotiate as...
RTCPeerConnection.setConfiguration() - Web APIs
syntaxerror one or more of the urls provided in the configuration.iceservers list is invalid.
RTCPeerConnection.setIdentityProvider() - Web APIs
it defaults to "default" and is used to determine the url where the idp is listening.
RTCPeerConnection.setLocalDescription() - Web APIs
pc.addeventlistener("negotiationneeded", async (event) => { await pc.setlocaldescription(); signalremotepeer({ description: pc.localdescription }); }); other than error handling, that's about it!
RTCPeerConnection: signalingstatechange event - Web APIs
pc.addeventlistener("signalingstatechange", ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }, false); using onsignalingstatechange, it looks like this: pc.onsignalingstatechange = ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }; specifications spec...
RTCPeerConnectionIceErrorEvent.address - Web APIs
pc.addeventlistener("icecandidateerror", (event) => { let networkinfo = `[local interface: ${event.address}:${event.port}`; let iceserverinfo = `[ice server: ${event.url}`; showmessage(errortext, iceserverinfo, networkinfo); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerrorevent.address...
RTCRtpCapabilities - Web APIs
don't be surprised to see these show up ijn the list; be prepared to ignore them if you're only interested in the actual codecs used for the media itself.
RTCRtpCodecCapability - Web APIs
the iana maintains a list of codecs and their parameters, including their clock rates.
RTCRtpReceiver.getCapabilities() static function - Web APIs
description as a static function, this is always called using the form: capabilities = rtcrtpreceiver.getcapabilities("audio"); the returned set of capabilities is the most optimistic possible list.
RTCRtpSendParameters.encodings - Web APIs
syntax sendparameters.encodings = encodingparameterlist; encodingparameterlist = sendparameters.encodings; value an array of objects conforming to the rtcrtpencodingparameters dictionary, each of which contains properties which provide settings and parameters that describe and configure a single codec that could be used to encode the track.
RTCRtpSender.getCapabilities() static function - Web APIs
description as a static function, this is always called using the form: capabilities = rtcrtpsender.getcapabilities("audio"); the returned set of capabilities is the most optimistic possible list.
RTCRtpSender.setStreams() - Web APIs
function addtrackstostream(stream) { let senders = pc.getsenders(); senders.foreach((sender) => { if (sender.track && (sender.transport.state === connected)) { sender.setstreams(stream); } }); } after calling the rtcpeerconnection method getsenders() to get the list of the connection's senders, the addtrackstostream() function iterates over the list.
RTCRtpTransceiver.currentDirection - Web APIs
[1] to determine if a sender has at least one active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its active property set to true, the sender has an active encoding.
RTCRtpTransceiver.direction - Web APIs
[1] to determine if a sender has at least one active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its active property set to true, the sender has an active encoding.
RTCRtpTransceiver - Web APIs
methods setcodecpreferences() a list of rtcrtpcodecparameters objects which override the default preferences used by the user agent for the transceiver's codecs.
RTCRtpTransceiverDirection - Web APIs
[1] to determine if a sender has at least one active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its active property set to true, the sender has an active encoding.
RTCTrackEventInit.streams - Web APIs
syntax var trackeventinit = { receiver: rtpreceiver, track: mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var streamlist = trackeventinit.streams; value an array of mediastream objects, one for each stream which make up the track.
Range.cloneContents() - Web APIs
event listeners added using dom events are not copied during cloning.
Range.selectNodeContents() - Web APIs
use the buttons below</b> to select or deselect the contents of this paragraph.</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p = document.getelementbyid('p'); const selectbutton = document.getelementbyid('select-button'); const deselectbutton = document.getelementbyid('deselect-button'); selectbutton.addeventlistener('click', e => { // clear any current selection const selection = window.getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(); range.selectnodecontents(p); selection.addrange(range); }); deselectbutton.addeventlistener('click', e => { const selection = window.getselection(); selection.removeallranges(); }); result specifi...
Range - Web APIs
WebAPIRange
range.getclientrects() returns a list of domrect objects that aggregates the results of element.getclientrects() for all the elements in the range.
ReadableStream.ReadableStream() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, ...
ReadableStreamDefaultController.close() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, ...
ReadableStreamDefaultController.enqueue() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, ...
ReadableStreamDefaultController - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, ...
ReportingObserver.takeRecords() - Web APIs
the takerecords() method of the reportingobserver interface returns the current list of reports contained in the observer's report queue, and empties the queue.
Reporting API - Web APIs
because of this, when the button is pressed only the second report is listed.
Request.context - Web APIs
WebAPIRequestcontext
note: you can find a full list of the different available contexts including associated context frame types, csp directives, and platform feature examples in the fetch spec request context section.
ResizeObserver.disconnect() - Web APIs
examples btn.addeventlistener('click', () => { resizeobserver.disconnect(); }) specifications specification status comment resize observerthe definition of 'disconnect()' in that specification.
ResizeObserver.unobserve() - Web APIs
e.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if(checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment resize observerthe definition of 'unobserve()' in that specification.
Resize Observer API - Web APIs
to achieve this, a limited solution would be to listen to changes to a suitable event that hints at the element you are interested in changing size (e.g.
Response - Web APIs
WebAPIResponse
response.redirected read only indicates whether or not the response is the result of a redirect (that is, its url list has more than one entry).
SVGComponentTransferFunctionElement - Web APIs
svgcomponenttransferfunctionelement.tablevalues read only an svganimatednumberlist corresponding to the tablevalues attribute of the given element.
SVGElement: abort event - Web APIs
bubbles no cancelable no interface svgevent event handler property onabort examples svgelem.addeventlistener('abort', () => { console.log('load aborted.'); }) specifications not really described anywhere specifically, but mentioned in the svg 2 spec.
SVGElement: error event - Web APIs
bubbles yes cancelable no interface svgevent event handler property onerror examples svgelem.addeventlistener('error', () => { console.log('svg not loaded properly.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'error' in that specification.
SVGElement: load event - Web APIs
bubbles no cancelable no interface svgevent event handler property onload examples svgelem.addeventlistener('load', () => { console.log('svg loaded.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'load' in that specification.
SVGElement: resize event - Web APIs
bubbles no cancelable no interface svgevent event handler property onresize examples svgelem.addeventlistener('resize', () => { console.log('svg resized.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'event changes in svg2' in that specification.
SVGElement: scroll event - Web APIs
bubbles no cancelable no interface svgevent event handler property onscroll examples svgelem.addeventlistener('scroll', () => { console.log('svg scrolled.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'event changes in svg2' in that specification.
SVGElement: unload event - Web APIs
bubbles no cancelable no interface svgevent event handler property onunload examples svgelem.addeventlistener('unload', () => { console.log('svg unloaded.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'unload' in that specification.
SVGElement: zoom event - Web APIs
bubbles yes cancelable no interface svgevent event handler property onzoom examples svgelem.addeventlistener('zoom', () => { console.log('svg zoomed.'); }) ...
SVGFEColorMatrixElement - Web APIs
svgfecolormatrixelement.values read only an svganimatednumberlist corresponding to the values attribute of the given element.
SVGFECompositeElement - Web APIs
svgfecompositeelement.values read only an svganimatednumberlist corresponding to the values attribute of the given element.
SVGFEConvolveMatrixElement - Web APIs
svgfeconvolvematrixelement.kernelmatrix read only an svganimatednumberlist corresponding to the kernelmatrix attribute of the given element.
SVGGradientElement - Web APIs
svggradientelement.gradienttransform read only returns an svganimatedtransformlist corresponding to attribute gradienttransform on the given element.
SVGGraphicsElement: copy event - Web APIs
x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGGraphicsElement: paste event - Web APIs
idth="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGGraphicsElement - Web APIs
svggraphicselement.transform read only an svganimatedtransformlist reflecting the computed value of the transform property and its corresponding transform attribute of the given element.
SVGPathElement - Web APIs
svgpathelement.getpathsegatlength() returns an unsigned long representing the index within the pathseglist utilizing the user agent's distance-along-a-path algorithm.
SVGPatternElement - Web APIs
svgpatternelement.patterntransform read only an svganimatedtransformlist corresponding to the patterntransform attribute of the given <pattern> element.
SVGRenderingIntent - Web APIs
the svgrenderingintent interface defines the enumerated list of possible values for rendering-intent attributes or descriptors.
SVGTransform - Web APIs
svg transform interface svgtransform is the interface for one of the component transformations within an svgtransformlist; thus, an svgtransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute.
SVGTransformable - Web APIs
interface overview also implement none methods none properties readonly svganimatedtransformlist transform normative document svg 1.1 (2nd edition) properties name type description transform svganimatedtransformlist corresponds to attribute transform on the given element.
ScreenOrientation.onchange - Web APIs
syntax screenorientation.addeventlistener('change', function(e) { ...
Screen Capture API - Web APIs
feature policy validation user agents that support feature policy (either using http's feature-policy header or the <iframe> attribute allow) can specify a desire to use the screen capture api using the policy control directive display-capture: <iframe allow="display-capture" src="/some-other-document.html"> the default allow list is self, which lets the any content within the document use screen capture.
ScriptProcessorNode: audioprocess event - Web APIs
bubbles no cancelable no default action none interface audioprocessingevent event handler property scriptprocessornode.onaudioprocess examples scriptnode.addeventlistener('audioprocess', function(audioprocessingevent) { // the input buffer is a song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels;...
ScriptProcessorNode - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: audioprocess fired when an input buffer of a scriptprocessornode is ready to be processed.
ScrollToOptions.behavior - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.left - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.top - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
SecurityPolicyViolationEvent.blockedURI - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.blockeduri); }); specifications specification status comment content security policy level 3the definition of 'blockeduri' in that specification.
SecurityPolicyViolationEvent.columnNumber - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.columnnumber); }); specifications specification status comment content security policy level 3the definition of 'columnnumber' in that specification.
SecurityPolicyViolationEvent.disposition - Web APIs
possible values are "enforce" or "report" example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.disposition); }); specifications specification status comment content security policy level 3the definition of 'disposition' in that specification.
SecurityPolicyViolationEvent.documentURI - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.documenturi); }); specifications specification status comment content security policy level 3the definition of 'documenturi' in that specification.
SecurityPolicyViolationEvent.effectiveDirective - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.effectivedirective); }); specifications specification status comment content security policy level 3the definition of 'effectivedirective' in that specification.
SecurityPolicyViolationEvent.lineNumber - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.linenumber); }); specifications specification status comment content security policy level 3the definition of 'linenumber' in that specification.
SecurityPolicyViolationEvent.originalPolicy - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.originalpolicy); }); specifications specification status comment content security policy level 3the definition of 'originalpolicy' in that specification.
SecurityPolicyViolationEvent.referrer - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.referrer); }); specifications specification status comment content security policy level 3the definition of 'referrer' in that specification.
SecurityPolicyViolationEvent.sample - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sample); }); specifications specification status comment content security policy level 3the definition of 'sample' in that specification.
SecurityPolicyViolationEvent.sourceFile - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sourcefile); }); specifications specification status comment content security policy level 3the definition of 'sourcefile' in that specification.
SecurityPolicyViolationEvent.statusCode - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.statuscode); }); specifications specification status comment content security policy level 3the definition of 'statuscode' in that specification.
SecurityPolicyViolationEvent.violatedDirective - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.violateddirective); }); specifications specification status comment content security policy level 3the definition of 'violateddirective' in that specification.
SecurityPolicyViolationEvent - Web APIs
examples document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.blockeduri); console.log(e.violateddirective); console.log(e.originalpolicy); }); specifications specification status comment content security policy level 2the definition of 'securitypolicyviolationevent' in that specification.
Selection.addRange() - Web APIs
html <p>i <strong>insist</strong> that you <strong>try</strong> selecting the <strong>strong words</strong>.</p> <button>select strong words</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', function () { let selection = window.getselection(); let strongs = document.getelementsbytagname('strong'); if (selection.rangecount > 0) { selection.removeallranges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); selection.addrange(range); } }); result specifications specifi...
Selection.deleteFromDocument() - Web APIs
once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection = window.getselection(); selection.deletefromdocument(); } result specifications specification status comment selection apithe definition of 'selection.deletefromdocument()' in that specification.
Selection.modify() - Web APIs
WebAPISelectionmodify
eboundary">line boundary</option> <option value="sentenceboundary">sentence boundary</option> <option value="paragraphboundary">paragraph boundary</option> <option value="documentboundary">document boundary</option> </select> <br><br> <button>extend selection</button> javascript let select = document.queryselector('select'); let button = document.queryselector('button'); button.addeventlistener('click', modify); function modify() { let selection = window.getselection(); selection.modify('extend', 'forward', select.value); } result specifications this method is not part of any specification.
Selection.selectAllChildren() - Web APIs
example html <main> <button>select footer</button> <p>welcome to my website.</p> <p>i hope you enjoy your visit.</p> </main> <footer> <address>webmaster@example.com</address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.addeventlistener('click', (e) => { window.getselection().selectallchildren(footer); }); result specifications specification status comment selection apithe definition of 'selection.selectallchildren()' in that specification.
Selection API - Web APIs
see also key quote generator: a simple demo showing typical usage of the selection api to capture the current selection at any point and copy selections into a list (see it live also).
Sensor.onactivate - Web APIs
WebAPISensoronactivate
syntax sensorinstance.onactivate = function sensorinstance.addeventlistener('activate', function() { ...
Sensor.onerror - Web APIs
WebAPISensoronerror
syntax sensorinstance.onerror = function sensorinstance.addeventlistener('error', function() { ...
Sensor.onreading - Web APIs
WebAPISensoronreading
syntax sensorinstance.onreading = function sensorinstance.addeventlistener('reading', function() { ...
Sensor - Web APIs
WebAPISensor
interfaces based on sensor below is a list of interfaces based on the sensor interface.
ServiceWorkerGlobalScope: activate event - Web APIs
globalscope.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); you can also set up the event handler using the serviceworkerglobalscope.onactivate property: globalscope.onactivate = function(event) { ...
ServiceWorkerGlobalScope: contentdelete event - Web APIs
self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); you can also set up the event handler using the serviceworkerglobalscope.ondelete property: self.oncontentdelete = (event) => { ...
ServiceWorkerGlobalScope: install event - Web APIs
bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.oninstall examples the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/g...
ServiceWorkerGlobalScope: message event - Web APIs
// in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', ...
ServiceWorkerGlobalScope.onactivate - Web APIs
then.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); specifications specification status comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.oncontentdelete - Web APIs
self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); specifications specification status comment unknownthe definition of 'contentdelete' in that specification.
ServiceWorkerGlobalScope.oninstall - Web APIs
}; examples the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/g...
ServiceWorkerGlobalScope.onmessage - Web APIs
}; example self.addeventlistener('message', function(messageevent) { console.log('handling message event:', messageevent); }) specifications specification status comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
}; example self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status comment notifications apithe definition of 'onnotificationclick' in that specification...
onnotificationclose - Web APIs
}; serviceworkerglobalscope.addeventlistener('notificationclose', function(notificationevent) { ...
ServiceWorkerGlobalScope.onsync - Web APIs
} self.addeventlistener('sync', function(syncevent) { ...
ServiceWorkerGlobalScope: push event - Web APIs
self.addeventlistener("push", event => { let message = event.data.json(); switch(message.type) { case "init": doinit(); break; case "shutdown": doshutdown(); break; } }, false); specifications specification status comment push apithe definition of 'push' in that specification.
ServiceWorkerGlobalScope.skipWaiting() - Web APIs
self.addeventlistener('install', function(event) { // the promise that skipwaiting() returns can be safely ignored.
ServiceWorkerMessageEvent.ServiceWorkerMessageEvent() - Web APIs
examples var init = { data : 'hello message', source : messageportreference, ports : messageportlistreference } var myswme = new serviceworkermessageevent('message', init); ...
ServiceWorkerRegistration.onupdatefound - Web APIs
the onupdatefound property of the serviceworkerregistration interface is an eventlistener property called whenever an event of type statechange is fired; it is fired any time the serviceworkerregistration.installing property acquires a new service worker.
ShadowRoot - Web APIs
documentorshadowroot.stylesheets read only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.
SharedWorkerGlobalScope: connect event - Web APIs
self.onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); } port.start(); } for a complete running example, see our basic shared worker example (run shared worker.) addeventlistener equivalent you could also set up an event handler using the addeventlistener() method: self.addeventlistener('connect', function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); } }); specifications specification status html living standardthe definit...
SourceBuffer.trackDefaults - Web APIs
syntax var mytrackdefaults = sourcebuffer.trackdefaults; sourcebuffer.trackdefaults = mytrackdefaultlist; value a trackdefaultlist object.
SpeechGrammar.SpeechGrammar() - Web APIs
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var newgrammar = new speechgrammar(); newgrammar.src = '#jsgf v1.0; grammar names; public <name> = chris | kirsty | mike;' speechrecognitionlist[1] = newgrammar; // should add the new speechgrammar object to the list specifications specification status comme...
SpeechGrammar.src - Web APIs
WebAPISpeechGrammarsrc
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; console.log(speechrecognitionlist[0].src); // should return the same as the contents of the grammar variable console.log(speechrecognitionlist[0].weight); // should return 1 - the same as the weight set in line 4.
SpeechGrammar.weight - Web APIs
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; console.log(speechrecognitionlist[0].src); // should return the same as the contents of the grammar variable console.log(speechrecognitionlist[0].weight); // should return 1 - the same as the weight set in line 4.
SpeechGrammar - Web APIs
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; console.log(speechrecognitionlist[0].src); // should return the same as the contents of the grammar variable console.log(speechrecognitionlist[0].weight); // should return 1 - the same as the weight set in line 4.
SpeechRecognition() - Web APIs
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition: audioend event - Web APIs
bubbles no cancelable no interface event event handler onaudioend examples you can use the audioend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audioend', function() { console.log('audio capturing ended'); }); or use the onaudioend event handler property: recognition.onaudioend = function() { console.log('audio capturing ended'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: audiostart event - Web APIs
bubbles no cancelable no interface event event handler onaudiostart examples you can use the audiostart event in an onaudiostart method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audiostart', function() { console.log('audio capturing started'); }); or use the onaudiostart event handler property: recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition.continuous - Web APIs
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition: end event - Web APIs
bubbles no cancelable no interface event event handler property onend examples you can use the end event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('end', function() { console.log('speech recognition service disconnected'); }); or use the onend event handler property: recognition.onend = function() { console.log('speech recognition service disconnected'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specificati...
SpeechRecognition: error event - Web APIs
bubbles no cancelable no interface speechrecognitionerrorevent event handler property onerror examples you can use the error event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('error', function(event) { console.log('speech recognition error detected: ' + event.error'); }); or use the onerror event handler property: recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error'); } specifications specification status comment web speech apithe definiti...
SpeechRecognition.interimResults - Web APIs
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.lang - Web APIs
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition.maxAlternatives - Web APIs
oral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; ...
SpeechRecognition: nomatch event - Web APIs
bubbles no cancelable no interface speechrecognitionevent event handler property onnomatch examples you can use the nomatch event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('nomatch', function() { console.log('speech not recognized'); }); or use the onnomatch event handler property: recognition.onnomatch = function() { console.log('speech not recognized'); } specifications specification status comment web speech apith...
SpeechRecognition.onresult - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognition.onstart - Web APIs
the onstart property of the speechrecognition interface represents an event handler that will run when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition (when the start event fires.) syntax myspeechrecognition.onstart = function() { ...
SpeechRecognition: result event - Web APIs
you can use the result event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('result', function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; }); or use the onresult event handler property: recognition.onresult = function(event) { var color = ev...
SpeechRecognition: soundend event - Web APIs
bubbles no cancelable no interface event event handler property onsoundend examples you can use the soundend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundend', function(event) { console.log('sound has stopped being received'); }); or use the onsoundend event handler property: recognition.onsoundend = function(event) { console.log('sound has stopped being received'); } specifications specification status comment web speech apithe definition of 'speech recognition e...
SpeechRecognition: soundstart event - Web APIs
bubbles no cancelable no interface event event handler property onsoundstart examples you can use the soundstart event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundstart', function() { console.log('some sound is being received'); }); or use the onsoundstart event handler property: recognition.onsoundstart = function() { console.log('some sound is being received'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that sp...
SpeechRecognition: speechend event - Web APIs
bubbles no cancelable no interface event event handler property onspeechend examples you can use the speechend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechend', function() { console.log('speech has stopped being detected'); }); or use the onspeechend event handler property: recognition.onspeechend = function() { console.log('speech has stopped being detected'); } specifications specification status comment web speech apithe definition of 'speech recognitio...
SpeechRecognition: speechstart event - Web APIs
bubbles no cancelable no interface event event handler property onspeechstart examples you can use the speechstart event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechstart', function() { console.log('speech has been detected'); }); or use the onspeechstart event handler property: recognition.onspeechstart = function() { console.log('speech has been detected'); } specifications specification status comment web speech apithe definition of 'speech recognition ev...
SpeechRecognitionAlternative.confidence - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognitionAlternative.transcript - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognitionAlternative - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognitionResult.isFinal - Web APIs
examples recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognitionResult.item() - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognitionResult.length - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechRecognitionResult - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
SpeechSynthesisUtterance: boundary event - Web APIs
bubbles no cancelable no interface speechsynthesisevent event handler onboundary examples you can use the boundary event in an addeventlistener method: utterthis.addeventlistener('boundary', function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); }); or use the onboundary event handler property: utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speech synthesis uttera...
SpeechSynthesisUtterance: end event - Web APIs
bubbles no cancelable no interface speechsynthesisevent event handler property onend examples you can use the end event in an addeventlistener method: utterthis.addeventlistener('end', function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); }); or use the onend event handler property: utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speech synthesis ut...
SpeechSynthesisUtterance: error event - Web APIs
bubbles no cancelable no interface speechsynthesiserrorevent event handler property onerror examples you can use the error event in an addeventlistener method: utterthis.addeventlistener('error', function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); }); or use the onerror event handler property: utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); } specifications specification status comment web speech apithe definition of 'sp...
SpeechSynthesisUtterance: mark event - Web APIs
bubbles no cancelable no interface speechsynthesisevent event handler property onmark examples you can use the mark event in an addeventlistener method: utterthis.addeventlistener('mark', function(event) { console.log('a mark was reached: ' + event.name); }); or use the onmark event handler property: utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: pause event - Web APIs
bubbles no cancelable no interface speechsynthesisevent event handler property onpause examples you can use the pause event in an addeventlistener method: utterthis.addeventlistener('pause', function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); }); or use the onpause event handler property: utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specifi...
SpeechSynthesisUtterance: resume event - Web APIs
bubbles no cancelable no interface speechsynthesisevent event handler property onresume examples you can use the resume event in an addeventlistener method: utterthis.addeventlistener('resume', function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); }); or use the onresume event handler property: utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specificatio...
SpeechSynthesisUtterance: start event - Web APIs
bubbles no cancelable no interface speechsynthesisevent event handler property onstart examples you can use the start event in an addeventlistener method: utterthis.addeventlistener('start', function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); }); or use the onstart event handler property: utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specifi...
StorageQuota.supportedTypes - Web APIs
the supportedtypes read-only property of the storagequota interface returns a list of the available storage types.
StorageQuota - Web APIs
properties storagequota.supportedtypes read only returns a list of the available storage types.
Using the Storage Access API - Web APIs
}); note that access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click — so this code needs to be run inside some kind of user gesture-based event handler, for example: btn.addeventlistener('click', () => { // run code here }); ...
Streams API concepts - Web APIs
in general, the strategy compares the size of the chunks in the queue to a value called the high water mark, which is the largest total chunk size that the queue can realistically manage.
Using writable streams - Web APIs
-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, ...
StylePropertyMap.append() - Web APIs
syntax stylepropertymap.append(property,value) parameters property an identifier indicating the stylistic feature (e.g.
StylePropertyMap.delete() - Web APIs
syntax stylepropertymap.delete(property) parameters property an identifier indicating the stylistic feature (e.g.
StylePropertyMap.set() - Web APIs
syntax stylepropertymap.set(property,value) parameters property an identifier indicating the stylistic feature (e.g.
StyleSheet.media - Web APIs
WebAPIStyleSheetmedia
it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium().
StyleSheet - Web APIs
stylesheet.media read only returns a medialist representing the intended destination medium for style information.
SubmitEvent.submitter - Web APIs
let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
SubtleCrypto - Web APIs
even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.
SyncManager.getTags() - Web APIs
the syncmanager.gettags method of the syncmanager interface returns a list of developer-defined identifiers for syncmanager registrations.
Touch.identifier - Web APIs
WebAPITouchidentifier
example someelement.addeventlistener('touchmove', function(e) { // iterate through the list of touch points that changed // since the last event and print each touch point's identifier.
Touch.radiusX - Web APIs
WebAPITouchradiusX
</div> var src = document.getelementbyid("src"); src.addeventlistener('touchstart', rotate); src.addeventlistener('touchmove', rotate); src.addeventlistener('touchend', rotate); function rotate (e) { var touch = e.changedtouches.item(0); // turn off default event handling e.preventdefault(); // rotate element 'src'.
Touch.screenX - Web APIs
WebAPITouchscreenX
// register a touchstart listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchstart', function(e) { // iterate through the touch points and log each screenx/y coordinate.
TouchEvent.altKey - Web APIs
WebAPITouchEventaltKey
someelement.addeventlistener('touchstart', function(e) { // log the state of this event's modifier keys console.log("altkey = " + e.altkey); console.log("ctrlkey = " + e.ctrlkey); console.log("metakey = " + e.metakey); console.log("shiftkey = " + e.shiftkey); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
Multi-touch interaction - Web APIs
function update_background(ev) { // change background color based on the number simultaneous touches // in the event's targettouches list: // yellow - one tap (or hold) // pink - two taps // lightblue - more than two taps switch (ev.targettouches.length) { case 1: // single tap` ev.target.style.background = "yellow"; break; case 2: // two simultaneous touches ev.target.style.background = "pink"; break; default: // more than two simultaneous touches ev.target.style.backgroun...
Supporting both TouchEvent and MouseEvent - Web APIs
g on movement of the finger(s) touchend mousemove mousedown mouseup click if the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired, and the resulting sequence of events would just be: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend community touch events community group mail list w3c #touchevents irc channel related topics and resources touch events overview using touch events touch and mouse (together again for the first time) ...
TypeInfo - Web APIs
WebAPITypeInfo
constants constant value derivation_restriction 1 derivation_extension 2 derivation_union 4 derivation_list 8 specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'typeinfo' in that specification.
UIEvent() - Web APIs
WebAPIUIEventUIEvent
uievent.detail lists the semantic for standard events.
URLSearchParams.delete() - Web APIs
the delete() method of the urlsearchparams interface deletes the given search parameter and all its associated values, from the list of all search parameters.
URLSearchParams - Web APIs
urlsearchparams.delete() deletes the given search parameter, and its associated value, from the list of all search parameters.
VTTCue - Web APIs
WebAPIVTTCue
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seconds'); track.addcue(cueen); }); result chrome: please open in jsfiddle to ...
VideoTrack.kind - Web APIs
WebAPIVideoTrackkind
see video track kind strings for a list of the kinds available for video tracks.
VisualViewport: resize event - Web APIs
bubbles no cancelable no interface event event handler property onresize examples you can use the resize event in an addeventlistener method: visualviewport.addeventlistener('resize', function() { ...
VisualViewport: scroll event - Web APIs
bubbles no cancelable no interface event event handler property onscroll examples you can use the scroll event in an addeventlistener method: visualviewport.addeventlistener('scroll', function() { ...
Visual Viewport API - Web APIs
bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification.
WEBGL_lose_context.loseContext() - Web APIs
syntax gl.getextension('webgl_lose_context').losecontext(); examples with this method, you can simulate the webglcontextlost event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WEBGL_lose_context.restoreContext() - Web APIs
examples with this method, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); specifications specification status comment webgl_lose_contextthe definition of 'webgl_lose_context.losecontext' in that specification.
WEBGL_lose_context - Web APIs
examples with this extension, you can simulate the webglcontextlost and webglcontextrestored events: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', (event) => { console.log(event); }); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
gl.uniform_block_active_uniform_indices: returns a uint32array indicating the list of active uniforms in the uniform block.
WebGL2RenderingContext.isTransformFeedback() - Web APIs
opengl es 3.0the definition of 'glistransformfeedback' in that specification.
WebGL2RenderingContext.texImage3D() - Web APIs
the correct combinations with internalformat are listed in this table.
WebGL2RenderingContext - Web APIs
webgl2renderingcontext.drawbuffers() specifies a list of color buffers to be drawn into.
WebGLContextEvent.statusMessage - Web APIs
var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log('webgl context creation failed:' + e.statusmessage || 'unknown error'); }, false); specifications specification status comment webgl 1.0the definition of 'webglcontextevent.statusmessage' in that specification.
WebGLContextEvent - Web APIs
examples with the help of the webgl_lose_context extension, you can simulate the webglcontextlost and webglcontextrestored events: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WebGLRenderingContext.blendFunc() - Web APIs
exceptions if sfactor or dfactor is not one of the listed possible values, a gl.invalid_enum error is thrown.
WebGLRenderingContext.blendFuncSeparate() - Web APIs
exceptions if srcrgb, dstrgb, srcalpha, or dstalpha is not one of the listed possible values, a gl.invalid_enum error is thrown.
WebGLRenderingContext.clear() - Web APIs
exceptions if mask is not one of the listed possible values, a gl.invalid_enum error is thrown.
WebGLRenderingContext.getAttachedShaders() - Web APIs
the webglrenderingcontext.getattachedshaders() method of the webgl api returns a list of webglshader objects attached to a webglprogram.
WebGLRenderingContext.getSupportedExtensions() - Web APIs
the webglrenderingcontext.getsupportedextensions() method returns a list of all the supported webgl extensions.
WebGLRenderingContext.getUniformLocation() - Web APIs
uniform[1234][fi][v]() sets the uniform's value to the specified value, which may be a single floating point or integer number, or a 2-4 component vector specified either as a list of values or as a float32array or int32array.
WebGLRenderingContext.isTexture() - Web APIs
opengl es 2.0the definition of 'glistexture' in that specification.
WebGLRenderingContext.stencilOp() - Web APIs
syntax void gl.stencilop(fail, zfail, zpass); parameters all three parameters accept all constants listed below.
WebGLRenderingContext.stencilOpSeparate() - Web APIs
syntax void gl.stencilopseparate(face, fail, zfail, zpass); parameters the fail, zfail and zpass parameters accept all constants listed below.
WebGLRenderingContext.texImage2D() - Web APIs
in webgl 2, the combinations are listed in this table.
Basic scissoring - Web APIs
<p>result of of scissoring.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer to be identical to the size of the // canvas html element, as determined by css.
Canvas size and WebGL - Web APIs
<p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimenta...
Hello GLSL - Web APIs
inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = doc...
Textures from code - Web APIs
ript> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = doc...
WebGL by example - Web APIs
but rather than just presenting them in a single long list, they are additionally divided into topics.
Matrix math for the web - Web APIs
matrices are always stored in one-dimensional lists in javascript.
Animating textures in WebGL - Web APIs
use to retrieve the video frames: // will set to true when video can be copied to texture var copyvideo = false; function setupvideo(url) { const video = document.createelement('video'); var playing = false; var timeupdate = false; video.autoplay = true; video.muted = true; video.loop = true; // waiting for these 2 events ensures // there is data in the video video.addeventlistener('playing', function() { playing = true; checkready(); }, true); video.addeventlistener('timeupdate', function() { timeupdate = true; checkready(); }, true); video.src = url; video.play(); function checkready() { if (playing && timeupdate) { copyvideo = true; } } return video; } first we create a video element.
WebGL types - Web APIs
WebAPIWebGL APITypes
see also the list of constants.
WebGL model view projection - Web APIs
this list is usually further reduced using processes like back-face culling (removing polygons whose back side is facing the camera) and occlusion culling using hidden-surface determination (removing polygons which can't be seen because they're entirely blocked by polygons that are closer to the lens).
High-level guides - Web APIs
the high-level guides listed below introduce webrtc technology from a top-down perspective, describing the overall architecture, the life cycle of a webrtc connection, and basic security and technological issues you might run into as you explore and build web content or apps using the webrtc api.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
rtcpeerconnection and rtp each rtcpeerconnection has methods which provide access to the list of rtp transports that service the peer connection.
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
the stun server listed here is obviously not a real one; you'll need to replace stun.myserver.tld with the address of a real stun server.
WebRTC Statistics API - Web APIs
the table below shows the statistic categories and the corresponding dictionaries; for each statistic category, the full hierarchy of rtcstats-based dictionaries are listed, so you can easily find all the available values.
WebSocket.close() - Web APIs
WebAPIWebSocketclose
see the list of status codes of closeevent for permitted values.
WebSocket: close event - Web APIs
examplesocket.addeventlistener('close', (event) => { console.log('the connection has been closed successfully.'); )}; you can perform the same actions using the event handler property, like this: examplesocket.onclose = function (event) { console.log('the connection has been closed successfully.'); }; specifications specification status html living standardthe definition of 'websocket close...
WebSocket: error event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples // create websocket connection const socket = new websocket('ws://localhost:8080'); // listen for possible errors socket.addeventlistener('error', function (event) { console.log('websocket error: ', event); }); specifications specification status html living standardthe definition of 'websocket error' in that specification.
WebSocket.extensions - Web APIs
this is currently only the empty string or a list of extensions as negotiated by the connection.
WebSocket: message event - Web APIs
const socket = new websocket('ws://localhost:8080'); // listen for messages socket.addeventlistener('message', function (event) { console.log('message from server ', event.data); }); specifications specification status html living standardthe definition of 'websocket message' in that specification.
WebSocket.onclose - Web APIs
WebAPIWebSocketonclose
syntax awebsocket.onclose = function(event) { console.log("websocket is closed now."); }; value an eventlistener.
WebSocket.onerror - Web APIs
WebAPIWebSocketonerror
you can also add an error event handler using addeventlistener().
WebSocket.onmessage - Web APIs
syntax awebsocket.onmessage = function(event) { console.debug("websocket message received:", event); }; value an eventlistener.
WebSocket.onopen - Web APIs
WebAPIWebSocketonopen
syntax awebsocket.onopen = function(event) { console.log("websocket is open now."); }; value an eventlistener.
WebSocket: open event - Web APIs
const socket = new websocket('ws://localhost:8080'); // connection opened socket.addeventlistener('open', (event) => { socket.send('hello server!'); }); specifications specification status html living standardthe definition of 'websocket open' in that specification.
Writing a WebSocket server in Java - Web APIs
full list of opcodes - 134: if the second byte minus 128 is between 0 and 125, this is the length of the message.
Geometry and reference spaces in WebXR - Web APIs
reference space descriptors the types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the event is always sent to every affected reference space, including those created using getoffsetreferencespace(), so if you listen for reset events, you need to be sure you retain a strong reference to any spaces you're still using.
WebXR Device API - Web APIs
the view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.
Migrating from webkitAudioContext - Web APIs
please consult the readme file for that library to see a list of apis that are automatically handled by it.
Visualizations with Web Audio API - Web APIs
draw(); this code gives us a result like the following: note: the examples listed in this article have shown usage of analysernode.getbytefrequencydata() and analysernode.getbytetimedomaindata().
Web Bluetooth API - Web APIs
bluetoothremotegattservice represents a service provided by a gatt server, including a device, a list of referenced services, and a list of the characteristics of this service.
Web Crypto API - Web APIs
even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.
Using the Web Storage API - Web APIs
on the events page (see events.js) the only javascript is as follows: window.addeventlistener('storage', function(e) { document.queryselector('.my-key').textcontent = e.key; document.queryselector('.my-old').textcontent = e.oldvalue; document.queryselector('.my-new').textcontent = e.newvalue; document.queryselector('.my-url').textcontent = e.url; document.queryselector('.my-storage').textcontent = json.stringify(e.storagearea); }); here we add an event listener to the windo...
The structured clone algorithm - Web APIs
blob file filelist arraybuffer arraybufferview including other typed arrays.
Window: afterprint event - Web APIs
bubbles no cancelable no interface event event handler property onafterprint examples using addeventlistener(): window.addeventlistener('afterprint', (event) => { console.log('after print'); }); using the onafterprint event handler property: window.onafterprint = (event) => { console.log('after print'); }; specifications specification status html living standard living standard ...
Window: appinstalled event - Web APIs
bubbles no cancelable no interface event event handler onappinstalled examples you can use the appinstalled event in an addeventlistener method: window.addeventlistener('appinstalled', function() { console.log('thank you for installing our app!'); }); or use the onappinstalled event handler property: window.onappinstalled = function() { console.log('thank you for installing our app!'); }; ...
Window.applicationCache - Web APIs
syntax cache = window.applicationcache parameters cache is an object reference to an offlineresourcelist.
Window: beforeprint event - Web APIs
bubbles no cancelable no interface event event handler property onbeforeprint examples using addeventlistener(): window.addeventlistener('beforeprint', (event) => { console.log('before print'); }); using the onbeforeprint event handler property: window.onbeforeprint = (event) => { console.log('before print'); }; specifications specification status html living standard living standard ...
Window.captureEvents() - Web APIs
note that you can pass a list of events to this method using the following syntax: window.captureevents(event.keypress | event.keydown | event.keyup).
Window.clearImmediate() - Web APIs
examples let immediateid = setimmediate(() => { // run some code } document.getelementbyid("button") .addeventlistener(() => { clearimmediate(immediateid); }); specifications specification status comment efficient script yielding the definition of 'setimmediate' in that specification.
Window: clipboardchange event - Web APIs
bubbles no cancelable no interface clipboardevent event handler property none examples javascript window.addeventlistener('clipboardchange', () => { console.log('clipboard contents changed'); }); specifications specification status clipboard api and eventsthe definition of 'clipboardchange event' in that specification.
Window: devicemotion event - Web APIs
} window.addeventlistener("devicemotion", handlemotionevent, true); specifications specification status deviceorientation event specificationthe definition of 'devicemotion event' in that specification.
Window: deviceorientation event - Web APIs
bubbles no cancelable no interface deviceorientationevent event handler property window.ondeviceorientation examples if (window.deviceorientationevent) { window.addeventlistener("deviceorientation", function(event) { // alpha: rotation around z-axis var rotatedegrees = event.alpha; // gamma: left to right var lefttoright = event.gamma; // beta: front back motion var fronttoback = event.beta; handleorientationevent(fronttoback, lefttoright, rotatedegrees); }, true); } var handleorientationevent = function(f...
window.dump() - Web APIs
WebAPIWindowdump
note: this preference is not listed in about:config by default, you may need to create it (right-click the content area -> new -> boolean).
Window: error event - Web APIs
eas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); window.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: ${event.message}\n`; console.log(event) }); const scripterror = document.queryselector('#script-error'); scripterror.addeventlistener('click', () => { const badcode = 'const s;'; eval(badcode); }); result specifications specification status ui events working draft ...
Window: gamepadconnected event - Web APIs
bubbles no cancelable no interface gamepadevent event handler property ongamepadconnected examples window.addeventlistener('gamepadconnected', event => { // all buttons and axes values can be accessed through event.gamepad; }); specifications specification status gamepad working draft ...
Window: gamepaddisconnected event - Web APIs
bubbles no cancelable no interface gamepadevent event handler property ongamepaddisconnected examples window.addeventlistener('gamepaddisconnected', event => { console.log('lost connection with the gamepad.'); }); specifications specification status gamepad working draft ...
Window: hashchange event - Web APIs
bubbles yes cancelable no interface hashchangeevent event handler onhashchange examples you can use the hashchange event in an addeventlistener method: window.addeventlistener('hashchange', function() { console.log('the hash has changed!') }, false); or use the onhashchange event handler property: function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } } window.onhashchange = locationhashchanged; specifications specification status comment html living standardthe definition of 'hash...
Window.history - Web APIs
WebAPIWindowhistory
example history.back(); // equivalent to clicking back button history.go(-1); // equivalent to history.back(); notes for top-level pages you can see the list of pages in the session history, accessible via the history object, in the browser's dropdowns next to the back and forward buttons.
Window: languagechange event - Web APIs
bubbles no cancelable no interface event event handler onlanguagechange examples you can use the languagechange event in an addeventlistener method: window.addeventlistener('languagechange', function() { console.log('languagechange event detected!'); }); or use the onlanguagechange event handler property: window.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specification specification status html living standardthe definition of 'languagechange' in that specification.
window.location - Web APIs
WebAPIWindowlocation
(_nodey - _scrolly) * _itframe / nframes); document.documentelement.scrollleft = math.round(_scrollx + (_nodex - _scrollx) * _itframe / nframes); if (_usehash && _itframe === nframes) { location.hash = _bookmark; } _itframe++; } function _chkowner () { if (_isbot) { _isbot = false; return; } if (_scrollid > -1) { clearinterval(_scrollid); _scrollid = -1; } } if (window.addeventlistener) { window.addeventlistener("scroll", _chkowner, false); } else if (window.attachevent) { window.attachevent("onscroll", _chkowner); } return function (sbookmark, busehash) { var onode = document.queryselector(sbookmark); _scrolly = document.documentelement.scrolltop; _scrollx = document.documentelement.scrollleft; _bookmark = sbookmark; _usehash = busehash === true; _nodex ...
Window: message event - Web APIs
o interface messageevent event handler property onmessage examples suppose a script sends a message to a different browsing context, such as another <iframe>, using code like this: const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const windowmessagebutton = document.queryselector('#window-message'); windowmessagebutton.addeventlistener('click', () => { targetframe.postmessage('hello there', targetorigin); }); the receiver can listen for the message using addeventlistener() with code like this: window.addeventlistener('message', (event) => { console.log(`received message: ${event.data}`); }); alternatively the listener could use the onmessage event handler property: window.onmessage = (event) => { console.log...
Window: messageerror event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessageerror examples listen for messageerror using addeventlistener(): window.addeventlistener('messageerror', (event) => { console.error(event); }); the same, but using the onmessageerror event handler property: window.onmessageerror = (event) => { console.error(event); }; specifications specification status html living standard living standard ...
Window.navigator - Web APIs
WebAPIWindownavigator
syntax navigatorobject = window.navigator examples example #1: browser detect and return a string var sbrowser, susrag = navigator.useragent; // the order matters here, and this may report false positives for unlisted browsers.
Window: offline event - Web APIs
bubbles no cancelable no interface event event handler property onoffline examples // addeventlistener version window.addeventlistener('offline', (event) => { console.log("the network connection has been lost."); }); // onoffline version window.onoffline = (event) => { console.log("the network connection has been lost."); }; specifications specification status html living standardthe definition of 'offline event' in that specification.
Window.ondevicelight - Web APIs
specifies an event listener to receive devicelight events.
window.ondeviceorientation - Web APIs
}; window.addeventlistener('deviceorientation', function(event) { ...
Window.ondeviceorientationabsolute - Web APIs
}; window.addeventlistener('deviceorientationabsolute', function(event) { ...
Window: online event - Web APIs
bubbles no cancelable no interface event event handler property ononline examples // addeventlistener version window.addeventlistener('online', (event) => { console.log("you are now connected to the network."); }); // ononline version window.ononline = (event) => { console.log("you are now connected to the network."); }; specifications specification status html living standardthe definition of 'online event' in that specification.
Obsolete features - Web APIs
this page lists the obsolete windowfeatures parameter of window.open function.
Privileged features - Web APIs
this page lists the windowfeatures parameter of window.open function that requires chrome-privilege in firefox.
Window: orientationchange event - Web APIs
bubbles no cancelable no interface event event handler onorientationchange example you can use the orientationchange event in an addeventlistener method: window.addeventlistener("orientationchange", function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }); or use the onorientationchange event handler property: window.onorientationchange = function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }; specifications specification status compatibility standardthe definition of 'orientationchange' in that specific...
Window: pagehide event - Web APIs
window.addeventlistener("pagehide", event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } }, false); this can also be written using the onpagehide event handler property on the window: window.onpagehide = event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } } specifications specification sta...
Window: popstate event - Web APIs
examples a page at http://example.com/example.html running the following code will generate logs as indicated: window.addeventlistener('popstate', (event) => { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }); history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // l...
Window: rejectionhandled event - Web APIs
bubbles no cancelable no interface promiserejectionevent event handler property onrejectionhandled example you can use the rejectionhandled event to log promises that get rejected to the console, along with the reasons why they were rejected: window.addeventlistener("rejectionhandled", event => { console.log("promise rejected; reason: " + event.reason); }, false); specifications specification status comment html living standardthe definition of 'rejectionhandled' in that specification.
Window.releaseEvents() - Web APIs
example window.releaseevents(event.keypress) notes note that you can pass a list of events to this method using the following syntax: window.releaseevents(event.keypress | event.keydown | event.keyup).
Window.requestAnimationFrame() - Web APIs
return value a long integer value, the request id, that uniquely identifies the entry in the callback list.
Window.self - Web APIs
WebAPIWindowself
if (window.parent.frames[0] != window.self) { // this window is not the first frame in the list } furthermore, when executing in the active document of a browsing context, window is a reference to the current global object and thus all of the following are equivalent: var w1 = window; var w2 = self; var w3 = window.window; var w4 = window.self; // w1, w2, w3, w4 all strictly equal, but only w2 will function in workers specifications specification status comment ...
Window.sessionStorage - Web APIs
// get the text field that we're going to track let field = document.getelementbyid("field"); // see if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionstorage.getitem("autosave")) { // restore the contents of the text field field.value = sessionstorage.getitem("autosave"); } // listen for changes in the text field field.addeventlistener("change", function() { // and save the results into the session storage object sessionstorage.setitem("autosave", field.value); }); note: please refer to the using the web storage api article for a full example.
WindowClient.focus() - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; ...
WindowClient.focused - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.openwindow) return clients.ope...
WindowClient.visibilityState - Web APIs
example event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (let i = 0; i < clientlist.length; i++) { let client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if (client.visibilitystate === 'hidden') return client.focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status comment service wo...
WindowClient - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; ...
WindowEventHandlers.onafterprint - Web APIs
syntax window.addeventlistener("afterprint", function(event) { ...
WindowEventHandlers.onmessage - Web APIs
syntax window.addeventlistener('message', function(event) { ...
WindowEventHandlers.onmessageerror - Web APIs
the onmessageerror event handler of the windoweventhandlers interface is an eventlistener, called whenever an messageevent of type messageerror is fired on a window—that is, when it receives a message that cannot be deserialized.
WindowEventHandlers.onrejectionhandled - Web APIs
syntax window.addeventlistener("rejectionhandled", function(event) { ...
WindowOrWorkerGlobalScope.caches - Web APIs
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test...
WindowOrWorkerGlobalScope.indexedDB - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open('todolist'); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.result; } } specifications specification status comment indexed database api draftthe definition of 'indexeddb' in that specification.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
} function stoptextcolor() { clearinterval(nintervid); } </script> </head> <body onload="changecolor();"> <div id="my_box"> <p>hello world</p> </div> <button onclick="stoptextcolor();">stop</button> </body> </html> example 3: typewriter simulation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
google analytics, any script url that firefox recognises as a tracking script through its tp lists) have been subject to further throttling.
WindowOrWorkerGlobalScope - Web APIs
each of these interfaces can, of course, add more features in addition to the ones listed below.
Worker: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples this code creates a new worker and listens to messages from it using addeventlistener(): const worker = new worker("static/scripts/worker.js"); worker.addeventlistener('message', (event) => { console.log(`received message from worker: ${event.data}`) }); alternatively, it could listen using the onmessage event handler property: const worker = new worker("static/scripts/worker.js"); worker.onmessage = (event) => { console.log(`received message fro...
Worker: messageerror event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessageerror examples create a worker, and listen for message and messageerror events using addeventlistener(): // inside main.js const worker = new worker("static/scripts/worker.js"); worker.addeventlistener("message", (event) => { console.error(`received message from worker: ${event}`); }); worker.addeventlistener("messageerror", (event) => { console.error(`error receiving message from worker: ${event}`); }); the same, but using the onmessageerror event handler property: // inside main.js const worker = new worker("static/scripts/worker.js"); ...
Worker.onmessageerror - Web APIs
the onmessageerror event handler of the worker interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the worker instance — that is, when it receives a message that cannot be deserialized.
Worker.prototype.postMessage() - Web APIs
var myworker = new chromeworker(self.path + 'myworker.js'); function handlemessagefromworker(msg) { console.log('incoming message from worker, msg:', msg); switch (msg.data.atopic) { case 'do_sendmainarrbuff': sendmainarrbuff(msg.data.abuf) break; default: throw 'no atopic on incoming message to chromeworker'; } } myworker.addeventlistener('message', handlemessagefromworker); // ok lets create the buffer and send it var arrbuf = new arraybuffer(8); console.info('arrbuf.bytelength pre transfer:', arrbuf.bytelength); myworker.postmessage( { atopic: 'do_sendworkerarrbuff', abuf: arrbuf // the array buffer that we passed to the transferrable section 3 lines below }, [ arrbuf // the array buffer...
WorkerGlobalScope.importScripts() - Web APIs
syntax self.importscripts('foo.js'); self.importscripts('foo.js', 'bar.js', ...); parameters a comma-separated list of domstring objects representing the scripts to be imported.
WorkerGlobalScope: languagechange event - Web APIs
bubbles no cancelable no interface event event handler onlanguagechange examples you can use the languagechange event in an addeventlistener method: worker.addeventlistener('languagechange', function() { console.log('languagechange event detected!'); }); or use the onlanguagechange event handler property: worker.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specification specification status html living standardthe definition of 'languagechange' in that specification.
XMLDocument.load() - Web APIs
WebAPIXMLDocumentload
examples var xmldoc = document.implementation.createdocument("", "test", null); function documentloaded (e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load", documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
XMLHttpRequest.open() - Web APIs
if true, notification of a completed transaction is provided using event listeners.
XMLHttpRequest.overrideMimeType() - Web APIs
// interpret the received data as plain text req = new xmlhttprequest(); req.overridemimetype("text/plain"); req.addeventlistener("load", callback, false); req.open("get", url); req.send(); specifications specification status comment xmlhttprequestthe definition of 'overridemimetype()' in that specification.
XMLHttpRequest.response - Web APIs
it works by creating an xmlhttprequest object and creating a listener for readystatechange events such that that when readystate changes to done (4), the response is obtained and passed into the callback function provided to load().
XMLHttpRequest: timeout event - Web APIs
bubbles no cancelable no interface progressevent event handler property ontimeout examples const client = new xmlhttprequest(); client.open('get', 'http://www.example.org/example.txt'); client.ontimeout = () => { console.error('timeout!!') }; client.send(); you could also set up the event handler using the addeventlistener() method: client.addeventlistener('timeout', () => { console.error("timeout!!"); }); specifications specification status comment xmlhttprequestthe definition of 'timeout event' in that specification.
XMLHttpRequest - Web APIs
more recent browsers, including firefox, also support listening to the xmlhttprequest events via standard addeventlistener() apis in addition to setting on* properties to a handler function.
XRHandedness - Web APIs
on.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothness required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null.
XRInputSource.handedness - Web APIs
on.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothness required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null.
XRInputSourceArray.length - Web APIs
the read-only length property returns an integer value indicating the number of items in the input source list represented by the xrinputsourcearray object.
XRInputSourceEvent.frame - Web APIs
however, since the event frame isn't an animation frame, there is no viewer pose available to represent the viewer's current point of view; the results of calling getviewerpose() will be an xrviewerpose with an empty views list.
XRInputSourceEvent - Web APIs
xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourcesChangeEvent() - Web APIs
the xrinputsourceschangeevent() constructor creates and returns a new xrinputsourceschangeevent object, representing an update to the list of available webxr input devices.
XRInputSourcesChangeEvent.removed - Web APIs
examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system.
XRInputSourcesChangeEvent - Web APIs
xrsession.addeventlistener("inputsourceschange", oninputsourceschange); function oninputsourceschange(event) { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { loadcontrollermesh(input); } } } you can also add a handler for inputsourceschange events by setting the oninputsourceschange event handler: xrsession.oninputsourceschange = oninputsourceschange; specificati...
XRInputSourcesChangeEventInit.removed - Web APIs
newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, each representing one input device removed from the xr system.
XRPermissionDescriptor.mode - Web APIs
syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.mode = xrsessionmode; xrmode = xrpermissiondescriptor.mode; value a domstring whose value is one of the strings found in the xrsessionmode enumerated type: immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment.
XRPermissionStatus.granted - Web APIs
the types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them.
XRPose.transform - Web APIs
WebAPIXRPosetransform
xrsession.addeventlistener("select", event => { let source = event.inputsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetraymode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offh...
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
canvas.oncontextmenu = (event) => { event.preventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event.
XRReferenceSpace: reset event - Web APIs
first, you can use the addeventlistener() method: viewerrefspace.addeventlistener("reset", (event) => { /* perform reset related tasks */ }); the second option is to set the xrreferencespace object's onreset event handler property: viewerrefspace.onreset = (event) => { /* perform reset related tasks */ }; specifications specification status comment webxr device apithe definition of 'reset event' i...
XRReferenceSpaceEvent.transform - Web APIs
xrreferencespace.addeventlistener("reset", event => { for (let obj of scene.objects) { mat4.multiply(obj.transform, obj.transform, event.transform); } }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceevent.transform' in that specification.
XRReferenceSpaceType - Web APIs
reference space descriptors the types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them.
XRRigidTransform.position - Web APIs
example to create a reference space which can be used to place an object at eye level (assuming eye level is 1.5 meters): function onsessionstarted(xrsession) { xrsession.addeventlistener("end", onsessionended); gl = initgraphics(xrsession); let gllayer = new xrwebgllayer(xrsession, gl); xrsession.updaterenderstate({ baselayer: gllayer }); if (immersivesession) { xrsession.requestreferencespace("bounded-floor").then((refspace) => { refspacecreated(refspace); }).catch(() => { session.requestreferencespace("local-floor").then(refspacecreated); ...
XRSession: end event - Web APIs
bubbles no cancelable no interface xrsessionevent event handler xrsession.onend example to be informed when a webxr session comes to an end, you can add a handler to your xrsession instance using addeventlistener(), like this: xrsession.addeventlistener("end", function(event) { /* the session has shut down */ }); alternatively, you can use the xrsession.onend event handler property to establish a handler for the end event: xrsession.onend = function(event) { /* the session has shut down */ } specifications specification status comment webxr device apithe definition...
XRSession.requestAnimationFrame() - Web APIs
function startxrsession() { navigator.xr.requestsession('immersive-vr').then((session) => { xrsession = session xrsession.addeventlistener('end', onxrsessionended) // do necessary session setup here.
XRSession: visibilitychange event - Web APIs
examples this example demonstrates how to listen for a visibilitychange event on a webxr session, using addeventlistener() to begin listening for the event: navigator.xr.requestsession("inline").then((xrsession) => { xrsession.addeventlistener("visibilitychange", e => { switch(e.session.visiblitystate) { case "visible": case "visible-blurred": mysessionvisible(true); break; case "hidden": myses...
XRSessionEvent.session - Web APIs
xrsession.addeventlistener("visibilitychange", e => { switch(e.session.visibilitystate) { case "hidden": myenablerendering(true); break; case "visible": case "visible-blurred": myenablerendering(false); break; } }); this calls a function that reacts to the session's visibility state change.
XRSpace - Web APIs
WebAPIXRSpace
interfaces based on xrspace below is a list of interfaces based on the xrspace interface.
XRSystem: devicechange event - Web APIs
if (navigator.xr) { navigator.xr.addeventlistener("devicechange", event => { navigator.xr.issessionsupported("immersive-vr") .then(immersiveok) => { if (immersiveok) { enablexrbutton.disabled = false; } else { enablexrbutton.disabled = true; } }); }); } when devicechange is received, the handler set up in this code calls the xr method issessionsupported() to find out if there's a device avai...
XRSystem: isSessionSupported() - Web APIs
if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { userbutton.addeventlistener('click', onbuttonclicked); userbutton.innerhtml = 'enter xr'; userbutton.disabled = false; } }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.
XRSystem - Web APIs
WebAPIXRSystem
if (navigator.xr) { immersivebutton.addeventlistener("click", onbuttonclicked); navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.disabled = false; } else { immersivebutton.disabled = true; }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then(() => { // onsessionstarted() not shown for reasons of...
XRView.transform - Web APIs
WebAPIXRViewtransform
then we iterate over each xrview found in the xrviewerpose's list of views.
XRViewerPose.views - Web APIs
syntax let viewlist = xrviewerpose.views; value an array of xrview objects, one for each view available as part of the scene for the current viewer pose.
XSLT Basic Example - Web APIs
the example will take an xml document that contains information (title, list of authors and body text) about an article and present it in an human readable form.
Using the alert role - Accessibility
assistive technology products should listen for such an event and notify the user accordingly: screen readers may interrupt current output (whether it's speech or braille) and immediately announce or display the alert message.
Using the aria-describedby attribute - Accessibility
value a space-separated list of element ids possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique.
Using the aria-orientation attribute - Accessibility
<a href="#" id="handle_zoomslider" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar listbox combobox menu tree separator slider tablist toolbar related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-orientation attribute ...
Using the aria-relevant attribute - Accessibility
values a space-delimited list of one or more of the following values: additions element nodes added to the accessibility tree within the live region; should be considered relevant.
Using the aria-required attribute - Accessibility
a-required="true" /> <br/> <label for="lastname">last name:</label> <input id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <input id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in aria roles combobox gridcell listbox radiogroup spinbutton textbox tree related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html5 ...
Using the article role - Accessibility
h2>blog post</h2> </header> <section class="content"> <p>a very interesting post</p> </section> <section class="comments"> <div class="comment" role="article"> <p>meaningful comment</p> </div> <div class="comment" role="article"> <p>positive comment</p> </div> </section> </article> notes aria attributes used related aria techniques aria techniques - list of roles compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the article role ...
Using the presentation role - Accessibility
examples example 1: <ul role="tablist"> <li role="presentation"> <a role="tab" href="#">tab 1</a> </li> <li role="presentation"> <a role="tab" href="#">tab 2</a> </li> <li role="presentation"> <a role="tab" href="#">tab 3</a> </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additiona...
Using the status role - Accessibility
assistive technology products should listen for such an event and notify the user accordingly: screen readers may provide a special key to announce the current status, and this should present the contents of any status live region.
Using ARIA: Roles, states, and properties - Accessibility
combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip ...
ARIA: cell role - Accessibility
aria-rowindex attribute the aria-rowindex attribute is only needed if rows are hidden from the dom, to indicate which row, in the list of total rows, the current cell is in.
ARIA: contentinfo role - Accessibility
added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
ARIA: document role - Accessibility
once focus returns to the message list either by activating the back button or pressing an asociated keystroke, direct application interaction mode is invoked again, and the user can move to a different conversation in the list with the arrow keys.
ARIA: form role - Accessibility
added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
ARIA: gridcell role - Accessibility
use aria-colindex to describe a gridcell's order in the list of columns, and aria-rowindex to describe a gridcell's order in the list of rows.
ARIA: Main role - Accessibility
<body> <a href="#main-content">skip to main content</a> <!-- navigation and header content --> <div id="main-content" role="main"> <!-- main page content --> </div> </body> webaim: "skip navigation" links added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
ARIA: row role - Accessibility
aria-rowindex attribute the aria-rowindex attribute is only needed if rows are hidden from the dom, to indicate which row, in the list of total rows, is being read.
ARIA: search role - Accessibility
added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
ARIA: switch role - Accessibility
document.queryselectorall(".switch").foreach(function(theswitch) { theswitch.addeventlistener("click", handleclickevent, false); }); function handleclickevent(evt) { let el = evt.target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm.
Basic form hints - Accessibility
the example below shows a radio button group implemented using an unordered list.
Architecture - Accessibility
examples of objects not embedded in text are the child options in list boxes and combo boxes.
Accessibility FAQ - Accessibility
in general, use the accessible toolkit checklist (archive.org).
Keyboard-navigable JavaScript widgets - Accessibility
grouping controls for grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1").
Keyboard - Accessibility
that will add the element to the list of elements that can be focused by pressing the tab key, in the sequence of such elements as defined in the html document.
Text labels and names - Accessibility
see also w3c aria toolbar example related wcag success criteria 1.1.1 non-text content (a) all non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed in the above link.
Understandable - Accessibility
your site should provide a glossary that contains definitions of such words/terms that you can then link to when they appear, or at the very least provide definitions somewhere in the surrounding text, or in a description list at the bottom of the page.
Accessibility
assistive technology (at) development a collection of articles intended for at developers mobile accessibility checklist this document provides a concise checklist of accessibility requirements for mobile app developers.
-moz-image-rect - CSS: Cascading Style Sheets
this works very similarly to the -moz-image-region property, which is used with the list-style-image property to use parts of an image as the bullets in lists.
-moz-orient - CSS: Cascading Style Sheets
syntax the -moz-orient property is specified as one of the keyword values chosen from the list below.
-webkit-print-color-adjust - CSS: Cascading Style Sheets
/* keyword values */ -webkit-print-color-adjust: economy; -webkit-print-color-adjust: exact; /* global values */ -webkit-print-color-adjust: inherit; -webkit-print-color-adjust: initial; -webkit-print-color-adjust: unset; syntax the -webkit-print-color-adjust property is specified as one of the keyword values listed below.
-webkit-text-stroke-color - CSS: Cascading Style Sheets
e> = <number> | <percentage><hue> = <number> | <angle> examples varying the stroke color html <p>text with stroke</p> <input type="color" value="#ff0000"> css p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker = document.queryselector("input"); colorpicker.addeventlistener("change", function(evt) { document.queryselector("p").style.webkittextstrokecolor = evt.target.value; }); results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-color' in that specification.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
definition of edge-case behavior, such as in list items or with specific languages (e.g., the dutch digraph ij).
::selection - CSS: Cascading Style Sheets
note: ::selection was in drafts of css selectors level 3, but it was removed in the candidate recommendation phase because its was under-specified (especially with nested elements) and interoperability wasn't achieved (based on discussion in the w3c style mailing list).
::slotted() - CSS: Cascading Style Sheets
WebCSS::slotted
/* selects any element placed inside a slot */ ::slotted(*) { font-weight: bold; } /* selects any <span> placed inside a slot */ ::slotted(span) { font-weight: bold; } syntax ::slotted( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
g address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { ...
:first-child - CSS: Cascading Style Sheets
syntax :first-child examples basic example html <div> <p>this text is selected!</p> <p>this text isn't selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div> css p:first-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; } result specifications specification status comment selectors level 4the definition of ':first-child' in that sp...
:first - CSS: Cascading Style Sheets
WebCSS:first
syntax :first examples html <p>first page.</p> <p>second page.</p> <button>print!</button> css @page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; } javascript document.queryselector("button").addeventlistener('click', () => { window.print(); }); result press the "print!" button to print the example.
:host() - CSS: Cascading Style Sheets
WebCSS:host()
/* selects a shadow root host, only if it is matched by the selector argument */ :host(.special-custom-element) { font-weight: bold; } syntax :host( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
:host-context() - CSS: Cascading Style Sheets
ost, only if it is a descendant of the selector argument given */ :host-context(h1) { font-weight: bold; } :host-context(main article) { font-weight: bold; } /* changes paragraph text color from black to white when a .dark-theme class is applied to the document body */ p { color: #000; } :host-context(body.dark-theme) p { color: #fff; } syntax :host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
:in-range - CSS: Cascading Style Sheets
WebCSS:in-range
<li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specificat...
:lang() - CSS: Cascading Style Sheets
WebCSS:lang
working draft adds wildcard language matching and comma-separated list of languages.
:last-child - CSS: Cascading Style Sheets
syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; } result specifications specification status comment selectors level 4the definition of ':last-child' in that ...
:only-child - CSS: Cascading Style Sheets
syntax :only-child examples basic example html <div> <div>i am an only child.</div> </div> <div> <div>i am the 1st sibling.</div> <div>i am the 2nd sibling.</div> <div>i am the 3rd sibling, <div>but this is an only child.</div></div> </div> css div:only-child { color: red; } div { display: inline-block; margin: 6px; outline: 1px solid; } result a list example html <ol> <li>first <ul> <li>this list has just one element.</li> </ul> </li> <li>second <ul> <li>this list has three elements.</li> <li>this list has three elements.</li> <li>this list has three elements.</li> </ul> </li> </ol> css li li { list-style-type: disc; } li:only-child { color: red; list-style-type: square; } result ...
:out-of-range - CSS: Cascading Style Sheets
of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specificat...
:state() - CSS: Cascading Style Sheets
WebCSS:state
my code block and/or include a list of links to useful code samples that live elsewhere: x y z specifications specification status comment unknownthe definition of 'the :state() selector' in that specification.
font-stretch - CSS: Cascading Style Sheets
tretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /* multiple values */ font-stretch: 75% 125%; font-stretch: condensed ultra-condensed;; the font-weight property is described using any one of the values listed below.
font-variation-settings - CSS: Cascading Style Sheets
<string> <number> when rendering text, the list of opentype axis names is passed to the text layout engine to enable or disable font features.
font-weight - CSS: Cascading Style Sheets
syntax /* single values */ font-weight: normal; font-weight: bold; font-weight: 400; /* multiple values */ font-weight: normal bold; font-weight: 300 500; the font-weight property is described using any one of the values listed below.
any-hover - CSS: Cascading Style Sheets
WebCSS@mediaany-hover
syntax the any-hover feature is specified as a keyword value chosen from the list below.
any-pointer - CSS: Cascading Style Sheets
syntax the any-pointer feature is specified as a keyword value chosen from the list below.
color-gamut - CSS: Cascading Style Sheets
syntax the color-gamut feature is specified as a keyword value chosen from the list below.
display-mode - CSS: Cascading Style Sheets
syntax the display-mode feature is specified as a keyword value chosen from the list below.
forced-colors - CSS: Cascading Style Sheets
color fill stroke text-decoration-color text-emphasis-color border-color outline-color column-rule-color scrollbar-color -webkit-tap-highlight-color box-shadow text-shadow you can use system color keywords with any property other than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.
hover - CSS: Cascading Style Sheets
WebCSS@mediahover
syntax the hover feature is specified as a keyword value chosen from the list below.
inverted-colors - CSS: Cascading Style Sheets
syntax the inverted-colors feature is specified as a keyword value chosen from the list below.
orientation - CSS: Cascading Style Sheets
syntax the orientation feature is specified as a keyword value chosen from the list below.
overflow-block - CSS: Cascading Style Sheets
syntax the overflow-block feature is specified as a keyword value chosen from the list below.
overflow-inline - CSS: Cascading Style Sheets
syntax the overflow-inline feature is specified as a keyword value chosen from the list below.
pointer - CSS: Cascading Style Sheets
WebCSS@mediapointer
syntax the pointer feature is specified as a keyword value chosen from the list below.
scan - CSS: Cascading Style Sheets
WebCSS@mediascan
syntax the scan feature is specified as a single keyword value chosen from the list below.
scripting - CSS: Cascading Style Sheets
WebCSS@mediascripting
syntax the scripting feature is specified as a keyword value chosen from the list below.
update - CSS: Cascading Style Sheets
syntax the update feature is specified as a single keyword value chosen from the list below.
@media - CSS: Cascading Style Sheets
WebCSS@media
formal syntax @media <media-query-list> { <group-rule-body> }where <media-query-list> = <media-query>#where <media-query> = <media-condition> | [ not | only ]?
Alternative style sheets - CSS: Cascading Style Sheets
for example: <link href="reset.css" rel="stylesheet" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="default style"> <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="fancy"> <link href="basic.css" rel="alternate stylesheet" type="text/css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "default style" pre-selected.
At-rules - CSS: Cascading Style Sheets
WebCSSAt-rule
(at the candidate recommendation stage, but only implemented in gecko as of writing) @font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) — define common names in font-variant-alternates for feature activated differently in opentype.
Box alignment in Multi-column Layout - CSS: Cascading Style Sheets
and the properties listed here, while specified for multicol, may not be supported in browsers.
CSS Box Alignment - CSS: Cascading Style Sheets
if you initially learned flexbox then you may consider these properties to be part of the flexbox specification, and some of the properties are indeed listed in level 1 of flexbox.
Using feature queries - CSS: Cascading Style Sheets
to do so, you can include a list of features to test for, separated by and keywords: @supports (property1: value) and (property2: value) { css rules to apply } for example, if the css you want to run requires that the browser supports css shapes and css grid, you could create a rule which checks for both of these things.
CSS Containment - CSS: Cascading Style Sheets
for example a listing of article headlines and content, as in the mark-up below.
Ordering Flex Items - CSS: Cascading Style Sheets
if you change the order using flex-direction you can see how the tab order continues to follow the order that the items are listed in the source.
Flow Layout and Overflow - CSS: Cascading Style Sheets
this is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text.
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
i’ve used writing modes to turn these on their side in the column track: .wrapper { display: grid; grid-gap: 20px; grid-template-columns: 1fr auto; font: 1em helvetica, arial, sans-serif; } .wrapper nav { writing-mode: vertical-lr; } .wrapper ul { list-style: none; margin: 0; padding: 1em; display: flex; justify-content: space-between; } .wrapper a { text-decoration: none; } <div class="wrapper"> <div class="content"> <p>turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.
Grid template areas - CSS: Cascading Style Sheets
then after grid-template-areas we have a forward slash, after that is an explicit track listing of column tracks.
Using CSS gradients - CSS: Cascading Style Sheets
in the first background declaration we listed every color stop separately.
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
if you have looked at the main page for css logical properties and values you will see there are a huge number of properties listed.
Stacking with floated blocks - CSS: Cascading Style Sheets
this behavior can be shown with an added rule to the above list: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant non-positioned inline elements descendant positioned elements, in order of appearance in the html note: if an opacity value is applied to the non-positioned block (div #4), then something strange happens: the background and border of that bloc...
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
see also :target original document information author(s): eric meyer, standards evangelist, netscape communications original copyright information: copyright © 2001-2003 netscape.
CSS selectors - CSS: Cascading Style Sheets
grouping selectors selector list the , is a grouping method, it selects all the matching nodes.
Shapes from box values - CSS: Cascading Style Sheets
css box model the values listed above correspond to the various parts of the css box model.
CSS Shapes - CSS: Cascading Style Sheets
reference properties shape-image-threshold shape-margin shape-outside data types <basic-shape> guides overview of css shapes shapes from box values basic shapes shapes from images edit shape paths in css — firefox developer tools external resources a list of css shapes resources css shapes 101 creating non-rectangular layouts with css shapes how to use css shapes in your web design how to get started with css shapes what i learned in one weekend with css shapes css vs.
Using CSS transforms - CSS: Cascading Style Sheets
it is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation.
Child combinator - CSS: Cascading Style Sheets
/* list items that are children of the "my-things" list */ ul.my-things > li { margin: 2em; } elements matched by the second selector must be the immediate children of the elements matched by the first selector.
Class selectors - CSS: Cascading Style Sheets
/* all elements with class="spacious" */ .spacious { margin: 2em; } /* all <li> elements with class="spacious" */ li.spacious { margin: 2em; } /* all <li> elements with a class list that includes both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph ...
Layout and the containing block - CSS: Cascading Style Sheets
identifying the containing block the process for identifying the containing block depends entirely on the value of the element's position property: if the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).
Card - CSS: Cascading Style Sheets
this pattern is a list of "card" components with optional footers.
Cookbook template - CSS: Cascading Style Sheets
list that here.
Split Navigation - CSS: Cascading Style Sheets
you could apply the class push to any item in the list.
Replaced elements - CSS: Cascading Style Sheets
however, other form controls, including other types of <input> elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "widgets").
Specificity - CSS: Cascading Style Sheets
selector types the following list of selector types increases by specificity: type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
if that second parameter is invalid, such as if a comma-separated list is provided, the fallback will fail.
Value definition syntax - CSS: Cascading Style Sheets
this is typically used to separate a list of possible keywords.
align-content - CSS: Cascading Style Sheets
"safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-content' in that specification.
align-items - CSS: Cascading Style Sheets
self-end</option> <option value="unsafe self-end">unsafe self-end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-items' in that specification.
<angle> - CSS: Cascading Style Sheets
WebCSSangle
syntax the <angle> data type consists of a <number> followed by one of the units listed below.
animation-iteration-count - CSS: Cascading Style Sheets
if multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used.
attr() - CSS: Cascading Style Sheets
WebCSSattr
the list of valid values are: keyword associated type comment default value string <string> the attribute value is treated as a css <string>.
backface-visibility - CSS: Cascading Style Sheets
(this property has no effect on 2d transforms, which have no perspective.) syntax /* keyword values */ backface-visibility: visible; backface-visibility: hidden; /* global values */ backface-visibility: inherit; backface-visibility: initial; backface-visibility: unset; the backface-visibility property is specified as one of the keywords listed below.
background-attachment - CSS: Cascading Style Sheets
syntax /* keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* global values */ background-attachment: inherit; background-attachment: initial; background-attachment: unset; the background-attachment property is specified as one of the keyword values from the list below.
background-blend-mode - CSS: Cascading Style Sheets
if the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
background-origin - CSS: Cascading Style Sheets
syntax /* keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* global values */ background-origin: inherit; background-origin: initial; background-origin: unset; the background-origin property is specified as one of the keyword values listed below.
background-position-x - CSS: Cascading Style Sheets
formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ left | right | x-start | x-end ]?
background-position-y - CSS: Cascading Style Sheets
formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ top | bottom | y-start | y-end ]?
background-position - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetscomputed valuea list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentageanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-position>#where <bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <...
background-size - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrelative to the background positioning areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples please see scaling background images for examples.
border-collapse - CSS: Cascading Style Sheets
syntax /* keyword values */ border-collapse: collapse; border-collapse: separate; /* global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single keyword, which may be chosen from the list below.
border-color - CSS: Cascading Style Sheets
</code></li> <li><code>border-left-color: gold;</code></li> </ul> </div> css #justone { border-color: red; } #horzvert { border-color: gold red; } #topvertbott { border-color: red cyan gold; } #trbl { border-color: red cyan black gold; } /* set width and style for all divs */ div { border: solid 0.3em; width: auto; margin: 0.5em; padding: 0.5em; } ul { margin: 0; list-style: none; } result specifications specification status comment css logical properties and values level 1 editor's draft added the logical keyword.
border-image-slice - CSS: Cascading Style Sheets
border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment ...
border-image-width - CSS: Cascading Style Sheets
rtical | horizontal */ border-image-width: 2em 3em; /* top | horizontal | bottom */ border-image-width: 5% 15% 10%; /* top | right | bottom | left */ border-image-width: 5% 2em 10% auto; /* global values */ border-image-width: inherit; border-image-width: initial; border-image-width: unset; the border-image-width property may be specified using one, two, three, or four values chosen from the list of values below.
border-image - CSS: Cascading Style Sheets
dient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
border-style - CSS: Cascading Style Sheets
each value is a keyword chosen from the list below.
border - CSS: Cascading Style Sheets
WebCSSborder
the following css properties: border-color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the values listed below.
box-align - CSS: Cascading Style Sheets
WebCSSbox-align
syntax the box-align property is specified as one of the keyword values listed below.
box-decoration-break - CSS: Cascading Style Sheets
the appearance of the following properties: background border border-image box-shadow clip-path margin padding syntax /* keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the keyword values listed below.
box-direction - CSS: Cascading Style Sheets
/* keyword values */ box-direction: normal; box-direction: reverse; /* global values */ box-direction: inherit; box-direction: initial; box-direction: unset; syntax the box-direction property is specified as one of the keyword values listed below.
box-lines - CSS: Cascading Style Sheets
WebCSSbox-lines
syntax the box-lines property is specified as one of the keyword values listed below.
box-orient - CSS: Cascading Style Sheets
/* keyword values */ box-orient: horizontal; box-orient: vertical; box-orient: inline-axis; box-orient: block-axis; /* global values */ box-orient: inherit; box-orient: initial; box-orient: unset; syntax the box-orient property is specified as one of the keyword values listed below.
box-pack - CSS: Cascading Style Sheets
WebCSSbox-pack
syntax the box-pack property is specified as one of the keyword values listed below.
box-sizing - CSS: Cascading Style Sheets
syntax the box-sizing property is specified as a single keyword chosen from the list of values below.
break-after - CSS: Cascading Style Sheets
syntax the break-after property is specified as one of the keyword values from the list below.
break-before - CSS: Cascading Style Sheets
syntax the break-before property is specified as one of the keyword values from the list below.
break-inside - CSS: Cascading Style Sheets
syntax the break-inside property is specified as one of the keyword values from the list below.
caption-side - CSS: Cascading Style Sheets
syntax /* directional values */ caption-side: top; caption-side: bottom; /* warning: non-standard values */ caption-side: left; caption-side: right; caption-side: top-outside; caption-side: bottom-outside; /* global values */ caption-side: inherit; caption-side: initial; caption-side: unset; the caption-side property is specified as one of the keyword values listed below.
color-adjust - CSS: Cascading Style Sheets
for example, a page might include a list of information with rows whose background colors alternate between white and a light grey.
column-fill - CSS: Cascading Style Sheets
syntax /* keyword values */ column-fill: auto; column-fill: balance; column-fill: balance-all; /* global values */ column-fill: inherit; column-fill: initial; column-fill: unset; the column-fill property is specified as one of the keyword values listed below.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
syntax /* keyword value */ column-gap: normal; /* <length> values */ column-gap: 3px; column-gap: 2.5em; /* <percentage> value */ column-gap: 3%; /* global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below.
column-rule - CSS: Cascading Style Sheets
syntax column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue; /* global values */ column-rule: inherit; column-rule: initial; column-rule: unset; the column-rule property is specified as one, two, or three of the values listed below, in any order.
column-span - CSS: Cascading Style Sheets
syntax the column-span property is specified as one of the keyword values listed below.
column-width - CSS: Cascading Style Sheets
syntax /* keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* global values */ column-width: inherit; column-width: initial; column-width: unset; the column-width property is specified as one of the values listed below.
columns - CSS: Cascading Style Sheets
WebCSScolumns
a shorthand for the following css properties: column-count column-width syntax /* column width */ columns: 18em; /* column count */ columns: auto; columns: 2; /* both column width and count */ columns: 2 auto; columns: auto 12em; columns: auto auto; /* global values */ columns: inherit; columns: initial; columns: unset; the columns property may be specified as one or two of the values listed below, in any order.
counter-increment - CSS: Cascading Style Sheets
]+ | none examples incrementing named counters h1 { counter-increment: chapter section 2 page; /* increases the value of the chapter and page counters by 1, and the section counter by 2 */ } specifications specification status comment css lists module level 3the definition of 'counter-increment' in that specification.
counter-reset - CSS: Cascading Style Sheets
]+ | none examples resetting named counters h1 { counter-reset: chapter section 1 page; /* sets the chapter and page counters to 0, and the section counter to 1 */ } specifications specification status comment css lists module level 3the definition of 'counter-reset' in that specification.
counter-set - CSS: Cascading Style Sheets
]+ | none examples setting named counters h1 { counter-set: chapter section 1 page; /* sets the chapter and page counters to 0, and the section counter to 1 */ } specifications specification status comment css lists module level 3the definition of 'counter-set' in that specification.
<easing-function> - CSS: Cascading Style Sheets
ion: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const startbtn = document.queryselector('button'); const divelem = document.queryselector('div > div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop animation'; divelem.style.animationtimingfunction = selectelem.value; } else { divelem.style.animationname = 'unset'; startbtn.textcontent = 'start animation'; } }); selectelem.addeventlistener('change', () => { divelem.style.a...
element() - CSS: Cascading Style Sheets
WebCSSelement
a somewhat realistic example this example uses a hidden <div> as a background.
empty-cells - CSS: Cascading Style Sheets
syntax /* keyword values */ empty-cells: show; empty-cells: hide; /* global values */ empty-cells: inherit; empty-cells: initial; empty-cells: unset; the empty-cells property is specified as one of the keyword values listed below.
flex-basis - CSS: Cascading Style Sheets
flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { fle...
flex-wrap - CSS: Cascading Style Sheets
WebCSSflex-wrap
syntax flex-wrap: nowrap; /* default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset; the flex-wrap property is specified as a single keyword chosen from the list of values below.
flex - CSS: Cascading Style Sheets
WebCSSflex
er"> <div class="flex-item" id="flex">flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div> css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw"); flex.addeventlistener("click", function() { raw.style.display = raw.style.display == "none" ?
float - CSS: Cascading Style Sheets
WebCSSfloat
syntax /* keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* global values */ float: inherit; float: initial; float: unset; the float property is specified as a single keyword, chosen from the list of values below.
font-variant-caps - CSS: Cascading Style Sheets
ant-caps: normal; font-variant-caps: small-caps; font-variant-caps: all-small-caps; font-variant-caps: petite-caps; font-variant-caps: all-petite-caps; font-variant-caps: unicase; font-variant-caps: titling-caps; /* global values */ font-variant-caps: inherit; font-variant-caps: initial; font-variant-caps: unset; the font-variant-caps property is specified using a single keyword value from the list below.
font-variant-ligatures - CSS: Cascading Style Sheets
res; /* <historical-lig-values> */ font-variant-ligatures: contextual; /* <contextual-alt-values> */ font-variant-ligatures: no-contextual; /* <contextual-alt-values> */ /* global values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: unset; the font-variant-ligatures property is specified as one of the keyword values listed below.
font-variant-numeric - CSS: Cascading Style Sheets
fractions; /* <numeric-fraction-values> */ font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ font-variant-numeric: oldstyle-nums stacked-fractions; /* global values */ font-variant-numeric: inherit; font-variant-numeric: initial; font-variant-numeric: unset; this property can take one of two forms: either the keyword value normal or one or more of the other values listed below, space-separated, in any order.
font-variant-position - CSS: Cascading Style Sheets
syntax the font-variant-position property is specified as one of the keyword values listed below.
font-variation-settings - CSS: Cascading Style Sheets
<string> <number> when rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features.
<frequency> - CSS: Cascading Style Sheets
WebCSSfrequency
syntax the <frequency> data type consists of a <number> followed by one of the units listed below.
<gradient> - CSS: Cascading Style Sheets
WebCSSgradient
syntax the <gradient> data type is defined with one of the function types listed below.
grid-template-areas - CSS: Cascading Style Sheets
<string>+ a row is created for every separate string listed, and a column is created for each cell in the string.
hanging-punctuation - CSS: Cascading Style Sheets
one-value syntax uses any one of the keyword values in the list below.
hyphens - CSS: Cascading Style Sheets
WebCSShyphens
syntax /* keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* global values */ hyphens: inherit; hyphens: initial; hyphens: unset; the hyphens property is specified as a single keyword value chosen from the list below.
image-orientation - CSS: Cascading Style Sheets
be changed in the live sample */ } html <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="orientation taken from the image"> <select id="imageorientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getelementbyid("image").style.imageorientation = evt.target.value; }); result specifications specification status comment css images module level 3the definition of 'image-orientation' in that specification.
<image> - CSS: Cascading Style Sheets
WebCSSimage
nes an object's concrete size using (1) its intrinsic dimensions; (2) its specified size, defined by css properties like width, height, or background-size; and (3) its default size, determined by the kind of property the image is used with: kind of object (css property) default object size background-image the size of the element's background positioning area list-style-image the size of a 1em character border-image-source the size of the element's border image area cursor the browser-defined size matching the usual cursor size on the client's system mask-image ?
ime-mode - CSS: Cascading Style Sheets
WebCSSime-mode
syntax the ime-mode property is specified using one of the keyword values listed below.
initial-letter-align - CSS: Cascading Style Sheets
/* keyword values */ initial-letter-align: auto; initial-letter-align: alphabetic; initial-letter-align: hanging; initial-letter-align: ideographic; /* global values */ initial-letter-align: inherit; initial-letter-align: initial; initial-letter-align: unset; syntax one of the keyword values listed below.
Initial value - CSS: Cascading Style Sheets
the initial value of a css property is its default value, as listed in its definition table in the specification.
isolation - CSS: Cascading Style Sheets
WebCSSisolation
syntax /* keyword values */ isolation: auto; isolation: isolate; /* global values */ isolation: inherit; isolation: initial; isolation: unset; the isolation property is specified as one of the keyword values listed below.
justify-content - CSS: Cascading Style Sheets
rst baseline</option> <option value="last baseline">last baseline</option> <option value="space-between" selected>space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> </select> javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'justify-content' in that specification.
linear-gradient() - CSS: Cascading Style Sheets
color stops should be listed in ascending order.
mask-border-repeat - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-repeat: stretch; mask-border-repeat: repeat; mask-border-repeat: round; mask-border-repeat: space; /* vertical | horizontal */ mask-border-repeat: round stretch; /* global values */ mask-border-repeat: inherit; mask-border-repeat: initial; mask-border-repeat: unset; the mask-border-repeat property may be specified using one or two values chosen from the list of values below.
mask-border-width - CSS: Cascading Style Sheets
/* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below.
mask-repeat - CSS: Cascading Style Sheets
v> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image support you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { mask-image: url('mask1.png'), url('mask2.png'); mask-repeat: repeat-x, repeat-y; } each image is matched with the corresponding repeat style,...
mask-type - CSS: Cascading Style Sheets
WebCSSmask-type
syntax the mask-type property is specified as one of the keyword values listed below.
max() - CSS: Cascading Style Sheets
WebCSSmax
the max() css function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a css property value.
min() - CSS: Cascading Style Sheets
WebCSSmin
the min() css function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a css property value.
object-fit - CSS: Cascading Style Sheets
syntax the object-fit property is specified as a single keyword chosen from the list of values below.
object-position - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies toreplaced elementsinheritedyespercentagesrefer to width and height of element itselfcomputed valueas specifiedanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
outline-color - CSS: Cascading Style Sheets
syntax /* <color> values */ outline-color: #f92525; outline-color: rgb(30,222,121); outline-color: blue; /* keyword value */ outline-color: invert; /* global values */ outline-color: inherit; outline-color: initial; outline-color: unset; the outline-color property is specified as any one of the values listed below.
outline-style - CSS: Cascading Style Sheets
keyword values */ outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset; /* global values */ outline-style: inherit; outline-style: initial; outline-style: unset; the outline-style property is specified as any one of the values listed below.
outline-width - CSS: Cascading Style Sheets
syntax /* keyword values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1px; outline-width: 0.1em; /* global values */ outline-width: inherit; the outline-width property is specified as any one of the values listed below.
outline - CSS: Cascading Style Sheets
WebCSSoutline
owing css properties: outline-color outline-style outline-width syntax /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below.
Guide to scroll anchoring - CSS: Cascading Style Sheets
if your page is not behaving well with scroll anchoring enabled, it is probably because some scroll event listener is not handling well the extra scrolling to compensate for the anchor node movement.
overflow-block - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-block: visible; overflow-block: hidden; overflow-block: scroll; overflow-block: auto; /* global values */ overflow-block: inherit; overflow-block: initial; overflow-block: unset; the overflow-block property is specified as a single keyword chosen from the list of values below.
overflow-inline - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-inline: visible; overflow-inline: hidden; overflow-inline: scroll; overflow-inline: auto; /* global values */ overflow-inline: inherit; overflow-inline: initial; overflow-inline: unset; the overflow-inline property is specified as a single keyword chosen from the list of values below.
overflow-wrap - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; /* global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset; the overflow-wrap property is specified as a single keyword chosen from the list of values below.
overflow-x - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-x: visible; overflow-x: hidden; overflow-x: clip; overflow-x: scroll; overflow-x: auto; /* global values */ overflow-x: inherit; overflow-x: initial; overflow-x: unset; the overflow-x property is specified as a single keyword chosen from the list of values below.
overflow-y - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-y: visible; overflow-y: hidden; overflow-y: clip; overflow-y: scroll; overflow-y: auto; /* global values */ overflow-y: inherit; overflow-y: initial; overflow-y: unset; the overflow-y property is specified as a single keyword chosen from the list of values below.
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
nt properties this property is a shorthand for the following css properties: overflow-x overflow-y syntax /* keyword values */ overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; /* global values */ overflow: inherit; overflow: initial; overflow: unset; the overflow property is specified as one or two keywords chosen from the list of values below.
overscroll-behavior-block - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-block: auto; /* default */ overscroll-behavior-block: contain; overscroll-behavior-block: none; /* global values */ overscroll-behavior-block: inherit; overscroll-behavior-block: initial; overscroll-behavior-block: unset; syntax the overscroll-behavior-block property is specified as a keyword chosen from the list of values below.
overscroll-behavior-inline - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-inline: auto; /* default */ overscroll-behavior-inline: contain; overscroll-behavior-inline: none; /* global values */ overscroll-behavior-inline: inherit; overscroll-behavior-inline: initial; overscroll-behavior-inline: unset; syntax the overscroll-behavior-inline property is specified as a keyword chosen from the list of values below.
overscroll-behavior-x - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-x: auto; /* default */ overscroll-behavior-x: contain; overscroll-behavior-x: none; /* global values */ overscroll-behavior-x: inherit; overscroll-behavior-x: initial; overscroll-behavior-x: unset; syntax the overscroll-behavior-x property is specified as a keyword chosen from the list of values below.
overscroll-behavior-y - CSS: Cascading Style Sheets
contain; overscroll-behavior-y: none; /* global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: unset; initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a keyword chosen from the list of values below.
padding-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> value */ padding-bottom: 10%; /* global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; the padding-bottom property is specified as a single value chosen from the list below.
padding-left - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* <percentage> value */ padding-left: 10%; /* global values */ padding-left: inherit; padding-left: initial; padding-left: unset; the padding-left property is specified as a single value chosen from the list below.
padding-right - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-right: 0.5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* global values */ padding-right: inherit; padding-right: initial; padding-right: unset; the padding-right property is specified as a single value chosen from the list below.
padding-top - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-top: 0.5em; padding-top: 0; padding-top: 2cm; /* <percentage> value */ padding-top: 10%; /* global values */ padding-top: inherit; padding-top: initial; padding-top: unset; the padding-top property is specified as a single value chosen from the list below.
paint() - CSS: Cascading Style Sheets
WebCSSpaint
in this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>it...
perspective-origin - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
place-items - CSS: Cascading Style Sheets
on> <option value="first baseline auto">first baseline auto</option> <option value="last baseline normal">last baseline normal</option> <option value="stretch auto">stretch auto</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap...
<position> - CSS: Cascading Style Sheets
candidate recommendation relists links to both definitions: if css backgrounds and borders module level 3 is supported, its definition of <position> must also be used.
repeating-conic-gradient() - CSS: Cascading Style Sheets
a repeating conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops.
repeating-linear-gradient() - CSS: Cascading Style Sheets
<color-stop-list> ) \---------------------------------/ \---------------/ definition of the gradient line list of color stops where <side-or-corner> = [left | right] || [top | bottom] and <color-stop-list> = [ <linear-color-stop> [, <color-hint>?
repeating-radial-gradient() - CSS: Cascading Style Sheets
, | at <position> , <color-stop-list> ) \---------------------------------------------------------------/\-----------------/ contour, size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>?
resize - CSS: Cascading Style Sheets
WebCSSresize
syntax /* keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* global values */ resize: inherit; resize: initial; resize: unset; the resize property is specified as a single keyword value from the list below.
<resolution> - CSS: Cascading Style Sheets
syntax the <resolution> data type consists of a strictly positive <number> followed by one of the units listed below.
scroll-behavior - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset; the scroll-behavior property is specified as one of the keyword values listed below.
text-decoration-line - CSS: Cascading Style Sheets
keywords */ text-decoration-line: underline overline; /* two decoration lines */ text-decoration-line: overline underline line-through; /* multiple decoration lines */ /* global values */ text-decoration-line: inherit; text-decoration-line: initial; text-decoration-line: unset; the text-decoration-line property is specified as none, or one or more space-separated values from the list below.
text-justify - CSS: Cascading Style Sheets
text-justify: none; text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: distribute; /* deprecated value */ syntax the text-justify property is specified as a single keyword chosen from the list of values below.
text-orientation - CSS: Cascading Style Sheets
syntax /* keyword values */ text-orientation: mixed; text-orientation: upright; text-orientation: sideways-right; text-orientation: sideways; text-orientation: use-glyph-orientation; /* global values */ text-orientation: inherit; text-orientation: initial; text-orientation: unset; the text-orientation property is specified as a single keyword from the list below.
text-overflow - CSS: Cascading Style Sheets
as some not-listed-at-risk features needed to be removed, the spec was demoted to the working draft level, explaining why browsers implemented this property unprefixed, though not at the cr state.
text-underline-offset - CSS: Cascading Style Sheets
syntax /* single keyword */ text-underline-offset: auto; /* length */ text-underline-offset: 0.1em; text-underline-offset: 3px; /* percentage */ text-underline-offset: 20%; /* global values */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below.
<time> - CSS: Cascading Style Sheets
WebCSStime
syntax the <time> data type consists of a​ ​​​​​​<number> followed by one of the units listed below.
transform-box - CSS: Cascading Style Sheets
/* keyword values */ transform-box: content-box; transform-box: border-box; transform-box: fill-box; transform-box: stroke-box; transform-box: view-box; /* global values */ transform-box: inherit; transform-box: initial; transform-box: unset; syntax the transform-box property is specified as one of the keyword values listed below.
transform-origin - CSS: Cascading Style Sheets
the following <percentage> values: keyword value left 0% center 50% right 100% top 0% bottom 100% formal definition initial value50% 50% 0applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1">&nbsp;</div> .
transform-style - CSS: Cascading Style Sheets
round: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment css transforms level 2the definition of 'transform-style' in that specification.
transition-property - CSS: Cascading Style Sheets
as such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results.
transition - CSS: Cascading Style Sheets
see how things are handled when lists of property values aren't the same length.
Used value - CSS: Cascading Style Sheets
t function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
user-modify - CSS: Cascading Style Sheets
syntax the -moz-user-modify property is specified as one of the keyword values from the list below.
vertical-align - CSS: Cascading Style Sheets
er; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align: 10em; vertical-align: 4px; /* <percentage> values */ vertical-align: 20%; /* global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; the vertical-align property is specified as one of the values listed below.
visibility - CSS: Cascading Style Sheets
syntax /* keyword values */ visibility: visible; visibility: hidden; visibility: collapse; /* global values */ visibility: inherit; visibility: initial; visibility: unset; the visibility property is specified as one of the keyword values listed below.
will-change - CSS: Cascading Style Sheets
var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment css will c...
writing-mode - CSS: Cascading Style Sheets
syntax /* keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset; the writing-mode property is specified as one of the values listed below.
CSS: Cascading Style Sheets
WebCSS
we round off the module by looking at applying custom fonts to your page, and styling lists and links.
math:max() - EXSLT
WebEXSLTmathmax
the maximum value is then the first node in the sorted list, converted into a number.
math:min() - EXSLT
WebEXSLTmathmin
the minimum value is then the first node in the sorted list, converted into a number.
EXSLT
there are a number of modules; those that are supported by firefox are listed below: common (exsl)the exslt common package provides basic functions that expand upon the capabilities of xslt.math (math)the exslt math package provides functions for working with numeric values and comparing nodes.regular expressions (regexp)the exslt regular expressions package provides functions that allow testing, matching, and replacing text using javascript style regular expressions.sets (set)the exslt sets package offers functions that let you perform set manipulation.strings (str)the exslt strings package provides functions that allow the manipulation of strings.
Community - Developer guides
WebGuideAJAXCommunity
if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
WAI ARIA Live Regions/API Support - Developer guides
see [#events_fired_for_web_page_mutations the mutation events list] to match the type of event with this attribute's value, to determine whether the author believed the event should be presented to the user or not.
Guide to Web APIs - Developer guides
WebGuideAPI
on this page you'll find a complete list of all of the apis provided by the full web technology stack.
Live streaming web audio and video - Developer guides
at the start of the streaming session, an extended m3u (m3u8) playlist is downloaded.
Web Audio playbackRate explained - Developer guides
a9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firing on the <input> element, allowing us to react to the playback rate control being changed.
Rich-Text Editing in Mozilla - Developer guides
atdoc('justifycenter');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaifhi+py+0po5y02ouz3jl4d4jogi7kaz5bqn4sycvbaqa7" /> <img class="intlink" title="right align" onclick="formatdoc('justifyright');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jqgdlkgyxouqzl43jyvgaaow==" /> <img class="intlink" title="numbered list" onclick="formatdoc('insertorderedlist');" src="data:image/gif;base64,r0lgodlhfgawamigaaaaadljwlie35gjuaezxtha7p///////yh5baeaaacalaaaaaawabyaaam2elrc/jdksespwjorfvggcbubotfbeq6qiaysqnrhaeozyaz07lu9lubnc0ugqu1k52s6n5oeads=" /> <img class="intlink" title="dotted list" onclick="formatdoc('insertunorderedlist');" src="data:image/gif;base64,r0lgodlhfgawamigaaaaab1chf9vj1ie33morqezxv///////yh5baeaaaca...
Making content editable - Developer guides
atdoc('justifycenter');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaifhi+py+0po5y02ouz3jl4d4jogi7kaz5bqn4sycvbaqa7" /> <img class="intlink" title="right align" onclick="formatdoc('justifyright');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jqgdlkgyxouqzl43jyvgaaow==" /> <img class="intlink" title="numbered list" onclick="formatdoc('insertorderedlist');" src="data:image/gif;base64,r0lgodlhfgawamigaaaaadljwlie35gjuaezxtha7p///////yh5baeaaacalaaaaaawabyaaam2elrc/jdksespwjorfvggcbubotfbeq6qiaysqnrhaeozyaz07lu9lubnc0ugqu1k52s6n5oeads=" /> <img class="intlink" title="dotted list" onclick="formatdoc('insertunorderedlist');" src="data:image/gif;base64,r0lgodlhfgawamigaaaaab1chf9vj1ie33morqezxv///////yh5baeaaaca...
Introduction to HTML5 - Developer guides
you can find a list of all of the html5 features that gecko currently supports on the main html5 page.
Using HTML sections and outlines - Developer guides
html elements in <nav> while list elements are common for navigation they are not required.
Introduction to Web development - Developer guides
basic structure of a web page — the doctype and document 'tree' fundamental html elements — structural, head, list, form elements and more, explained by category.
A hybrid approach - Developer guides
by combining the techniques listed above, we can get a mobile web development strategy that is both more flexible than pure separate sites and has better performance than pure responsive design.
Optimization and performance - Developer guides
the most notable tools are listed below.
Printing - Developer guides
note: you can also use window.onbeforeprint and window.onafterprint to assign handlers for these events, but using eventtarget.addeventlistener() is preferred.
Developer guides
guide to web apis a list of all web apis and what they do.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
below are some examples; this is not meant to be an exhaustive list.
HTML attribute: rel - HTML: Hypertext Markup Language
WebHTMLAttributesrel
the type of relationships is given by the value of the rel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords, which are listed in the following table.
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
WebHTMLElementb
this makes it easier to manage multiple use cases of <b> if your stylistic needs change, without the need to change all of its uses in the html.
<body>: The Document Body element - HTML: Hypertext Markup Language
WebHTMLElementbody
living standard changed the list of non-conforming features.
<col> - HTML: Hypertext Markup Language
WebHTMLElementcol
<col> allows styling columns using css, but only a few properties will have an effect on the column (see the css 2.1 specification for a list).
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementcontent
select a comma-separated list of selectors.
<dd>: The Description Details element - HTML: Hypertext Markup Language
WebHTMLElementdd
the html <dd> element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
WebHTMLElementfieldset
"#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> <input type="text" id="name" value="chris"> </div> <div> <label for="pwd">archetype: </label> <input type="password" id="pwd" value="wookie"> </div> </fieldset> </form> technical summary content categories flow content, sectioning root, listed, form-associated element, palpable content.
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
the browser uses them in the order in which they are listed.
<head>: The Document Metadata (Header) element - HTML: Hypertext Markup Language
WebHTMLElementhead
for human-visible information, like top-level headings and listed authors, see the <header> element.
<input type="date"> - HTML: Hypertext Markup Language
WebHTMLElementinputdate
among browsers with custom interfaces for selecting dates are chrome and opera, whose data control looks like so: the edge date control looks like: and the firefox date control looks like this: value a domstring representing a date in yyyy-mm-dd format, or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasdate, valueasnumber.
<input type="datetime-local"> - HTML: Hypertext Markup Language
events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasnumber.
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
put type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then we add some javascript to set up an event listener on the submit event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.addeventlistener("submit", function(event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output; event.prev...
<input type="reset"> - HTML: Hypertext Markup Language
WebHTMLElementinputreset
in this example, r is specified as the access key (you'll need to press r plus the particular modifier keys for your browser/os combination; see accesskey for a useful list of those).
<isindex> - HTML: Hypertext Markup Language
WebHTMLElementisindex
when sent, the server would return a list of pages matching the query.
<keygen> - HTML: Hypertext Markup Language
WebHTMLElementkeygen
content categories flow content, phrasing content, interactive content, listed, labelable, submittable, resettable form-associated element, palpable content.
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
it is a comma-separated list of the values below: values for the content of <meta name="robots"> value description used by index allows the robot to index the page (default).
<p>: The Paragraph element - HTML: Hypertext Markup Language
WebHTMLElementp
switch back!">use pilcrow for paragraphs</button> </p> css p { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggletext; var oldtext = event.target.innertext; event.target.innertext = newbuttontext; event.target.dataset.toggletext = oldtext; }); result accessibility concerns breaking up content into paragrap...
<section>: The Generic Section element - HTML: Hypertext Markup Language
WebHTMLElementsection
as an example, a navigation menu should be wrapped in a <nav> element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a <section>.
<style>: The Style Information element - HTML: Hypertext Markup Language
WebHTMLElementstyle
nonce a cryptographic nonce (number used once) used to whitelist inline styles in a style-src content-security-policy.
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
WebHTMLElementsummary
default style per the html specification, the default style for <summary> elements includes display: list-item.
<template>: The Content Template element - HTML: Hypertext Markup Language
WebHTMLElementtemplate
consider the following html and javascript: html <div id="container"></div> <template id="template"> <div>click me</div> </template> javascript const container = document.getelementbyid("container"); const template = document.getelementbyid("template"); function clickhandler(event) { alert("clicked a div"); } const firstclone = template.content.clonenode(true); firstclone.addeventlistener("click", clickhandler); container.appendchild(firstclone); const secondclone = template.content.firstelementchild.clonenode(true); secondclone.addeventlistener("click", clickhandler); container.appendchild(secondclone); result firstclone is a documentfragment instance, so while it gets appended inside the container as expected, clicking on it does not trigger the click event.
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
<textarea name="textarea" rows="5" cols="30" disabled>i am a disabled textarea</textarea> <textarea name="textarea" rows="5" cols="30" readonly>i am a readonly textarea</textarea> technical summary content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element.
<tr>: The Table Row element - HTML: Hypertext Markup Language
WebHTMLElementtr
basic example this simple example shows a table listing people's names along with various information about membership in a club or service.
class - HTML: Hypertext Markup Language
the class global attribute is a space-separated list of the case-sensitive classes of the element.
contextmenu - HTML: Hypertext Markup Language
</li> <li contextmenu="changefont" id="fontsizing"> on this specific list element, you can change the size of the text by using the "increase/decrease font" actions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="changeimage"> on the image belo...
itemprop - HTML: Hypertext Markup Language
values the property value of a name-value pair is as given for the first matching case in the following list: if the element has an itemscope attribute the value is the item created by the element.
itemref - HTML: Hypertext Markup Language
itemref provides a list of element ids (not itemids) elsewhere in the document, with additional properties the itemref attribute can only be specified on elements that have an itemscope attribute specified.
part - HTML: Hypertext Markup Language
the part global attribute contains a space-separated list of the part names of the element.
tabindex - HTML: Hypertext Markup Language
interactive components authored using non-interactive elements are not be listed in the accessibility tree.
x-ms-acceleratorkey - HTML: Hypertext Markup Language
you must provide javascript event handlers, like onkeypress, onkeydown, or onkeyup, to listen for your declared accelerator keys and activate the element accordingly.
Inline elements - HTML: Hypertext Markup Language
list of "inline" elements the following elements are inline by default (although block and inline elements are no longer defined in html 5, use content categories instead): <a> <abbr> <acronym> <audio> (if it has visible controls) <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <l...
Link types - HTML: Hypertext Markup Language
list of the defined link types and their significance in html link type description allowed in these elements not allowed in these elements alternate if the element is <link> and the rel attribute also contains the stylesheet type, the link defines an alternative style sheet; in that case the title attribute must be present and not be the empty string.
Microdata - HTML: Hypertext Markup Language
itemref provides a list of element ids (not itemids) with additional properties elsewhere in the document.
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
see the list of quirks and almost standards mode for the differences between the modes.
HTML reference - HTML: Hypertext Markup Language
html element reference this page lists all the html elements, which are created using tags.
HTTP authentication - HTTP
iana maintains a list of authentication schemes, but there are other schemes offered by host services, such as amazon aws.
Identifying resources on the Web - HTTP
those parameters are a list of key/value pairs separated with the & symbol.
Reason: CORS header 'Access-Control-Allow-Origin' missing - HTTP
header set access-control-allow-origin 'origin-list' for nginx, the command to set up this header is: add_header 'access-control-allow-origin' 'origin-list' ...
Reason: Multiple CORS header 'Access-Control-Allow-Origin' not allowed - HTTP
you cannot send back a list of origins, because browsers only accept a value that is either a single origin or null ...
CORS errors - HTTP
WebHTTPCORSErrors
the reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.
Cross-Origin Resource Policy (CORP) - HTTP
the policy is only effective for no-cors requests, which are issued by default for cors-safelisted methods/headers.
Accept-CH - HTTP
syntax accept-ch: <list of client hints> examples accept-ch: dpr, viewport-width accept-ch: width accept-ch-lifetime: 86400 vary: dpr, viewport-width, width note: remember to vary the response based on the accepted client hints.
Accept-Language - HTTP
header type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can only be 0-9, a-z, a-z, space or *,-.;=.
Accept-Patch - HTTP
notes: an iana registry maintains a complete list of official content encodings.
Accept - HTTP
WebHTTPHeadersAccept
header type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del).
Access-Control-Allow-Methods - HTTP
access-control-allow-methods: * directives <method> comma-delimited list of the allowed http request methods.
Access-Control-Allow-Origin - HTTP
a response that tells the browser to allow requesting code from the origin https://developer.mozilla.org to access a resource will include the following: access-control-allow-origin: https://developer.mozilla.org limiting the possible access-control-allow-origin values to a set of allowed origins requires code on the server side to check the value of the origin request header, compare that to a list of allowed origins, and then if the origin value is in the list, to set the access-control-allow-origin value to the same value as the origin value.
Access-Control-Request-Headers - HTTP
directives <header-name> a comma-delimited list of http headers that are included in the request.
Cache-Control - HTTP
header type general header forbidden header name no cors-safelisted response header yes syntax caching directives have the following rules to be valid: case-insensitive, but lowercase is recommended.
Content-Encoding - HTTP
examples compressing with gzip on the client side, you can advertise a list of compression schemes that will be sent along in an http request.
Content-Range - HTTP
header type response header forbidden header name no cors-safelisted response-header no syntax content-range: <unit> <range-start>-<range-end>/<size> content-range: <unit> <range-start>-<range-end>/* content-range: <unit> */<size> directives <unit> the unit in which ranges are specified.
CSP: child-src - HTTP
'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
CSP: connect-src - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
CSP: font-src - HTTP
'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
CSP: frame-src - HTTP
'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
CSP: manifest-src - HTTP
'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
CSP: media-src - HTTP
'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
CSP: object-src - HTTP
'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
CSP: style-src-attr - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
CSP: style-src-elem - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
CSP: style-src - HTTP
'nonce-<base64-value>' an allow-list for specific inline scripts using a cryptographic nonce (number used once).
CSP: trusted-types - HTTP
this directive declares a white-list of trusted type policy names created with trustedtypes.createpolicy from trusted types api.
CSP: worker-src - HTTP
'nonce-<base64-value>' a whitelist for specific inline scripts using a cryptographic nonce (number used once).
Content-Security-Policy - HTTP
trusted-types used to specify an allow-list of trusted types policies.
Content-Type - HTTP
header type entity header forbidden header name no cors-safelisted response header yes cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x08 (tab)), "():<>?@[\]{}, and 0x7f (delete).
Date - HTTP
WebHTTPHeadersDate
note that date is listed in the forbidden header names in the fetch spec - so this code will not send date header: fetch('https://httpbin.org/get', { 'headers': { 'date': (new date()).toutcstring() } }) header type general header forbidden header name yes syntax date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive).
Expect-CT - HTTP
ct requirements can be satisfied via any one of the following mechanisms: x.509v3 certificate extension to allow embedding of signed certificate timestamps issued by individual logs a tls extension of type signed_certificate_timestamp sent during the handshake supporting ocsp stapling (that is, the status_request tls extension) and providing a signedcertificatetimestamplist when a site enables the expect-ct header, they are requesting that the browser check that any certificate for that site appears in public ct logs.
Expires - HTTP
WebHTTPHeadersExpires
header type response header forbidden header name no cors-safelisted response header yes syntax expires: <http-date> directives <http-date> an http-date timestamp.
Host - HTTP
WebHTTPHeadersHost
<port> optional tcp port number on which the server is listening.
If-None-Match - HTTP
for other methods, the request will be processed only if the eventually existing resource's etag doesn't match any of the values listed.
Keep-Alive - HTTP
header type general header forbidden header name yes syntax keep-alive: parameters directives parameters a comma-separated list of parameters, each consisting of an identifier and a value separated by the equal sign ('=').
Last-Modified - HTTP
header type response header forbidden header name no cors-safelisted response header yes syntax last-modified: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive).
Origin - HTTP
WebHTTPHeadersOrigin
<port> optional tcp port number on which the server is listening.
Pragma - HTTP
WebHTTPHeadersPragma
forbidden header name no cors-safelisted response header yes syntax pragma: no-cache directives no-cache same as cache-control: no-cache.
Proxy-Authenticate - HTTP
iana maintains a list of authentication schemes.
Referrer-Policy - HTTP
ge https://example.com/page https://mozilla.org https://example.com/ http://example.org (no referrer) unsafe-url https://example.com/page?q=123 anywhere https://example.com/page?q=123 specifying a fallback policy if you want to specify a fallback policy in any case the desired policy hasn't got wide enough browser support, use a comma-separated list with the desired policy specified last: referrer-policy: no-referrer, strict-origin-when-cross-origin in the above scenario, no-referrer will only be used if strict-origin-when-cross-origin is not supported by the browser.
Sec-Fetch-Dest - HTTP
header type fetch metadata request header forbidden header name yes, since it has prefix sec- cors-safelisted request header syntax sec-fetch-dest: audio sec-fetch-dest: audioworklet sec-fetch-dest: document sec-fetch-dest: embed sec-fetch-dest: empty sec-fetch-dest: font sec-fetch-dest: image sec-fetch-dest: manifest sec-fetch-dest: nested-document sec-fetch-dest: object sec-fetch-dest: paintworklet sec-fetch-dest: report sec-fetch-dest: script sec-fetch-dest: serviceworker sec-fetch-dest: sharedworker sec-fetch-dest: style sec-fetch-dest: track sec-fetch-dest: video sec-fetch-dest: worker sec-fetch-dest: xslt sec-fetch-dest:...
Sec-Fetch-Mode - HTTP
header type fetch metadata request header forbidden header name yes, since it has prefix sec- cors-safelisted request header syntax sec-fetch-mode: cors sec-fetch-mode: navigate sec-fetch-mode: nested-navigate sec-fetch-mode: no-cors sec-fetch-mode: same-origin sec-fetch-mode: websocket values cors navigate nested-navigate no-cors same-origin websocket examples todo specifications specification title fetch metadata request headers the sec-fetch-mode http request header ...
Sec-Fetch-Site - HTTP
header type fetch metadata request header forbidden header name yes, since it has prefix sec- cors-safelisted response header cors-safelisted request header syntax sec-fetch-site: cross-site sec-fetch-site: same-origin sec-fetch-site: same-site sec-fetch-site: none values cross-site same-origin same-site none this request does not relate to any context like site, origin, or frame.
Sec-Fetch-User - HTTP
header type fetch metadata request header forbidden header name yes, since it has prefix sec- cors-safelisted request header syntax sec-fetch-user: ?0 sec-fetch-user: ?1 values the value is a boolean structured header.
Transfer-Encoding - HTTP
header type response header forbidden header name yes syntax transfer-encoding: chunked transfer-encoding: compress transfer-encoding: deflate transfer-encoding: gzip transfer-encoding: identity // several values can be listed, separated by a comma transfer-encoding: gzip, chunked directives chunked data is sent in a series of chunks.
Vary - HTTP
WebHTTPHeadersVary
<header-name> a comma-separated list of header names to take into account when deciding whether or not a cached response can be used.
WWW-Authenticate - HTTP
iana maintains a list of authentication schemes.
X-Forwarded-For - HTTP
header type request header forbidden header name no syntax x-forwarded-for: <client>, <proxy1>, <proxy2> directives <client> the client ip address <proxy1>, <proxy2> if a request goes through multiple proxies, the ip addresses of each successive proxy is listed.
X-Frame-Options - HTTP
configuring haproxy to configure haproxy to send the x-frame-options header, add this to your front-end, listen, or backend configuration: rspadd x-frame-options:\ sameorigin alternatively, in newer versions: http-response set-header x-frame-options sameorigin configuring express to configure express to send the x-frame-options header, you can use helmet which uses frameguard to set the header.
PATCH - HTTP
WebHTTPMethodsPATCH
to find out whether a server supports patch, a server can advertise its support by adding it to the list in the allow or access-control-allow-methods (for cors) response headers.
POST - HTTP
WebHTTPMethodsPOST
as described in the http 1.1 specification, post is designed to allow a uniform method to cover the following functions: annotation of existing resources posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles; adding a new user through a signup modal; providing a block of data, such as the result of submitting a form, to a data-handling process; extending a database through an append operation.
An overview of HTTP - HTTP
WebHTTPOverview
here is a list of common features controllable with http.
HTTP resources and specifications - HTTP
this page lists relevant resources about http.
405 Method Not Allowed - HTTP
WebHTTPStatus405
the server must generate an allow header field in a 405 response containing a list of the target resource's currently supported methods.
HTTP response status codes - HTTP
WebHTTPStatus
if you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software.
About JavaScript - JavaScript
javascript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via eval), object introspection (via for ...
Equality comparisons and sameness - JavaScript
here's a non-exhaustive list of built-in methods and operators that might cause a distinction between -0 and +0 to manifest itself in your code: - (unary negation) let stoppingforce = obj.mass * -obj.velocity; if obj.velocity is 0 (or computes to 0), a -0 is introduced at that place and propogates out into stoppingforce.
Control flow and error handling - JavaScript
it formats the message as an error, and adds it to the list of error messages generated by the page.
Numbers and dates - JavaScript
min(), max() returns the minimum or maximum (respectively) value of a comma separated list of numbers as arguments.
Regular expressions - JavaScript
the following pages provide lists of the different special characters that fit into each category, along with descriptions and examples.
Using Promises - JavaScript
you can capture these for analysis and handling by your code—or just to avoid having them cluttering up your output—by adding a handler for the unhandledrejection event, like this: window.addeventlistener("unhandledrejection", event => { /* you might start here by adding code to examine the promise specified by event.promise and the reason in event.reason */ event.preventdefault(); }, false); by calling the event's preventdefault() method, you tell the javascript runtime not to do its default action when rejected promises go unhandled.
Inheritance and the prototype chain - JavaScript
all of the examples listed below create exactly the same resulting inst object (thus logging the same results to the console), except in different ways for the purpose of illustration.
JavaScript technologies overview - JavaScript
the html specification also defines restrictions on documents; for example, it requires all children of a <ul> element, which represents an unordered list, to be <li> elements, as those represent list items.
JavaScript language resources - JavaScript
you can participate in or just track the work on the next revisions of the ecmascript language specification, code-named "harmony", and the ecmascript internationalization api specification via public wiki and the es-discuss mailing list linked from ecmascript.org.
Memory Management - JavaScript
mber var s = 'azerty'; // allocates memory for a string var o = { a: 1, b: null }; // allocates memory for an object and contained values // (like object) allocates memory for the array and // contained values var a = [1, null, 'abra']; function f(a) { return a + 2; } // allocates a function (which is a callable object) // function expressions also allocate an object someelement.addeventlistener('click', function() { someelement.style.backgroundcolor = 'blue'; }, false); allocation via function calls some function calls result in object allocation.
Deprecated and obsolete features - JavaScript
this page lists features of javascript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).
SyntaxError: "x" is a reserved identifier - JavaScript
var colorenum = { red: 0, green: 1, blue: 2 }; var list = ["potatoes", "rice", "fries"]; update older browsers if you are using an older browser that does not yet implement let or class, for example, you should update to a more recent browser version that does support these new language features.
SyntaxError: "use strict" not allowed in function with non-simple parameters - JavaScript
message edge: cannot apply strict mode on functions with non-simple parameter list firefox: syntaxerror: "use strict" not allowed in function with default parameter syntaxerror: "use strict" not allowed in function with rest parameter syntaxerror: "use strict" not allowed in function with destructuring parameter chrome: syntaxerror: illegal 'use strict' directive in function with non-simple parameter list error type syntaxerror.
SyntaxError: Unexpected token - JavaScript
message syntaxerror: expected expression, got "x" syntaxerror: expected property name, got "x" syntaxerror: expected target, got "x" syntaxerror: expected rest argument name, got "x" syntaxerror: expected closing parenthesis, got "x" syntaxerror: expected '=>' after argument list, got "x" error type syntaxerror what went wrong?
Functions - JavaScript
each must be a string that conforms to the rules for a valid javascript identifier or a list of such strings separated with a comma; for example "x", "thevalue", or "a,b".
Array.prototype.reduce() - JavaScript
ey].push(obj) return acc }, {}) } let groupedpeople = groupby(people, 'age') // groupedpeople is: // { // 20: [ // { name: 'max', age: 20 }, // { name: 'jane', age: 20 } // ], // 21: [{ name: 'alice', age: 21 }] // } bonding arrays contained in an array of objects using the spread operator and initialvalue // friends - an array of objects // where object field "books" is a list of favorite books let friends = [{ name: 'anna', books: ['bible', 'harry potter'], age: 21 }, { name: 'bob', books: ['war and peace', 'romeo and juliet'], age: 26 }, { name: 'alice', books: ['the lord of the rings', 'the shining'], age: 18 }] // allbooks - list which will contain all friends' books + // additional list contained in initialvalue let allbooks = friends.reduce(fun...
Array.prototype.reduceRight() - JavaScript
in t) { value = callback(value, t[k], k, t); } } return value; }; } examples sum up all values within an array var sum = [0, 1, 2, 3].reduceright(function(a, b) { return a + b; }); // sum is 6 flatten an array of arrays var flattened = [[0, 1], [2, 3], [4, 5]].reduceright(function(a, b) { return a.concat(b); }, []); // flattened is [4, 5, 2, 3, 0, 1] run a list of asynchronous functions with callbacks in series each passing their results to the next const waterfall = (...functions) => (callback, ...args) => functions.reduceright( (composition, fn) => (...results) => fn(composition, ...results), callback )(...args); const randint = max => math.floor(math.random() * max) const add5 = (callback, x) => { settimeout(callback, randint(1000), ...
Array.prototype.every() - JavaScript
let testresult be the result of calling the call internal method // of callbackfn with t as the this value if t is not undefined // else is the result of calling callbackfn // and argument list containing kvalue, k, and o.
Array.from() - JavaScript
let a be the result of calling the [[construct]] internal method // of c with an argument list containing the single item len.
Array.prototype.length - JavaScript
var namelista = new array(4294967296); //2 to the 32nd power = 4294967296 var namelistc = new array(-100) //negative sign console.log(namelista.length); //rangeerror: invalid array length console.log(namelistc.length); //rangeerror: invalid array length var namelistb = []; namelistb.length = math.pow(2,32)-1; //set array length less than 2 to the 32nd power console.log(namelistb.length); //4294967295 y...
Array.prototype.toLocaleString() - JavaScript
let separator be the string value for the // list-separator string appropriate for the // host environment's current locale (this is // derived in an implementation-defined way).
AsyncFunction - JavaScript
each must be a string that corresponds to a valid javascript identifier or a list of such strings separated with a comma; for example "x", "thevalue", or "a,b".
Error.prototype.stack - JavaScript
"undefined" is listed as "(void 0)".
Error.prototype.lineNumber - JavaScript
examples using linenumber var e = new error('could not parse input'); throw e; console.log(e.linenumber) // 2 alternative example using error event window.addeventlistener('error', function(e) { console.log(e.linenumber); // 5 }); var e = new error('could not parse input'); throw e; this is not a standard feature and lacks widespread support.
Function() constructor - JavaScript
each must be a string that corresponds to a valid javascript identifier, or a list of such strings separated with a comma.
Function.prototype.call() - JavaScript
note: while the syntax of this function is almost identical to that of apply(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.
Generator.prototype.next() - JavaScript
ows a simple generator and the object that the next method returns: function* gen() { yield 1; yield 2; yield 3; } const g = gen(); // "generator { }" g.next(); // "object { value: 1, done: false }" g.next(); // "object { value: 2, done: false }" g.next(); // "object { value: 3, done: false }" g.next(); // "object { value: undefined, done: true }" using next() with a list function* getpage(pagesize = 1, list) { let output = []; let index = 0; while (index < list.length) { output = []; for (let i = index; i < index + pagesize; i++) { if (list[i]) { output.push(list[i]); } } yield output; index += pagesize; } } list = [1, 2, 3, 4, 5, 6, 7, 8] var page = getpage(3, list); // generator { } page.next(); ...
GeneratorFunction - JavaScript
each must be a string that corresponds to a valid javascript identifier or a list of such strings separated with a comma; for example "x", "thevalue", or "a,b".
Intl.Locale.prototype.hourCycle - JavaScript
the hour cycle type can have several different values, which are listed in the table below.
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
pluralcategories an array of plural categories used by the given locale, seleced from the list "zero", "one", "two", "few", "many" and "other".
Intl.getCanonicalLocales() - JavaScript
syntax intl.getcanonicallocales(locales) parameters locales a list of string values for which to get the canonical locale names.
JSON.stringify() - JavaScript
replacer optional a function that alters the behavior of the stringification process, or an array of string and number that serve as an allowlist for selecting/filtering the properties of the value object to be included in the json string.
Math.atan() - JavaScript
examples using math.atan() math.atan(1); // 0.7853981633974483 math.atan(0); // 0 math.atan(-0); // -0 math.atan(infinity); // 1.5707963267948966 math.atan(-infinity); // -1.5707963267948966 // the angle that the line [(0,0);(x,y)] forms with the x-axis in a cartesian coordinate system math.atan(y / x); note that you may want to avoid using ±infinity for stylistic reasons.
Object.entries() - JavaScript
polyfill to add compatible object.entries() support in older environments that do not natively support it, you can use any of the following: a demonstration implementation of object.entries in the tc39/proposal-object-values-entries (if you don't need any support for ie); a polyfill in the es-shims/object.entries repositories; or, you can use the simple, ready-to-deploy polyfill listed below: if (!object.entries) { object.entries = function( obj ){ var ownprops = object.keys( obj ), i = ownprops.length, resarray = new array(i); // preallocate the array while (i--) resarray[i] = [ownprops[i], obj[ownprops[i]]]; return resarray; }; } for the above polyfill code snippet, if you need support for ie<9, then you will also need an object.k...
Object.prototype.toLocaleString() - JavaScript
see the list below.
Object.prototype.toSource() - JavaScript
a cyclically linked list or a tree that can be traversed both ways, tosource() will not recreate the self-reference, as of firefox 24.
Object.prototype.valueOf() - JavaScript
(n) { this.number = n; } mynumbertype.prototype.valueof = function() { return this.number; }; var myobj = new mynumbertype(4); myobj + 3; // 7 using unary plus +"5" // 5 (string to number) +"" // 0 (string to number) +"1 + 2" // nan (doesn't evaluate) +new date() // same as (new date()).gettime() +"foo" // nan (string to number) +{} // nan +[] // 0 (tostring() returns an empty string list) +[1] // 1 +[1,2] // nan +new set([1]) // nan +bigint(1) // uncaught typeerror: cannot convert a bigint value to a number +undefined // nan +null // 0 +true // 1 +false // 0 specifications specification ecmascript (ecma-262)the definition of 'object.prototype.valueof' in that specification.
Promise - JavaScript
centhtml('beforeend', val + ') promise fulfilled (async code terminated)'); }).catch((reason) => { // log the rejection reason console.log(`handle rejected promise (${reason}) here.`); }); // end log.insertadjacenthtml('beforeend', thispromisecount + ') promise made (sync code terminated)'); } if ("promise" in window) { let btn = document.getelementbyid("btn"); btn.addeventlistener("click",testpromise); } else { log = document.getelementbyid('log'); log.innerhtml = "live example not available as your browser doesn't support the <code>promise<code> interface."; } this example is started by clicking the button.
Proxy() constructor - JavaScript
handler functions this section lists all the handler functions you can define.
Proxy - JavaScript
// { name: 'firefox', type: 'browser' } console.log(products['firefox']); // { name: 'firefox', type: 'browser' } console.log(products['chrome']); // undefined console.log(products.browser); // [{ name: 'firefox', type: 'browser' }, { name: 'seamonkey', type: 'browser' }] console.log(products.types); // ['browser', 'mailer'] console.log(products.number); // 3 a complete traps list example now in order to create a complete sample traps list, for didactic purposes, we will try to proxify a non-native object that is particularly suited to this type of operation: the doccookies global object created by the "little framework" published on the document.cookie page.
Planned changes to shared memory - JavaScript
therefore, the requirements listed above for sharing a sharedarraybuffer between workers also apply to sharing a webassembly.memory.
String.prototype.concat() - JavaScript
let greetlist = ['hello', ' ', 'venkat', '!'] "".concat(...greetlist) // "hello venkat!" "".concat({}) // [object object] "".concat([]) // "" "".concat(null) // "null" "".concat(true) // "true" "".concat(4, 5) // "45" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.concat' in that specification.
String.prototype.fontcolor() - JavaScript
string literals for color names are listed in the css color reference.
Symbol.asyncIterator - JavaScript
ield "hello"; yield "async"; yield "iteration!"; } }; (async () => { for await (const x of myasynciterable) { console.log(x); // expected output: // "hello" // "async" // "iteration!" } })(); when creating an api, remember that async iterables are designed to represent something iterable — like a stream of data or a list —, not to completely replace callbacks and events in most situations.
TypedArray - JavaScript
instead, there are a number of different global properties, whose values are typed array constructors for specific element types, listed below.
WeakSet - JavaScript
note: this also means that there is no list of current objects stored in the collection.
eval() - JavaScript
}, 1000); // instead of elt.setattribute("onclick", "...") use: elt.addeventlistener('click', function() { ...
Standard built-in objects - JavaScript
intl intl.collator intl.datetimeformat intl.listformat intl.numberformat intl.pluralrules intl.relativetimeformat intl.locale webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.table webassembly.compileerror webassembly.linkerror webassembly.runtimeerror other arguments ...
Function expression - JavaScript
the function returns the square of its argument: var x = function(y) { return y * y; }; using a function as a callback more commonly it is used as a callback: button.addeventlistener('click', function(event) { console.log('button is clicked!') }) using an immediately executed function expression an anonymous function is created and called: (function() { console.log('code runs!') })(); specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification.
yield - JavaScript
function* countapplesales () { let salelist = [3, 7, 5] for (let i = 0; i < salelist.length; i++) { yield salelist[i] } } once a generator function is defined, it can be used by constructing an iterator as shown.
Expressions and operators - JavaScript
expressions and operators by category for an alphabetical listing see the sidebar on the left.
block - JavaScript
syntax block statement { statementlist } labelled block statement labelidentifier: { statementlist } statementlist statements grouped within the block statement.
export - JavaScript
syntax there are two types of exports: named exports (zero or more exports per module) default exports (one per module) // exporting individual features export let name1, name2, …, namen; // also var, const export let name1 = …, name2 = …, …, namen; // also var, const export function functionname(){...} export class classname {...} // export list export { name1, name2, …, namen }; // renaming exports export { variable1 as name1, variable2 as name2, …, namen }; // exporting destructured assignments with renaming export const { name1, name2: bar } = o; // default exports export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export ...
for await...of - JavaScript
the for await...of statement creates a loop iterating over async iterable objects as well as on sync iterables, including: built-in string, array, array-like objects (e.g., arguments or nodelist), typedarray, map, set, and user-defined async/sync iterables.
import - JavaScript
const main = document.queryselector("main"); for (const link of document.queryselectorall("nav > a")) { link.addeventlistener("click", e => { e.preventdefault(); import('/modules/my-module.js') .then(module => { module.loadpageinto(main); }) .catch(err => { main.textcontent = err.message; }); }); } specifications specification ecmascript (ecma-262)the definition of 'imports' in that specification.
Statements and declarations - JavaScript
statements and declarations by category for an alphabetical listing see the sidebar on the left.
Strict mode - JavaScript
first, in strict mode, a short list of identifiers become reserved keywords.
Trailing commas - JavaScript
var arr = [1, 2, 3,,,]; arr.length; // 5 objects starting with ecmascript 5, trailing commas in object literals are legal as well: var object = { foo: "bar", baz: "qwerty", age: 42, }; trailing commas in functions ecmascript 2017 allows trailing commas in function parameter lists.
JavaScript reference - JavaScript
4array bigint64array biguint64array keyed collections map set weakmap weakset structured data arraybuffer sharedarraybuffer atomics dataview json control abstraction promise generator generatorfunction asyncfunction reflection reflect proxy internationalization intl intl.collator intl.datetimeformat intl.displaynames intl.listformat intl.locale intl.numberformat intl.pluralrules intl.relativetimeformat webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.table webassembly.compileerror webassembly.linkerror webassembly.runtimeerror statements javascript statements and declarations control flowblock break continue empty if...
JavaScript shells - JavaScript
shelljs - portable unix shell commands for node.js list of javascript shells the following javascript shells work with mozilla.
icons - Web app manifests
for example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences.
name - Web app manifests
WebManifestname
type string mandatory yes the name member is a string that represents the name of the web application as it is usually displayed to the user (e.g., amongst a list of other applications, or as a label for an icon).
prefer_related_applications - Web app manifests
type boolean mandatory no the prefer_related_applications member is a boolean value that specifies that applications listed in related_applications should be preferred over the web application.
related_applications - Web app manifests
list of available values url the url at which the application can be found.
shortcuts - Web app manifests
examples the following is a list of shortcuts a calendar app might have: "shortcuts" : [ { "name": "today's agenda", "url": "/today", "description": "list of events planned for today" }, { "name": "new event", "url": "/create/event" }, { "name": "new reminder", "url": "/create/reminder" } ] specification specification status comment feedback web app m...
Web app manifests
pwa manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).
<menclose> - MathML
notation a list of notations, separated by white space, to apply to the child elements.
<mstyle> - MathML
WebMathMLElementmstyle
it accepts all attributes of all mathml presentation elements with some exceptions and additional attributes listed below.
MathML element reference - MathML
this is an alphabetical list of mathml presentation elements.
MathML
mailing list newsgroup rss feed matrix chat room wiki used by mozilla contributors w3c math home www-math w3.org mail archive tools w3c validator mathzilla firefox add-on collection texzilla — javascript latex to mathml converter (live demo, firefox os webapp, firefox add-on, using in a web page, js program etc) latexml - convert latex documents into html+mathml web pages web equation - ...
Guide to streaming audio and video - Web media technologies
hls uses playlists to allow the user to not only select the media to stream, but also to choose among versions or forms of the same media.
Web media technologies
this article lists the various apis with links to documentation you may find helpful in mastering them.
OpenSearch description format
for search suggestions, the application/x-suggestions+json url template is used to fetch a suggestion list in json format.
Media - Progressive web apps (PWAs)
place your mouse over the items in this list to see the actual pointer shapes in your browser: selector selects pointer indicating a link wait indicating that the program cannot accept input progress indicating that the program is working, but can still accept input default the default (usually an arrow) an outline property creates an outline that is often used to indic...
Mobile first - Progressive web apps (PWAs)
conditional resource loading to actually implement responsive/adaptive designs, you will need to enlist a certain amount of conditional resource loading, again so that different devices can receive an optimal experience without having to shoulder the burden of many resources that they don't need.
attributeType - SVG: Scalable Vector Graphics
user agents first search through the list of css properties for a matching property name, and if none is found, search the default xml namespace for the element.
bbox - SVG: Scalable Vector Graphics
WebSVGAttributebbox
only one element is using this attribute: <font-face> usage notes value <string> default value none animatable no <string> a comma-separated list of exactly four numbers specifying, in order, the lower left x, lower left y, upper right x, and upper right y of the bounding box for the complete font.
by - SVG: Scalable Vector Graphics
WebSVGAttributeby
when a list of values is defined via the values attribute, the by attribute is ignored.
calcMode - SVG: Scalable Vector Graphics
spline interpolates from one value in the values list to the next according to a time function defined by a cubic bézier spline.
d - SVG: Scalable Vector Graphics
WebSVGAttributed
a path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters.
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> usage notes default value none value <end-value-list> animatable no the <end-value-list> is a semicolon-separated list of values.
filter - SVG: Scalable Vector Graphics
WebSVGAttributefilter
html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="10" y="10" width="80" height="80" filter="url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none animatable yes for a description of the values see the css filter property.
font-family - SVG: Scalable Vector Graphics
the font-family attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.
font-variant - SVG: Scalable Vector Graphics
l, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-variant="normal">normal text</text> <text x="100" y="20" font-variant="small-caps">small-caps text</text> </svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fra...
format - SVG: Scalable Vector Graphics
WebSVGAttributeformat
here is a list of font formats and their strings that can be used as values for this attribute: format string format truedoc-pfr truedoc™ portable font resource embedded-opentype embedded opentype type-1 postscript™ type 1 truetype truetype opentype opentype, including truetype open truetype-gx truetype with gx extensions speedo speedo intellifont i...
from - SVG: Scalable Vector Graphics
WebSVGAttributefrom
when a list of values is defined via the values attribute, the from attribute is ignored.
g1 - SVG: Scalable Vector Graphics
WebSVGAttributeg1
the g1 attribute specifies a list of glyph names which identify a set of possible first glyphs in the kerning pair.
g2 - SVG: Scalable Vector Graphics
WebSVGAttributeg2
the g2 attribute specifies a list of glyph names which identify a set of possible second glyphs in the kerning pair.
glyph-name - SVG: Scalable Vector Graphics
only one element is using this attribute: <glyph> context notes value <name># default value none animatable no <name># this value specifies a comma-separated list of names for the glyph.
lang - SVG: Scalable Vector Graphics
WebSVGAttributelang
that attribute specified a list of languages in bcp 47 format.
pointer-events - SVG: Scalable Vector Graphics
the rect underneath will change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied ...
restart - SVG: Scalable Vector Graphics
WebSVGAttributerestart
attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennotactive | never default value always animatable no always this value indicates that the animation can be restarted at any time.
textLength - SVG: Scalable Vector Graphics
rts by stashing references to the elements it will need to access, using document.getelementbyid(): const widthslider = document.getelementbyid("widthslider"); const widthdisplay = document.getelementbyid("widthdisplay"); const textelement = document.getelementbyid("hello"); const baselength = math.floor(textelement.textlength.baseval.value); widthslider.value = baselength; widthslider.addeventlistener("input", function(event) { textelement.textlength.baseval.newvaluespecifiedunits( svglength.svg_lengthtype_px, widthslider.valueasnumber); widthdisplay.innertext = widthslider.value; }, false); widthslider.dispatchevent(new event("input")); after fetching the element references, an eventlistener is established by calling addeventlistener() on the slider control, to receive any i...
to - SVG: Scalable Vector Graphics
WebSVGAttributeto
if a list of values is defined via the values attribute, the to attribute is ignored.
u1 - SVG: Scalable Vector Graphics
WebSVGAttributeu1
the u1 attribute specifies list of unicode characters (refer to the description of the unicode attribute of the <glyph> element for a description of how to express individual unicode characters) and/or ranges of unicode characters, which identify a set of possible first glyphs in a kerning pair.
u2 - SVG: Scalable Vector Graphics
WebSVGAttributeu2
the u2 attribute specifies list of unicode characters (refer to the description of the unicode attribute of the <glyph> element for a description of how to express individual unicode characters) and/or ranges of unicode characters, which identify a set of possible second glyphs in a kerning pair.
unicode-range - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <urange># default value none animatable no <urange># this value is a comma-separated list of iso 10646 characters possibly covered by the glyphs in the font.
viewBox - SVG: Scalable Vector Graphics
WebSVGAttributeviewBox
the value of the viewbox attribute is a list of four numbers: min-x, min-y, width and height.
visibility - SVG: Scalable Vector Graphics
8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications specification status comment css level 2 (revision 1)the definition of 'visibility' in that specification.
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
below is a list of all of the attributes available in svg along with links to reference documentation to help you learn which elements support them and how they work.
<animate> - SVG: Scalable Vector Graphics
WebSVGElementanimate
designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment svg animations level 2the definition of '<animate>' in that specification.
<linearGradient> - SVG: Scalable Vector Graphics
value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template.
<marker> - SVG: Scalable Vector Graphics
WebSVGElementmarker
value type: <list-of-numbers> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter,...
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
ht:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polyline with the default fill --> <polyline points="0,100 50,25 50,75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; default value: ""; animatable: yes pathlength this attribute lets specify the total length for the path, in user units.
<radialGradient> - SVG: Scalable Vector Graphics
value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template.
<script> - SVG: Scalable Vector Graphics
WebSVGElementscript
while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { ...
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
value type: <list-of-numbers> ; default value: none; animatable: yes width the displayed width of the rectangular viewport.
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
value type: <list-of-numbers> ; default value: none; animatable: yes width this attribute determines the width of the symbol.
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute.
<tspan> - SVG: Scalable Vector Graphics
WebSVGElementtspan
value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute.
SVG element reference - SVG: Scalable Vector Graphics
WebSVGElement
they are listed here for informational purposes only.
Namespaces crash course - SVG: Scalable Vector Graphics
the table below lists the dom1 methods that shouldn't be used in svg, along with their equivalent dom2 counterparts that should be used instead.
Other Resources - SVG: Scalable Vector Graphics
here is a list of additional resources on svg: mozilla svg resources svg.org svgbasics tutorials w3c svg homepage svg wiki http://wiki.svg.org/index.php?title=..._configuration i moved this from the other resources category, not sure why it's in other resources -nickolay http://developer.mozilla.org/en/docs...%28external%29 ...
SVG as an Image - SVG: Scalable Vector Graphics
many browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
Specification Deviations - SVG: Scalable Vector Graphics
this page lists those deviations/extensions and our reasoning for them.
Filter effects - SVG: Scalable Vector Graphics
between the filter tags, goes a list of primitives, basic operations that build on top of the previous operations (like blurring, adding a lighting effect, etc).
Tools for SVG - SVG: Scalable Vector Graphics
the w3c offers a list of programs that support svg.
SVG: Scalable Vector Graphics
WebSVG
mailing list newsgroup rss feed tools svg test suite markup validator more tools...
Certificate Transparency - Web security
this can be accomplished via a number of different mechanisms: x.509v3 certificate extension which embeds signed certificate timestamps directly into the leaf certificate a tls extension of type signed_certificate_timestamp sent during the handshake ocsp stapling (that is, the status_request tls extension) and providing a signedcertificatetimestamplist with one or more scts with the x.509 certificate extension, the included scts are decided by the issuing ca.
Referer header: privacy and security concerns - Web security
you should enlist the help of a web security expert to write these requirements, and consider both user needs and welfare, as well as other issues like policy and regulation enforced by legislation such as the eu general data protection regulation (gdpr).
Transport Layer Security - Web security
the cipher names correspondence table on the mozilla opsec team's article on tls configurations lists these names as well as information about compatibility and security levels.
Types of attacks - Web security
that require a post request, it's possible to programmatically trigger a <form> submit (perhaps in an invisible <iframe>) when the page is loaded: <form action="https://bank.example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to prevent this from happening: get endpoints should be idempotent—actions that enact a change and do not simply retrieve data should require sending a post (or other http method) request.
Tutorials
we round off the module by looking at applying custom fonts to your page, and styling lists and links.
Using templates and slots - Web Components
as before, this can be anything you like, for example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> or <my-paragraph> <ul slot="my-text"> <li>let's have some different text!</li> <li>in a list!</li> </ul> </my-paragraph> note: elements that can be inserted into slots are known as slotable; when an element has been inserted in a slot, it is said to be slotted.
xml:base - XML: Extensible Markup Language
WebXMLxml:base
support was removed from blink (chrome and opera) in 2015: chromium bug 341854 blink-dev mailing list post and from firefox 66 in bug 903372.
id - XPath
WebXPathFunctionsid
if expression is a string, or anything other than a node-set, then expression is treated as a space-separated list of ids.
Functions - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the following is an annotated list of core xpath functions and xslt-specific additions to xpath, including a description, syntax, a list of arguments, result-type, source in the appropriate w3c recommendation, and degree of present gecko support.
Introduction to using XPath in JavaScript - XPath
there is a section in the appendix which contains a full list of the available constants.
<xsl:attribute-set> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:attribute-set name=name use-attribute-sets=list-of-names> <xsl:attribute> </xsl:attribute-set> required attributes name specifies the name of the attribute set.
<xsl:preserve-space> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:preserve-space elements=list-of-element-names /> required attributes elements specifies the elements for which whitespace should be preserved.
<xsl:strip-space> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:strip-space elements=list-of-element-names /> required attributes elements specifies a space-separated list of elements in the source whose whitespace-only text nodes should be removed.
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
8 interface list needscontent, reference see xsltprocessor in the web api documentation section.
The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
the following is an alphabetized and annotated list of the elements, axes, and functions from the w3c's 1.0 recommendation for xslt, as well as from the appropriate sections of the xpath recommendation.
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
ing() (supported) string-length() (supported) substring() (supported) substring-after() (supported) substring-before() (supported) sum() (supported) system-property() (supported) translate() (supported) true() (supported) unparsed-entity-url() (not supported) for further reading books online the world wide web consortium portals articles tutorials/examples mailing lists/newsgroups resources index original document information copyright information: copyright © 2001-2003 netscape.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
var testtransform = document.implementation.createdocument("", "test", null); // just an example to get a transform into a script as a dom // xmldocument.load is asynchronous, so all processing happens in the // onload handler testtransform.addeventlistener("load", onload, false); testtransform.load("test-transform.xml"); function onload() { processor.importstylesheet(testtransform); } xsltprocessor.importstylesheet() requires one argument, a dom node.
The XSLT/JavaScript Interface in Gecko - XSLT: Extensible Stylesheet Language Transformations
introduction javascript/xslt bindings basic example setting parameters advanced example interface list resources ...
Compiling from Rust to WebAssembly - WebAssembly
it's only a little bit complex, and shows a realistic use-case.
Converting WebAssembly text format to wasm - WebAssembly
to start with, make a copy of the above listing inside a text file; call it simple.wat.